Fix merge conflicts

frontend/src/views/DashboardPage/DashboardEnvOverview.tsx

@@ -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]);
 
@@ -143,7 +144,7 @@ export const DashboardEnvOverview = () => {
 
   return (
     <div className="container mx-auto max-w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
-      <div className="relative right-5">
+      <div className="relative right-5 ml-4">
         <NavHeader pageName={t("dashboard.title")} isProjectRelated />
       </div>
       <div className="mt-6">

frontend/src/views/DashboardPage/DashboardPage.tsx

@@ -3,6 +3,19 @@ import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { arrayMove } from "@dnd-kit/sortable";
+import {
+  faAngleDown,
   faArrowLeft,
   faCheck,
   faClockRotateLeft,
@@ -10,12 +23,14 @@ import {
   faDownload,
   faEye,
   faEyeSlash,
+  faFileImport,
   faFolderPlus,
   faMagnifyingGlass,
   faPlus
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -36,15 +51,19 @@ 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,
   useCreateFolder,
+  useCreateSecretImport,
   useCreateWsTag,
   useDeleteFolder,
+  useDeleteSecretImport,
+  useGetImportedSecrets,
   useGetProjectFolders,
   useGetProjectSecrets,
+  useGetSecretImports,
   useGetSecretVersion,
   useGetSnapshotSecrets,
   useGetUserAction,
@@ -55,7 +74,8 @@ import {
   useGetWsTags,
   usePerformSecretRollback,
   useRegisterUserAction,
-  useUpdateFolder
+  useUpdateFolder,
+  useUpdateSecretImport
 } from "@app/hooks/api";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
 import { WorkspaceEnv } from "@app/hooks/api/types";
@@ -71,6 +91,8 @@ import {
 import { PitDrawer } from "./components/PitDrawer";
 import { SecretDetailDrawer } from "./components/SecretDetailDrawer";
 import { SecretDropzone } from "./components/SecretDropzone";
+import { SecretImportForm } from "./components/SecretImportForm";
+import { SecretImportSection } from "./components/SecretImportSection";
 import { SecretInputRow } from "./components/SecretInputRow";
 import { SecretTableHeader } from "./components/SecretTableHeader";
 import {
@@ -84,7 +106,7 @@ import {
 } from "./DashboardPage.utils";
 
 const USER_ACTION_PUSH = "first_time_secrets_pushed";
-
+type TDeleteSecretImport = { environment: string; secretPath: string };
 /*
  * Some imp aspects to consider. Here there are multiple stats changing
  * Thus ideally we need to use a context. But instead we rely on react hook form
@@ -113,7 +135,9 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     "compareSecrets",
     "folderForm",
     "deleteFolder",
-    "upgradePlan"
+    "upgradePlan",
+    "addSecretImport",
+    "deleteSecretImport"
   ] as const);
   const [isSecretValueHidden, setIsSecretValueHidden] = useToggle(true);
   const [searchFilter, setSearchFilter] = useState("");
@@ -127,12 +151,15 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
   const isRollbackMode = Boolean(snapshotId);
 
   const { currentWorkspace, isLoading } = useWorkspace();
+  const { currentOrg } = useOrganization();
   const workspaceId = currentWorkspace?._id as string;
+  const selectedEnvSlug = selectedEnv?.slug || "";
+
   const { data: latestFileKey } = useGetUserWsKey(workspaceId);
 
   useEffect(() => {
     if (!isLoading && !workspaceId && router.isReady) {
-      router.push("/noprojects");
+      router.push(`/org/${currentOrg?._id}/overview`);
     }
   }, [isLoading, workspaceId, router.isReady]);
 
@@ -160,7 +187,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
 
   const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
     workspaceId,
-    env: selectedEnv?.slug || "",
+    env: selectedEnvSlug,
     decryptFileKey: latestFileKey!,
     isPaused: Boolean(snapshotId),
     folderId
@@ -168,7 +195,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
 
   const { data: folderData, isLoading: isFoldersLoading } = useGetProjectFolders({
     workspaceId: workspaceId || "",
-    environment: selectedEnv?.slug || "",
+    environment: selectedEnvSlug,
     parentFolderId: folderId,
     isPaused: isRollbackMode,
     sortDir
@@ -181,7 +208,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     isFetchingNextPage
   } = useGetWorkspaceSecretSnapshots({
     workspaceId,
-    environment: selectedEnv?.slug || "",
+    environment: selectedEnvSlug,
     folder: folderId,
     limit: 10
   });
@@ -192,17 +219,18 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     isFetching: isSnapshotChanging
   } = useGetSnapshotSecrets({
     snapshotId: snapshotId || "",
-    env: selectedEnv?.slug || "",
+    env: selectedEnvSlug,
     decryptFileKey: latestFileKey!
   });
 
   const { data: snapshotCount, isLoading: isLoadingSnapshotCount } = useGetWsSnapshotCount(
     workspaceId,
-    selectedEnv?.slug || "",
+    selectedEnvSlug,
     folderId
   );
 
   const { data: wsTags } = useGetWsTags(workspaceId);
+
   // mutation calls
   const { mutateAsync: batchSecretOp } = useBatchSecretsOp();
   const { mutateAsync: performSecretRollback } = usePerformSecretRollback();
@@ -212,6 +240,50 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
   const { mutateAsync: updateFolder } = useUpdateFolder(folderId);
   const { mutateAsync: deleteFolder } = useDeleteFolder(folderId);
 
+  const { data: secretImportCfg, isFetching: isSecretImportCfgFetching } = useGetSecretImports(
+    workspaceId,
+    selectedEnvSlug,
+    folderId
+  );
+
+  const { data: importedSecrets } = useGetImportedSecrets({
+    workspaceId,
+    decryptFileKey: latestFileKey!,
+    environment: selectedEnvSlug,
+    folderId
+  });
+
+  // This is for dnd-kit. As react-query state mutation async
+  // This will act as a placeholder to avoid a glitching animation on dropping items
+  const [items, setItems] = useState<
+    Array<{ environment: string; secretPath: string; id: string }>
+  >([]);
+
+  useEffect(() => {
+    if (
+      !isSecretImportCfgFetching ||
+      // case in which u go to a folder and come back to fill in with cache data
+      (items.length === 0 && secretImportCfg?.imports?.length !== 0 && isSecretImportCfgFetching)
+    ) {
+      setItems(
+        secretImportCfg?.imports?.map((el) => ({
+          ...el,
+          id: `${el.environment}-${el.secretPath}`
+        })) || []
+      );
+    }
+  }, [isSecretImportCfgFetching]);
+
+  const { mutateAsync: createSecretImport } = useCreateSecretImport();
+  const { mutate: updateSecretImportSync } = useUpdateSecretImport();
+  const { mutateAsync: deleteSecretImport } = useDeleteSecretImport();
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  );
+
   const method = useForm<FormData>({
     // why any: well yup inferred ts expects other keys to defined as undefined
     defaultValues: secrets as any,
@@ -318,14 +390,12 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
       await performSecretRollback({
         workspaceId,
         version: snapshotSecret.version,
-        environment: selectedEnv?.slug || "",
+        environment: selectedEnvSlug,
         folderId
       });
       setValue("isSnapshotMode", false);
       setSnaphotId(null);
-      queryClient.invalidateQueries(
-        secretKeys.getProjectSecret(workspaceId, selectedEnv?.slug || "")
-      );
+      queryClient.invalidateQueries(secretKeys.getProjectSecret(workspaceId, selectedEnvSlug));
       createNotification({
         text: "Successfully rollback secrets",
         type: "success"
@@ -339,7 +409,10 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     }
   };
 
-  const onAppendSecret = () => append(DEFAULT_SECRET_VALUE);
+  const onAppendSecret = () => {
+    setSearchFilter("");
+    append(DEFAULT_SECRET_VALUE);
+  };
 
   const onSaveSecret = async ({ secrets: userSec = [], isSnapshotMode }: FormData) => {
     if (isSnapshotMode) {
@@ -360,6 +433,10 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     );
     // type check
     if (!selectedEnv?.slug) return;
+    if (batchedSecret.length === 0) {
+      reset();
+      return;
+    }
     try {
       await batchSecretOp({
         requests: batchedSecret,
@@ -514,6 +591,79 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     }
   };
 
+  const handleSecretImportCreate = async (env: string, secretPath: string) => {
+    try {
+      await createSecretImport({
+        workspaceId,
+        environment: selectedEnv?.slug || "",
+        folderId,
+        secretImport: {
+          environment: env,
+          secretPath
+        }
+      });
+      createNotification({
+        type: "success",
+        text: "Successfully create secret link"
+      });
+      handlePopUpClose("addSecretImport");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create secret link",
+        type: "error"
+      });
+    }
+  };
+
+  const handleSecretImportDelete = async () => {
+    const { environment: importEnv, secretPath: impSecPath } = popUp.deleteSecretImport
+      ?.data as TDeleteSecretImport;
+    try {
+      if (secretImportCfg?._id) {
+        await deleteSecretImport({
+          workspaceId,
+          environment: selectedEnvSlug,
+          folderId,
+          id: secretImportCfg?._id,
+          secretImportEnv: importEnv,
+          secretImportPath: impSecPath
+        });
+        handlePopUpClose("deleteSecretImport");
+        createNotification({
+          type: "success",
+          text: "Successfully removed secret link"
+        });
+      }
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to remove secret link",
+        type: "error"
+      });
+    }
+  };
+
+  const handleDragEnd = (evt: DragEndEvent) => {
+    const { active, over } = evt;
+    if (over?.id && active.id !== over.id) {
+      const oldIndex = items.findIndex(({ id }) => id === active.id);
+      const newIndex = items.findIndex(({ id }) => id === over.id);
+      const newImportOrder = arrayMove(items, oldIndex, newIndex);
+      setItems(newImportOrder);
+      updateSecretImportSync({
+        workspaceId,
+        environment: selectedEnvSlug,
+        folderId,
+        id: secretImportCfg?._id || "",
+        secretImports: newImportOrder.map((el) => ({
+          environment: el.environment,
+          secretPath: el.secretPath
+        }))
+      });
+    }
+  };
+
   // when secrets is not loading and secrets list is empty
   const isDashboardSecretEmpty = !isSecretsLoading && !fields?.length;
 
@@ -526,7 +676,8 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
   const isSnapshotSecretEmtpy =
     isRollbackMode && !isSnapshotSecretsLoading && !snapshotSecret?.secrets?.length;
   const isSecretEmpty = (!isRollbackMode && isDashboardSecretEmpty) || isSnapshotSecretEmtpy;
-  const isEmptyPage = isFoldersEmpty && isSecretEmpty;
+  const isSecretImportEmpty = !importedSecrets?.length;
+  const isEmptyPage = isFoldersEmpty && isSecretEmpty && isSecretImportEmpty;
 
   if (isSecretsLoading || isEnvListLoading) {
     return (
@@ -545,7 +696,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
       <FormProvider {...method}>
         <form autoComplete="off" className="h-full">
           {/* breadcrumb row */}
-          <div className="relative right-6 -top-2 mb-2">
+          <div className="relative right-6 -top-2 mb-2 ml-6">
             <NavHeader
               pageName={t("dashboard.title")}
               currentEnv={
@@ -632,7 +783,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                       handlePopUpOpen("secretSnapshots");
                       return;
                     }
-                    
+
                     handlePopUpOpen("upgradePlan");
                   }}
                   leftIcon={<FontAwesomeIcon icon={faCodeCommit} />}
@@ -644,54 +795,11 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                 </Button>
               </div>
               {!isReadOnly && !isRollbackMode && (
-                <>
-                  <div className="block lg:hidden">
-                    <Tooltip content="Add Folder">
-                      <IconButton
-                        ariaLabel="recovery"
-                        variant="outline_bg"
-                        onClick={() => handlePopUpOpen("folderForm")}
-                      >
-                        <FontAwesomeIcon icon={faFolderPlus} />
-                      </IconButton>
-                    </Tooltip>
-                  </div>
-
-                  <div className="block lg:hidden">
-                    <Tooltip content="Point-in-time Recovery">
-                      <IconButton
-                        ariaLabel="recovery"
-                        variant="outline_bg"
-                        onClick={() => {
-                          if (secretContainer.current) {
-                            secretContainer.current.scroll({
-                              top: 0,
-                              behavior: "smooth"
-                            });
-                          }
-                          prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false });
-                        }}
-                      >
-                        <FontAwesomeIcon icon={faPlus} />
-                      </IconButton>
-                    </Tooltip>
-                  </div>
-                  <div className="hidden lg:block">
-                    <Button
-                      leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
-                      onClick={() => handlePopUpOpen("folderForm")}
-                      isDisabled={isReadOnly || isRollbackMode}
-                      variant="outline_bg"
-                      className="h-10"
-                    >
-                      Add Folder
-                    </Button>
-                  </div>
-
-                  <div className="hidden lg:block">
-                    <Button
-                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                      onClick={() => {
+                <div className="flex flex-row items-center justify-center">
+                  <button 
+                    type="button"
+                    onClick={() => {
+                      if (!(isReadOnly || isRollbackMode)) {
                         if (secretContainer.current) {
                           secretContainer.current.scroll({
                             top: 0,
@@ -699,15 +807,49 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                           });
                         }
                         prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false });
-                      }}
-                      isDisabled={isReadOnly || isRollbackMode}
-                      variant="outline_bg"
-                      className="h-10"
-                    >
-                      Add Secret
-                    </Button>
-                  </div>
-                </>
+                        setSearchFilter("");
+                      }
+                    }}
+                    className="font-semibold bg-mineshaft-600 border border-mineshaft-500 p-2 rounded-l-md text-sm text-mineshaft-300 cursor-pointer hover:bg-primary/[0.1] hover:border-primary/40 pr-4 duration-200"
+                  >
+                    <FontAwesomeIcon icon={faPlus} className="px-2"/>Add Secret
+                  </button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild className="data-[state=open]:bg-mineshaft-600">
+                      <div className="bg-mineshaft-600 border border-mineshaft-500 p-2 rounded-r-md text-sm text-mineshaft-300 cursor-pointer hover:bg-primary/[0.1] hover:border-primary/40 duration-200">
+                        <FontAwesomeIcon icon={faAngleDown} className="pr-2 pl-1.5"/>
+                      </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="mt-1 z-[60] left-20 w-[10.8rem]">
+                      <div className="bg-mineshaft-800 p-1 border border-mineshaft-600 rounded-md">
+                        <div className="w-full pb-1">
+                          <Button
+                            leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
+                            onClick={() => handlePopUpOpen("folderForm")}
+                            isDisabled={isReadOnly || isRollbackMode}
+                            variant="outline_bg"
+                            className="h-10"
+                            isFullWidth
+                          >
+                            Add Folder
+                          </Button>
+                        </div>
+                        <div className="w-full">
+                          <Button
+                            leftIcon={<FontAwesomeIcon icon={faFileImport} />}
+                            onClick={() => handlePopUpOpen("addSecretImport")}
+                            isDisabled={isReadOnly || isRollbackMode}
+                            variant="outline_bg"
+                            className="h-10"
+                            isFullWidth
+                          >
+                            Add Import
+                          </Button>
+                        </div>
+                      </div>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
               )}
               {isRollbackMode && (
                 <Button
@@ -742,49 +884,67 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
             ref={secretContainer}
           >
             {!isEmptyPage && (
-              <TableContainer className="no-scrollbar::-webkit-scrollbar max-h-[calc(100%-120px)] no-scrollbar">
-                <table className="secret-table relative">
-                  <SecretTableHeader sortDir={sortDir} onSort={onSortSecrets} />
-                  <tbody className="max-h-96 overflow-y-auto">
-                    <FolderSection
-                      onFolderOpen={handleFolderOpen}
-                      onFolderUpdate={(id, name) => handlePopUpOpen("folderForm", { id, name })}
-                      onFolderDelete={(id, name) => handlePopUpOpen("deleteFolder", { id, name })}
-                      folders={folderList}
-                      search={searchFilter}
-                    />
-                    {fields.map(({ id, _id }, index) => (
-                      <SecretInputRow
-                        key={id}
-                        isReadOnly={isReadOnly}
-                        isRollbackMode={isRollbackMode}
-                        isAddOnly={isAddOnly}
-                        index={index}
-                        searchTerm={searchFilter}
-                        onSecretDelete={onSecretDelete}
-                        onRowExpand={() => onDrawerOpen({ id: _id as string, index })}
-                        isSecretValueHidden={isSecretValueHidden}
-                        wsTags={wsTags}
-                        onCreateTagOpen={() => handlePopUpOpen("addTag")}
+              <DndContext
+                onDragEnd={handleDragEnd}
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                modifiers={[restrictToVerticalAxis]}
+              >
+                <TableContainer className="no-scrollbar::-webkit-scrollbar max-h-[calc(100%-120px)] no-scrollbar">
+                  <table className="secret-table relative">
+                    <SecretTableHeader sortDir={sortDir} onSort={onSortSecrets} />
+                    <tbody className="max-h-96 overflow-y-auto">
+                      <SecretImportSection
+                        onSecretImportDelete={(impSecEnv, impSecPath) =>
+                          handlePopUpOpen("deleteSecretImport", {
+                            environment: impSecEnv,
+                            secretPath: impSecPath
+                          })
+                        }
+                        secrets={secrets?.secrets}
+                        importedSecrets={importedSecrets}
+                        items={items}
                       />
-                    ))}
-                    {!isReadOnly && !isRollbackMode && (
-                      <tr>
-                        <td colSpan={3} className="hover:bg-mineshaft-700">
-                          <button
-                            type="button"
-                            className="flex h-8 w-full cursor-default items-center justify-start pl-12 font-normal text-bunker-300"
-                            onClick={onAppendSecret}
-                          >
-                            <FontAwesomeIcon icon={faPlus} />
-                            <span className="ml-2 w-20">Add Secret</span>
-                          </button>
-                        </td>
-                      </tr>
-                    )}
-                  </tbody>
-                </table>
-              </TableContainer>
+                      <FolderSection
+                        onFolderOpen={handleFolderOpen}
+                        onFolderUpdate={(id, name) => handlePopUpOpen("folderForm", { id, name })}
+                        onFolderDelete={(id, name) => handlePopUpOpen("deleteFolder", { id, name })}
+                        folders={folderList}
+                        search={searchFilter}
+                      />
+                      {fields.map(({ id, _id }, index) => (
+                        <SecretInputRow
+                          key={id}
+                          isReadOnly={isReadOnly}
+                          isRollbackMode={isRollbackMode}
+                          isAddOnly={isAddOnly}
+                          index={index}
+                          searchTerm={searchFilter}
+                          onSecretDelete={onSecretDelete}
+                          onRowExpand={() => onDrawerOpen({ id: _id as string, index })}
+                          isSecretValueHidden={isSecretValueHidden}
+                          wsTags={wsTags}
+                          onCreateTagOpen={() => handlePopUpOpen("addTag")}
+                        />
+                      ))}
+                      {!isReadOnly && !isRollbackMode && (
+                        <tr>
+                          <td colSpan={3} className="hover:bg-mineshaft-700">
+                            <button
+                              type="button"
+                              className="flex h-8 w-full cursor-default items-center justify-start pl-12 font-normal text-bunker-300"
+                              onClick={onAppendSecret}
+                            >
+                              <FontAwesomeIcon icon={faPlus} />
+                              <span className="ml-2 w-20">Add Secret</span>
+                            </button>
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </TableContainer>
+              </DndContext>
             )}
             <PitDrawer
               isDrawerOpen={popUp?.secretSnapshots?.isOpen}
@@ -872,6 +1032,20 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
             />
           </ModalContent>
         </Modal>
+        <Modal
+          isOpen={popUp?.addSecretImport?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("addSecretImport", isOpen)}
+        >
+          <ModalContent
+            title="Add Secret Link"
+            subTitle="To inherit secrets from another environment or folder"
+          >
+            <SecretImportForm
+              environments={currentWorkspace?.environments}
+              onCreate={handleSecretImportCreate}
+            />
+          </ModalContent>
+        </Modal>
         <DeleteActionModal
           isOpen={popUp.deleteFolder.isOpen}
           deleteKey={(popUp.deleteFolder?.data as TDeleteFolderForm)?.name}
@@ -879,6 +1053,16 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
           onChange={(isOpen) => handlePopUpToggle("deleteFolder", isOpen)}
           onDeleteApproved={handleFolderDelete}
         />
+        <DeleteActionModal
+          isOpen={popUp.deleteSecretImport.isOpen}
+          deleteKey="unlink"
+          title="Do you want to remove this secret import?"
+          subTitle={`This will unlink secrets from environment ${
+            (popUp.deleteSecretImport?.data as TDeleteSecretImport)?.environment
+          } of path ${(popUp.deleteSecretImport?.data as TDeleteSecretImport)?.secretPath}?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteSecretImport", isOpen)}
+          onDeleteApproved={handleSecretImportDelete}
+        />
         <Modal
           isOpen={popUp?.compareSecrets?.isOpen}
           onOpenChange={(open) => handlePopUpToggle("compareSecrets", open)}
@@ -900,7 +1084,11 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text={subscription.slug === null ? "You can perform point-in-time recovery under an Enterprise license" : "You can perform point-in-time recovery if you switch to Infisical's Team plan"}
+          text={
+            subscription.slug === null
+              ? "You can perform point-in-time recovery under an Enterprise license"
+              : "You can perform point-in-time recovery if you switch to Infisical's Team plan"
+          }
         />
       )}
     </div>

frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import { useCallback, useState } from "react";
-import { faCircle, faEye, faEyeSlash, faKey, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { useCallback, useRef, useState } from "react";
+import { faEye, faEyeSlash, faKey, faMinus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
+
+import { useSyntaxHighlight } from "@app/hooks";
+import { useToggle } from "@app/hooks/useToggle";
 
 type Props = {
   secrets: any[] | undefined;
@@ -12,7 +14,8 @@ type Props = {
   userAvailableEnvs?: any[];
 };
 
-const REGEX = /([$]{.*?})/g;
+const SEC_VAL_LINE_HEIGHT = 21;
+const MAX_MULTI_LINE = 6;
 
 const DashboardInput = ({
   isOverridden,
@@ -25,84 +28,62 @@ const DashboardInput = ({
   isReadOnly?: boolean;
   secret?: any;
 }): JSX.Element => {
-  const syntaxHighlight = useCallback((val: string) => {
-    if (val === undefined)
-      return (
-        <span className="cursor-default font-sans text-xs italic text-red-500/80">
-          <FontAwesomeIcon icon={faMinus} className="mt-1" />
-        </span>
-      );
-    if (val?.length === 0)
-      return <span className="w-full font-sans text-bunker-400/80">EMPTY</span>;
-    return val?.split(REGEX).map((word, index) =>
-      word.match(REGEX) !== null ? (
-        <span className="ph-no-capture text-yellow" key={`${val}-${index + 1}`}>
-          {word.slice(0, 2)}
-          <span className="ph-no-capture text-yellow-200/80">{word.slice(2, word.length - 1)}</span>
-          {word.slice(word.length - 1, word.length) === "}" ? (
-            <span className="ph-no-capture text-yellow">
-              {word.slice(word.length - 1, word.length)}
-            </span>
-          ) : (
-            <span className="ph-no-capture text-yellow-400">
-              {word.slice(word.length - 1, word.length)}
-            </span>
-          )}
-        </span>
-      ) : (
-        <span key={word} className="ph-no-capture">
-          {word}
-        </span>
-      )
-    );
-  }, []);
+  const ref = useRef<HTMLElement | null>(null);
+  const [isFocused, setIsFocused] = useToggle();
+  const syntaxHighlight = useSyntaxHighlight();
+
+  const value = isOverridden ? secret.valueOverride : secret?.value;
+  const multilineExpandUnit = ((value?.match(/\n/g)?.length || 0) + 1) * SEC_VAL_LINE_HEIGHT;
+  const maxMultilineHeight = Math.min(multilineExpandUnit, 21 * MAX_MULTI_LINE);
 
   return (
     <td
       key={`row-${secret?.key || ""}--`}
-      className={`flex h-10 w-full cursor-default flex-row items-center justify-center ${
+      className={`flex w-full cursor-default flex-row ${
         !(secret?.value || secret?.value === "") ? "bg-red-800/10" : "bg-mineshaft-900/30"
       }`}
     >
-      <div className="group relative flex	w-full cursor-default flex-col justify-center whitespace-pre">
-        <input
-          value={isOverridden ? secret.valueOverride : secret?.value || ""}
+      <div className="group relative flex w-full flex-col whitespace-pre px-1.5 pt-1.5">
+        <textarea
           readOnly={isReadOnly}
-          className={twMerge(
-            "ph-no-capture no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full cursor-default bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-transparent outline-none no-scrollbar",
-            isSecretValueHidden && "text-transparent focus:text-transparent active:text-transparent"
-          )}
+          value={value}
+          className="ph-no-capture min-w-16 duration-50 peer z-20 w-full resize-none overflow-auto text-ellipsis bg-transparent px-2  font-mono text-sm text-transparent caret-white outline-none no-scrollbar"
+          style={{ height: `${maxMultilineHeight}px` }}
           spellCheck="false"
+          onBlur={() => setIsFocused.off()}
+          onFocus={() => setIsFocused.on()}
+          onInput={(el) => {
+            if (ref.current) {
+              ref.current.scrollTop = el.currentTarget.scrollTop;
+              ref.current.scrollLeft = el.currentTarget.scrollLeft;
+            }
+          }}
+          onScroll={(el) => {
+            if (ref.current) {
+              ref.current.scrollTop = el.currentTarget.scrollTop;
+              ref.current.scrollLeft = el.currentTarget.scrollLeft;
+            }
+          }}
         />
-        <div
-          className={twMerge(
-            "ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 absolute z-0 mt-0.5 flex h-10 w-full cursor-default flex-row overflow-x-scroll whitespace-pre bg-transparent px-2 py-2 font-mono text-sm outline-none no-scrollbar peer-focus:visible",
-            isSecretValueHidden && secret?.value ? "invisible" : "visible",
-            isSecretValueHidden &&
-              secret?.value &&
-              "duration-50 text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400",
-            !secret?.value && "justify-center text-bunker-400"
-          )}
-        >
-          {syntaxHighlight(secret?.value)}
-        </div>
-        {isSecretValueHidden && secret?.value && (
-          <div className="duration-50 peer absolute z-0 flex h-10 w-full flex-row items-center justify-between text-clip pr-2 text-bunker-400 group-hover:bg-white/[0.00] peer-focus:hidden peer-active:hidden">
-            <div className="no-scrollbar::-webkit-scrollbar flex flex-row items-center overflow-x-scroll px-2 no-scrollbar">
-              {(isOverridden ? secret.valueOverride : secret?.value || "")
-                ?.split("")
-                .map((_a: string, index: number) => (
-                  <FontAwesomeIcon
-                    key={`${secret?.value}_${index + 1}`}
-                    className="mr-0.5 text-xxs"
-                    icon={faCircle}
-                  />
-                ))}
-              {(isOverridden ? secret.valueOverride : secret?.value || "")?.split("").length ===
-                0 && <span className="text-sm text-bunker-400/80">EMPTY</span>}
-            </div>
-          </div>
-        )}
+        <pre className="whitespace-pre-wrap break-words">
+          <code
+            ref={ref}
+            className={`absolute top-1.5 left-3.5 z-10 overflow-auto font-mono text-sm transition-all no-scrollbar ${
+              isOverridden && "text-primary-300"
+            } ${
+              (value || "") === "" && "text-mineshaft-400"
+            }`}
+            style={{ height: `${maxMultilineHeight}px`, width: "calc(100% - 12px)" }}
+          >
+            {value === undefined ? (
+              <span className="cursor-default font-sans text-xs italic text-red-500/80">
+                <FontAwesomeIcon icon={faMinus} className="mt-1" />
+              </span>
+            ) : (
+              syntaxHighlight(value || "", isSecretValueHidden ? !isFocused : isSecretValueHidden)
+            )}
+          </code>
+        </pre>
       </div>
     </td>
   );
@@ -122,14 +103,14 @@ export const EnvComparisonRow = ({
   );
 
   return (
-    <tr className="group flex min-w-full flex-row items-center hover:bg-mineshaft-800">
-      <td className="flex h-10 w-10 items-center justify-center border-none px-4">
-        <div className="w-10 text-center text-xs text-bunker-400">
+    <tr className="group flex min-w-full flex-row hover:bg-mineshaft-800">
+      <td className="flex w-10 justify-center border-none px-4">
+        <div className="flex h-8 w-10 items-center justify-center text-center text-xs text-bunker-400">
           <FontAwesomeIcon icon={faKey} />
         </div>
       </td>
-      <td className="flex h-full min-w-[200px] flex-row items-center justify-between lg:min-w-[220px] xl:min-w-[250px]">
-        <div className="flex h-8 cursor-default flex-row items-center truncate">
+      <td className="flex min-w-[200px] flex-row justify-between lg:min-w-[220px] xl:min-w-[250px]">
+        <div className="flex h-8 cursor-default flex-row items-center justify-center truncate">
           {secrets![0].key || ""}
         </div>
         <button

frontend/src/views/DashboardPage/components/FolderSection/FolderSection.tsx

@@ -67,7 +67,7 @@ export const FolderSection = ({
                       ariaLabel="delete"
                       onClick={() => handleFolderDelete(id, name)}
                     >
-                      <FontAwesomeIcon icon={faXmark} />
+                      <FontAwesomeIcon icon={faXmark} size="lg" />
                     </IconButton>
                   </Tooltip>
                 </div>

frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx

@@ -193,8 +193,8 @@ export const SecretDetailDrawer = ({
                     </div>
                   </div>
                   <div className="ml-1.5 flex items-center space-x-2 border-l border-bunker-300 pl-4">
-                    <div className="rounded-sm bg-primary-500/30 px-1">Value:</div>
-                    <div className="font-mono">{value}</div>
+                    <div className="self-start rounded-sm bg-primary-500/30 px-1">Value:</div>
+                    <div className="break-all font-mono">{value}</div>
                   </div>
                 </div>
               ))}

frontend/src/views/DashboardPage/components/SecretImportForm/SecretImportForm.tsx

@@ -0,0 +1,86 @@
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { Button, FormControl, Input, ModalClose, Select, SelectItem } from "@app/components/v2";
+
+type Props = {
+  onCreate: (environment: string, secretPath: string) => Promise<void>;
+  environments?: Array<{ slug: string; name: string }>;
+};
+
+const formSchema = yup.object({
+  environment: yup.string().required().label("Environment").trim(),
+  secretPath: yup
+    .string()
+    .required()
+    .label("Secret Path")
+    .trim()
+    .transform((val) =>
+      typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
+    )
+});
+
+type TFormData = yup.InferType<typeof formSchema>;
+
+export const SecretImportForm = ({ onCreate, environments = [] }: Props): JSX.Element => {
+  const {
+    control,
+    reset,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TFormData>({
+    resolver: yupResolver(formSchema)
+  });
+
+  const onSubmit = async ({ environment, secretPath }: TFormData) => {
+    await onCreate(environment, secretPath);
+    reset();
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="environment"
+        defaultValue={environments?.[0]?.slug}
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl label="Environment" errorText={error?.message} isError={Boolean(error)}>
+            <Select
+              defaultValue={field.value}
+              {...field}
+              onValueChange={(e) => onChange(e)}
+              className="w-full"
+            >
+              {environments.map(({ name, slug }) => (
+                <SelectItem value={slug} key={slug}>
+                  {name}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="secretPath"
+        defaultValue="/"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
+            <Input {...field} />
+          </FormControl>
+        )}
+      />
+      <div className="mt-8 flex items-center">
+        <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
+          Create
+        </Button>
+        <ModalClose asChild>
+          <Button variant="plain" colorSchema="secondary">
+            Cancel
+          </Button>
+        </ModalClose>
+      </div>
+    </form>
+  );
+};

frontend/src/views/DashboardPage/components/SecretImportForm/index.tsx

@@ -0,0 +1 @@
+export { SecretImportForm } from "./SecretImportForm";

frontend/src/views/DashboardPage/components/SecretImportSection/SecretImportItem.tsx

@@ -0,0 +1,144 @@
+import { useEffect } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { faFileImport, faFolder, faUpDown, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton, TableContainer, Tooltip } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks/useToggle";
+
+type Props = {
+  onDelete: (environment: string, secretPath: string) => void;
+  importedEnv: string;
+  importedSecPath: string;
+  importedSecrets: { key: string; value: string; overriden: { env: string; secretPath: string } }[];
+};
+
+// to show the environment and folder icon
+export const EnvFolderIcon = ({ env, secretPath }: { env: string; secretPath: string }) => (
+  <div className="inline-flex items-center space-x-2">
+    <div style={{ minWidth: "96px" }}>{env || "-"}</div>
+    {secretPath && (
+      <div className="inline-flex items-center space-x-2 border-l border-mineshaft-600 pl-2">
+        <FontAwesomeIcon icon={faFolder} size="lg" className="text-primary-700" />
+        <span>{secretPath}</span>
+      </div>
+    )}
+  </div>
+);
+
+export const SecretImportItem = ({
+  importedEnv,
+  importedSecPath,
+  onDelete,
+  importedSecrets = []
+}: Props) => {
+  const [isExpanded, setIsExpanded] = useToggle();
+  const { attributes, listeners, transform, transition, setNodeRef, isDragging } = useSortable({
+    id: `${importedEnv}-${importedSecPath}`
+  });
+  const { currentWorkspace } = useWorkspace();
+  const rowEnv = currentWorkspace?.environments?.find(({ slug }) => slug === importedEnv);
+
+  useEffect(() => {
+    if (isDragging) {
+      setIsExpanded.off();
+    }
+  }, [isDragging]);
+
+  const style = {
+    transform: transform ? `translateY(${transform.y ? Math.round(transform.y) : 0}px)` : "",
+    transition
+  };
+
+  return (
+    <>
+      <tr
+        ref={setNodeRef}
+        style={style}
+        className="group flex cursor-default flex-row items-center hover:bg-mineshaft-700"
+        onClick={() => setIsExpanded.toggle()}
+      >
+        <td className="ml-0.5 flex h-10 w-10 items-center justify-center border-none px-4">
+          <FontAwesomeIcon icon={faFileImport} className="text-primary-700" />
+        </td>
+        <td
+          colSpan={2}
+          className="relative flex w-full min-w-[220px] items-center justify-between overflow-hidden text-ellipsis lg:min-w-[240px] xl:min-w-[280px]"
+          style={{ paddingTop: "0", paddingBottom: "0" }}
+        >
+          <div className="flex-grow p-2">
+            <EnvFolderIcon env={rowEnv?.name || ""} secretPath={importedSecPath} />
+          </div>
+          <div className="duration-0 flex h-10 w-16 items-center justify-end space-x-2.5 overflow-hidden border-l border-mineshaft-600 transition-all">
+            <div className="opacity-0 group-hover:opacity-100">
+              <Tooltip content="Change Order" className="capitalize">
+                <IconButton
+                  size="md"
+                  colorSchema="primary"
+                  variant="plain"
+                  ariaLabel="expand"
+                  {...attributes}
+                  {...listeners}
+                >
+                  <FontAwesomeIcon icon={faUpDown} size="lg" />
+                </IconButton>
+              </Tooltip>
+            </div>
+            <div className="opacity-0 group-hover:opacity-100">
+              <Tooltip content="Delete" className="capitalize">
+                <IconButton
+                  size="md"
+                  variant="plain"
+                  colorSchema="danger"
+                  ariaLabel="delete"
+                  onClick={(evt) => {
+                    evt.stopPropagation();
+                    onDelete(importedEnv, importedSecPath);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faXmark} size="lg" />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        {isExpanded && !isDragging && (
+          <td colSpan={3}>
+            <div className="rounded-md bg-bunker-700 p-4 pb-6">
+              <div className="mb-2 text-lg font-medium">Secrets Imported</div>
+              <TableContainer>
+                <table className="secret-table">
+                  <thead>
+                    <tr>
+                      <td style={{ padding: "0.25rem 1rem" }}>Key</td>
+                      <td style={{ padding: "0.25rem 1rem" }}>Value</td>
+                      <td style={{ padding: "0.25rem 1rem" }}>Override</td>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {importedSecrets.map(({ key, value, overriden }, index) => (
+                      <tr key={`${importedEnv}-${importedSecPath}-${key}-${index + 1}`}>
+                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                          {key}
+                        </td>
+                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                          {value}
+                        </td>
+                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                          <EnvFolderIcon env={overriden?.env} secretPath={overriden?.secretPath} />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </TableContainer>
+            </div>
+          </td>
+        )}
+      </tr>
+    </>
+  );
+};

frontend/src/views/DashboardPage/components/SecretImportSection/SecretImportSection.tsx

@@ -0,0 +1,93 @@
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+
+import { useWorkspace } from "@app/context";
+import { DecryptedSecret } from "@app/hooks/api/secrets/types";
+
+import { SecretImportItem } from "./SecretImportItem";
+
+type TImportedSecrets = Array<{
+  environment: string;
+  secretPath: string;
+  folderId: string;
+  secrets: DecryptedSecret[];
+}>;
+
+const SECRET_IN_DASHBOARD = "Present In Dashboard";
+
+export const computeImportedSecretRows = (
+  importedSecEnv: string,
+  importedSecPath: string,
+  importSecrets: TImportedSecrets = [],
+  secrets: DecryptedSecret[] = [],
+  environments: { name: string; slug: string }[] = []
+) => {
+  const importedSecIndex = importSecrets.findIndex(
+    ({ secretPath, environment }) =>
+      secretPath === importedSecPath && importedSecEnv === environment
+  );
+  if (importedSecIndex === -1) return [];
+
+  const importedSec = importSecrets[importedSecIndex];
+
+  const overridenSec: Record<string, { env: string; secretPath: string }> = {};
+  const envSlug2Name: Record<string, string> = {};
+  environments.forEach((el) => {
+    envSlug2Name[el.slug] = el.name;
+  });
+
+  for (let i = importedSecIndex + 1; i < importSecrets.length; i += 1) {
+    importSecrets[i].secrets.forEach((el) => {
+      overridenSec[el.key] = {
+        env: envSlug2Name?.[importSecrets[i].environment] || "unknown",
+        secretPath: importSecrets[i].secretPath
+      };
+    });
+  }
+
+  secrets.forEach((el) => {
+    overridenSec[el.key] = { env: SECRET_IN_DASHBOARD, secretPath: "" };
+  });
+
+  return importedSec.secrets.map(({ key, value }) => ({
+    key,
+    value,
+    overriden: overridenSec?.[key]
+  }));
+};
+
+type Props = {
+  secrets?: DecryptedSecret[];
+  importedSecrets?: TImportedSecrets;
+  onSecretImportDelete: (env: string, secPath: string) => void;
+  items: { id: string; environment: string; secretPath: string }[];
+};
+
+export const SecretImportSection = ({
+  secrets = [],
+  importedSecrets = [],
+  onSecretImportDelete,
+  items = []
+}: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const environments = currentWorkspace?.environments || [];
+
+  return (
+    <SortableContext items={items} strategy={verticalListSortingStrategy}>
+      {items.map(({ secretPath: impSecPath, environment: importSecEnv, id }) => (
+        <SecretImportItem
+          key={id}
+          importedEnv={importSecEnv}
+          importedSecrets={computeImportedSecretRows(
+            importSecEnv,
+            impSecPath,
+            importedSecrets,
+            secrets,
+            environments
+          )}
+          onDelete={onSecretImportDelete}
+          importedSecPath={impSecPath}
+        />
+      ))}
+    </SortableContext>
+  );
+};

frontend/src/views/DashboardPage/components/SecretImportSection/index.tsx

@@ -0,0 +1 @@
+export { SecretImportSection } from "./SecretImportSection";

frontend/src/views/DashboardPage/components/SecretInputRow/MaskedInput.tsx

@@ -1,8 +1,7 @@
-import { useCallback } from "react";
-import { useFormContext, useWatch } from "react-hook-form";
-import { faCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
+import { useRef } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+
+import { useSyntaxHighlight, useToggle } from "@app/hooks";
 
 import { FormData } from "../../DashboardPage.utils";
 
@@ -13,95 +12,96 @@ type Props = {
   index: number;
 };
 
-const REGEX = /([$]{.*?})/g;
+const SEC_VAL_LINE_HEIGHT = 21;
+const MAX_MULTI_LINE = 6;
 
 export const MaskedInput = ({ isReadOnly, isSecretValueHidden, index, isOverridden }: Props) => {
-  const { register, control } = useFormContext<FormData>();
+  const { control } = useFormContext<FormData>();
+  const ref = useRef<HTMLElement | null>(null);
+  const [isFocused, setIsFocused] = useToggle();
+  const syntaxHighlight = useSyntaxHighlight();
 
   const secretValue = useWatch({ control, name: `secrets.${index}.value` });
   const secretValueOverride = useWatch({ control, name: `secrets.${index}.valueOverride` });
   const value = isOverridden ? secretValueOverride : secretValue;
 
-  const syntaxHighlight = useCallback((val: string) => {
-    if (val?.length === 0) return <span className="font-sans text-bunker-400/80">EMPTY</span>;
-    return val?.split(REGEX).map((word, i) =>
-      word.match(REGEX) !== null ? (
-        <span className="ph-no-capture text-yellow" key={`${val}-${i + 1}`}>
-          {word.slice(0, 2)}
-          <span className="ph-no-capture text-yellow-200/80">{word.slice(2, word.length - 1)}</span>
-          {word.slice(word.length - 1, word.length) === "}" ? (
-            <span className="ph-no-capture text-yellow">
-              {word.slice(word.length - 1, word.length)}
-            </span>
-          ) : (
-            <span className="ph-no-capture text-yellow-400">
-              {word.slice(word.length - 1, word.length)}
-            </span>
-          )}
-        </span>
-      ) : (
-        <span key={`${word}_${i + 1}`} className="ph-no-capture">
-          {word}
-        </span>
-      )
-    );
-  }, []);
+  const multilineExpandUnit = ((value?.match(/\n/g)?.length || 0) + 1) * SEC_VAL_LINE_HEIGHT;
+  const maxMultilineHeight = Math.min(multilineExpandUnit, 21 * MAX_MULTI_LINE);
 
   return (
-    <div className="group relative flex	w-full flex-col justify-center whitespace-pre px-1.5">
+    <div className="group relative flex w-full flex-col whitespace-pre px-1.5 pt-1.5">
       {isOverridden ? (
-        <input
-          {...register(`secrets.${index}.valueOverride`)}
-          readOnly={isReadOnly}
-          className={twMerge(
-            "ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none no-scrollbar",
-            !isSecretValueHidden &&
-              "text-transparent focus:text-transparent active:text-transparent"
+        <Controller
+          control={control}
+          name={`secrets.${index}.valueOverride`}
+          render={({ field }) => (
+            <textarea
+              key={`secrets.${index}.valueOverride`}
+              {...field}
+              readOnly={isReadOnly}
+              className="ph-no-capture min-w-16 duration-50 peer z-20 w-full resize-none overflow-auto text-ellipsis bg-transparent px-2  font-mono text-sm text-transparent caret-white outline-none no-scrollbar"
+              style={{ height: `${maxMultilineHeight}px` }}
+              spellCheck="false"
+              onBlur={() => setIsFocused.off()}
+              onFocus={() => setIsFocused.on()}
+              onInput={(el) => {
+                if (ref.current) {
+                  ref.current.scrollTop = el.currentTarget.scrollTop;
+                  ref.current.scrollLeft = el.currentTarget.scrollLeft;
+                }
+              }}
+              onScroll={(el) => {
+                if (ref.current) {
+                  ref.current.scrollTop = el.currentTarget.scrollTop;
+                  ref.current.scrollLeft = el.currentTarget.scrollLeft;
+                }
+              }}
+            />
           )}
-          spellCheck="false"
         />
       ) : (
-        <input
-          {...register(`secrets.${index}.value`)}
-          readOnly={isReadOnly}
-          className={twMerge(
-            "ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none no-scrollbar",
-            !isSecretValueHidden &&
-              "text-transparent focus:text-transparent active:text-transparent"
+        <Controller
+          control={control}
+          name={`secrets.${index}.value`}
+          key={`secrets.${index}.value`}
+          render={({ field }) => (
+            <textarea
+              {...field}
+              readOnly={isReadOnly}
+              className="ph-no-capture min-w-16 duration-50 peer z-20 w-full resize-none overflow-auto text-ellipsis bg-transparent px-2 font-mono text-sm text-transparent caret-white outline-none no-scrollbar"
+              style={{ height: `${maxMultilineHeight}px` }}
+              spellCheck="false"
+              onBlur={() => setIsFocused.off()}
+              onFocus={() => setIsFocused.on()}
+              onInput={(el) => {
+                if (ref.current) {
+                  ref.current.scrollTop = el.currentTarget.scrollTop;
+                  ref.current.scrollLeft = el.currentTarget.scrollLeft;
+                }
+              }}
+              onScroll={(el) => {
+                if (ref.current) {
+                  ref.current.scrollTop = el.currentTarget.scrollTop;
+                  ref.current.scrollLeft = el.currentTarget.scrollLeft;
+                }
+              }}
+            />
           )}
-          spellCheck="false"
         />
       )}
-      <div
-        className={twMerge(
-          "ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 absolute z-0 mt-0.5 flex h-10 w-full flex-row overflow-x-scroll whitespace-pre bg-transparent px-2 py-2 font-mono text-sm outline-none no-scrollbar peer-focus:visible",
-          isSecretValueHidden ? "invisible" : "visible",
-          isOverridden
-            ? "text-primary-300"
-            : "duration-50 text-gray-400 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400"
-        )}
-      >
-        {syntaxHighlight(value || "")}
-      </div>
-      <div
-        className={twMerge(
-          "duration-50 peer absolute z-0 flex h-10 w-full flex-row items-center justify-between text-clip pr-2 text-bunker-400 group-hover:bg-white/[0.00] peer-focus:hidden peer-active:hidden",
-          !isSecretValueHidden ? "invisible" : "visible"
-        )}
-      >
-        <div className="no-scrollbar::-webkit-scrollbar flex flex-row items-center overflow-x-scroll px-2 no-scrollbar">
-          {value?.split("").map((val, i) => (
-            <FontAwesomeIcon
-              key={`${value}_${val}_${i + 1}`}
-              className="mr-0.5 text-xxs"
-              icon={faCircle}
-            />
-          ))}
-          {value?.split("").length === 0 && (
-            <span className="text-sm text-bunker-400/80">EMPTY</span>
-          )}
-        </div>
-      </div>
+      <pre className="whitespace-pre-wrap break-words">
+        <code
+          ref={ref}
+          className={`absolute top-1.5 left-3.5 z-10 w-full overflow-auto font-mono text-sm transition-all no-scrollbar ${
+            isOverridden && "text-primary-300"
+          } ${
+            (value || "") === "" && "text-mineshaft-400"
+          }`}
+          style={{ height: `${maxMultilineHeight}px`, width: "calc(100% - 12px)" }}
+        >
+          {syntaxHighlight(value || "", isSecretValueHidden ? !isFocused : isSecretValueHidden)}
+        </code>
+      </pre>
     </div>
   );
 };

frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import { memo, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 import { Controller, useFieldArray, useFormContext, useWatch } from "react-hook-form";
 import {
+  faCheck,
   faCodeBranch,
   faComment,
+  faCopy,
   faEllipsis,
   faInfoCircle,
   faPlus,
@@ -30,6 +32,7 @@ import {
   TextArea,
   Tooltip
 } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
 import { WsTag } from "@app/hooks/api/types";
 
 import { FormData, SecretActionType } from "../../DashboardPage.utils";
@@ -95,6 +98,16 @@ export const SecretInputRow = memo(
       name: `secrets.${index}.key`,
       disabled: isKeySubDisabled.current
     });
+    const secValue = useWatch({
+      control,
+      name: `secrets.${index}.value`,
+      disabled: isKeySubDisabled.current
+    });
+    const secValueOverride = useWatch({
+      control,
+      name: `secrets.${index}.valueOverride`,
+      disabled: isKeySubDisabled.current
+    })
     const secId = useWatch({ control, name: `secrets.${index}._id` });
 
     const tags = useWatch({ control, name: `secrets.${index}.tags`, defaultValue: [] }) || [];
@@ -103,6 +116,21 @@ export const SecretInputRow = memo(
       {}
     );
 
+    const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
+
+    useEffect(() => {
+      let timer: NodeJS.Timeout;
+      if (isInviteLinkCopied) {
+        timer = setTimeout(() => setInviteLinkCopied.off(), 2000);
+      }
+      return () => clearTimeout(timer);
+    }, [isInviteLinkCopied]);
+
+    const copyTokenToClipboard = () => {
+      navigator.clipboard.writeText((secValueOverride || secValue) as string);
+      setInviteLinkCopied.on();
+    };
+
     // when secret is override by personal values
     const isOverridden =
       overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified;
@@ -157,7 +185,7 @@ export const SecretInputRow = memo(
     }
 
     return (
-      <tr className="group flex flex-row items-center" key={index}>
+      <tr className="group flex flex-row" key={index}>
         <td className="flex h-10 w-10 items-center justify-center border-none px-4">
           <div className="w-10 text-center text-xs text-bunker-400">{index + 1}</div>
         </td>
@@ -198,7 +226,7 @@ export const SecretInputRow = memo(
             </HoverCard>
           )}
         />
-        <td className="flex h-10 w-full flex-grow flex-row items-center justify-center border-r border-none border-red">
+        <td className="flex w-full flex-grow flex-row border-r border-none border-red">
           <MaskedInput
             isReadOnly={
               isReadOnly || isRollbackMode || (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)
@@ -208,8 +236,8 @@ export const SecretInputRow = memo(
             index={index}
           />
         </td>
-        <td className="min-w-sm flex h-10 items-center">
-          <div className="flex items-center pl-2">
+        <td className="min-w-sm flex">
+          <div className="flex h-8 items-center pl-2">
             {secretTags.map(({ id, slug }, i) => (
               <Tag
                 className={cx(
@@ -223,6 +251,19 @@ export const SecretInputRow = memo(
                 {slug}
               </Tag>
             ))}
+            <div className="w-0 group-hover:w-6 overflow-hidden">
+              <Tooltip content="Copy value">
+                <IconButton
+                  variant="plain"
+                  size="md"
+                  ariaLabel="add-tag"
+                  className="py-[0.42rem]"
+                  onClick={copyTokenToClipboard}
+                >
+                  <FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
             {!(isReadOnly || isAddOnly || isRollbackMode) && (
               <div className="duration-0 ml-1 overflow-hidden">
                 <Popover>
@@ -289,7 +330,7 @@ export const SecretInputRow = memo(
               </div>
             )}
           </div>
-          <div className="flex h-full flex-row items-center pr-2">
+          <div className="flex h-8 flex-row items-center pr-2">
             {!isAddOnly && (
               <div>
                 <Tooltip content="Override with a personal value">
@@ -346,35 +387,37 @@ export const SecretInputRow = memo(
               </div>
             </Tooltip>
           </div>
-          <div className="duration-0 flex h-10 w-16 items-center justify-end space-x-2.5 overflow-hidden border-l border-mineshaft-600 transition-all">
-            {!isAddOnly && (
+          <div className="duration-0 flex w-16 justify-center overflow-hidden border-l border-mineshaft-600 pl-2 transition-all">
+            <div className="flex h-8 items-center space-x-2.5">
+              {!isAddOnly && (
+                <div className="opacity-0 group-hover:opacity-100">
+                  <Tooltip content="Settings">
+                    <IconButton
+                      size="lg"
+                      colorSchema="primary"
+                      variant="plain"
+                      onClick={onRowExpand}
+                      ariaLabel="expand"
+                    >
+                      <FontAwesomeIcon icon={faEllipsis} />
+                    </IconButton>
+                  </Tooltip>
+                </div>
+              )}
               <div className="opacity-0 group-hover:opacity-100">
-                <Tooltip content="Settings">
+                <Tooltip content="Delete">
                   <IconButton
                     size="lg"
-                    colorSchema="primary"
                     variant="plain"
-                    onClick={onRowExpand}
-                    ariaLabel="expand"
+                    colorSchema="danger"
+                    ariaLabel="delete"
+                    isDisabled={isReadOnly || isRollbackMode}
+                    onClick={() => onSecretDelete(index, secId, idOverride)}
                   >
-                    <FontAwesomeIcon icon={faEllipsis} />
+                    <FontAwesomeIcon icon={faXmark} />
                   </IconButton>
                 </Tooltip>
               </div>
-            )}
-            <div className="opacity-0 group-hover:opacity-100">
-              <Tooltip content="Delete">
-                <IconButton
-                  size="md"
-                  variant="plain"
-                  colorSchema="danger"
-                  ariaLabel="delete"
-                  isDisabled={isReadOnly || isRollbackMode}
-                  onClick={() => onSecretDelete(index, secId, idOverride)}
-                >
-                  <FontAwesomeIcon icon={faXmark} />
-                </IconButton>
-              </Tooltip>
             </div>
           </div>
         </td>

frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx

@@ -71,6 +71,9 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
       case "circleci":
         link = `${window.location.origin}/integrations/circleci/authorize`;
         break;
+      case "laravel-forge":
+        link = `${window.location.origin}/integrations/laravel-forge/authorize`;
+        break;
       case "travisci":
         link = `${window.location.origin}/integrations/travisci/authorize`;
         break;

frontend/src/views/IntegrationsPage/IntegrationsPage.tsx

@@ -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";
@@ -178,8 +177,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
   };
 
   return (
-    <div className="container mx-auto max-w-7xl px-8 pb-12 text-white">
-      <NavHeader pageName={t("integrations.title")} isProjectRelated />
+    <div className="container mx-auto max-w-7xl pb-12 text-white">
       <IntegrationsSection
         isLoading={isIntegrationLoading}
         integrations={integrations}

frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx

@@ -31,22 +31,21 @@ export const CloudIntegrationSection = ({
 
   const isEmpty = !isLoading && !cloudIntegrations?.length;
 
+  const sortedCloudIntegrations = cloudIntegrations.sort((a, b) => a.name.localeCompare(b.name));
+
   return (
     <div>
       <div className="m-4 mt-7 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
         <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}`} />
           ))}
         {!isLoading &&
-          cloudIntegrations?.map((cloudIntegration) => (
+          sortedCloudIntegrations?.map((cloudIntegration) => (
             <div
               onKeyDown={() => null}
               role="button"

frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx

@@ -12,6 +12,8 @@ type Props = {
 export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
   const { t } = useTranslation();
 
+  const sortedFrameworks = frameworks.sort((a, b) => a.name.localeCompare(b.name));
+
   return (
     <>
       <div className="mx-4 mt-12 mb-4 flex flex-col items-start justify-between px-2 text-xl">
@@ -22,7 +24,7 @@ export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
         className="mx-6 mt-4 grid grid-flow-dense gap-3"
         style={{ gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))" }}
       >
-        {frameworks.map((framework) => (
+        {sortedFrameworks.map((framework) => (
           <a
             key={`framework-integration-${framework.slug}`}
             href={framework.docsLink}

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -44,10 +44,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">

frontend/src/views/Org/MembersPage/MembersPage.tsx

@@ -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>
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -27,6 +27,7 @@ import {
   THead,
   Tr,
   UpgradePlanModal} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
 import { usePopUp, useToggle } from "@app/hooks";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { OrgUser, Workspace } from "@app/hooks/api/types";
@@ -70,6 +71,7 @@ export const OrgMembersTable = ({
   const router = useRouter();
   const [searchMemberFilter, setSearchMemberFilter] = useState("");
   const {data: serverDetails } = useFetchServerStatus()
+  const { workspaces } = useWorkspace();
   const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "addMember",
@@ -78,6 +80,12 @@ export const OrgMembersTable = ({
     "setUpEmail"
   ] as const);
 
+  useEffect(() => {
+    if (router.query.action === "invite") {
+      handlePopUpOpen("addMember");
+    }
+  }, []);
+
   const {
     control,
     handleSubmit,
@@ -224,7 +232,7 @@ export const OrgMembersTable = ({
                             : <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}`)}
+                              onClick={() => router.push(`/project/${workspaces[0]?._id}/members`)}
                               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" />

frontend/src/views/Org/MembersPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -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>
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgNameChangeSection/index.tsx

@@ -0,0 +1 @@
+export { OrgNameChangeSection } from "./OrgNameChangeSection";

frontend/src/views/Org/MembersPage/components/OrgServiceAccountsTable/OrgServiceAccountsTable.tsx

@@ -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>
+    );
+}

frontend/src/views/Org/MembersPage/components/OrgServiceAccountsTable/index.tsx

@@ -0,0 +1 @@
+export { OrgServiceAccountsTable } from "./OrgServiceAccountsTable";

frontend/src/views/Org/MembersPage/components/index.tsx

@@ -0,0 +1,5 @@
+export { OrgIncidentContactsTable } from "./OrgIncidentContactsTable";
+export { OrgMembersTable } from "./OrgMembersTable";
+export { OrgNameChangeSection } from "./OrgNameChangeSection";
+export { OrgServiceAccountsTable } from "./OrgServiceAccountsTable";
+

frontend/src/views/Org/MembersPage/index.tsx

@@ -0,0 +1 @@
+export { MembersPage } from "./MembersPage";

frontend/src/views/SecretScanning/components/RiskStatusSelection.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+import updateRiskStatus, { RiskStatus } from "@app/pages/api/secret-scanning/updateRiskStatus";
+
+export const RiskStatusSelection = ({riskId, currentSelection}: {riskId: any, currentSelection: any }) => {
+    const [selectedRiskStatus, setSelectedRiskStatus] = useState(currentSelection);
+    useEffect(()=>{
+        if (currentSelection !== selectedRiskStatus){
+            const updateSelection = async () =>{ 
+                await updateRiskStatus(String(localStorage.getItem("orgData.id")), riskId, selectedRiskStatus)
+            }
+            updateSelection()
+        }
+    },[selectedRiskStatus])
+
+    return (
+    <select
+        value={selectedRiskStatus}
+        onChange={(e) => setSelectedRiskStatus(e.target.value)}
+        className="block w-full py-2 px-3 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+    >
+        <option>Unresolved</option>
+        <option value={RiskStatus.RESOLVED_FALSE_POSITIVE}>This is a false positive, resolved</option>
+        <option value={RiskStatus.RESOLVED_REVOKED}>I have rotated the secret, resolved</option>
+        <option value={RiskStatus.RESOLVED_NOT_REVOKED}>No rotate needed, resolved</option>
+    </select>         
+    );
+}

frontend/src/views/SecretScanning/components/SecretScanningLogsTable.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr} from "@app/components/v2";
+import timeSince from "@app/ee/utilities/timeSince";
+import getRisksByOrganization, { GitRisks } from "@app/pages/api/secret-scanning/getRisksByOrganization";
+
+import { RiskStatusSelection } from "./RiskStatusSelection";
+
+export const SecretScanningLogsTable = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [gitRisks, setGitRisks] = useState<GitRisks[]>([]);
+
+    useEffect(() => {
+        const fetchRisks = async () => {
+            setIsLoading(true);
+            const risks = await getRisksByOrganization(String(localStorage.getItem("orgData.id")))
+            setGitRisks(risks);
+            setIsLoading(false);
+        }
+
+        fetchRisks();
+    },[])
+
+
+    return (
+        <TableContainer className="mt-8">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="flex-1">Date</Th>
+                  <Th className="flex-1">Secret Type</Th>
+                  <Th className="flex-1">View Risk</Th>
+                  <Th className="flex-1">Info</Th>
+                  <Th className="flex-1">Status</Th>
+                  <Th className="flex-1">Action</Th>
+                  <Th className="w-5" />
+                </Tr>
+              </THead>
+              <TBody>
+                {!isLoading && gitRisks && gitRisks?.map((risk) => {
+                    return (
+                        <Tr key={risk.ruleID} className="h-10">
+                            <Td>{timeSince(new Date(risk.createdAt))}</Td>
+                            <Td>{risk.ruleID}</Td>
+                            <Td>
+                                <a
+                                    href={`https://github.com/${risk.repositoryFullName}/blob/${risk.commit}/${risk.file}#L${risk.startLine}-L${risk.endLine}`}
+                                    target="_blank"
+                                    className="text-red-500" rel="noreferrer"
+                                >
+                                View Exposed Secret
+                                </a>
+                            </Td>
+                            <Td>
+                                <div className="font-bold">
+                                    <a href={`https://github.com/${risk.repositoryFullName}`}>
+                                        {risk.repositoryFullName}
+                                    </a>
+                                </div>
+                                <div className="text-xs">
+                                    <span>{risk.file}</span><br/>
+                                    <br/>
+                                    <span className="font-bold">{risk.author}</span><br/>
+                                    <span>{risk.email}</span>
+                                </div>    
+                            </Td>
+                            <Td>{risk.isResolved ? "Resolved" : "Needs Attention"}</Td>
+                            <Td>
+                                <RiskStatusSelection riskId={risk._id} currentSelection={risk.status}/>
+                            </Td>
+                        </Tr>
+                    );
+                })}
+                {isLoading && <TableSkeleton columns={7} key="gitRisks" />}
+                {!isLoading && gitRisks && gitRisks?.length === 0 && (
+                    <Tr>
+                        <Td colSpan={7}>
+                            <EmptyState 
+                                title="No risks detected." 
+                                icon={faCheck}
+                            />
+                        </Td>
+                    </Tr>
+                )}
+              </TBody>
+            </Table>
+        </TableContainer>
+    );
+}

frontend/src/views/SecretScanning/components/index.tsx

@@ -0,0 +1 @@
+export { SecretScanningLogsTable } from "./SecretScanningLogsTable";

frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx

@@ -1,7 +1,5 @@
 import { useTranslation } from "react-i18next";
 
-import NavHeader from "@app/components/navigation/NavHeader";
-
 import {
   BillingTabGroup
 } from "./components";
@@ -9,16 +7,12 @@ import {
 export const BillingSettingsPage = () => {
     const { t } = useTranslation();
     return (
-      <div className="h-full py-8 px-4">
-        <NavHeader pageName={t("billing.title")} />
-        
-        <div className="ml-4 flex text-3xl mt-8 items-start max-w-screen-lg">
-          <div className="flex-1">
-            <p className="font-semibold text-gray-200">{t("billing.title")}</p>
+      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
+        <div className="max-w-7xl px-6 w-full">
+          <div className="my-6">
+              <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
+            <div />
           </div>
-          <div />
-        </div>
-        <div className="ml-4">
           <BillingTabGroup />
         </div>
       </div>

frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx

@@ -43,7 +43,7 @@ export const CurrentPlanSection = () => {
     }
 
     return (
-        <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
             <h2 className="text-xl font-semibold flex-1 text-white mb-8">Current Usage</h2>
             <TableContainer className="mt-4">
                 <Table>

frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx

@@ -2,15 +2,18 @@ import { Button } from "@app/components/v2";
 import { useOrganization,useSubscription  } from "@app/context";
 import { 
     useCreateCustomerPortalSession,
-    useGetOrgPlanBillingInfo} from "@app/hooks/api";
+    useGetOrgPlanBillingInfo,
+    useGetOrgTrialUrl
+} from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { ManagePlansModal } from "./ManagePlansModal";
 
 export const PreviewSection = () => {
     const { currentOrg } = useOrganization();
-    const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
+    const { subscription } = useSubscription();
     const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? "");
+    const getOrgTrialUrl = useGetOrgTrialUrl();
     const createCustomerPortalSession = useCreateCustomerPortalSession();
     
     const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
@@ -42,28 +45,50 @@ export const PreviewSection = () => {
             .replace(/-/g, " ");
     }
     
+    const handleUpgradeBtnClick = async () => {
+        try {
+            if (!subscription || !currentOrg) return;
+            
+            if (!subscription.has_used_trial) {
+                // direct user to start pro trial
+                const url = await getOrgTrialUrl.mutateAsync({
+                    orgId: currentOrg._id,
+                    success_url: window.location.href
+                });
+                
+                window.location.href = url;
+            } else {
+                // open compare plans modal
+                handlePopUpOpen("managePlan");
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
     return (
         <div>
-            {!isSubscriptionLoading && subscription?.slug !== "enterprise" && subscription?.slug !== "pro" && subscription?.slug !== "pro-annual" && (
-                <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mt-8 flex items-center bg-mineshaft-600 max-w-screen-lg">
+            {subscription && subscription?.slug !== "enterprise" && subscription?.slug !== "pro" && subscription?.slug !== "pro-annual" && (
+                <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mb-6 flex items-center bg-mineshaft-600">
                     <div className="flex-1">
                         <h2 className="text-xl font-semibold text-mineshaft-50">Become Infisical</h2>
                         <p className="text-gray-400 mt-4">Unlimited members, projects, RBAC, smart alerts, and so much more</p>
                     </div>
                     <Button 
-                        onClick={() => handlePopUpOpen("managePlan")}
+                        // onClick={() => handlePopUpOpen("managePlan")}
+                        onClick={() => handleUpgradeBtnClick()}
                         color="mineshaft"
                     >
-                        Upgrade
+                        {!subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan"}
                     </Button>
                 </div>
             )}
-            {!isLoading && data && subscription && (
-                <div className="flex mt-8 max-w-screen-lg">
+            {!isLoading && subscription && data && (
+                <div className="flex mb-6">
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 mr-4 border border-mineshaft-600">
                         <p className="mb-2 text-gray-400">Current plan</p>
-                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
-                            {formatPlanSlug(subscription.slug)}
+                        <p className="text-2xl text-mineshaft-50 font-semibold mb-8"> 
+                            {`${formatPlanSlug(subscription.slug)} ${subscription.status === "trialing" ? "(Trial)" : ""}`}
                         </p>
                         <button 
                             type="button"
@@ -80,7 +105,7 @@ export const PreviewSection = () => {
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mr-4">
                         <p className="mb-2 text-gray-400">Price</p>
                         <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
-                            {`${formatAmount(data.amount)} / ${data.interval}`}
+                            {subscription.status === "trialing" ? "$0.00 / month" : `${formatAmount(data.amount)} / ${data.interval}`}
                         </p>
                     </div>
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600">

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx

@@ -3,9 +3,11 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import Button from "@app/components/basic/buttons/Button";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { FormControl,Input } from "@app/components/v2";
+import { 
+    Button,
+    FormControl,
+    Input} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { 
     useGetOrgBillingDetails,
@@ -26,7 +28,7 @@ export const CompanyNameSection = () => {
         resolver: yupResolver(schema)
     });
     const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
-    const updateOrgBillingDetails = useUpdateOrgBillingDetails();
+    const { mutateAsync, isLoading } = useUpdateOrgBillingDetails();
     
     useEffect(() => {
         if (data) {
@@ -40,7 +42,7 @@ export const CompanyNameSection = () => {
         try {
             if (!currentOrg?._id) return;
             if (name === "") return;
-            await updateOrgBillingDetails.mutateAsync({
+            await mutateAsync({
                 name,
                 organizationId: currentOrg._id
             });
@@ -61,7 +63,7 @@ export const CompanyNameSection = () => {
     return (
         <form 
             onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mt-8 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">
                 Business name
@@ -82,15 +84,14 @@ export const CompanyNameSection = () => {
                     name="name"
                 />
             </div>
-            <div className="inline-block">
-                <Button
-                    text="Save"
-                    type="submit"
-                    color="mineshaft"
-                    size="md"
-                    onButtonPressed={() => console.log("Saved company name")}
-                />
-            </div>
+            <Button
+                type="submit"
+                colorSchema="secondary"
+                isLoading={isLoading}
+                isDisabled={isLoading}
+            >
+                Save
+            </Button>
         </form>
     );
 }

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx

@@ -3,9 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import Button from "@app/components/basic/buttons/Button";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
+  Button,
   FormControl,
   Input} from "@app/components/v2";
 import { useOrganization } from "@app/context";
@@ -28,7 +28,7 @@ export const InvoiceEmailSection = () => {
         resolver: yupResolver(schema)
     });
     const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
-    const updateOrgBillingDetails = useUpdateOrgBillingDetails();
+    const { mutateAsync, isLoading } = useUpdateOrgBillingDetails();
 
     useEffect(() => {
         if (data) {
@@ -43,7 +43,7 @@ export const InvoiceEmailSection = () => {
             if (!currentOrg?._id) return;
             if (email === "") return;
 
-            await updateOrgBillingDetails.mutateAsync({
+            await mutateAsync({
                 email,
                 organizationId: currentOrg._id
             });
@@ -64,7 +64,7 @@ export const InvoiceEmailSection = () => {
     return (
         <form 
             onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mt-8 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-white mb-8">
                 Invoice email recipient
@@ -85,15 +85,13 @@ export const InvoiceEmailSection = () => {
                     name="email"
                 />
             </div>
-            <div className="inline-block">
-                <Button
-                    text="Save"
-                    type="submit"
-                    color="mineshaft"
-                    size="md"
-                    onButtonPressed={() => console.log("Saved email address")}
-                />
-            </div>
+            <Button
+                type="submit"
+                colorSchema="secondary"
+                isLoading={isLoading}
+            >
+                Save
+            </Button>
         </form>
     );
 }

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx

@@ -1,6 +1,10 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 
-import Button from "@app/components/basic/buttons/Button";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useAddOrgPmtMethod } from "@app/hooks/api";
 
@@ -8,11 +12,11 @@ import { PmtMethodsTable } from "./PmtMethodsTable";
 
 export const PmtMethodsSection = () => {
     const { currentOrg } = useOrganization();
-    const addOrgPmtMethod = useAddOrgPmtMethod();
+    const { mutateAsync, isLoading } = useAddOrgPmtMethod();
     
     const handleAddPmtMethodBtnClick = async () => {
         if (!currentOrg?._id) return;
-        const url = await addOrgPmtMethod.mutateAsync({
+        const url = await mutateAsync({
             organizationId: currentOrg._id,
             success_url: window.location.href,
             cancel_url: window.location.href
@@ -22,21 +26,19 @@ export const PmtMethodsSection = () => {
     }
     
     return (
-        <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
             <div className="flex items-center mb-8">
                 <h2 className="text-xl font-semibold flex-1 text-white">
                     Payment Methods
                 </h2>
-                <div className="inline-block">
-                    <Button
-                        text="Add method"
-                        type="submit"
-                        color="mineshaft"
-                        size="md"
-                        icon={faPlus}
-                        onButtonPressed={handleAddPmtMethodBtnClick}
-                    />
-                </div>
+                <Button
+                    onClick={handleAddPmtMethodBtnClick}
+                    colorSchema="secondary"
+                    isLoading={isLoading}
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                >
+                    Add method
+                </Button>
             </div>
             <PmtMethodsTable />
         </div>

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx

@@ -1,6 +1,8 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 
-import Button from "@app/components/basic/buttons/Button";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button } from "@app/components/v2";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { TaxIDModal } from "./TaxIDModal";
@@ -12,21 +14,18 @@ export const TaxIDSection = () => {
     ] as const);
 
     return (
-        <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
             <div className="flex items-center mb-8">
                 <h2 className="text-xl font-semibold flex-1 text-white">
                     Tax ID
                 </h2>
-                <div className="inline-block">
-                    <Button
-                        text="Add Tax ID"
-                        type="submit"
-                        color="mineshaft"
-                        size="md"
-                        icon={faPlus}
-                        onButtonPressed={() => handlePopUpOpen("addTaxID")}
-                    />
-                </div>
+                <Button
+                    onClick={() => handlePopUpOpen("addTaxID")}
+                    colorSchema="secondary"
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                >
+                    Add method
+                </Button>
             </div>
             <TaxIDTable />
             <TaxIDModal 

frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx

@@ -2,7 +2,7 @@ import { InvoicesTable } from "./InvoicesTable";
 
 export const BillingReceiptsTab = () => {
     return (
-        <div className="p-4 bg-mineshaft-900 mt-8 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
           <h2 className="text-xl font-semibold flex-1 text-white">Invoices</h2>
           <InvoicesTable />
         </div>

frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx

@@ -14,13 +14,13 @@ const tabs = [
 export const BillingTabGroup = () => {
     return (
         <Tab.Group>
-            <Tab.List className="mt-8 border-b-2 border-mineshaft-800 max-w-screen-lg">
+            <Tab.List className="mt-8 mb-6 border-b-2 border-mineshaft-800">
                 {tabs.map((tab) => (
                     <Tab as={Fragment} key={tab.key}> 
                         {({ 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>

frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx

@@ -1,301 +1,26 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import NavHeader from "@app/components/navigation/NavHeader";
 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,
+  OrgIncidentContactsSection,
   OrgNameChangeSection,
   OrgServiceAccountsTable
 } from "./components";
 
 export const OrgSettingsPage = () => {
   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">
-      <NavHeader pageName={t("settings.org.title")} />
-      <div className="my-8 ml-8 max-w-5xl">
-        <p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
-        <p className="text-base font-normal text-gray-400">{t("settings.org.description")}</p>
-      </div>
-      <div className="max-w-8xl ml-6 mr-6 flex flex-col text-mineshaft-50">
-        <OrgNameChangeSection orgName={currentOrg?.name} onOrgNameChange={onRenameOrg} />
-        <div className="mb-6 w-full rounded-md bg-white/5 p-6">
-          <p className="mr-4 mb-4 text-xl 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 className="mb-6 mt-2 w-full rounded-md bg-white/5 p-6">
-          <p className="mr-4 mb-4 text-xl font-semibold text-white">Service Accounts</p>
-          <OrgServiceAccountsTable />
-        </div>
-        <div className="mb-6 mt-2 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pt-6 pb-6">
-          <div className="flex w-full max-w-5xl flex-row items-center justify-between">
-            <div className="flex w-full max-w-3xl flex-col justify-between">
-              <p className="mb-3 min-w-max text-xl font-semibold">
-                {t("section.incident.incident-contacts")}
-              </p>
-              <p className="mb-2 min-w-max text-xs text-gray-500">
-                {t("section.incident.incident-contacts-description")}
-              </p>
-            </div>
-          </div>
-          <div className="w-full">
-            <OrgIncidentContactsTable
-              isLoading={IsIncidentContactLoading}
-              contacts={incidentContact}
-              onRemoveContact={onRemoveIncidentContact}
-              onAddContact={onAddIncidentContact}
-            />
-          </div>
-        </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>
-							<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 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>
+		</div>
     </div>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/AddOrgIncidentContactModal.tsx

@@ -0,0 +1,120 @@
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+    useAddIncidentContact
+} from "@app/hooks/api";
+import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const addContactFormSchema = yup.object({
+  email: yup.string().email().required().label("Email").trim()
+});
+
+type TAddContactForm = yup.InferType<typeof addContactFormSchema>;
+
+type Props = {
+    popUp: UsePopUpState<["addContact"]>;
+    handlePopUpClose: (popUpName: keyof UsePopUpState<["addContact"]>) => void;
+    handlePopUpToggle: (popUpName: keyof UsePopUpState<["addContact"]>, state?: boolean) => void;
+};
+
+export const AddOrgIncidentContactModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    const { data: serverDetails } = useFetchServerStatus()
+    const {
+        control,
+        handleSubmit,
+        reset
+    } = useForm<TAddContactForm>({ resolver: yupResolver(addContactFormSchema) });
+
+    const { mutateAsync, isLoading } = useAddIncidentContact();
+    
+    const onFormSubmit = async ({ email }: TAddContactForm) => {
+        try {
+            if (!currentOrg?._id) return;
+            
+            await mutateAsync({ 
+                orgId: currentOrg._id, 
+                email 
+            });
+
+            createNotification({
+                text: "Successfully added incident contact",
+                type: "success"
+            });
+            
+            if (serverDetails?.emailConfigured){
+                handlePopUpClose("addContact");
+            }
+
+            reset();
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to add incident contact",
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <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(onFormSubmit)}>
+                    <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
+                            size="sm"
+                            type="submit"
+                            isLoading={isLoading}
+                            isDisabled={isLoading}
+                        >
+                            Add Incident Contact
+                        </Button>
+                        <Button
+                            colorSchema="secondary"
+                            variant="plain"
+                            onClick={() => handlePopUpClose("addContact")}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </ModalContent>
+        </Modal>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx

@@ -0,0 +1,43 @@
+import { useTranslation } from "react-i18next";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+    Button
+} from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+
+import { AddOrgIncidentContactModal } from "./AddOrgIncidentContactModal";
+import { OrgIncidentContactsTable } from "./OrgIncidentContactsTable";
+
+export const OrgIncidentContactsSection = () => {
+    const { t } = useTranslation();
+    const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+        "addContact"
+    ] as const);
+
+    return (
+        <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>
+                <Button
+                    colorSchema="secondary"
+                    type="submit"
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    onClick={() => handlePopUpOpen("addContact")}
+                >
+                    Add contact
+                </Button>
+            </div>
+            <OrgIncidentContactsTable />
+            <AddOrgIncidentContactModal 
+                popUp={popUp}
+                handlePopUpClose={handlePopUpClose}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+        </div>
+    );
+}
+

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsTable.tsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import {
+  faContactBook,
+  faMagnifyingGlass,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  DeleteActionModal,
+  EmptyState,
+  IconButton,
+  Input,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import {
+    useDeleteIncidentContact,
+    useGetOrgIncidentContact} from "@app/hooks/api";
+
+export const OrgIncidentContactsTable = () => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+  const { data: contacts, isLoading } = useGetOrgIncidentContact(currentOrg?._id ?? "");
+  const [searchContact, setSearchContact] = useState("");
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "removeContact",
+    "setUpEmail"
+  ] as const);
+  const { mutateAsync } = useDeleteIncidentContact();
+
+  const onRemoveIncidentContact = async () => {
+    try {
+        const incidentContactEmail = (popUp?.removeContact?.data as { email: string })?.email;
+        
+        if (!currentOrg?._id) return;
+        await mutateAsync({ 
+            orgId: currentOrg._id, 
+            email: incidentContactEmail
+        });
+
+        createNotification({
+            text: "Successfully removed incident contact",
+            type: "success"
+        });
+        
+        handlePopUpClose("removeContact");
+    } catch (err) {
+        console.error(err);
+        createNotification({
+            text: "Failed to remove incident contact",
+            type: "error"
+        });
+    }
+  };
+
+  const filteredContacts = contacts ? contacts.filter(({ email }) =>
+    email.toLocaleLowerCase().includes(searchContact)
+  ) : [];
+
+  return (
+    <div>
+        <Input
+            value={searchContact}
+            onChange={(e) => setSearchContact(e.target.value)}
+            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+            placeholder="Search incident contact by email..."
+        />
+        <TableContainer className="mt-4">
+          <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>
+      <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}
+      />
+    </div>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/index.tsx

@@ -0,0 +1,2 @@
+export { AddOrgIncidentContactModal } from "./AddOrgIncidentContactModal"
+export { OrgIncidentContactsSection } from "./OrgIncidentContactsSection";

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -1,17 +1,12 @@
 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 { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Button, FormControl, Input } from "@app/components/v2";
-
-type Props = {
-  orgName?: string;
-  onOrgNameChange: (name: string) => Promise<void>;
-};
+import { useOrganization } from "@app/context";
+import { useRenameOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
   name: yup.string().required().label("Project Name")
@@ -19,33 +14,55 @@ const formSchema = yup.object({
 
 type FormData = yup.InferType<typeof formSchema>;
 
-export const OrgNameChangeSection = ({ onOrgNameChange, orgName }: Props): JSX.Element => {
+export const OrgNameChangeSection = (): JSX.Element => {
+  const { currentOrg } = useOrganization();
+  const { createNotification } = useNotificationContext();
   const {
     handleSubmit,
     control,
-    reset,
-    formState: { isDirty, isSubmitting }
+    reset
   } = useForm<FormData>({ resolver: yupResolver(formSchema) });
-  const { t } = useTranslation();
+  const { mutateAsync, isLoading } = useRenameOrg();
 
   useEffect(() => {
-    reset({ name: orgName });
-  }, [orgName]);
+    if (currentOrg) {
+      reset({ name: currentOrg.name });
+    }
+  }, [currentOrg]);
 
   const onFormSubmit = async ({ name }: FormData) => {
-    await onOrgNameChange(name);
+    try {
+      if (!currentOrg?._id) return;
+      if (name === "") return;
+
+      await 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"
+      });
+    }
   };
 
   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">
+    <form 
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+    >
+        <p className="text-xl font-semibold text-mineshaft-100 mb-4">
+          Organization name
+        </p>
+        <div className="mb-2 max-w-md">
           <Controller
             defaultValue=""
             render={({ field, fieldState: { error } }) => (
               <FormControl isError={Boolean(error)} errorText={error?.message}>
-                <Input placeholder="Type your org name" {...field} />
+                <Input placeholder="Acme Corp" {...field} />
               </FormControl>
             )}
             control={control}
@@ -53,17 +70,13 @@ export const OrgNameChangeSection = ({ onOrgNameChange, orgName }: Props): JSX.E
           />
         </div>
         <Button
-          isLoading={isSubmitting}
-          color="primary"
+          isLoading={isLoading}
+          colorSchema="primary"
           variant="outline_bg"
-          size="sm"
           type="submit"
-          isDisabled={!isDirty || isSubmitting}
-          leftIcon={<FontAwesomeIcon icon={faCheck} />}
         >
-          {t("common.save-changes")}
+          Save
         </Button>
-      </div>
     </form>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgServiceAccountsTable/OrgServiceAccountsTable.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo,useState } from "react";
-import { Controller,useForm } from "react-hook-form";
+import { 
+    // Controller,
+    // useForm 
+} from "react-hook-form";
 import { useRouter } from "next/router";
 import { 
     faCheck, 
@@ -10,21 +13,21 @@ import {
     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 { yupResolver } from "@hookform/resolvers/yup";
+// import * as yup from "yup";
+// import { generateKeyPair } from "@app/components/utilities/cryptography/crypto";
 import {
   Button,
   DeleteActionModal,
   EmptyState,
-  FormControl,
+//   FormControl,
   IconButton,
   Input,
   Modal,
   ModalContent,
-  Select,
-  SelectItem,
+//   Select,
+//   SelectItem,
   Table,
   TableContainer,
   TableSkeleton,
@@ -37,25 +40,26 @@ import {
 import { useOrganization, useWorkspace } from "@app/context";
 import { usePopUp, useToggle } from "@app/hooks";
 import {
-    useCreateServiceAccount,
+    // useCreateServiceAccount,
     useDeleteServiceAccount,
-    useGetServiceAccounts} from "@app/hooks/api";
+    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 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")
-});
+// 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>;
+// type TAddServiceAccountForm = yup.InferType<typeof addServiceAccountFormSchema>;
 
 export const OrgServiceAccountsTable = () => {
     const router = useRouter();
@@ -67,9 +71,9 @@ export const OrgServiceAccountsTable = () => {
     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 [accessKey] = useState("");
+    const [publicKey] = useState("");
+    const [privateKey] = useState("");
     const [searchServiceAccountFilter, setSearchServiceAccountFilter] = useState("");
     const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
         "addServiceAccount",
@@ -78,7 +82,7 @@ export const OrgServiceAccountsTable = () => {
 
     const { data: serviceAccounts = [], isLoading: isServiceAccountsLoading } = useGetServiceAccounts(orgId);
     
-    const createServiceAccount = useCreateServiceAccount();
+    // const createServiceAccount = useCreateServiceAccount();
     const removeServiceAccount = useDeleteServiceAccount();
     
     useEffect(() => {
@@ -98,32 +102,32 @@ export const OrgServiceAccountsTable = () => {
         return () => clearTimeout(timer);
     }, [isAccessKeyCopied, isPublicKeyCopied, isPrivateKeyCopied]);
 
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<TAddServiceAccountForm>({ resolver: yupResolver(addServiceAccountFormSchema) });
+    // const {
+    //     control,
+    //     handleSubmit,
+    //     reset,
+    //     formState: { isSubmitting }
+    // } = useForm<TAddServiceAccountForm>({ resolver: yupResolver(addServiceAccountFormSchema) });
     
-    const onAddServiceAccount = async ({ name, expiresIn }: TAddServiceAccountForm) => {
-        if (!currentOrg?._id) return;
+    // const onAddServiceAccount = async ({ name, expiresIn }: TAddServiceAccountForm) => {
+    //     if (!currentOrg?._id) return;
 
-        const keyPair = generateKeyPair();
-        setPublicKey(keyPair.publicKey);
-        setPrivateKey(keyPair.privateKey);
+    //     const keyPair = generateKeyPair();
+    //     setPublicKey(keyPair.publicKey);
+    //     setPrivateKey(keyPair.privateKey);
         
-        const serviceAccountDetails = await createServiceAccount.mutateAsync({
-            name,
-            organizationId: currentOrg?._id,
-            publicKey: keyPair.publicKey,
-            expiresIn: Number(expiresIn)
-        });
+    //     const serviceAccountDetails = await createServiceAccount.mutateAsync({
+    //         name,
+    //         organizationId: currentOrg?._id,
+    //         publicKey: keyPair.publicKey,
+    //         expiresIn: Number(expiresIn)
+    //     });
         
-        setAccessKey(serviceAccountDetails.serviceAccountAccessKey);
+    //     setAccessKey(serviceAccountDetails.serviceAccountAccessKey);
 
-        setStep(1);
-        reset();
-    }
+    //     setStep(1);
+    //     reset();
+    // }
     
     const onRemoveServiceAccount = async () => {
         const serviceAccountId = (popUp?.removeServiceAccount?.data as { _id: string })?._id;
@@ -144,63 +148,67 @@ export const OrgServiceAccountsTable = () => {
         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> 
+                    <div>
+                        We are currently revising the service account mechanism. In the meantime,
+                        please use service tokens or API key to fetch secrets via API request.
+                    </div>
+                //    <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 (
@@ -269,27 +277,27 @@ export const OrgServiceAccountsTable = () => {
     
     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>
+            <div className="flex justify-between mb-4">
+                <p className="text-xl font-semibold text-mineshaft-100">Service Accounts</p>
                 <Button
+                    colorSchema="secondary"
                     leftIcon={<FontAwesomeIcon icon={faPlus} />}
                     onClick={() => {
                         setStep(0);
-                        reset();
+                        // reset();
                         handlePopUpOpen("addServiceAccount");
                     }}
                 >
                     Add Service Account
                 </Button>
             </div>
-            <TableContainer>
+            <Input 
+                value={searchServiceAccountFilter}
+                onChange={(e) => setSearchServiceAccountFilter(e.target.value)}
+                leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+                placeholder="Search service accounts..."
+            />
+            <TableContainer className="mt-4">
                 <Table>
                     <THead>
                         <Th>Name</Th>
@@ -345,7 +353,7 @@ export const OrgServiceAccountsTable = () => {
                 isOpen={popUp?.addServiceAccount?.isOpen}
                 onOpenChange={(isOpen) => {
                     handlePopUpToggle("addServiceAccount", isOpen);
-                    reset();
+                    // reset();
                 }}
             >
                 <ModalContent

frontend/src/views/Settings/OrgSettingsPage/components/index.tsx

@@ -1,5 +1,3 @@
-export { OrgIncidentContactsTable } from "./OrgIncidentContactsTable";
-export { OrgMembersTable } from "./OrgMembersTable";
+export { OrgIncidentContactsSection } from "./OrgIncidentContactsSection";
 export { OrgNameChangeSection } from "./OrgNameChangeSection";
-export { OrgServiceAccountsTable } from "./OrgServiceAccountsTable";
-
+export { OrgServiceAccountsTable } from "./OrgServiceAccountsTable";

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/APIKeySection.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from "react-i18next";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button } from "@app/components/v2";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { AddAPIKeyModal } from "./AddAPIKeyModal";
+import { APIKeyTable } from "./APIKeyTable";
+
+export const APIKeySection = () => {
+    const { t } = useTranslation();
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+        "addAPIKey"
+    ] as const);
+
+    return (
+        <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")}
+                </p>
+                <Button
+                    colorSchema="secondary"
+                    type="submit"
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    onClick={() => handlePopUpOpen("addAPIKey")}
+                >
+                    Add API Key
+                </Button>
+            </div>
+            <APIKeyTable />
+            <AddAPIKeyModal 
+                popUp={popUp}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/APIKeyTable.tsx

@@ -0,0 +1,112 @@
+import { faKey,faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import {
+    useDeleteAPIKey,
+    useGetMyAPIKeys} from "@app/hooks/api";
+
+export const APIKeyTable = () => {
+    const { createNotification } = useNotificationContext();
+    const { data, isLoading } = useGetMyAPIKeys();
+    const { mutateAsync } = useDeleteAPIKey();
+
+    const handleDeleteAPIKeyDataClick = async (apiKeyDataId: string) => {
+        try {
+            await mutateAsync(apiKeyDataId);
+            createNotification({
+                text: "Successfully deleted API key",
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to delete API key",
+                type: "error"
+            });
+        }
+    }
+    
+    const formatDate = (dateToFormat: string) => {
+        const date = new Date(dateToFormat);
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        
+        const formattedDate = `${day}/${month}/${year}`;
+        
+        return formattedDate;
+    }
+    
+    return (
+        <div>
+            <TableContainer className="">
+                <Table>
+                    <THead>
+                        <Tr>
+                            <Th className="flex-1">Name</Th>
+                            <Th className="flex-1">Last active</Th>
+                            <Th className="flex-1">Created</Th>
+                            <Th className="flex-1">Expiration</Th>
+                            <Th className="w-5" />
+                        </Tr>
+                    </THead>
+                    <TBody>
+                        {isLoading && <TableSkeleton columns={4} key="api-keys" />}
+                        {!isLoading && data && data.length > 0 && data.map(({
+                            _id,
+                            name,
+                            createdAt,
+                            expiresAt,
+                            lastUsed
+                        }) => {
+                            return (
+                                <Tr className="h-10" key={`api-key-${_id}`}>
+                                    <Td>{name}</Td>
+                                    <Td>{formatDate(lastUsed)}</Td>
+                                    <Td>{formatDate(createdAt)}</Td>
+                                    <Td>{formatDate(expiresAt)}</Td>
+                                    <Td>
+                                        <IconButton
+                                            onClick={async () => {
+                                                await handleDeleteAPIKeyDataClick(_id);
+                                            }}
+                                            size="lg"
+                                            colorSchema="danger"
+                                            variant="plain"
+                                            ariaLabel="update"
+                                        >
+                                            <FontAwesomeIcon icon={faXmark} />
+                                        </IconButton>
+                                    </Td>
+                                </Tr>
+                            );
+                        })}
+                        {!isLoading && data && data?.length === 0 && (
+                            <Tr>
+                                <Td colSpan={5}>
+                                    <EmptyState 
+                                        title="No API Keys on file" 
+                                        icon={faKey}
+                                    />
+                                </Td>
+                            </Tr>
+                        )}
+                    </TBody>
+                </Table>
+            </TableContainer>
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/AddAPIKeyModal.tsx

@@ -0,0 +1,197 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { useCreateAPIKey } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const expirations = [
+    { label: "1 day", value: "1d" },
+    { label: "7 days", value: "7d" },
+    { label: "1 month", value: "1mo" },
+    { label: "6 months", value: "6mo" },
+    { label: "12 months", value: "12mo" }
+];
+
+const expirationMapping: { [key: string]: number } = {
+    "1d": 86400,
+    "7d": 604800,
+    "1mo": 2592000,
+    "6mo": 15552000,
+    "12mo": 31104000
+}
+
+const schema = yup.object({
+    name: yup.string().required("API Key name is required"),
+    expiresIn: yup.string().required("API Key expiration window is required")
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["addAPIKey"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addAPIKey"]>, state?: boolean) => void;
+};
+
+export const AddAPIKeyModal = ({
+    popUp,
+    handlePopUpToggle
+}: Props) => {
+    const [newAPIKey, setNewAPIKey] = useState("");
+    const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
+    const { createNotification } = useNotificationContext();
+    const { mutateAsync, isLoading } = useCreateAPIKey();
+    
+    const {
+        control,
+        handleSubmit,
+        reset
+    } = useForm<FormData>({
+        resolver: yupResolver(schema)
+    });
+
+    useEffect(() => {
+        let timer: NodeJS.Timeout;
+
+        if (isAPIKeyCopied) {
+            timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
+        }
+
+        return () => clearTimeout(timer);
+  }, [setIsAPIKeyCopied]);
+
+    const copyTokenToClipboard = () => {
+        navigator.clipboard.writeText(newAPIKey);
+        setIsAPIKeyCopied.on();
+    };
+
+    const onFormSubmit = async ({ name, expiresIn }: FormData) => {
+        try {
+            const { apiKey } = await mutateAsync({
+                name,
+                expiresIn: expirationMapping[expiresIn]
+            });
+            
+            setNewAPIKey(apiKey);
+
+            createNotification({
+                text: "Successfully created API key",
+                type: "success"
+            });
+            
+            reset();
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to create API key",
+                type: "error"
+            });
+        }
+    }
+    
+    const hasAPIKey = Boolean(newAPIKey);
+    
+    return (
+        <Modal
+            isOpen={popUp?.addAPIKey?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("addAPIKey", isOpen);
+                reset();
+                setNewAPIKey("");
+            }}
+        >
+            <ModalContent title="Create API Key">
+            {!hasAPIKey ? (
+                <form onSubmit={handleSubmit(onFormSubmit)}>
+                    <Controller
+                        control={control}
+                        defaultValue=""
+                        name="name"
+                        render={({ field, fieldState: { error } }) => (
+                            <FormControl
+                                label="Name"
+                                isError={Boolean(error)}
+                                errorText={error?.message}
+                            >
+                            <Input 
+                                {...field} 
+                                placeholder="My API Key"
+                            />
+                            </FormControl>
+                        )}
+                    />
+                    <Controller
+                        control={control}
+                        name="expiresIn"
+                        defaultValue="6mo"
+                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                            <FormControl
+                                label="Expiration"
+                                errorText={error?.message}
+                                isError={Boolean(error)}
+                            >
+                                <Select
+                                    defaultValue={field.value}
+                                    {...field}
+                                    onValueChange={(e) => onChange(e)}
+                                    className="w-full"
+                                >
+                                    {expirations.map(({ label, value }) => (
+                                        <SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
+                                            {label}
+                                        </SelectItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        )}
+                    />
+                    <div className="mt-8 flex items-center">
+                    <Button
+                        className="mr-4"
+                        size="sm"
+                        type="submit"
+                        isLoading={isLoading}
+                        isDisabled={isLoading}
+                    >
+                        Add
+                    </Button>
+                    <Button colorSchema="secondary" variant="plain">
+                        Cancel
+                    </Button>
+                    </div>
+                </form>
+            ) : (
+                <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">{newAPIKey}</p>
+                  <IconButton
+                    ariaLabel="copy icon"
+                    colorSchema="secondary"
+                    className="group relative"
+                    onClick={copyTokenToClipboard}
+                  >
+                    <FontAwesomeIcon icon={isAPIKeyCopied ? 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> 
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/index.tsx

@@ -0,0 +1,2 @@
+
+export { APIKeySection } from "./APIKeySection";

frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/ChangeLanguageSection.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
+
+import ListBox from "@app/components/basic/Listbox";
+
+export const ChangeLanguageSection = () => {
+    const { t, i18n } = useTranslation();
+    const router = useRouter();
+    const lang = router.locale ?? "en";
+
+    const setLanguage = async (to: string) => {
+        router.push(router.asPath, router.asPath, { locale: to });
+        localStorage.setItem("lang", to);
+        i18n.changeLanguage(to);
+    };
+
+    return (
+        <div 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">
+                {t("settings.personal.change-language")}
+            </p>
+            <div className="w-28">
+                <ListBox
+                    isSelected={lang}
+                    onChange={setLanguage}
+                    data={["en", "ko", "fr", "es"]}
+                    text={`${t("common.language")}: `}
+                />
+            </div>
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/index.tsx

@@ -0,0 +1 @@
+export { ChangeLanguageSection } from "./ChangeLanguageSection";

frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/ChangePasswordSection.tsx

@@ -0,0 +1,166 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { useTranslation } from "react-i18next";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import attemptChangePassword from "@app/components/utilities/attemptChangePassword";
+import checkPassword from "@app/components/utilities/checks/checkPassword";
+import { 
+    Button,
+    FormControl,
+    Input
+} from "@app/components/v2";
+import { useUser } from "@app/context";
+import { useGetCommonPasswords } from "@app/hooks/api";
+
+type Errors = {
+  length?: string,
+  upperCase?: string,
+  lowerCase?: string,
+  number?: string,
+  specialChar?: string,
+  repeatedChar?: string,
+};
+
+const schema = yup.object({
+    oldPassword: yup.string().required("Old password is required"),
+    newPassword: yup.string().required("New password is required")
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+export const ChangePasswordSection = () => {
+    const { t } = useTranslation();
+    const { createNotification } = useNotificationContext();
+    const { user } = useUser();
+    const { data: commonPasswords } = useGetCommonPasswords();
+    const { reset, control, handleSubmit } = useForm({
+        defaultValues: {
+            oldPassword: "",
+            newPassword: ""
+        },
+        resolver: yupResolver(schema)
+    });
+    const [errors, setErrors] = useState<Errors>({});
+    const [isLoading, setIsLoading] = useState(false);
+
+    const onFormSubmit = async ({ oldPassword, newPassword }: FormData) => {
+        try {
+            if (!user?.email) return;
+            if (!commonPasswords) return;
+            
+            const errorCheck = checkPassword({
+                password: newPassword,
+                commonPasswords,
+                setErrors
+            });
+
+            if (errorCheck) return;
+            
+            setIsLoading(true);
+            await attemptChangePassword({
+                email: user.email,
+                currentPassword: oldPassword,
+                newPassword
+            });
+            
+            setIsLoading(false);
+            createNotification({
+                text: "Successfully changed password",
+                type: "success"
+            });
+
+            reset();
+            window.location.href = "/login";
+        
+        } catch (err) {
+            console.error(err);
+            setIsLoading(false);
+            createNotification({
+                text: "Failed to change password",
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <form 
+            onSubmit={handleSubmit(onFormSubmit)}
+            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
+            </h2>
+            <div className="max-w-md">
+                <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl isError={Boolean(error)} errorText={error?.message}>
+                            <Input 
+                                placeholder="Old password" 
+                                type="password"
+                                {...field} 
+                                className="bg-mineshaft-800" 
+                            />
+                        </FormControl>
+                    )}
+                    control={control}
+                    name="oldPassword"
+                />
+            </div>
+            <div className="max-w-md">
+                <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl isError={Boolean(error)} errorText={error?.message}>
+                            <Input 
+                                placeholder="New password" 
+                                type="password"
+                                {...field} 
+                                className="bg-mineshaft-800" 
+                            />
+                        </FormControl>
+                    )}
+                    control={control}
+                    name="newPassword"
+                />
+            </div>
+            {Object.keys(errors).length > 0 && (
+                <div className="my-4 max-w-md flex flex-col items-start rounded-md bg-white/5 px-2 py-2">
+                    <div className="mb-2 text-sm text-gray-400">{t("section.password.validate-base")}</div> 
+                    {Object.keys(errors).map((key) => {
+                        if (errors[key as keyof Errors]) {
+                            return (
+                                <div className="ml-1 flex flex-row items-top justify-start" key={key}>
+                                    <div>
+                                        <FontAwesomeIcon 
+                                            icon={faXmark} 
+                                            className="text-md text-red ml-0.5 mr-2.5"
+                                        />
+                                    </div>
+                                    <p className="text-gray-400 text-sm">
+                                        {errors[key as keyof Errors]} 
+                                    </p>
+                                </div>
+                            );
+                        }
+
+                        return null;
+                    })}
+                </div>
+            )}
+            <Button
+                type="submit"
+                colorSchema="secondary"
+                isLoading={isLoading}
+                isDisabled={isLoading}
+            >
+                Save
+            </Button>
+        </form>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/index.tsx

@@ -0,0 +1 @@
+export { ChangePasswordSection } from "./ChangePasswordSection";

frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/EmergencyKitSection.tsx

@@ -0,0 +1,91 @@
+import { Controller, useForm } from "react-hook-form"; 
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
+import { 
+    Button,
+    FormControl,
+    Input
+} from "@app/components/v2";
+import { useUser } from "@app/context";
+
+const schema = yup.object({
+    password: yup.string().required("Password is required")
+}).required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+export const EmergencyKitSection = () => {
+    const { createNotification } = useNotificationContext();
+    const { user } = useUser();
+    const { reset, control, handleSubmit } = useForm({
+        defaultValues: {
+            password: "",
+        },
+        resolver: yupResolver(schema)
+    });
+    
+    const onFormSubmit = ({
+        password
+    }: FormData) => {
+        try {
+            if (!user?.email) return;
+
+            issueBackupKey({
+                email: user.email,
+                password,
+                personalName: `${user.firstName} ${user.lastName}`,
+                setBackupKeyError: () => {},
+                setBackupKeyIssued: () => {}
+            });
+            
+            reset();
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to download emergency kit",
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <form 
+            onSubmit={handleSubmit(onFormSubmit)}
+            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
+            </h2>
+            <p className="text-gray-400 mb-8">
+                The kit contains information you can use to recover your account.
+            </p>
+            <div className="max-w-md">
+                <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl isError={Boolean(error)} errorText={error?.message}>
+                            <Input 
+                                placeholder="Password" 
+                                type="password"
+                                {...field} 
+                                className="bg-mineshaft-800" 
+                            />
+                        </FormControl>
+                    )}
+                    control={control}
+                    name="password"
+                />
+            </div>
+            <Button
+                type="submit"
+                colorSchema="secondary"
+                isLoading={false}
+            >
+                Save
+            </Button>
+        </form>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/index.tsx

@@ -0,0 +1 @@
+export { EmergencyKitSection } from "./EmergencyKitSection";

frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/PersonalAPIKeyTab.tsx

@@ -0,0 +1,7 @@
+import { APIKeySection } from "../APIKeySection";
+
+export const PersonalAPIKeyTab = () => {
+    return (
+        <APIKeySection />
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/index.tsx

@@ -0,0 +1 @@
+export { PersonalAPIKeyTab } from "./PersonalAPIKeyTab";

frontend/src/views/Settings/PersonalSettingsPage/PersonalSecurityTab/PersonalSecurityTab.tsx

@@ -0,0 +1,19 @@
+import { ChangeLanguageSection } from "../ChangeLanguageSection";
+import { ChangePasswordSection } from "../ChangePasswordSection";
+import { EmergencyKitSection } from "../EmergencyKitSection";
+import { SecuritySection } from "../SecuritySection";
+import { SessionsSection } from "../SessionsSection";
+import { UserNameSection } from "../UserNameSection";
+
+export const PersonalSecurityTab = () => {
+    return (
+        <div>
+            <UserNameSection />
+            <ChangeLanguageSection />
+            <SecuritySection />
+            <SessionsSection />
+            <ChangePasswordSection />
+            <EmergencyKitSection />
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/PersonalSecurityTab/index.tsx

@@ -0,0 +1 @@
+export { PersonalSecurityTab } from "./PersonalSecurityTab";

frontend/src/views/Settings/PersonalSettingsPage/PersonalSettingsPage.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+
+import { PersonalTabGroup } from "./PersonalTabGroup";
+
+export const PersonalSettingsPage = () => {
+    const { t } = useTranslation();
+    return (
+        <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>
+                </div>
+                <PersonalTabGroup />
+            </div>
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/PersonalTabGroup.tsx

@@ -0,0 +1,39 @@
+import { Fragment } from "react"
+import { Tab } from "@headlessui/react"
+
+import { PersonalAPIKeyTab } from "../PersonalAPIKeyTab";
+import { PersonalSecurityTab } from "../PersonalSecurityTab";
+
+const tabs = [
+    { name: "General", key: "tab-account-security" },
+    { name: "API Keys", key: "tab-account-api-keys" }
+];
+
+export const PersonalTabGroup = () => {
+    return (
+        <Tab.Group>
+            <Tab.List className="mb-4 border-b-2 border-mineshaft-800 w-full">
+                {tabs.map((tab) => (
+                    <Tab as={Fragment} key={tab.key}> 
+                        {({ selected }) => (
+                            <button 
+                                type="button"
+                                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>
+                        )}
+                    </Tab>
+                ))}
+            </Tab.List>
+            <Tab.Panels>
+                <Tab.Panel>
+                    <PersonalSecurityTab />
+                </Tab.Panel>
+                <Tab.Panel>
+                    <PersonalAPIKeyTab />
+                </Tab.Panel>
+            </Tab.Panels>
+        </Tab.Group>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/index.tsx

@@ -0,0 +1 @@
+export { PersonalTabGroup } from "./PersonalTabGroup";

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection.tsx

@@ -51,8 +51,8 @@ export const SecuritySection = () => {
   return (
     <>
     <form>
-      <div className="mb-6 mt-2 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
-        <p className="mb-4 mt-2 text-xl font-semibold">
+      <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>
         <Checkbox

frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsSection.tsx

@@ -0,0 +1,44 @@
+import { faBan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+    Button
+} from "@app/components/v2";
+import { useRevokeMySessions } from "@app/hooks/api";
+
+import { SessionsTable } from "./SessionsTable";
+
+export const SessionsSection = () => {
+    const { mutateAsync } = useRevokeMySessions();
+    
+    const onRevokeAllSessionsClick = async () => {
+        try {
+            await mutateAsync();
+            window.location.href = "/login";
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (
+        <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
+                </h2>
+               <Button
+                    colorSchema="secondary"
+                    type="submit"
+                    leftIcon={<FontAwesomeIcon icon={faBan} />}
+                    onClick={onRevokeAllSessionsClick}
+                >
+                    Revoke all
+                </Button> 
+            </div>
+            <p className="text-gray-400 mb-8">
+                Logging into Infisical via browser or CLI creates a session. Revoking all sessions logs your account out all active sessions across all browsers and CLIs.
+            </p>
+            <SessionsTable />
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsTable.tsx

@@ -0,0 +1,74 @@
+import { faServer } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useGetMySessions } from "@app/hooks/api";
+
+export const SessionsTable = () => {
+    const { data, isLoading } = useGetMySessions();
+
+    const formatDate = (dateToFormat: string) => {
+        const date = new Date(dateToFormat);
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        
+        const formattedDate = `${day}/${month}/${year}`;
+        
+        return formattedDate;
+    }
+    
+    return (
+        <TableContainer className="mt-4">
+            <Table>
+                <THead>
+                    <Tr>
+                        <Th>Created</Th>
+                        <Th>Last active</Th>
+                        <Th>IP address</Th>
+                        <Th>Device</Th>
+                    </Tr> 
+                </THead>
+                <TBody>
+                    {isLoading && <TableSkeleton columns={4} key="sesssions" />}
+                    {!isLoading && data && data.length > 0 && data.map(({
+                        _id,
+                        createdAt,
+                        lastUsed,
+                        ip,
+                        userAgent
+                    }) => {
+                        return (
+                            <Tr className="h-10" key={`session-${_id}`}>
+                                <Td>{formatDate(createdAt)}</Td>
+                                <Td>{formatDate(lastUsed)}</Td>
+                                <Td>{ip}</Td>
+                                <Td>{userAgent}</Td>
+                            </Tr>
+                        );
+                    })}
+                    {!isLoading && data && data?.length === 0 && (
+                        <Tr>
+                            <Td colSpan={4}>
+                                <EmptyState 
+                                    title="No sessions on file" 
+                                    icon={faServer}
+                                />
+                            </Td>
+                        </Tr>
+                    )}
+                </TBody>
+            </Table>
+        
+        </TableContainer>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/index.tsx

@@ -0,0 +1 @@
+export { SessionsSection } from "./SessionsSection";

frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/UserNameSection.tsx

@@ -0,0 +1,82 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useUser } from "@app/context";
+import { useRenameUser } from "@app/hooks/api/users/queries";
+
+const formSchema = yup.object({
+  name: yup.string().required().label("User Name"),
+});
+
+type FormData = yup.InferType<typeof formSchema>;
+
+export const UserNameSection = (): JSX.Element => {
+  const { user } = useUser();
+  const { createNotification } = useNotificationContext();
+  const {
+    handleSubmit,
+    control,
+    reset
+  } = useForm<FormData>({ resolver: yupResolver(formSchema) });
+  const { mutateAsync, isLoading } = useRenameUser();
+
+  useEffect(() => {
+    if (user) {
+      reset({ name: `${user?.firstName}${user?.lastName && " "}${user?.lastName}` });
+    }
+  }, [user]);
+
+  const onFormSubmit = async ({ name }: FormData) => {
+    try {
+      if (!user?._id) return;
+      if (name === "") return;
+
+      await mutateAsync({ newName: name});
+      createNotification({
+        text: "Successfully renamed user",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to rename user",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form 
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+    >
+        <p className="text-xl font-semibold text-mineshaft-100 mb-4">
+          User name
+        </p>
+        <div className="mb-2 max-w-md">
+          <Controller
+            defaultValue=""
+            render={({ field, fieldState: { error } }) => (
+              <FormControl isError={Boolean(error)} errorText={error?.message}>
+                <Input placeholder={`${user?.firstName} ${user?.lastName}`} {...field} />
+              </FormControl>
+            )}
+            control={control}
+            name="name"
+          />
+        </div>
+        <Button
+          isLoading={isLoading}
+          colorSchema="primary"
+          variant="outline_bg"
+          type="submit"
+        >
+          Save
+        </Button>
+    </form>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/index.tsx

@@ -0,0 +1 @@
+export { UserNameSection } from "./UserNameSection";

frontend/src/views/Settings/PersonalSettingsPage/index.tsx

@@ -0,0 +1 @@
+export { PersonalSettingsPage } from "./PersonalSettingsPage";

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -1,443 +1,57 @@
-import crypto from "crypto";
-
-import { useState } from "react";
+import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
-import { useRouter } from "next/router";
+import { Tab } from "@headlessui/react";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
-// TODO(akhilmhdh):Refactor this into a better utility module package
-import {
-  decryptAssymmetric,
-  decryptSymmetric,
-  encryptSymmetric
-} from "@app/components/utilities/cryptography/crypto";
-import { Button, FormControl, Input } from "@app/components/v2";
-import { useSubscription, useWorkspace } from "@app/context";
-import { useToggle } from "@app/hooks";
-import {
-  useCreateServiceToken,
-  useCreateWsEnvironment,
-  useCreateWsTag,
-  useDeleteServiceToken,
-  useDeleteWorkspace,
-  useDeleteWsEnvironment,
-  useDeleteWsTag,
-  useGetUserWsKey,
-  useGetUserWsServiceTokens,
-  useGetWorkspaceIndexStatus,
-  useGetWorkspaceSecrets,
-  useGetWsTags,
-  useNameWorkspaceSecrets,
-  useRenameWorkspace,
-  useToggleAutoCapitalization,
-  useUpdateWsEnvironment
-} from "@app/hooks/api";
 
-import { AutoCapitalizationSection } from "./components/AutoCapitalizationSection/AutoCapitalizationSection";
-import { SecretTagsSection } from "./components/SecretTagsSection";
-import {
-  CopyProjectIDSection,
-  CreateServiceToken,
-  CreateUpdateEnvFormData,
-  CreateWsTag,
-  E2EESection,
-  EnvironmentSection,
-  ProjectIndexSecretsSection,
-  ProjectNameChangeSection,
-  ServiceTokenSection} from "./components";
+import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
+import { ProjectServiceTokensTab } from "./components/ProjectServiceTokensTab";
+import { WebhooksTab } from "./components/WebhooksTab";
+
+const tabs = [
+  { name: "General", key: "tab-project-general" },
+  { name: "Service Tokens", key: "tab-project-service-tokens" },
+  { name: "Webhooks", key: "tab-project-webhooks" }
+];
 
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
-  const { currentWorkspace, workspaces, isLoading: isWorkspaceLoading } = useWorkspace();
-  const router = useRouter();
-
-  const workspaceID = currentWorkspace?._id || "";
-  const { createNotification } = useNotificationContext();
-  // delete action worksapce
-  const [deleteProjectInput, setDeleteProjectInput] = useState("");
-  const [isDeleting, setIsDeleting] = useToggle();
-
-  const renameWorkspace = useRenameWorkspace();
-  const nameWorkspaceSecrets = useNameWorkspaceSecrets();
-  const toggleAutoCapitalization = useToggleAutoCapitalization();
-
-  const deleteWorkspace = useDeleteWorkspace();
-  // env crud operation
-  const createWsEnv = useCreateWsEnvironment();
-  const updateWsEnv = useUpdateWsEnvironment();
-  const deleteWsEnv = useDeleteWsEnvironment();
-
-  const { data: isBlindIndexed, isLoading: isBlindIndexedLoading } =
-    useGetWorkspaceIndexStatus(workspaceID);
-
-  // service token
-  const { data: serviceTokens, isLoading: isServiceTokenLoading } = useGetUserWsServiceTokens({
-    workspaceID: currentWorkspace?._id || ""
-  });
-
-  const { data: latestFileKey } = useGetUserWsKey(workspaceID);
-  const { data: encryptedSecrets } = useGetWorkspaceSecrets(workspaceID);
-
-  const createServiceToken = useCreateServiceToken();
-  const deleteServiceToken = useDeleteServiceToken();
-
-  // tag
-  const { data: wsTags, isLoading: isTagLoading } = useGetWsTags(workspaceID);
-  const createWsTag = useCreateWsTag();
-  const deleteWsTag = useDeleteWsTag();
-
-  // get user subscription
-  const { subscription } = useSubscription();
-  
-  const isEnvServiceAllowed = (subscription?.environmentLimit && currentWorkspace?.environments) ? (currentWorkspace.environments.length < subscription.environmentLimit) : true;
-
-  const onRenameWorkspace = async (name: string) => {
-    try {
-      await renameWorkspace.mutateAsync({ workspaceID, newWorkspaceName: name });
-      createNotification({
-        text: "Successfully renamed workspace",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to rename workspace",
-        type: "error"
-      });
-    }
-  };
-
-  const onAutoCapitalizationToggle = async (state: boolean) => {
-    try {
-      await toggleAutoCapitalization.mutateAsync({
-        workspaceID,
-        state
-      });
-      const text = `Successfully ${state ? "enabled" : "disabled"} auto capitalization`;
-      createNotification({
-        text,
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to update auto capitalization",
-        type: "error"
-      });
-    }
-  };
-
-  const onDeleteWorkspace = async () => {
-    setIsDeleting.on();
-    try {
-      await deleteWorkspace.mutateAsync({ workspaceID });
-      // redirect user to first workspace user is part of
-      const ws = workspaces.find(({ _id }) => _id !== workspaceID);
-      if (!ws) {
-        router.push("/noprojects");
-      }
-      router.push(`/dashboard/${ws?._id}`);
-      createNotification({
-        text: "Successfully deleted workspace",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to delete workspace",
-        type: "error"
-      });
-    } finally {
-      setIsDeleting.off();
-    }
-  };
-
-  // workspace environment operation
-  const onCreateWsEnv = async ({ environmentName, environmentSlug }: CreateUpdateEnvFormData) => {
-    try {
-      await createWsEnv.mutateAsync({ workspaceID, environmentName, environmentSlug });
-      createNotification({
-        text: "Successfully created environment",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to create environment",
-        type: "error"
-      });
-    }
-  };
-
-  const onUpdateWsEnv = async (
-    oldEnvironmentSlug: string,
-    { environmentName, environmentSlug }: CreateUpdateEnvFormData
-  ) => {
-    try {
-      await updateWsEnv.mutateAsync({
-        workspaceID,
-        environmentName,
-        environmentSlug,
-        oldEnvironmentSlug
-      });
-      createNotification({
-        text: "Successfully updated environment",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to update environment",
-        type: "error"
-      });
-    }
-  };
-
-  const onDeleteWsEnv = async (environmentSlug: string) => {
-    try {
-      await deleteWsEnv.mutateAsync({
-        workspaceID,
-        environmentSlug
-      });
-      createNotification({
-        text: "Successfully deleted environment",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to delete environment",
-        type: "error"
-      });
-    }
-  };
-
-  const onCreateServiceToken = async ({
-    environment,
-    expiresIn,
-    name,
-    permissions,
-    secretPath
-  }: CreateServiceToken) => {
-    // type guard
-    if (!latestFileKey) return "";
-    try {
-      const key = decryptAssymmetric({
-        ciphertext: latestFileKey.encryptedKey,
-        nonce: latestFileKey.nonce,
-        publicKey: latestFileKey.sender.publicKey,
-        privateKey: localStorage.getItem("PRIVATE_KEY") as string
-      });
-
-      const randomBytes = crypto.randomBytes(16).toString("hex");
-
-      const { ciphertext, iv, tag } = encryptSymmetric({
-        plaintext: key,
-        key: randomBytes
-      });
-
-      const res = await createServiceToken.mutateAsync({
-        encryptedKey: ciphertext,
-        iv,
-        tag,
-        environment,
-        secretPath,
-        expiresIn: Number(expiresIn),
-        name,
-        workspaceId: workspaceID,
-        randomBytes,
-        permissions: Object.entries(permissions)
-          .filter(([, permissionsValue]) => permissionsValue)
-          .map(([permissionsKey]) => permissionsKey)
-      });
-
-      createNotification({
-        text: "Successfully created a service token",
-        type: "success"
-      });
-      return res.serviceToken;
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to create a service token",
-        type: "error"
-      });
-    }
-    return "";
-  };
-
-  const onCreateWsTag = async ({ name }: CreateWsTag) => {
-    try {
-      const res = await createWsTag.mutateAsync({
-        workspaceID,
-        tagName: name,
-        tagSlug: name.replace(" ", "_")
-      });
-      createNotification({
-        text: "Successfully created a tag",
-        type: "success"
-      });
-      return res.name;
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to create a tag",
-        type: "error"
-      });
-    }
-    return "";
-  };
-
-  const onDeleteTag = async (tagID: string) => {
-    try {
-      await deleteWsTag.mutateAsync({ tagID });
-      createNotification({
-        text: "Successfully deleted tag",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to delete the tag",
-        type: "error"
-      });
-    }
-  };
-
-  const onDeleteServiceToken = async (tokenID: string) => {
-    try {
-      await deleteServiceToken.mutateAsync(tokenID);
-      createNotification({
-        text: "Successfully revoked service token",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to delete service token",
-        type: "error"
-      });
-    }
-  };
-
-  const onEnableBlindIndices = async () => {
-    if (!currentWorkspace?._id) return;
-    if (!encryptedSecrets) return;
-    if (!latestFileKey) return;
-
-    const key = decryptAssymmetric({
-      ciphertext: latestFileKey.encryptedKey,
-      nonce: latestFileKey.nonce,
-      publicKey: latestFileKey.sender.publicKey,
-      privateKey: localStorage.getItem("PRIVATE_KEY") as string
-    });
-
-    const secretsToUpdate = encryptedSecrets.map((encryptedSecret) => {
-      const secretName = decryptSymmetric({
-        ciphertext: encryptedSecret.secretKeyCiphertext,
-        iv: encryptedSecret.secretKeyIV,
-        tag: encryptedSecret.secretKeyTag,
-        key
-      });
-
-      return {
-        secretName,
-        _id: encryptedSecret._id
-      };
-    });
-
-    await nameWorkspaceSecrets.mutateAsync({
-      workspaceId: currentWorkspace._id,
-      secretsToUpdate
-    });
-  };
-
   return (
-    <div className="dark container mx-auto flex flex-col px-8 text-mineshaft-50 dark:[color-scheme:dark]">
-      {/* TODO(akhilmhdh): Remove this right when layout is refactored  */}
-      <div className="relative right-5">
-        <NavHeader pageName={t("settings.project.title")} isProjectRelated />
-      </div>
-      <div className="my-8 flex max-w-5xl flex-row items-center justify-between text-xl">
-        <div className="flex flex-col items-start justify-start text-3xl">
-          <p className="mr-4 font-semibold text-gray-200">{t("settings.project.title")}</p>
-          <p className="mr-4 text-base font-normal text-gray-400">
-            {t("settings.project.description")}
-          </p>
+    <div className="flex h-full w-full justify-center bg-bunker-800 px-6 text-white">
+      <div className="w-full max-w-screen-lg">
+        <div className="relative right-5 ml-4">
+          <NavHeader pageName={t("settings.project.title")} isProjectRelated />
         </div>
-      </div>
-      <ProjectNameChangeSection
-        workspaceName={currentWorkspace?.name}
-        onProjectNameChange={onRenameWorkspace}
-      />
-      <CopyProjectIDSection workspaceID={currentWorkspace?._id || ""} />
-      <EnvironmentSection
-        isLoading={isWorkspaceLoading}
-        environments={currentWorkspace?.environments || []}
-        onCreate={onCreateWsEnv}
-        onDelete={onDeleteWsEnv}
-        onUpdate={onUpdateWsEnv}
-        isEnvServiceAllowed={isEnvServiceAllowed}
-      />
-      <ServiceTokenSection
-        isLoading={isServiceTokenLoading}
-        tokens={serviceTokens || []}
-        environments={currentWorkspace?.environments || []}
-        onDeleteToken={onDeleteServiceToken}
-        workspaceName={currentWorkspace?.name || ""}
-        onCreateToken={onCreateServiceToken}
-      />
-      <SecretTagsSection
-        isLoading={isTagLoading}
-        tags={wsTags || []}
-        onDeleteTag={onDeleteTag}
-        workspaceName={currentWorkspace?.name || ""}
-        onCreateTag={onCreateWsTag}
-      />
-      <AutoCapitalizationSection
-        workspaceAutoCapitalization={currentWorkspace?.autoCapitalization}
-        onAutoCapitalizationChange={onAutoCapitalizationToggle}
-      />
-      {!isBlindIndexedLoading && !isBlindIndexed && (
-        <ProjectIndexSecretsSection 
-          onEnableBlindIndices={onEnableBlindIndices} 
-        />
-      )}
-      <E2EESection 
-        workspaceId={currentWorkspace?._id || ""}
-      />
-      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md border-l border-red bg-mineshaft-900 px-6 pl-6 pb-4 pt-4">
-        <p className="text-xl font-bold text-red">{t("settings.project.danger-zone")}</p>
-        <p className="text-md mt-2 text-gray-400">{t("settings.project.danger-zone-note")}</p>
-        <div className="mr-auto mt-4 max-h-28 w-full max-w-md">
-          <FormControl
-            label={
-              <div className="mb-0.5 text-sm font-normal text-gray-400">
-                Type <span className="font-bold">{currentWorkspace?.name}</span> to delete the
-                workspace
-              </div>
-            }
-          >
-            <Input
-              onChange={(e) => setDeleteProjectInput(e.target.value)}
-              value={deleteProjectInput}
-              placeholder="Type the project name to delete"
-              className="bg-mineshaft-800"
-            />
-          </FormControl>
+        <div className="my-8">
+          <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
         </div>
-        <Button
-          colorSchema="danger"
-          onClick={onDeleteWorkspace}
-          isDisabled={deleteProjectInput !== currentWorkspace?.name || isDeleting}
-          isLoading={isDeleting}
-        >
-          {t("settings.project.delete-project")}
-        </Button>
-        <p className="mt-3 ml-0.5 text-xs text-gray-500">
-          {t("settings.project.delete-project-note")}
-        </p>
+        <Tab.Group>
+          <Tab.List className="mb-4 w-full border-b-2 border-mineshaft-800">
+            {tabs.map((tab) => (
+              <Tab as={Fragment} key={tab.key}>
+                {({ selected }) => (
+                  <button
+                    type="button"
+                    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>
+                )}
+              </Tab>
+            ))}
+          </Tab.List>
+          <Tab.Panels>
+            <Tab.Panel>
+              <ProjectGeneralTab />
+            </Tab.Panel>
+            <Tab.Panel>
+              <ProjectServiceTokensTab />
+            </Tab.Panel>
+            <Tab.Panel>
+              <WebhooksTab />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
       </div>
     </div>
   );

frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx

@@ -1,26 +1,48 @@
 import { useTranslation } from "react-i18next";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Checkbox } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useToggleAutoCapitalization } from "@app/hooks/api"; 
 
-type Props = {
-  workspaceAutoCapitalization?: boolean;
-  onAutoCapitalizationChange: (state: boolean) => Promise<void>;
-};
-
-export const AutoCapitalizationSection = ({
-  workspaceAutoCapitalization,
-  onAutoCapitalizationChange
-}: Props) => {
+export const AutoCapitalizationSection = () => {
   const { t } = useTranslation();
+  const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync } = useToggleAutoCapitalization();
+  
+  const handleToggleCapitalizationToggle = async (state: boolean) => {
+    try {
+      if (!currentWorkspace?._id) return;
+
+      await mutateAsync({
+        workspaceID: currentWorkspace._id,
+        state
+      });
+
+      const text = `Successfully ${state ? "enabled" : "disabled"} auto capitalization`;
+      createNotification({
+        text,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update auto capitalization",
+        type: "error"
+      });
+    }
+  }
+
   return (
-    <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 px-6 pb-6 pt-2">
-      <p className="mb-4 mt-2 text-xl font-semibold">{t("settings.project.auto-capitalization")}</p>
+    <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"
         id="autoCapitalization"
-        isChecked={workspaceAutoCapitalization}
+        isChecked={currentWorkspace?.autoCapitalization ?? false}
         onCheckedChange={(state) => {
-          onAutoCapitalizationChange(state as boolean);
+          handleToggleCapitalizationToggle(state as boolean);
         }}
       >
         {t("settings.project.auto-capitalization-description")}

frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/CopyProjectIDSection.tsx

@@ -1,51 +0,0 @@
-import { useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { IconButton } from "@app/components/v2";
-import { useToggle } from "@app/hooks";
-
-type Props = {
-  workspaceID: string;
-};
-
-export const CopyProjectIDSection = ({ workspaceID }: Props): JSX.Element => {
-  const { t } = useTranslation();
-  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
-
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-    if (isProjectIdCopied) {
-      timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
-    }
-    return () => clearTimeout(timer);
-  }, [isProjectIdCopied]);
-
-  const copyProjectIdToClipboard = () => {
-    navigator.clipboard.writeText(workspaceID);
-    setIsProjectIdCopied.on();
-  };
-
-  return (
-    <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 px-6 pt-4 pb-2">
-      <p className="self-start text-xl font-semibold">{t("common.project-id")}</p>
-      <p className="mt-4 text-sm text-bunker-300 mb-2">{t("settings.project.auto-generated")}</p>
-      <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] text-base text-gray-400">
-        <p className="mr-2 pl-4 font-bold">{`${t("common.project-id")}:`}</p>
-        <p className="mr-4">{workspaceID}</p>
-        <IconButton
-          ariaLabel="copy icon"
-          colorSchema="secondary"
-          className="group relative"
-          onClick={() => copyProjectIdToClipboard()}
-        >
-          <FontAwesomeIcon icon={isProjectIdCopied ? 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">
-            {t("common.click-to-copy")}
-          </span>
-        </IconButton>
-      </div>
-    </div>
-  );
-};

frontend/src/views/Settings/ProjectSettingsPage/components/CopyProjectIDSection/index.tsx

@@ -1 +0,0 @@
-export { CopyProjectIDSection } from "./CopyProjectIDSection";

frontend/src/views/Settings/ProjectSettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useOrganization, useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
+import {
+    useDeleteWorkspace
+} from "@app/hooks/api";
+
+export const DeleteProjectSection = () => {
+    const { t } = useTranslation();
+    const router = useRouter();
+    const { createNotification } = useNotificationContext();
+    const { currentWorkspace } = useWorkspace();
+    const { currentOrg } = useOrganization()
+    const [isDeleting, setIsDeleting] = useToggle();
+    const [deleteProjectInput, setDeleteProjectInput] = useState("");
+    const deleteWorkspace = useDeleteWorkspace();
+
+    const onDeleteWorkspace = async () => {
+    setIsDeleting.on();
+    try {
+        if (!currentWorkspace?._id) return;
+      await deleteWorkspace.mutateAsync({ 
+        workspaceID: currentWorkspace?._id
+    });
+      // redirect user to the org overview
+      router.push(`/org/${currentOrg?._id}/overview`);
+
+      createNotification({
+        text: "Successfully deleted workspace",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to delete workspace",
+        type: "error"
+      });
+    } finally {
+      setIsDeleting.off();
+    }
+  };
+
+    return (
+        <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">
+            <FormControl
+              label={
+                <div className="mb-0.5 text-sm font-normal text-gray-400">
+                  Type <span className="font-bold">{currentWorkspace?.name}</span> to delete the
+                  workspace
+                </div>
+              }
+            >
+              <Input
+                onChange={(e) => setDeleteProjectInput(e.target.value)}
+                value={deleteProjectInput}
+                placeholder="Type the project name to delete"
+                className="bg-mineshaft-800"
+              />
+            </FormControl>
+          </div>
+          <Button
+            colorSchema="danger"
+            onClick={onDeleteWorkspace}
+            isDisabled={deleteProjectInput !== currentWorkspace?.name || isDeleting}
+            isLoading={isDeleting}
+          >
+            {t("settings.project.delete-project")}
+          </Button>
+          <p className="mt-3 ml-0.5 text-xs text-gray-500">
+            {t("settings.project.delete-project-note")}
+          </p>
+        </div>
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/DeleteProjectSection/index.tsx

@@ -0,0 +1 @@
+export { DeleteProjectSection } from "./DeleteProjectSection";

frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx

@@ -4,29 +4,27 @@ import {
     decryptAssymmetric,
     encryptAssymmetric
 } from "@app/components/utilities/cryptography/crypto";
-import {
-    Checkbox
-} from "@app/components/v2";
+import { Checkbox } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
 
 import getBot from "../../../../../pages/api/bot/getBot";
 import setBotActiveStatus from "../../../../../pages/api/bot/setBotActiveStatus";
 import getLatestFileKey from "../../../../../pages/api/workspace/getLatestFileKey";
 
-type Props = {
-    workspaceId: string;
-}
-
-export const E2EESection = ({
-    workspaceId
-}: Props) => {
+export const E2EESection = () => {
+    const { currentWorkspace } = useWorkspace();
     const [bot, setBot] = useState<any>(null);
 
     useEffect(() => {
         (async () => {
-            // get project bot
-            setBot(await getBot({ workspaceId })); 
+            if (currentWorkspace) {
+                // get project bot
+                setBot(await getBot({ 
+                    workspaceId: currentWorkspace._id
+                })); 
+            }
         })();
-    }, []);
+    }, [currentWorkspace]);
 
     /**
    * Activate bot for project by performing the following steps:
@@ -38,12 +36,16 @@ export const E2EESection = ({
     const toggleBotActivate = async () => {
         let botKey;
         try {
+            if (!currentWorkspace?._id) return;
+
             if (bot) {
                 // case: there is a bot
                 
                 if (!bot.isActive) {
                     // bot is not active -> activate bot
-                    const key = await getLatestFileKey({ workspaceId });
+                    const key = await getLatestFileKey({ 
+                        workspaceId: currentWorkspace._id
+                    });
                     const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
 
                     if (!PRIVATE_KEY) {
@@ -91,12 +93,12 @@ export const E2EESection = ({
     };
 
     return bot ? (
-      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 px-6 pb-6 pt-2">
-        <p className="mb-4 mt-2 text-xl font-semibold">End-to-End Encryption</p>
-        <p className="text-md my-2 text-gray-400">
+      <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.
         </p>
-        <p className="text-md my-2 mb-4 text-gray-400">
+        <p className="text-gray-400 mb-8">
             Note that, even with E2EE disabled, your secrets are always encrypted at rest.
         </p>
         <Checkbox

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx

@@ -0,0 +1,132 @@
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useCreateWsEnvironment } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+    popUp: UsePopUpState<["createEnv"]>;
+    handlePopUpClose: (popUpName: keyof UsePopUpState<["createEnv"]>) => void;
+    handlePopUpToggle: (popUpName: keyof UsePopUpState<["createEnv"]>, state?: boolean) => void;
+};
+
+const schema = yup.object({
+  environmentName: yup.string().label("Environment Name").required(),
+  environmentSlug: yup.string().label("Environment Slug").required()
+});
+
+export type FormData = yup.InferType<typeof schema>;
+
+export const AddEnvironmentModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+  const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
+    const { mutateAsync, isLoading } = useCreateWsEnvironment();
+    const {
+        control,
+        handleSubmit,
+        reset
+    } = useForm<FormData>({
+        resolver: yupResolver(schema)
+    });
+
+    const onFormSubmit = async ({
+        environmentName,
+        environmentSlug
+    }: FormData) => {
+        try {
+            if (!currentWorkspace?._id) return;
+
+            await mutateAsync({ 
+                workspaceID: currentWorkspace._id, 
+                environmentName, 
+                environmentSlug 
+            });
+
+            createNotification({
+                text: "Successfully created environment",
+                type: "success"
+            });
+        
+            handlePopUpClose("createEnv");
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to create environment",
+                type: "error"
+            });
+        }
+    };
+
+    return (
+        <Modal
+            isOpen={popUp?.createEnv?.isOpen}
+            onOpenChange={(isOpen) => {
+                handlePopUpToggle("createEnv", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Create a new environment">
+                <form onSubmit={handleSubmit(onFormSubmit)}>
+                    <Controller
+                        control={control}
+                        defaultValue=""
+                        name="environmentName"
+                        render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                            label="Environment Name"
+                            isError={Boolean(error)}
+                            errorText={error?.message}
+                        >
+                        <Input {...field} />
+                        </FormControl>
+                    )}
+                    />
+                    <Controller
+                        control={control}
+                        defaultValue=""
+                        name="environmentSlug"
+                        render={({ field, fieldState: { error } }) => (
+                            <FormControl
+                                label="Environment Slug"
+                                helperText="Slugs are shorthands used in cli to access environment"
+                                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={isLoading}
+                            isDisabled={isLoading}
+                        >
+                            Create
+                        </Button>
+
+                        <Button colorSchema="secondary" variant="plain">
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </ModalContent>
+        </Modal>
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx

@@ -1,224 +1,100 @@
-import { Controller, useForm } from "react-hook-form";
-import { faPencil, faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
   Button,
   DeleteActionModal,
-  EmptyState,
-  FormControl,
-  IconButton,
-  Input,
-  Modal,
-  ModalContent,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr,
   UpgradePlanModal
 } from "@app/components/v2";
+import { useSubscription,useWorkspace } from "@app/context";
+import {
+  useDeleteWsEnvironment
+} from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-type Props = {
-  environments: Array<{ name: string; slug: string }>;
-  isLoading?: boolean;
-  isEnvServiceAllowed: boolean;
-  onCreate: (data: CreateUpdateEnvFormData) => Promise<void>;
-  onUpdate: (oldEnvSlug: string, data: CreateUpdateEnvFormData) => Promise<void>;
-  onDelete: (envSlug: string) => Promise<void>;
-};
+import { AddEnvironmentModal } from "./AddEnvironmentModal";
+import { EnvironmentTable } from "./EnvironmentTable";
+import { UpdateEnvironmentModal } from "./UpdateEnvironmentModal";
 
-const createUpdateEnvSchema = yup.object({
-  environmentName: yup.string().label("Environment Name").required(),
-  environmentSlug: yup.string().label("Environment Slug").required()
-});
+export const EnvironmentSection = () => {
+  const { createNotification } = useNotificationContext();
+  const { subscription } = useSubscription();
+  const { currentWorkspace } = useWorkspace();
 
-export type CreateUpdateEnvFormData = yup.InferType<typeof createUpdateEnvSchema>;
+  const deleteWsEnvironment = useDeleteWsEnvironment();
 
-export const EnvironmentSection = ({
-  environments,
-  isEnvServiceAllowed,
-  onCreate,
-  onDelete,
-  isLoading,
-  onUpdate
-}: Props): JSX.Element => {
+  const isMoreEnvironmentsAllowed = (subscription?.environmentLimit && currentWorkspace?.environments) ? (currentWorkspace.environments.length < subscription.environmentLimit) : true;
+  
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-    "createUpdateEnv",
+    "createEnv",
+    "updateEnv",
     "deleteEnv",
     "upgradePlan"
   ] as const);
 
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { isSubmitting }
-  } = useForm<CreateUpdateEnvFormData>({
-    resolver: yupResolver(createUpdateEnvSchema)
-  });
+  const onEnvDeleteSubmit = async (environmentSlug: string) => {
+    try {
+      if (!currentWorkspace?._id) return;
+      
+      await deleteWsEnvironment.mutateAsync({
+        workspaceID: currentWorkspace._id,
+        environmentSlug
+      });
 
-  const isEnvUpdate = Boolean(popUp?.createUpdateEnv?.data);
-  const oldEnvSlug = (popUp?.createUpdateEnv?.data as { slug: string })?.slug;
-
-  const onEnvModalSubmit = async (data: CreateUpdateEnvFormData) => {
-    if (isEnvUpdate) {
-      await onUpdate(oldEnvSlug, data);
-    } else {
-      await onCreate(data);
+      createNotification({
+        text: "Successfully deleted environment",
+        type: "success"
+      });
+      
+      handlePopUpClose("deleteEnv");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete environment",
+        type: "error"
+      });
     }
-    handlePopUpClose("createUpdateEnv");
-  };
-
-  const onEnvDeleteSubmit = async (envSlug: string) => {
-    await onDelete(envSlug);
-    handlePopUpClose("deleteEnv");
   };
 
   return (
-    <div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 p-6">
-      <div className="mb-2 flex w-full flex-row justify-between">
-        <div className="flex w-full flex-col">
-          <p className="mb-3 text-xl font-semibold">Project Environments</p>
-          <p className="mb-4 text-base text-gray-400">
-            Choose which environments will show up in your dashboard like development, staging,
-            production
-          </p>
-          <p className="mr-1 self-start text-sm text-gray-500">
-            Note: the text in slugs shows how these environmant should be accessed in CLI.
-          </p>
-        </div>
+    <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
+        </p>
         <div>
           <Button
+            colorSchema="secondary"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
             onClick={() => {
-              if (isEnvServiceAllowed) {
-                handlePopUpOpen("createUpdateEnv");
+              if (isMoreEnvironmentsAllowed) {
+                handlePopUpOpen("createEnv");
               } else {
                 handlePopUpOpen("upgradePlan");
               }
             }}
-            colorSchema="primary"
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
           >
-            Add New Environment
+            Create environment
           </Button>
         </div>
       </div>
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Name</Th>
-              <Th>Slug</Th>
-              <Th aria-label="button" />
-            </Tr>
-          </THead>
-          <TBody>
-            {isLoading && <TableSkeleton columns={3} key="project-envs" />}
-            {!isLoading &&
-              environments.map(({ name, slug }) => (
-                <Tr key={name}>
-                  <Td>{name}</Td>
-                  <Td>{slug}</Td>
-                  <Td className="flex items-center justify-end">
-                    <IconButton
-                      className="mr-3 py-2"
-                      onClick={() => {
-                        handlePopUpOpen("createUpdateEnv", { name, slug });
-                        reset({ environmentName: name, environmentSlug: slug });
-                      }}
-                      colorSchema="primary"
-                      variant="plain"
-                      ariaLabel="update"
-                    >
-                      <FontAwesomeIcon icon={faPencil} />
-                    </IconButton>
-                    <IconButton
-                      onClick={() => {
-                        handlePopUpOpen("deleteEnv", { name, slug });
-                      }}
-                      size="lg"
-                      colorSchema="danger"
-                      variant="plain"
-                      ariaLabel="update"
-                    >
-                      <FontAwesomeIcon icon={faXmark} />
-                    </IconButton>
-                  </Td>
-                </Tr>
-              ))}
-            {!isLoading && environments?.length === 0 && (
-              <Tr>
-                <Td colSpan={3}>
-                  <EmptyState title="No environments found" />
-                </Td>
-              </Tr>
-            )}
-          </TBody>
-        </Table>
-      </TableContainer>
-      <Modal
-        isOpen={popUp?.createUpdateEnv?.isOpen}
-        onOpenChange={(isOpen) => {
-          handlePopUpToggle("createUpdateEnv", isOpen);
-          reset();
-        }}
-      >
-        <ModalContent title={isEnvUpdate ? "Update environment" : "Create a new environment"}>
-          <form onSubmit={handleSubmit(onEnvModalSubmit)}>
-            <Controller
-              control={control}
-              defaultValue=""
-              name="environmentName"
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  label="Environment Name"
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
-                  <Input {...field} />
-                </FormControl>
-              )}
-            />
-            <Controller
-              control={control}
-              defaultValue=""
-              name="environmentSlug"
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  label="Environment Slug"
-                  helperText="Slugs are shorthands used in cli to access environment"
-                  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}
-              >
-                {isEnvUpdate ? "Update" : "Create"}
-              </Button>
-
-              <Button colorSchema="secondary" variant="plain">
-                Cancel
-              </Button>
-            </div>
-          </form>
-        </ModalContent>
-      </Modal>
+      <p className="text-gray-400 mb-8">
+        Choose which environments will show up in your dashboard like development, staging, production
+      </p>
+      <EnvironmentTable 
+        handlePopUpOpen={handlePopUpOpen}
+      />
+      <AddEnvironmentModal 
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <UpdateEnvironmentModal 
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
       <DeleteActionModal
         isOpen={popUp.deleteEnv.isOpen}
         title={`Are you sure want to delete ${

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentTable.tsx

@@ -0,0 +1,89 @@
+import { faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+    handlePopUpOpen: (
+        popUpName: keyof UsePopUpState<["updateEnv", "deleteEnv", "deleteEnv", "upgradePlan"]>,
+        {
+            name,
+            slug
+        }: {
+            name: string;
+            slug: string;
+        }
+    ) => void;
+};
+
+export const EnvironmentTable = ({
+    handlePopUpOpen
+}: Props) => {
+    const { currentWorkspace, isLoading } = useWorkspace();
+    return (
+        <TableContainer>
+            <Table>
+                <THead>
+                    <Tr>
+                    <Th>Name</Th>
+                    <Th>Slug</Th>
+                    <Th aria-label="button" />
+                    </Tr>
+                </THead>
+                <TBody>
+                    {isLoading && <TableSkeleton columns={3} key="project-envs" />}
+                    {!isLoading && currentWorkspace && currentWorkspace.environments.map(({ name, slug }) => (
+                        <Tr key={name}>
+                            <Td>{name}</Td>
+                            <Td>{slug}</Td>
+                            <Td className="flex items-center justify-end">
+                                <IconButton
+                                    className="mr-3 py-2"
+                                    onClick={() => {
+                                        handlePopUpOpen("updateEnv", { name, slug });
+                                    }}
+                                    colorSchema="primary"
+                                    variant="plain"
+                                    ariaLabel="update"
+                                >
+                                    <FontAwesomeIcon icon={faPencil} />
+                                </IconButton>
+                                <IconButton
+                                    onClick={() => {
+                                        handlePopUpOpen("deleteEnv", { name, slug });
+                                    }}
+                                    size="lg"
+                                    colorSchema="danger"
+                                    variant="plain"
+                                    ariaLabel="update"
+                                >
+                                    <FontAwesomeIcon icon={faXmark} />
+                                </IconButton>
+                            </Td>
+                        </Tr>
+                    ))}
+                    {!isLoading && currentWorkspace && currentWorkspace.environments?.length === 0 && (
+                    <Tr>
+                        <Td colSpan={3}>
+                            <EmptyState title="No environments found" />
+                        </Td>
+                    </Tr>
+                    )}
+                </TBody>
+            </Table>
+        </TableContainer>
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx

@@ -0,0 +1,135 @@
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useUpdateWsEnvironment } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+    popUp: UsePopUpState<["updateEnv"]>;
+    handlePopUpClose: (popUpName: keyof UsePopUpState<["updateEnv"]>) => void;
+    handlePopUpToggle: (popUpName: keyof UsePopUpState<["updateEnv"]>, state?: boolean) => void;
+};
+
+const schema = yup.object({
+  environmentName: yup.string().label("Environment Name").required(),
+  environmentSlug: yup.string().label("Environment Slug").required()
+});
+
+export type FormData = yup.InferType<typeof schema>;
+
+export const UpdateEnvironmentModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+  const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
+    const { mutateAsync, isLoading } = useUpdateWsEnvironment();
+    const {
+        control,
+        handleSubmit,
+        reset
+    } = useForm<FormData>({
+        resolver: yupResolver(schema)
+    });
+
+    const oldEnvironmentSlug = (popUp?.updateEnv?.data as { slug: string })?.slug;
+    
+    const onFormSubmit = async ({
+        environmentName,
+        environmentSlug
+    }: FormData) => {
+        try {
+            if (!currentWorkspace?._id) return;
+            
+            await mutateAsync({
+                workspaceID: currentWorkspace._id,
+                environmentName,
+                environmentSlug,
+                oldEnvironmentSlug
+            });
+
+            createNotification({
+                text: "Successfully updated environment",
+                type: "success"
+            });
+        
+            handlePopUpClose("updateEnv");
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to update environment",
+                type: "error"
+            });
+        }
+    };
+
+    return (
+        <Modal
+            isOpen={popUp?.updateEnv?.isOpen}
+            onOpenChange={(isOpen) => {
+                handlePopUpToggle("updateEnv", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Update environment">
+                <form onSubmit={handleSubmit(onFormSubmit)}>
+                    <Controller
+                        control={control}
+                        defaultValue=""
+                        name="environmentName"
+                        render={({ field, fieldState: { error } }) => (
+                            <FormControl
+                            label="Environment Name"
+                            isError={Boolean(error)}
+                            errorText={error?.message}
+                            >
+                            <Input {...field} />
+                            </FormControl>
+                        )}
+                    />
+                    <Controller
+                        control={control}
+                        defaultValue=""
+                        name="environmentSlug"
+                        render={({ field, fieldState: { error } }) => (
+                            <FormControl
+                            label="Environment Slug"
+                            helperText="Slugs are shorthands used in cli to access environment"
+                            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={isLoading}
+                            isDisabled={isLoading}
+                        >
+                            Update
+                        </Button>
+
+                        <Button colorSchema="secondary" variant="plain">
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </ModalContent>
+        </Modal>
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -0,0 +1,21 @@
+import { AutoCapitalizationSection } from "../AutoCapitalizationSection";
+import { DeleteProjectSection } from "../DeleteProjectSection";
+import { E2EESection } from "../E2EESection";
+import { EnvironmentSection } from "../EnvironmentSection";
+import { ProjectIndexSecretsSection } from "../ProjectIndexSecretsSection";
+import { ProjectNameChangeSection } from "../ProjectNameChangeSection";
+import { SecretTagsSection } from "../SecretTagsSection";
+
+export const ProjectGeneralTab = () => {
+    return (
+        <div>
+            <ProjectNameChangeSection />
+            <EnvironmentSection />
+            <SecretTagsSection />
+            <AutoCapitalizationSection />
+            <ProjectIndexSecretsSection />
+            <E2EESection />
+            <DeleteProjectSection />
+        </div>
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectGeneralTab/index.tsx

@@ -0,0 +1 @@
+export { ProjectGeneralTab } from "./ProjectGeneralTab";

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectIndexSecretsSection/ProjectIndexSecretsSection.tsx

@@ -1,24 +1,64 @@
+import {
+    decryptAssymmetric,
+    decryptSymmetric
+} from "@app/components/utilities/cryptography/crypto";
 import { Button } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+    useGetUserWsKey,
+    useGetWorkspaceIndexStatus,
+    useGetWorkspaceSecrets,
+    useNameWorkspaceSecrets
+} from "@app/hooks/api";
 
 // TODO: add check so that this only shows up if user is
 // an admin in the workspace
-    
-type Props = {
-    onEnableBlindIndices: () => Promise<void>;
-}
 
-export const ProjectIndexSecretsSection = ({
-    onEnableBlindIndices
-}: Props) => {
-    return (
-        <div className="rounded-md bg-mineshaft-900 p-6 my-2">
-            <p className="mb-4 text-xl font-semibold">Blind Indices</p>
-            <p className="mb-4 text-sm text-gray-400">
+export const ProjectIndexSecretsSection = () => {
+    const { currentWorkspace } = useWorkspace();
+    const { data: isBlindIndexed, isLoading: isBlindIndexedLoading } = useGetWorkspaceIndexStatus(currentWorkspace?._id ?? "");
+    const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
+    const { data: encryptedSecrets } = useGetWorkspaceSecrets(currentWorkspace?._id ?? "");
+    const nameWorkspaceSecrets = useNameWorkspaceSecrets();
+
+    const onEnableBlindIndices = async () => {
+    if (!currentWorkspace?._id) return;
+    if (!encryptedSecrets) return;
+    if (!latestFileKey) return;
+
+    const key = decryptAssymmetric({
+      ciphertext: latestFileKey.encryptedKey,
+      nonce: latestFileKey.nonce,
+      publicKey: latestFileKey.sender.publicKey,
+      privateKey: localStorage.getItem("PRIVATE_KEY") as string
+    });
+
+    const secretsToUpdate = encryptedSecrets.map((encryptedSecret) => {
+      const secretName = decryptSymmetric({
+        ciphertext: encryptedSecret.secretKeyCiphertext,
+        iv: encryptedSecret.secretKeyIV,
+        tag: encryptedSecret.secretKeyTag,
+        key
+      });
+
+      return {
+        secretName,
+        _id: encryptedSecret._id
+      };
+    });
+
+    await nameWorkspaceSecrets.mutateAsync({
+      workspaceId: currentWorkspace._id,
+      secretsToUpdate
+    });
+  };
+
+    return (!isBlindIndexedLoading && !isBlindIndexed) ? (
+        <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.
             </p>
-            <p className="mb-4 text-sm text-gray-400">
-                 Learn more about it here.
-            </p>
             <Button
                 onClick={onEnableBlindIndices}
                 color="mineshaft"
@@ -28,5 +68,7 @@ export const ProjectIndexSecretsSection = ({
                 Enable Blind Indexing
             </Button>
         </div>
-    );
+    ) : (
+        <div />
+    )
 }

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx

@@ -1,17 +1,14 @@
 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 { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Button, FormControl, Input } from "@app/components/v2";
-
-type Props = {
-  workspaceName?: string;
-  onProjectNameChange: (name: string) => Promise<void>;
-};
+import { useWorkspace } from "@app/context";
+import { 
+  useRenameWorkspace
+} from "@app/hooks/api";
 
 const formSchema = yup.object({
   name: yup.string().required().label("Project Name")
@@ -19,36 +16,67 @@ const formSchema = yup.object({
 
 type FormData = yup.InferType<typeof formSchema>;
 
-export const ProjectNameChangeSection = ({
-  workspaceName,
-  onProjectNameChange
-}: Props): JSX.Element => {
+export const ProjectNameChangeSection = () => {
+  const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync, isLoading } = useRenameWorkspace();
+
   const {
     handleSubmit,
     control,
-    reset,
-    formState: { isDirty, isSubmitting }
+    reset
   } = useForm<FormData>({ resolver: yupResolver(formSchema) });
-  const { t } = useTranslation();
 
   useEffect(() => {
-    reset({ name: workspaceName });
-  }, [workspaceName]);
+    if (currentWorkspace) {
+      reset({ 
+        name: currentWorkspace.name
+      });
+    }
+    
+  }, [currentWorkspace]);
 
   const onFormSubmit = async ({ name }: FormData) => {
-    await onProjectNameChange(name);
+    try {
+      if (!currentWorkspace?._id) return;
+      
+      await mutateAsync({
+        workspaceID: currentWorkspace._id,
+        newWorkspaceName: name
+      });
+
+      createNotification({
+        text: "Successfully renamed workspace",
+        type: "success"
+      });
+      
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to rename workspace",
+        type: "error"
+      });
+    }
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
-      <div className="mb-6 flex w-full flex-col items-start rounded-md bg-mineshaft-900 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">
+    <form 
+      onSubmit={handleSubmit(onFormSubmit)}
+      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">
+        Project Name    
+      </h2>
+        <div className="max-w-md">
           <Controller
             defaultValue=""
             render={({ field, fieldState: { error } }) => (
               <FormControl isError={Boolean(error)} errorText={error?.message}>
-                <Input placeholder="Type your project name" {...field} className="bg-mineshaft-800" />
+                <Input 
+                  placeholder="Project name" 
+                  {...field} 
+                  className="bg-mineshaft-800" 
+                />
               </FormControl>
             )}
             control={control}
@@ -56,17 +84,13 @@ export const ProjectNameChangeSection = ({
           />
         </div>
         <Button
-          isLoading={isSubmitting}
-          color="primary"
-          variant="outline_bg"
-          size="sm"
+          colorSchema="secondary"
           type="submit"
-          isDisabled={!isDirty || isSubmitting}
-          leftIcon={<FontAwesomeIcon icon={faCheck} />}
+          isLoading={isLoading}
+          isDisabled={isLoading}
         >
-          {t("common.save-changes")}
+          Save
         </Button>
-      </div>
     </form>
   );
 };

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectServiceTokensTab/ProjectServiceTokensTab.tsx

@@ -0,0 +1,7 @@
+import { ServiceTokenSection } from "../ServiceTokenSection";
+
+export const ProjectServiceTokensTab = () => {
+    return (
+        <ServiceTokenSection />
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectServiceTokensTab/index.tsx

@@ -0,0 +1 @@
+export { ProjectServiceTokensTab } from "./ProjectServiceTokensTab";

frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/AddSecretTagModal.tsx

@@ -0,0 +1,120 @@
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useCreateWsTag } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = yup.object({
+    name: yup.string().required().label("Tag Name")
+});
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+    popUp: UsePopUpState<["CreateSecretTag", "deleteTagConfirmation"]>;
+    handlePopUpClose: (popUpName: keyof UsePopUpState<["CreateSecretTag", "deleteTagConfirmation"]>) => void;
+    handlePopUpToggle: (popUpName: keyof UsePopUpState<["CreateSecretTag", "deleteTagConfirmation"]>, state?: boolean) => void;
+};
+
+export const AddSecretTagModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { currentWorkspace }= useWorkspace();
+    const createWsTag = useCreateWsTag();
+    const {
+        control,
+        reset,
+        handleSubmit,
+        formState: { isSubmitting }
+    } = useForm<FormData>({
+        resolver: yupResolver(schema)
+    });
+  
+    const onFormSubmit = async ({
+        name
+    }: FormData) => {
+        try {
+            if (!currentWorkspace?._id) return;
+
+            await createWsTag.mutateAsync({
+                workspaceID: currentWorkspace?._id,
+                tagName: name,
+                tagSlug: name.replace(" ", "_")
+            });
+
+            handlePopUpClose("CreateSecretTag");
+
+            createNotification({
+                text: "Successfully created a tag",
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: "Failed to create a tag",
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <Modal
+            isOpen={popUp?.CreateSecretTag?.isOpen}
+            onOpenChange={(open) => {
+                handlePopUpToggle("CreateSecretTag", open);
+                reset();
+            }}
+        >
+            <ModalContent
+                title={`Add a tag for ${currentWorkspace?.name ?? ""}`}
+                subTitle="Specify your tag name, and the slug will be created automatically."
+            >
+                <form onSubmit={handleSubmit(onFormSubmit)}>
+                    <Controller
+                        control={control}
+                        name="name"
+                        defaultValue=""
+                        render={({ field, fieldState: { error } }) => (
+                            <FormControl
+                                label="Tag Name"
+                                isError={Boolean(error)}
+                                errorText={error?.message}
+                            >
+                                <Input {...field} placeholder="Type your tag name" />
+                            </FormControl>
+                        )}
+                    />
+                    <div className="mt-8 flex items-center">
+                        <Button
+                            className="mr-4"
+                            type="submit"
+                            isDisabled={isSubmitting}
+                            isLoading={isSubmitting}
+                        >
+                            Create
+                        </Button>
+                        <ModalClose asChild>
+                            <Button variant="plain" colorSchema="secondary">
+                                Cancel
+                            </Button>
+                        </ModalClose>
+                    </div>
+                </form>
+            </ModalContent>
+        </Modal>
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx

@@ -1,182 +1,77 @@
-import { Controller, useForm } from "react-hook-form";
-import { faPlus, faTags, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
   Button,
-  DeleteActionModal,
-  EmptyState,
-  FormControl,
-  IconButton,
-  Input,
-  Modal,
-  ModalClose,
-  ModalContent,
-  ModalTrigger,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr} from "@app/components/v2";
+  DeleteActionModal
+} from "@app/components/v2";
 import { usePopUp } from "@app/hooks";
-import { WorkspaceTag } from "@app/hooks/api/types";
+import { useDeleteWsTag } from "@app/hooks/api";
 
-const createTagSchema = yup.object({
-  name: yup.string().required().label("Tag Name")
-});
-
-export type CreateWsTag = yup.InferType<typeof createTagSchema>;
-
-type Props = {
-  tags: WorkspaceTag[];
-  isLoading?: boolean;
-  workspaceName: string;
-  onDeleteTag: (tagID: string) => Promise<void>;
-  onCreateTag: (data: CreateWsTag) => Promise<string>;
-};
+import { AddSecretTagModal } from "./AddSecretTagModal";
+import { SecretTagsTable } from "./SecretTagsTable";
 
 type DeleteModalData = { name: string; id: string };
 
-export const SecretTagsSection = ({
-  tags = [],
-  isLoading,
-  onDeleteTag,
-  workspaceName,
-  onCreateTag
-}: Props): JSX.Element => {
+export const SecretTagsSection = (): JSX.Element => {
+  const { createNotification } = useNotificationContext();
   const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
     "CreateSecretTag",
     "deleteTagConfirmation"
   ] as const);
 
-  const {
-    control,
-    reset,
-    handleSubmit,
-    formState: { isSubmitting }
-  } = useForm<CreateWsTag>({
-    resolver: yupResolver(createTagSchema)
-  });
-
-  const onFormSubmit = async (data: CreateWsTag) => {
-    await onCreateTag(data);
-    handlePopUpClose("CreateSecretTag");
-  };
+  const deleteWsTag = useDeleteWsTag();
 
   const onDeleteApproved = async () => {
-    await onDeleteTag((popUp?.deleteTagConfirmation?.data as DeleteModalData)?.id);
-    handlePopUpClose("deleteTagConfirmation");
+    try {
+      await deleteWsTag.mutateAsync({ 
+        tagID: (popUp?.deleteTagConfirmation?.data as DeleteModalData)?.id
+      });
+
+      createNotification({
+        text: "Successfully deleted tag",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteTagConfirmation");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete the tag",
+        type: "error"
+      });
+    }
   };
 
   return (
-    <div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 p-6">
-      <div className="flex w-full flex-row justify-between">
-        <div className="flex w-full flex-col">
-          <p className="mb-3 text-xl font-semibold">Secret Tags</p>
-          <p className="text-sm text-gray-400">
-            Every secret can be assigned to one or more tags. Here you can add and remove tags for
-            the current project.
-          </p>
-        </div>
-        <div>
-          <Modal
-            isOpen={popUp?.CreateSecretTag?.isOpen}
-            onOpenChange={(open) => {
-              handlePopUpToggle("CreateSecretTag", open);
-              reset();
-            }}
-          >
-            <ModalTrigger asChild>
-              <Button color="mineshaft" leftIcon={<FontAwesomeIcon icon={faPlus} />}>
-                Add New Tag
-              </Button>
-            </ModalTrigger>
-            <ModalContent
-              title={`Add a tag for ${workspaceName}`}
-              subTitle="Specify your tag name, and the slug will be created automatically."
-            >
-              <form onSubmit={handleSubmit(onFormSubmit)}>
-                <Controller
-                  control={control}
-                  name="name"
-                  defaultValue=""
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="Tag Name"
-                      isError={Boolean(error)}
-                      errorText={error?.message}
-                    >
-                      <Input {...field} placeholder="Type your tag name" />
-                    </FormControl>
-                  )}
-                />
-                <div className="mt-8 flex items-center">
-                  <Button
-                    className="mr-4"
-                    type="submit"
-                    isDisabled={isSubmitting}
-                    isLoading={isSubmitting}
-                  >
-                    Create
-                  </Button>
-                  <ModalClose asChild>
-                    <Button variant="plain" colorSchema="secondary">
-                      Cancel
-                    </Button>
-                  </ModalClose>
-                </div>
-              </form>
-            </ModalContent>
-          </Modal>
-        </div>
+    <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 
+          colorSchema="secondary" 
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          onClick={() => {
+            console.log("x");
+            handlePopUpOpen("CreateSecretTag");
+            console.log("x2");
+          }}
+        >
+          Create tag
+        </Button> 
       </div>
-      <TableContainer className="mt-4">
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Tag</Th>
-              <Th>Slug</Th>
-              <Th aria-label="button" />
-            </Tr>
-          </THead>
-          <TBody>
-            {isLoading && <TableSkeleton columns={3} key="secret-tags" />}
-            {!isLoading &&
-              tags.map(({ _id, name, slug }) => (
-                <Tr key={name}>
-                  <Td>{name}</Td>
-                  <Td>{slug}</Td>
-                  <Td className="flex items-center justify-end">
-                    <IconButton
-                      onClick={() =>
-                        handlePopUpOpen("deleteTagConfirmation", {
-                          name,
-                          id: _id
-                        })
-                      }
-                      colorSchema="danger"
-                      ariaLabel="update"
-                    >
-                      <FontAwesomeIcon icon={faTrashCan} />
-                    </IconButton>
-                  </Td>
-                </Tr>
-              ))}
-            {!isLoading && tags?.length === 0 && (
-              <Tr>
-                <Td colSpan={3}>
-                  <EmptyState title="No secret tags found" icon={faTags} />
-                </Td>
-              </Tr>
-            )}
-          </TBody>
-        </Table>
-      </TableContainer>
+      <p className="text-gray-400 mb-8">
+        Every secret can be assigned to one or more tags. Here you can add and remove tags for
+        the current project.
+      </p>
+      <SecretTagsTable 
+        handlePopUpOpen={handlePopUpOpen}
+      />
+      <AddSecretTagModal 
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
       <DeleteActionModal
         isOpen={popUp.deleteTagConfirmation.isOpen}
         title={`Delete ${

frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx

@@ -0,0 +1,82 @@
+import { faTags, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useGetWsTags } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+    handlePopUpOpen: (
+      popUpName: keyof UsePopUpState<["deleteTagConfirmation"]>,
+      {
+        name,
+        id
+      }: {
+        name: string;
+        id: string;
+      }
+    ) => void;
+};
+
+export const SecretTagsTable = ({
+   handlePopUpOpen 
+}: Props) => {
+    const { currentWorkspace }= useWorkspace();
+    const { data, isLoading } = useGetWsTags(currentWorkspace?._id ?? "");
+
+    return (
+        <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Tag</Th>
+              <Th>Slug</Th>
+              <Th aria-label="button" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={3} key="secret-tags" />}
+            {!isLoading && data && data.map(({ _id, name, slug }) => (
+                <Tr key={name}>
+                  <Td>{name}</Td>
+                  <Td>{slug}</Td>
+                  <Td className="flex items-center justify-end">
+                    <IconButton
+                      onClick={() =>
+                        handlePopUpOpen("deleteTagConfirmation", {
+                          name,
+                          id: _id
+                        })
+                      }
+                      colorSchema="danger"
+                      ariaLabel="update"
+                    >
+                      <FontAwesomeIcon icon={faTrashCan} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              ))}
+            {!isLoading && data && data?.length === 0 && (
+              <Tr>
+                <Td colSpan={3}>
+                  <EmptyState title="No secret tags found" icon={faTags} />
+                </Td>
+              </Tr>
+            )}
+          </TBody>
+        </Table>
+      </TableContainer>
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -0,0 +1,372 @@
+import crypto from "crypto";
+
+import { useEffect, useState } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { faCheck, faCopy, faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  decryptAssymmetric,
+  encryptSymmetric
+} from "@app/components/utilities/cryptography/crypto";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useCreateServiceToken, useGetUserWsKey } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const apiTokenExpiry = [
+  { 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: null }
+];
+
+const schema = yup.object({
+  name: yup.string().max(100).required().label("Service Token Name"),
+  scopes: yup
+    .array(
+      yup.object({
+        environment: yup.string().max(50).required().label("Environment"),
+        secretPath: yup
+          .string()
+          .required()
+          .default("/")
+          .label("Secret Path")
+          .transform((val) =>
+            typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
+          )
+      })
+    )
+    .min(1)
+    .required()
+    .label("Scope"),
+  expiresIn: yup.string().optional().label("Service Token Expiration"),
+  permissions: yup
+    .object()
+    .shape({
+      read: yup.boolean().required(),
+      write: yup.boolean().required()
+    })
+    .defined()
+    .required()
+});
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["createAPIToken"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["createAPIToken"]>, state?: boolean) => void;
+};
+
+export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { t } = useTranslation();
+  const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
+  const {
+    control,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      scopes: [{ secretPath: "/", environment: currentWorkspace?.environments?.[0]?.slug }]
+    }
+  });
+
+  const { fields: tokenScopes, append, remove } = useFieldArray({ control, name: "scopes" });
+
+  const [newToken, setToken] = useState("");
+  const [isTokenCopied, setIsTokenCopied] = useToggle(false);
+
+  const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
+  const createServiceToken = useCreateServiceToken();
+  const hasServiceToken = Boolean(newToken);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isTokenCopied) {
+      timer = setTimeout(() => setIsTokenCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [isTokenCopied]);
+
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(newToken);
+    setIsTokenCopied.on();
+  };
+
+  const onFormSubmit = async ({ name, scopes, expiresIn, permissions }: FormData) => {
+    try {
+      if (!currentWorkspace?._id) return;
+      if (!latestFileKey) return;
+
+      const key = decryptAssymmetric({
+        ciphertext: latestFileKey.encryptedKey,
+        nonce: latestFileKey.nonce,
+        publicKey: latestFileKey.sender.publicKey,
+        privateKey: localStorage.getItem("PRIVATE_KEY") as string
+      });
+
+      const randomBytes = crypto.randomBytes(16).toString("hex");
+
+      const { ciphertext, iv, tag } = encryptSymmetric({
+        plaintext: key,
+        key: randomBytes
+      });
+
+      const { serviceToken } = await createServiceToken.mutateAsync({
+        encryptedKey: ciphertext,
+        iv,
+        tag,
+        scopes,
+        expiresIn: Number(expiresIn),
+        name,
+        workspaceId: currentWorkspace._id,
+        randomBytes,
+        permissions: Object.entries(permissions)
+          .filter(([, permissionsValue]) => permissionsValue)
+          .map(([permissionsKey]) => permissionsKey)
+      });
+
+      setToken(serviceToken);
+      createNotification({
+        text: "Successfully created a service token",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create a service token",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.createAPIToken?.isOpen}
+      onOpenChange={(open) => {
+        handlePopUpToggle("createAPIToken", open);
+        reset();
+        setToken("");
+      }}
+    >
+      <ModalContent
+        title={
+          t("section.token.add-dialog.title", {
+            target: currentWorkspace?.name
+          }) as string
+        }
+        subTitle={t("section.token.add-dialog.description") as string}
+      >
+        {!hasServiceToken ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              name="name"
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label={t("section.token.add-dialog.name")}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="Type your token name" />
+                </FormControl>
+              )}
+            />
+            {tokenScopes.map(({ id }, index) => (
+              <div className="mb-3 flex items-end space-x-2" key={id}>
+                <Controller
+                  control={control}
+                  name={`scopes.${index}.environment`}
+                  defaultValue={currentWorkspace?.environments?.[0]?.slug}
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      className="mb-0"
+                      label={index === 0 ? "Environment" : undefined}
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
+                      >
+                        {currentWorkspace?.environments.map(({ name, slug }) => (
+                          <SelectItem value={slug} key={slug}>
+                            {name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`scopes.${index}.secretPath`}
+                  defaultValue="/"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Secrets Path" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} placeholder="can be /, /nested/**, /**/deep" />
+                    </FormControl>
+                  )}
+                />
+                <IconButton
+                  className="p-3"
+                  ariaLabel="remove"
+                  colorSchema="danger"
+                  onClick={() => remove(index)}
+                >
+                  <FontAwesomeIcon icon={faTrashCan} size="sm" />
+                </IconButton>
+              </div>
+            ))}
+            <div className="my-4 ml-1">
+              <Button
+                variant="outline_bg"
+                onClick={() =>
+                  append({
+                    environment: currentWorkspace?.environments?.[0]?.slug || "",
+                    secretPath: ""
+                  })
+                }
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                size="xs"
+              >
+                Add Scope
+              </Button>
+            </div>
+            <Controller
+              control={control}
+              name="expiresIn"
+              defaultValue={String(apiTokenExpiry?.[0]?.value)}
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl label="Expiration" errorText={error?.message} isError={Boolean(error)}>
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {apiTokenExpiry.map(({ label, value }) => (
+                      <SelectItem value={String(value || "")} key={label}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="permissions"
+              defaultValue={{
+                read: true,
+                write: false
+              }}
+              render={({ field: { onChange, value }, fieldState: { error } }) => {
+                const options = [
+                  {
+                    label: "Read (default)",
+                    value: "read"
+                  },
+                  {
+                    label: "Write (optional)",
+                    value: "write"
+                  }
+                ];
+
+                return (
+                  <FormControl
+                    label="Permissions"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <>
+                      {options.map(({ label, value: optionValue }) => {
+                        return (
+                          <Checkbox
+                            id={value[optionValue]}
+                            key={optionValue}
+                            className="data-[state=checked]:bg-primary"
+                            isChecked={value[optionValue]}
+                            isDisabled={optionValue === "read"}
+                            onCheckedChange={(state) => {
+                              onChange({
+                                ...value,
+                                [optionValue]: state
+                              });
+                            }}
+                          >
+                            {label}
+                          </Checkbox>
+                        );
+                      })}
+                    </>
+                  </FormControl>
+                );
+              }}
+            />
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                type="submit"
+                isDisabled={isSubmitting}
+                isLoading={isSubmitting}
+              >
+                Create
+              </Button>
+              <ModalClose asChild>
+                <Button variant="plain" colorSchema="secondary">
+                  Cancel
+                </Button>
+              </ModalClose>
+            </div>
+          </form>
+        ) : (
+          <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">{newToken}</p>
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative"
+              onClick={copyTokenToClipboard}
+            >
+              <FontAwesomeIcon icon={isTokenCopied ? 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">
+                {t("common.click-to-copy")}
+              </span>
+            </IconButton>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx

@@ -1,323 +1,66 @@
-import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { faCheck, faCopy, faKey, faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } 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,
-  Checkbox,
-  DeleteActionModal,
-  EmptyState,
-  FormControl,
-  IconButton,
-  Input,
-  Modal,
-  ModalClose,
-  ModalContent,
-  ModalTrigger,
-  Select,
-  SelectItem,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { usePopUp, useToggle } from "@app/hooks";
-import { ServiceToken, WorkspaceEnv } from "@app/hooks/api/types";
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { useDeleteServiceToken } from "@app/hooks/api";
 
-const apiTokenExpiry = [
-  { 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: null }
-];
-
-const createServiceTokenSchema = yup.object({
-  name: yup.string().max(100).required().label("Service Token Name"),
-  environment: yup.string().max(50).required().label("Environment"),
-  secretPath: yup.string().required().default("/").label("Secret Path"),
-  expiresIn: yup.string().optional().label("Service Token Expiration"),
-  permissions: yup
-    .object()
-    .shape({
-      read: yup.boolean().required(),
-      write: yup.boolean().required()
-    })
-    .defined()
-    .required()
-});
-
-export type CreateServiceToken = yup.InferType<typeof createServiceTokenSchema>;
-
-type Props = {
-  tokens: ServiceToken[];
-  isLoading?: boolean;
-  workspaceName: string;
-  environments: WorkspaceEnv[];
-  onDeleteToken: (serviceTokenID: string) => Promise<void>;
-  onCreateToken: (data: CreateServiceToken) => Promise<string>;
-};
+import { AddServiceTokenModal } from "./AddServiceTokenModal";
+import { ServiceTokenTable } from "./ServiceTokenTable";
 
 type DeleteModalData = { name: string; id: string };
 
-export const ServiceTokenSection = ({
-  tokens = [],
-  isLoading,
-  onDeleteToken,
-  workspaceName,
-  environments = [],
-  onCreateToken
-}: Props): JSX.Element => {
-  const [newToken, setToken] = useState("");
+export const ServiceTokenSection = () => {
   const { t } = useTranslation();
-  const [isTokenCopied, setIsTokenCopied] = useToggle(false);
-
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-    if (isTokenCopied) {
-      timer = setTimeout(() => setIsTokenCopied.off(), 2000);
-    }
-    return () => clearTimeout(timer);
-  }, [isTokenCopied]);
-
-  const copyTokenToClipboard = () => {
-    navigator.clipboard.writeText(newToken);
-    setIsTokenCopied.on();
-  };
+  const { createNotification } = useNotificationContext();
+  const deleteServiceToken = useDeleteServiceToken();
 
   const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
     "createAPIToken",
     "deleteAPITokenConfirmation"
   ] as const);
 
-  const {
-    control,
-    reset,
-    handleSubmit,
-    formState: { isSubmitting }
-  } = useForm<CreateServiceToken>({
-    resolver: yupResolver(createServiceTokenSchema)
-  });
-
-  const hasServiceToken = Boolean(newToken);
-
-  const onFormSubmit = async (data: CreateServiceToken) => {
-    const token = await onCreateToken(data);
-    setToken(token);
-  };
-
   const onDeleteApproved = async () => {
-    await onDeleteToken((popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id);
-    handlePopUpClose("deleteAPITokenConfirmation");
+    try {
+      deleteServiceToken.mutateAsync(
+        (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id
+      );
+      createNotification({
+        text: "Successfully deleted service token",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteAPITokenConfirmation");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete service token",
+        type: "error"
+      });
+    }
   };
 
   return (
-    <div className="mt-4 mb-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 p-6">
-      <div className="flex w-full flex-row justify-between">
-        <div className="flex w-full flex-col">
-          <p className="mb-3 text-xl font-semibold">{t("section.token.service-tokens")}</p>
-          <p className="text-sm text-gray-400 mb-4">{t("section.token.service-tokens-description")}</p>
-        </div>
-        <div>
-          <Modal
-            isOpen={popUp?.createAPIToken?.isOpen}
-            onOpenChange={(open) => {
-              handlePopUpToggle("createAPIToken", open);
-              reset();
-              setToken("");
-            }}
-          >
-            <ModalTrigger asChild>
-              <Button color="mineshaft" leftIcon={<FontAwesomeIcon icon={faPlus} />}>
-                {t("section.token.add-new")}
-              </Button>
-            </ModalTrigger>
-            <ModalContent
-              title={
-                t("section.token.add-dialog.title", {
-                  target: workspaceName
-                }) as string
-              }
-              subTitle={t("section.token.add-dialog.description") as string}
-            >
-              {!hasServiceToken ? (
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                  <Controller
-                    control={control}
-                    name="name"
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        label={t("section.token.add-dialog.name")}
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                      >
-                        <Input {...field} placeholder="Type your token name" />
-                      </FormControl>
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name="environment"
-                    defaultValue={environments?.[0]?.slug}
-                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                      <FormControl
-                        label="Environment"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
-                      >
-                        <Select
-                          defaultValue={field.value}
-                          {...field}
-                          onValueChange={(e) => onChange(e)}
-                          className="w-full"
-                        >
-                          {environments.map(({ name, slug }) => (
-                            <SelectItem value={slug} key={slug}>
-                              {name}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                      </FormControl>
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name="secretPath"
-                    defaultValue="/"
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        label="Secrets Path"
-                        isError={Boolean(error)}
-                        helperText="Tokens can be scoped to a folder path. Default path is /"
-                        errorText={error?.message}
-                      >
-                        <Input {...field} placeholder="Provide a path, default is /" />
-                      </FormControl>
-                    )}
-                  />
-
-                  <Controller
-                    control={control}
-                    name="expiresIn"
-                    defaultValue={String(apiTokenExpiry?.[0]?.value)}
-                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                      <FormControl
-                        label="Expiration"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
-                      >
-                        <Select
-                          defaultValue={field.value}
-                          {...field}
-                          onValueChange={(e) => onChange(e)}
-                          className="w-full"
-                        >
-                          {apiTokenExpiry.map(({ label, value }) => (
-                            <SelectItem value={String(value || "")} key={label}>
-                              {label}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                      </FormControl>
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name="permissions"
-                    defaultValue={{
-                      read: true,
-                      write: false
-                    }}
-                    render={({ field: { onChange, value }, fieldState: { error } }) => {
-                      const options = [
-                        {
-                          label: "Read (default)",
-                          value: "read"
-                        },
-                        {
-                          label: "Write (optional)",
-                          value: "write"
-                        }
-                      ];
-
-                      return (
-                        <FormControl
-                          label="Permissions"
-                          errorText={error?.message}
-                          isError={Boolean(error)}
-                        >
-                          <>
-                            {options.map(({ label, value: optionValue }) => {
-                              // TODO: refactor
-                              return (
-                                <Checkbox
-                                  id={value[optionValue]}
-                                  key={optionValue}
-                                  className="data-[state=checked]:bg-primary"
-                                  isChecked={value[optionValue]}
-                                  isDisabled={optionValue === "read"}
-                                  onCheckedChange={(state) => {
-                                    onChange({
-                                      ...value,
-                                      [optionValue]: state
-                                    });
-                                  }}
-                                >
-                                  {label}
-                                </Checkbox>
-                              );
-                            })}
-                          </>
-                        </FormControl>
-                      );
-                    }}
-                  />
-                  <div className="mt-8 flex items-center">
-                    <Button
-                      className="mr-4"
-                      type="submit"
-                      isDisabled={isSubmitting}
-                      isLoading={isSubmitting}
-                    >
-                      Create
-                    </Button>
-                    <ModalClose asChild>
-                      <Button variant="plain" colorSchema="secondary">
-                        Cancel
-                      </Button>
-                    </ModalClose>
-                  </div>
-                </form>
-              ) : (
-                <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">{newToken}</p>
-                  <IconButton
-                    ariaLabel="copy icon"
-                    colorSchema="secondary"
-                    className="group relative"
-                    onClick={copyTokenToClipboard}
-                  >
-                    <FontAwesomeIcon icon={isTokenCopied ? 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">
-                      {t("common.click-to-copy")}
-                    </span>
-                  </IconButton>
-                </div>
-              )}
-            </ModalContent>
-          </Modal>
-        </div>
+    <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")}
+        </p>
+        <Button
+          colorSchema="secondary"
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          onClick={() => {
+            handlePopUpOpen("createAPIToken");
+          }}
+        >
+          Create token
+        </Button>
       </div>
+      <p className="mb-8 text-gray-400">{t("section.token.service-tokens-description")}</p>
+      <ServiceTokenTable handlePopUpOpen={handlePopUpOpen} />
+      <AddServiceTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteAPITokenConfirmation.isOpen}
         title={`Delete ${
@@ -328,52 +71,6 @@ export const ServiceTokenSection = ({
         onClose={() => handlePopUpClose("deleteAPITokenConfirmation")}
         onDeleteApproved={onDeleteApproved}
       />
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Token Name</Th>
-              <Th>Environment</Th>
-              <Th>Secret Path</Th>
-              <Th>Valid Until</Th>
-              <Th aria-label="button" />
-            </Tr>
-          </THead>
-          <TBody>
-            {isLoading && <TableSkeleton columns={4} key="project-service-tokens" />}
-            {!isLoading &&
-              tokens.map((row) => (
-                <Tr key={row._id}>
-                  <Td>{row.name}</Td>
-                  <Td>{row.environment}</Td>
-                  <Td>{row.secretPath}</Td>
-                  <Td>{row.expiresAt && new Date(row.expiresAt).toUTCString()}</Td>
-                  <Td className="flex items-center justify-end">
-                    <IconButton
-                      onClick={() =>
-                        handlePopUpOpen("deleteAPITokenConfirmation", {
-                          name: row.name,
-                          id: row._id
-                        })
-                      }
-                      colorSchema="danger"
-                      ariaLabel="delete"
-                    >
-                      <FontAwesomeIcon icon={faTrashCan} />
-                    </IconButton>
-                  </Td>
-                </Tr>
-              ))}
-            {!isLoading && tokens?.length === 0 && (
-              <Tr>
-                <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
-                  <EmptyState title="No service tokens found" icon={faKey} />
-                </Td>
-              </Tr>
-            )}
-          </TBody>
-        </Table>
-      </TableContainer>
     </div>
   );
 };

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenTable.tsx

@@ -0,0 +1,99 @@
+import { faFolder, faKey, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useGetUserWsServiceTokens } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteAPITokenConfirmation"]>,
+    {
+      name,
+      id
+    }: {
+      name: string;
+      id: string;
+    }
+  ) => void;
+};
+
+export const ServiceTokenTable = ({ handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data, isLoading } = useGetUserWsServiceTokens({
+    workspaceID: currentWorkspace?._id || ""
+  });
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Token Name</Th>
+            <Th>Envrionment - Secret Path</Th>
+            <Th>Valid Until</Th>
+            <Th aria-label="button" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={4} key="project-service-tokens" />}
+          {!isLoading &&
+            data &&
+            data.map((row) => (
+              <Tr key={row._id}>
+                <Td>{row.name}</Td>
+                <Td>
+                  <div className="mb-2 flex flex-col flex-wrap space-y-1">
+                    {row?.scopes.map(({ secretPath, environment }) => (
+                      <div
+                        key={`${row._id}-${environment}-${secretPath}`}
+                        className="inline-flex items-center space-x-1 rounded-md border border-mineshaft-600 p-1 px-2"
+                      >
+                        <div className="mr-2 border-r border-mineshaft-600 pr-2">{environment}</div>
+                        <FontAwesomeIcon icon={faFolder} size="sm" />
+                        <span className="pl-2">{secretPath}</span>
+                      </div>
+                    ))}
+                  </div>
+                </Td>
+                <Td>{row.expiresAt && new Date(row.expiresAt).toUTCString()}</Td>
+                <Td>
+                  <IconButton
+                    onClick={() =>
+                      handlePopUpOpen("deleteAPITokenConfirmation", {
+                        name: row.name,
+                        id: row._id
+                      })
+                    }
+                    colorSchema="danger"
+                    ariaLabel="delete"
+                  >
+                    <FontAwesomeIcon icon={faTrashCan} />
+                  </IconButton>
+                </Td>
+              </Tr>
+            ))}
+          {!isLoading && data && data?.length === 0 && (
+            <Tr>
+              <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
+                <EmptyState title="No service tokens found" icon={faKey} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx

@@ -0,0 +1,133 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+
+const formSchema = yup.object({
+  environment: yup.string().required().trim().label("Environment"),
+  webhookUrl: yup.string().url().required().trim().label("Webhook URL"),
+  webhookSecretKey: yup.string().trim().label("Secret Key"),
+  secretPath: yup.string().required().trim().label("Secret Path")
+});
+
+export type TFormSchema = yup.InferType<typeof formSchema>;
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onCreateWebhook: (data: TFormSchema) => void;
+  environments?: Array<{ slug: string; name: string }>;
+};
+
+export const AddWebhookForm = ({
+  isOpen,
+  onOpenChange,
+  onCreateWebhook,
+  environments = []
+}: Props) => {
+  const {
+    control,
+    handleSubmit,
+    register,
+    reset,
+    formState: { errors, isSubmitting }
+  } = useForm<TFormSchema>({
+    resolver: yupResolver(formSchema)
+  });
+
+  useEffect(() => {
+    if (!isOpen) {
+      reset();
+    }
+  }, [isOpen]);
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent title="Create a new webhook">
+        <form onSubmit={handleSubmit(onCreateWebhook)}>
+          <div>
+            <Controller
+              control={control}
+              name="environment"
+              defaultValue={environments?.[0]?.slug}
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="Environment"
+                  isRequired
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {environments.map(({ name, slug }) => (
+                      <SelectItem value={slug} key={slug}>
+                        {name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <FormControl
+              label="Secret Path"
+              isRequired
+              isError={Boolean(errors?.secretPath)}
+              errorText={errors?.secretPath?.message}
+            >
+              <Input placeholder="/, /**/*" {...register("secretPath")} />
+            </FormControl>
+            <FormControl
+              label="Secret Key"
+              isError={Boolean(errors?.webhookSecretKey)}
+              errorText={errors?.webhookSecretKey?.message}
+              helperText="To generate webhook signature for verification"
+            >
+              <Input
+                placeholder="Provided during webhook setup"
+                {...register("webhookSecretKey")}
+              />
+            </FormControl>
+            <FormControl
+              label="Webhook URL"
+              isRequired
+              isError={Boolean(errors?.webhookUrl)}
+              errorText={errors?.webhookUrl?.message}
+            >
+              <Input {...register("webhookUrl")} />
+            </FormControl>
+          </div>
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              type="submit"
+              isDisabled={isSubmitting}
+              isLoading={isSubmitting}
+            >
+              Create
+            </Button>
+            <ModalClose asChild>
+              <Button variant="plain" colorSchema="secondary">
+                Cancel
+              </Button>
+            </ModalClose>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/WebhooksTab.tsx

@@ -0,0 +1,279 @@
+import { useTranslation } from "react-i18next";
+import { faInfoCircle, faPlug, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import dayjs from "dayjs";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  DeleteActionModal,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import {
+  useCreateWebhook,
+  useDeleteWebhook,
+  useGetWebhooks,
+  useTestWebhook,
+  useUpdateWebhook
+} from "@app/hooks/api";
+
+import { AddWebhookForm, TFormSchema } from "./AddWebhookForm";
+
+export const WebhooksTab = () => {
+  const { t } = useTranslation();
+  const { createNotification } = useNotificationContext();
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?._id || "";
+  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+    "addWebhook",
+    "deleteWebhook"
+  ] as const);
+
+  const { data: webhooks, isLoading: isWebhooksLoading } = useGetWebhooks(workspaceId);
+
+  // mutation
+  const { mutateAsync: createWebhook } = useCreateWebhook();
+  const {
+    mutateAsync: testWebhook,
+    variables: testWebhookVars,
+    isLoading: isTestWebhookSubmitting
+  } = useTestWebhook();
+  const {
+    mutateAsync: updateWebhook,
+    variables: updateWebhookVars,
+    isLoading: isUpdateWebhookSubmitting
+  } = useUpdateWebhook();
+  const { mutateAsync: deleteWebhook } = useDeleteWebhook();
+
+  const handleWebhookCreate = async (data: TFormSchema) => {
+    try {
+      await createWebhook({
+        ...data,
+        workspaceId
+      });
+      handlePopUpClose("addWebhook");
+      createNotification({
+        type: "success",
+        text: "Successfully created webhook"
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to create webhook"
+      });
+    }
+  };
+
+  const handleWebhookDisable = async (webhookId: string, isDisabled: boolean) => {
+    try {
+      await updateWebhook({
+        webhookId,
+        workspaceId,
+        isDisabled
+      });
+      createNotification({
+        type: "success",
+        text: "Successfully updated webhook"
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to update webhook"
+      });
+    }
+  };
+
+  const handleWebhookDelete = async () => {
+    try {
+      const webhookId = popUp?.deleteWebhook?.data as string;
+      await deleteWebhook({
+        webhookId,
+        workspaceId
+      });
+      handlePopUpClose("deleteWebhook");
+      createNotification({
+        type: "success",
+        text: "Successfully deleted webhook"
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to delete webhook"
+      });
+    }
+  };
+
+  const handleWebhookTest = async (webhookId: string) => {
+    try {
+      await testWebhook({
+        webhookId,
+        workspaceId
+      });
+      createNotification({
+        type: "success",
+        text: "Successfully triggered webhook"
+      });
+    } catch (err) {
+      console.log(err);
+      createNotification({
+        type: "error",
+        text: "Failed to trigger webhook"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">{t("settings.webhooks.title")}</p>
+        <Button
+          onClick={() => handlePopUpOpen("addWebhook")}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+        >
+          Create
+        </Button>
+      </div>
+      <p className="mb-8 text-gray-400">{t("settings.webhooks.description")}</p>
+      <div>
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Td>URL</Td>
+                <Td>Environment</Td>
+                <Td>Secret Path</Td>
+                <Td>Status</Td>
+                <Td className="text-right">Action</Td>
+              </Tr>
+            </THead>
+            <TBody>
+              {isWebhooksLoading && <TableSkeleton columns={5} key="webhooks-loading" />}
+              {!isWebhooksLoading && webhooks && webhooks?.length === 0 && (
+                <Tr>
+                  <Td colSpan={5}>
+                    <EmptyState title="No webhooks found" icon={faPlug} />
+                  </Td>
+                </Tr>
+              )}
+              {!isWebhooksLoading &&
+                webhooks?.map(
+                  ({
+                    _id: id,
+                    url,
+                    environment,
+                    secretPath,
+                    lastStatus,
+                    isDisabled,
+                    updatedAt,
+                    lastRunErrorMessage
+                  }) => (
+                    <Tr key={id}>
+                      <Td className="max-w-xs overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
+                        {url}
+                      </Td>
+                      <Td>{environment}</Td>
+                      <Td>{secretPath}</Td>
+                      <Td>
+                        {!lastStatus ? (
+                          "-"
+                        ) : (
+                          <div className="inline-flex w-min items-center rounded bg-mineshaft-600 px-2 py-0.5 text-sm">
+                            {lastStatus}{" "}
+                            <Tooltip
+                              content={
+                                <div className="text-xs">
+                                  <div>
+                                    Updated At: {dayjs(updatedAt).format("YYYY-MM-DD, hh:mm A")}
+                                  </div>
+                                  {lastRunErrorMessage && (
+                                    <div className="mt-2 text-red">
+                                      Error: {lastRunErrorMessage}
+                                    </div>
+                                  )}
+                                </div>
+                              }
+                            >
+                              <FontAwesomeIcon
+                                className={`ml-1 ${
+                                  lastStatus === "failed" ? "text-red" : "text-green"
+                                }`}
+                                icon={faInfoCircle}
+                              />
+                            </Tooltip>
+                          </div>
+                        )}
+                      </Td>
+                      <Td>
+                        <div className="flex items-center justify-end space-x-2">
+                          <Button
+                            variant="star"
+                            size="xs"
+                            onClick={() => handleWebhookTest(id)}
+                            isDisabled={
+                              isTestWebhookSubmitting && testWebhookVars?.webhookId === id
+                            }
+                            isLoading={isTestWebhookSubmitting && testWebhookVars?.webhookId === id}
+                          >
+                            Test
+                          </Button>
+                          <Button
+                            variant="outline_bg"
+                            size="xs"
+                            onClick={() => handleWebhookDisable(id, !isDisabled)}
+                            isDisabled={
+                              isUpdateWebhookSubmitting && updateWebhookVars?.webhookId === id
+                            }
+                            isLoading={
+                              isUpdateWebhookSubmitting && updateWebhookVars?.webhookId === id
+                            }
+                          >
+                            {isDisabled ? "Enable" : "Disable"}
+                          </Button>
+                          <Button
+                            variant="outline_bg"
+                            className="border-red-800 bg-red-800 hover:border-red-700 hover:bg-red-700"
+                            colorSchema="danger"
+                            size="xs"
+                            onClick={() => handlePopUpOpen("deleteWebhook", id)}
+                          >
+                            Delete
+                          </Button>
+                        </div>
+                      </Td>
+                    </Tr>
+                  )
+                )}
+            </TBody>
+          </Table>
+        </TableContainer>
+      </div>
+      <AddWebhookForm
+        environments={currentWorkspace?.environments}
+        isOpen={popUp?.addWebhook?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("addWebhook", isOpen)}
+        onCreateWebhook={handleWebhookCreate}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deleteWebhook.isOpen}
+        deleteKey="remove"
+        title="Are you sure you want to delete this webhook?"
+        onChange={(isOpen) => handlePopUpToggle("deleteWebhook", isOpen)}
+        onClose={() => handlePopUpClose("deleteWebhook")}
+        onDeleteApproved={handleWebhookDelete}
+      />
+    </div>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/index.tsx

@@ -0,0 +1 @@
+export { WebhooksTab } from "./WebhooksTab";

frontend/src/views/Settings/ProjectSettingsPage/components/index.tsx

@@ -1,9 +1,8 @@
-export { CopyProjectIDSection } from "./CopyProjectIDSection";
+export { AutoCapitalizationSection } from "./AutoCapitalizationSection";
+export { DeleteProjectSection } from "./DeleteProjectSection";
 export { E2EESection } from "./E2EESection";
 export { EnvironmentSection } from "./EnvironmentSection";
-export type { CreateUpdateEnvFormData } from "./EnvironmentSection/EnvironmentSection";
 export { ProjectIndexSecretsSection } from "./ProjectIndexSecretsSection";
 export { ProjectNameChangeSection } from "./ProjectNameChangeSection";
-export type { CreateWsTag } from "./SecretTagsSection/SecretTagsSection";
+export { SecretTagsSection } from "./SecretTagsSection";
 export { ServiceTokenSection } from "./ServiceTokenSection";
-export type { CreateServiceToken } from "./ServiceTokenSection/ServiceTokenSection";