Fix merge conflicts

frontend/src/views/IntegrationsPage/IntegrationsPage.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, Modal, ModalContent } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
@@ -31,7 +31,7 @@ type Props = {
 export const IntegrationsPage = withProjectPermission(
   ({ frameworkIntegrations }: Props) => {
     const { t } = useTranslation();
-    const { createNotification } = useNotificationContext();
+    
 
     const { currentWorkspace } = useWorkspace();
     const workspaceId = currentWorkspace?.id || "";

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

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { DeleteActionModal, Skeleton, Tooltip } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { usePopUp } from "@app/hooks";
@@ -31,7 +31,7 @@ export const CloudIntegrationSection = ({
     "deleteConfirmation"
   ] as const);
   const { permission } = useProjectPermission();
-  const { createNotification } = useNotificationContext();
+  
 
   const isEmpty = !isLoading && !cloudIntegrations?.length;
 

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

@@ -207,7 +207,11 @@ export const IntegrationsSection = ({
           (popUp?.deleteConfirmation.data as TIntegration)?.integration || " "
         } integration for ${(popUp?.deleteConfirmation.data as TIntegration)?.app || " "}?`}
         onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
-        deleteKey={(popUp?.deleteConfirmation?.data as TIntegration)?.app || (popUp?.deleteConfirmation?.data as TIntegration)?.owner || ""}
+        deleteKey={
+          (popUp?.deleteConfirmation?.data as TIntegration)?.app ||
+          (popUp?.deleteConfirmation?.data as TIntegration)?.owner ||
+          ""
+        }
         onDeleteApproved={async () =>
           onIntegrationDelete(popUp?.deleteConfirmation.data as TIntegration, () =>
             handlePopUpClose("deleteConfirmation")

frontend/src/views/Login/LoginSSO.tsx

@@ -1,62 +1,46 @@
 import { useEffect, useState } from "react";
 import jwt_decode from "jwt-decode";
 
-import {
-    MFAStep,
-    PasswordStep
-} from "./components";
+import { MFAStep, PasswordStep } from "./components";
 
-type Props = { 
-    providerAuthToken: string;
-}
+type Props = {
+  providerAuthToken: string;
+};
 
 export const LoginSSO = ({ providerAuthToken }: Props) => {
-    const [step, setStep] = useState(0);
-    const [password, setPassword] = useState("");
+  const [step, setStep] = useState(0);
+  const [password, setPassword] = useState("");
 
-    const {
-        username,
-        isUserCompleted
-    } = jwt_decode(providerAuthToken) as any;
-    
-    useEffect(() => {
-        if (isUserCompleted) {
-            setStep(1);
-        }
-    }, []);
-    
-    const renderView = () => {
-        switch (step) {
-            case 0:
-                return (
-                    <div />
-                );
-            case 1:
-                return (
-                    <PasswordStep 
-                        providerAuthToken={providerAuthToken}
-                        email={username}
-                        password={password}
-                        setPassword={setPassword}
-                        setStep={setStep}
-                    />
-                );
-            case 2: 
-                return (
-                    <MFAStep 
-                        providerAuthToken={providerAuthToken}
-                        email={username}
-                        password={password}
-                    />
-                );
-            default:
-                return <div />;
-        }
+  const { username, isUserCompleted } = jwt_decode(providerAuthToken) as any;
+
+  useEffect(() => {
+    if (isUserCompleted) {
+      setStep(1);
     }
+  }, []);
 
-    return (
-        <div>
-            {renderView()}
-        </div>
-    );
-}
+  const renderView = () => {
+    switch (step) {
+      case 0:
+        return <div />;
+      case 1:
+        return (
+          <PasswordStep
+            providerAuthToken={providerAuthToken}
+            email={username}
+            password={password}
+            setPassword={setPassword}
+            setStep={setStep}
+          />
+        );
+      case 2:
+        return (
+          <MFAStep providerAuthToken={providerAuthToken} email={username} password={password} />
+        );
+      default:
+        return <div />;
+    }
+  };
+
+  return <div>{renderView()}</div>;
+};

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -7,7 +7,7 @@ import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import Error from "@app/components/basic/Error";
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
 import attemptLogin from "@app/components/utilities/attemptLogin";
 import { Button, Input } from "@app/components/v2";
@@ -25,7 +25,7 @@ type Props = {
 
 export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: Props) => {
   const router = useRouter();
-  const { createNotification } = useNotificationContext();
+  
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(false);
   const [loginError, setLoginError] = useState(false);

frontend/src/views/Login/components/InitialStep/index.tsx

@@ -1 +1 @@
-export { InitialStep } from "./InitialStep";
+export { InitialStep } from "./InitialStep";

frontend/src/views/Login/components/LDAPStep/LDAPStep.tsx

@@ -1,137 +1,135 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, Input } from "@app/components/v2";
 import { loginLDAPRedirect } from "@app/hooks/api/auth/queries";
 
 type Props = {
-    setStep: (step: number) => void;
-}
+  setStep: (step: number) => void;
+};
 
-export const LDAPStep = ({
-    setStep
-}: Props) => {
-    const { createNotification } = useNotificationContext();
-    const [organizationSlug, setOrganizationSlug] = useState("");
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
-    
-    const { t } = useTranslation();
+export const LDAPStep = ({ setStep }: Props) => {
+  
+  const [organizationSlug, setOrganizationSlug] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
 
-    // const queryParams = new URLSearchParams(window.location.search);
+  const { t } = useTranslation();
 
-    const handleSubmission = async (e:React.FormEvent) => {
-        e.preventDefault()
-        try {
-            const { nextUrl } = await loginLDAPRedirect({
-                organizationSlug,
-                username,
-                password
-            });
-            
-            if (!nextUrl) {
-                createNotification({
-                    text: "Login unsuccessful. Double-check your credentials and try again.",
-                    type: "error"
-                });
-                
-                return;
-            }
-            
-            createNotification({
-                text: "Successfully logged in",
-                type: "success"
-            });
+  // const queryParams = new URLSearchParams(window.location.search);
 
-            // redirects either to /login/sso or /signup/sso
-            window.open(nextUrl);
-            window.close();
-        } catch (err) {
-            createNotification({
-                text: "Login unsuccessful. Double-check your credentials and try again.",
-                type: "error"
-            });
-        }
-        
-        // TODO: add callback port support
-        
-        // const callbackPort = queryParams.get("callback_port");
-        // window.open(`/api/v1/ldap/redirect/saml2/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
-        // window.close();
+  const handleSubmission = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const { nextUrl } = await loginLDAPRedirect({
+        organizationSlug,
+        username,
+        password
+      });
+
+      if (!nextUrl) {
+        createNotification({
+          text: "Login unsuccessful. Double-check your credentials and try again.",
+          type: "error"
+        });
+
+        return;
+      }
+
+      createNotification({
+        text: "Successfully logged in",
+        type: "success"
+      });
+
+      // redirects either to /login/sso or /signup/sso
+      window.open(nextUrl);
+      window.close();
+    } catch (err) {
+      createNotification({
+        text: "Login unsuccessful. Double-check your credentials and try again.",
+        type: "error"
+      });
     }
 
-    return (
-        <div className="mx-auto w-full max-w-md md:px-6">
-            <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
-                What&apos;s your LDAP Login?
-            </p>
-            <form onSubmit={handleSubmission}>
-            <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
-                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
-                <Input
-                    value={organizationSlug}
-                    onChange={(e) => setOrganizationSlug(e.target.value)}
-                    type="text"
-                    placeholder="Enter your organization slug..."
-                    isRequired
-                    autoComplete="email"
-                    id="email"
-                    className="h-12"
-                />
-                </div>
-            </div>
-            <div className="mt-2 relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
-                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
-                <Input
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                    type="text"
-                    placeholder="Enter your LDAP username..."
-                    isRequired
-                    autoComplete="email"
-                    id="email"
-                    className="h-12"
-                />
-                </div>
-            </div>
-            <div className="mt-2 relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
-                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
-                <Input
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    type="password"
-                    placeholder="Enter your LDAP password..."
-                    isRequired
-                    autoComplete="current-password"
-                    id="current-password"
-                    className="select:-webkit-autofill:focus h-10"
-                />
-                </div>
-            </div>
-            <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[20rem] md:min-w-[22rem] text-center rounded-md mt-4'>
-                <Button
-                    type="submit" 
-                    colorSchema="primary" 
-                    variant="outline_bg"
-                    isFullWidth
-                    className="h-14"
-                > 
-                    {t("login.login")} 
-                </Button>
-            </div>
-            </form>
-            <div className="flex flex-row items-center justify-center mt-4">
-                <button
-                onClick={() => {
-                    setStep(0);
-                }}
-                type="button"
-                className="text-bunker-300 text-sm hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer"
-                >
-                {t("login.other-option")}
-                </button>
-            </div>
+    // TODO: add callback port support
+
+    // const callbackPort = queryParams.get("callback_port");
+    // window.open(`/api/v1/ldap/redirect/saml2/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
+    // window.close();
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-md md:px-6">
+      <p className="mx-auto mb-6 mb-8 flex w-max justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        What&apos;s your LDAP Login?
+      </p>
+      <form onSubmit={handleSubmission}>
+        <div className="relative mx-auto flex max-h-24 w-1/4 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-[22rem] lg:w-1/6">
+          <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
+            <Input
+              value={organizationSlug}
+              onChange={(e) => setOrganizationSlug(e.target.value)}
+              type="text"
+              placeholder="Enter your organization slug..."
+              isRequired
+              autoComplete="email"
+              id="email"
+              className="h-12"
+            />
+          </div>
         </div>
-    );
-};
+        <div className="relative mx-auto mt-2 flex max-h-24 w-1/4 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-[22rem] lg:w-1/6">
+          <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
+            <Input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              type="text"
+              placeholder="Enter your LDAP username..."
+              isRequired
+              autoComplete="email"
+              id="email"
+              className="h-12"
+            />
+          </div>
+        </div>
+        <div className="relative mx-auto mt-2 flex max-h-24 w-1/4 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-[22rem] lg:w-1/6">
+          <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
+            <Input
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              type="password"
+              placeholder="Enter your LDAP password..."
+              isRequired
+              autoComplete="current-password"
+              id="current-password"
+              className="select:-webkit-autofill:focus h-10"
+            />
+          </div>
+        </div>
+        <div className="mx-auto mt-4 flex w-1/4 w-full min-w-[20rem] items-center justify-center rounded-md text-center md:min-w-[22rem] lg:w-1/6">
+          <Button
+            type="submit"
+            colorSchema="primary"
+            variant="outline_bg"
+            isFullWidth
+            className="h-14"
+          >
+            {t("login.login")}
+          </Button>
+        </div>
+      </form>
+      <div className="mt-4 flex flex-row items-center justify-center">
+        <button
+          onClick={() => {
+            setStep(0);
+          }}
+          type="button"
+          className="mt-2 cursor-pointer text-sm text-bunker-300 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
+        >
+          {t("login.other-option")}
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/views/Login/components/LDAPStep/index.tsx

@@ -1 +1 @@
-export { LDAPStep } from "./LDAPStep";
+export { LDAPStep } from "./LDAPStep";

frontend/src/views/Login/components/MFAStep/MFAStep.tsx

@@ -6,7 +6,7 @@ import axios from "axios";
 import jwt_decode from "jwt-decode";
 
 import Error from "@app/components/basic/Error"; // which to notification
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import attemptCliLoginMfa from "@app/components/utilities/attemptCliLoginMfa";
 import attemptLoginMfa from "@app/components/utilities/attemptLoginMfa";
 import { Button } from "@app/components/v2";
@@ -59,7 +59,7 @@ interface VerifyMfaTokenError {
 }
 
 export const MFAStep = ({ email, password, providerAuthToken }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingResend, setIsLoadingResend] = useState(false);

frontend/src/views/Login/components/MFAStep/index.tsx

@@ -1 +1 @@
-export { MFAStep } from "./MFAStep";
+export { MFAStep } from "./MFAStep";

frontend/src/views/Login/components/PasswordStep/PasswordStep.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import axios from "axios";
 import jwt_decode from "jwt-decode";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
 import attemptLogin from "@app/components/utilities/attemptLogin";
 import { Button, Input } from "@app/components/v2";
@@ -31,7 +31,7 @@ export const PasswordStep = ({
   setPassword,
   setStep
 }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const [isLoading, setIsLoading] = useState(false);
   const { t } = useTranslation();
   const router = useRouter();

frontend/src/views/Login/components/PasswordStep/index.tsx

@@ -1 +1 @@
-export { PasswordStep } from "./PasswordStep";
+export { PasswordStep } from "./PasswordStep";

frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx

@@ -4,67 +4,69 @@ import { useTranslation } from "react-i18next";
 import { Button, Input } from "@app/components/v2";
 
 type Props = {
-    setStep: (step: number) => void;
-}
+  setStep: (step: number) => void;
+};
 
-export const SAMLSSOStep = ({
-    setStep
-}: Props) => {
-    const [ssoIdentifier, setSSOIdentifier] = useState("");
-    const { t } = useTranslation();
+export const SAMLSSOStep = ({ setStep }: Props) => {
+  const [ssoIdentifier, setSSOIdentifier] = useState("");
+  const { t } = useTranslation();
 
-    const queryParams = new URLSearchParams(window.location.search);
+  const queryParams = new URLSearchParams(window.location.search);
 
-    const handleSubmission = (e:React.FormEvent) => {
-        e.preventDefault()
-        const callbackPort = queryParams.get("callback_port");
-        window.open(`/api/v1/sso/redirect/saml2/organizations/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
-        window.close();
-    }
-
-    return (
-        <div className="mx-auto w-full max-w-md md:px-6">
-            <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
-                What&apos;s your organization slug?
-            </p>
-            <form onSubmit={handleSubmission}>
-            <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
-                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
-                <Input
-                    value={ssoIdentifier}
-                    onChange={(e) => setSSOIdentifier(e.target.value)}
-                    type="text"
-                    placeholder="acme-123"
-                    isRequired
-                    autoComplete="email"
-                    id="email"
-                    className="h-12"
-                />
-                </div>
-            </div>
-            <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[20rem] md:min-w-[22rem] text-center rounded-md mt-4'>
-                <Button
-                    type="submit" 
-                    colorSchema="primary" 
-                    variant="outline_bg"
-                    isFullWidth
-                    className="h-14"
-                > 
-                    Continue with SAML
-                </Button>
-            </div>
-            </form>
-            <div className="flex flex-row items-center justify-center mt-4">
-                <button
-                onClick={() => {
-                    setStep(0);
-                }}
-                type="button"
-                className="text-bunker-300 text-sm hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer"
-                >
-                {t("login.other-option")}
-                </button>
-            </div>
-        </div>
+  const handleSubmission = (e: React.FormEvent) => {
+    e.preventDefault();
+    const callbackPort = queryParams.get("callback_port");
+    window.open(
+      `/api/v1/sso/redirect/saml2/organizations/${ssoIdentifier}${
+        callbackPort ? `?callback_port=${callbackPort}` : ""
+      }`
     );
-}
+    window.close();
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-md md:px-6">
+      <p className="mx-auto mb-6 mb-8 flex w-max justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        What&apos;s your organization slug?
+      </p>
+      <form onSubmit={handleSubmission}>
+        <div className="relative mx-auto flex max-h-24 w-1/4 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-[22rem] lg:w-1/6">
+          <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
+            <Input
+              value={ssoIdentifier}
+              onChange={(e) => setSSOIdentifier(e.target.value)}
+              type="text"
+              placeholder="acme-123"
+              isRequired
+              autoComplete="email"
+              id="email"
+              className="h-12"
+            />
+          </div>
+        </div>
+        <div className="mx-auto mt-4 flex w-1/4 w-full min-w-[20rem] items-center justify-center rounded-md text-center md:min-w-[22rem] lg:w-1/6">
+          <Button
+            type="submit"
+            colorSchema="primary"
+            variant="outline_bg"
+            isFullWidth
+            className="h-14"
+          >
+            Continue with SAML
+          </Button>
+        </div>
+      </form>
+      <div className="mt-4 flex flex-row items-center justify-center">
+        <button
+          onClick={() => {
+            setStep(0);
+          }}
+          type="button"
+          className="mt-2 cursor-pointer text-sm text-bunker-300 duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"
+        >
+          {t("login.other-option")}
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/views/Login/components/SAMLSSOStep/index.tsx

@@ -1 +1 @@
-export { SAMLSSOStep } from "./SAMLSSOStep";
+export { SAMLSSOStep } from "./SAMLSSOStep";

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

@@ -4,4 +4,4 @@ export { MFAStep } from "./MFAStep";
 export { SAMLSSOStep } from "./SAMLSSOStep";
 
 // SSO-specific step
-export { PasswordStep } from "./PasswordStep";
+export { PasswordStep } from "./PasswordStep";

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

@@ -1,19 +1,17 @@
 import { motion } from "framer-motion";
 
-import { 
-    IdentitySection
-} from "./components";
+import { IdentitySection } from "./components";
 
 export const OrgIdentityTab = () => {
-    return (
-        <motion.div
-            key="panel-service-token"
-            transition={{ duration: 0.15 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-        >
-            <IdentitySection />
-        </motion.div>
-    );
-}
+  return (
+    <motion.div
+      key="panel-service-token"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <IdentitySection />
+    </motion.div>
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx

@@ -1,14 +1,14 @@
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import {
-    FormControl,
-    Modal,
-    ModalContent,
-    Select,
-    SelectItem,
-    UpgradePlanModal
+  FormControl,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  UpgradePlanModal
 } from "@app/components/v2";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -16,93 +16,90 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
 
 type Props = {
-    popUp: UsePopUpState<["identityAuthMethod", "upgradePlan"]>;
-    handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan"]>, state?: boolean) => void;
-}
+  popUp: UsePopUpState<["identityAuthMethod", "upgradePlan"]>;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan"]>,
+    state?: boolean
+  ) => void;
+};
 
-const identityAuthMethods = [
-    { label: "Universal Auth", value: IdentityAuthMethod.UNIVERSAL_AUTH }
-];
+const identityAuthMethods = [{ label: "Universal Auth", value: IdentityAuthMethod.UNIVERSAL_AUTH }];
 
-const schema = yup.object({
-    authMethod: yup.string().required("Auth method is required"), // TODO: better enforcement here
-}).required();
+const schema = yup
+  .object({
+    authMethod: yup.string().required("Auth method is required") // TODO: better enforcement here
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
-export const IdentityAuthMethodModal = ({
-    popUp,
-    handlePopUpOpen,
-    handlePopUpToggle
-}: Props) => {
+export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+  const {
+    control
+    // watch,
+  } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
 
-    const {
-        control,
-        // watch,
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
+  const identityAuthMethodData = popUp?.identityAuthMethod?.data as {
+    identityId: string;
+    name: string;
+    authMethod?: IdentityAuthMethod;
+  };
 
-    const identityAuthMethodData = popUp?.identityAuthMethod?.data as {
-        identityId: string;
-        name: string;
-        authMethod?: IdentityAuthMethod;
-    }
-    
-    // const authMethod = watch("authMethod");
-    
-    const renderIdentityAuthForm = () => {
-        return (
-            <IdentityUniversalAuthForm 
-                handlePopUpOpen={handlePopUpOpen}
-                handlePopUpToggle={handlePopUpToggle}
-                identityAuthMethodData={identityAuthMethodData}
-            />
-        );
-    }
-    
+  // const authMethod = watch("authMethod");
+
+  const renderIdentityAuthForm = () => {
     return (
-        <Modal
-            isOpen={popUp?.identityAuthMethod?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("identityAuthMethod", isOpen);
-            }}
-        >
-            <ModalContent title={`${identityAuthMethodData?.authMethod ? "Update" : "Configure"} Identity Auth Method for ${identityAuthMethodData?.name ?? ""}`}>
-                <Controller
-                    control={control}
-                    name="authMethod"
-                    defaultValue={IdentityAuthMethod.UNIVERSAL_AUTH}
-                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                        <FormControl
-                            label="Auth Method"
-                            errorText={error?.message}
-                            isError={Boolean(error)}
-                        >
-                            <Select
-                                defaultValue={field.value}
-                                {...field}
-                                onValueChange={(e) => onChange(e)}
-                                className="w-full"
-                            >
-                                {identityAuthMethods.map(({ label, value }) => (
-                                    <SelectItem value={String(value || "")} key={label}>
-                                        {label}
-                                    </SelectItem>
-                                ))}
-                            </Select>
-                        </FormControl>
-                    )}
-                />
-                {renderIdentityAuthForm()}
-                <UpgradePlanModal
-                    isOpen={popUp?.upgradePlan?.isOpen}
-                    onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                    text="You can use IP allowlisting if you switch to Infisical's Pro plan."
-                />
-            </ModalContent>
-        </Modal>
+      <IdentityUniversalAuthForm
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+        identityAuthMethodData={identityAuthMethodData}
+      />
     );
-}
+  };
 
+  return (
+    <Modal
+      isOpen={popUp?.identityAuthMethod?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("identityAuthMethod", isOpen);
+      }}
+    >
+      <ModalContent
+        title={`${
+          identityAuthMethodData?.authMethod ? "Update" : "Configure"
+        } Identity Auth Method for ${identityAuthMethodData?.name ?? ""}`}
+      >
+        <Controller
+          control={control}
+          name="authMethod"
+          defaultValue={IdentityAuthMethod.UNIVERSAL_AUTH}
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl label="Auth Method" errorText={error?.message} isError={Boolean(error)}>
+              <Select
+                defaultValue={field.value}
+                {...field}
+                onValueChange={(e) => onChange(e)}
+                className="w-full"
+              >
+                {identityAuthMethods.map(({ label, value }) => (
+                  <SelectItem value={String(value || "")} key={label}>
+                    {label}
+                  </SelectItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+        {renderIdentityAuthForm()}
+        <UpgradePlanModal
+          isOpen={popUp?.upgradePlan?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="You can use IP allowlisting if you switch to Infisical's Pro plan."
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -3,7 +3,7 @@ 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 { createNotification } from "@app/components/notifications";
 import {
   Button,
   FormControl,
@@ -15,7 +15,7 @@ import {
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useCreateIdentity, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { IdentityAuthMethod, useAddIdentityUniversalAuth } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup
@@ -40,8 +40,8 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
 };
 
-export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
-  const { createNotification } = useNotificationContext();
+export const IdentityModal = ({ popUp, /* handlePopUpOpen, */ handlePopUpToggle }: Props) => {
+  
 
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -50,6 +50,7 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro
 
   const { mutateAsync: createMutateAsync } = useCreateIdentity();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
+  const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
 
   const {
     control,
@@ -112,21 +113,31 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro
         // create
 
         const {
-          id: createdId,
-          name: createdName,
-          authMethod
+          id: createdId
+          // name: createdName,
+          // authMethod
         } = await createMutateAsync({
           name,
           role: role || undefined,
           organizationId: orgId
         });
 
-        handlePopUpToggle("identity", false);
-        handlePopUpOpen("identityAuthMethod", {
+        await addMutateAsync({
+          organizationId: orgId,
           identityId: createdId,
-          name: createdName,
-          authMethod
+          clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTTL: 2592000,
+          accessTokenMaxTTL: 2592000,
+          accessTokenNumUsesLimit: 0
         });
+
+        handlePopUpToggle("identity", false);
+        // handlePopUpOpen("identityAuthMethod", {
+        //   identityId: createdId,
+        //   name: createdName,
+        //   authMethod
+        // });
       }
 
       createNotification({

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { faArrowUpRightFromSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
@@ -20,7 +20,7 @@ export const IdentitySection = withPermission(
     const { currentOrg } = useOrganization();
     const orgId = currentOrg?.id || "";
 
-    const { createNotification } = useNotificationContext();
+    
     const { mutateAsync: deleteMutateAsync } = useDeleteIdentity();
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
       "identity",

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -1,7 +1,7 @@
 import { faKey, faLock, faPencil, faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   EmptyState,
@@ -44,7 +44,7 @@ type Props = {
 };
 
 export const IdentityTable = ({ handlePopUpOpen }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
 

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal.tsx

@@ -7,7 +7,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { format } from "date-fns";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   DeleteActionModal,
@@ -66,7 +66,7 @@ export const IdentityUniversalAuthClientSecretModal = ({
   handlePopUpToggle
 }: Props) => {
   const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
+  
   const [token, setToken] = useState("");
   const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
   const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx

@@ -5,7 +5,7 @@ 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 { createNotification } from "@app/components/notifications";
 import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
@@ -63,7 +63,7 @@ export const IdentityUniversalAuthForm = ({
   handlePopUpToggle,
   identityAuthMethodData
 }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
   const { subscription } = useSubscription();

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

@@ -1 +1 @@
-export { IdentitySection } from "./IdentitySection";
+export { IdentitySection } from "./IdentitySection";

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

@@ -1 +1 @@
-export { IdentitySection } from "./IdentitySection";
+export { IdentitySection } from "./IdentitySection";

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

@@ -1 +1 @@
-export { OrgIdentityTab } from "./OrgIdentityTab";
+export { OrgIdentityTab } from "./OrgIdentityTab";

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

@@ -3,15 +3,15 @@ import { motion } from "framer-motion";
 import { OrgMembersSection } from "./components";
 
 export const OrgMembersTab = () => {
-    return (
-        <motion.div
-            key="panel-org-members"
-            transition={{ duration: 0.15 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-        >
-            <OrgMembersSection />
-        </motion.div>
-    );
-}
+  return (
+    <motion.div
+        key="panel-org-members"
+        transition={{ duration: 0.15 }}
+        initial={{ opacity: 0, translateX: 30 }}
+        animate={{ opacity: 1, translateX: 0 }}
+        exit={{ opacity: 0, translateX: 30 }}
+    >
+        <OrgMembersSection />
+    </motion.div>
+  );
+}

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx

@@ -4,7 +4,7 @@ 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 { createNotification } from "@app/components/notifications";
 import { Button, FormControl, IconButton, Input, Modal, ModalContent } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useToggle } from "@app/hooks";
@@ -30,7 +30,7 @@ export const AddOrgMemberModal = ({
   completeInviteLink,
   setCompleteInviteLink
 }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentOrg } = useOrganization();
 
   const { data: serverDetails } = useFetchServerStatus();

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -23,11 +23,11 @@ import { AddOrgMemberModal } from "./AddOrgMemberModal";
 import { OrgMembersTable } from "./OrgMembersTable";
 
 export const OrgMembersSection = () => {
-  const { createNotification } = useNotificationContext();
+  
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id ?? "";
-  
+
   const [completeInviteLink, setCompleteInviteLink] = useState<string>("");
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([

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

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from "react";
 import { faMagnifyingGlass, faUsers, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -49,7 +49,7 @@ type Props = {
 };
 
 export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const { user } = useUser();
@@ -208,7 +208,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                                     ))}
                                 </Select>
                               )}
-                              {(status === "invited" || status === "verified") && email &&
+                              {(status === "invited" || status === "verified") &&
+                                email &&
                                 serverDetails?.emailConfigured && (
                                   <Button
                                     isDisabled={!isAllowed}
@@ -240,7 +241,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                                     });
                                     return;
                                   }
-                                  
+
                                   handlePopUpOpen("removeMember", { orgMembershipId, username });
                                 }}
                                 size="lg"

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

@@ -1 +1 @@
-export { OrgMembersSection } from "./OrgMembersSection";
+export { OrgMembersSection } from "./OrgMembersSection";

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

@@ -1 +1 @@
-export { OrgMembersSection } from "./OrgMembersSection";
+export { OrgMembersSection } from "./OrgMembersSection";

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

@@ -1 +1 @@
-export { OrgMembersTab } from "./OrgMembersTab";
+export { OrgMembersTab } from "./OrgMembersTab";

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx

@@ -14,7 +14,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useCreateOrgRole, useUpdateOrgRole } from "@app/hooks/api";
@@ -107,7 +107,7 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
   const isNonEditable = ["owner", "admin", "member", "no-access"].includes(role?.slug || "");
   const isNewRole = !role?.slug;
 
-  const { createNotification } = useNotificationContext();
+  
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
   const {

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx

@@ -71,7 +71,7 @@ const getPermissionList = (option: Props["formName"]) => {
     case "incident-contact":
       return INCIDENT_CONTACTS_PERMISSIONS;
     case "member":
-      return MEMBERS_PERMISSIONS
+      return MEMBERS_PERMISSIONS;
     default:
       return PERMISSIONS;
   }
@@ -149,7 +149,7 @@ export const SimpleLevelPermissionOption = ({
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -157,8 +157,8 @@ export const SimpleLevelPermissionOption = ({
         <div>
           <FontAwesomeIcon icon={icon} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">{title}</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">{title}</div>
           <div className="text-xs font-light">{subtitle}</div>
         </div>
         <div>
@@ -178,7 +178,7 @@ export const SimpleLevelPermissionOption = ({
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           getPermissionList(formName).map(({ action, label }) => (

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx

@@ -76,7 +76,7 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -84,8 +84,8 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
         <div>
           <FontAwesomeIcon icon={faMoneyBill} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">Project</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">Project</div>
           <div className="text-xs font-light">
             View and create new projects in this organization
           </div>
@@ -107,7 +107,7 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           PERMISSIONS.map(({ action, label }) => (

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { faEdit, faMagnifyingGlass, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -31,7 +31,7 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
   const [searchRoles, setSearchRoles] = useState("");
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
-  const { createNotification } = useNotificationContext();
+  
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
 
   const { data: roles, isLoading: isRolesLoading } = useGetOrgRoles(orgId);

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

@@ -1,4 +1,4 @@
 export { OrgGroupsTab } from "./OrgGroupsTab";
 export { OrgIdentityTab } from "./OrgIdentityTab";
 export { OrgMembersTab } from "./OrgMembersTab";
-export { OrgRoleTabSection } from "./OrgRoleTabSection";
+export { OrgRoleTabSection } from "./OrgRoleTabSection";

frontend/src/views/Org/NonePage/NonePage.tsx

@@ -6,7 +6,7 @@ import { CreateOrgModal } from "../components";
 
 export const NonePage = () => {
   const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);
-  
+
   useEffect(() => {
     handlePopUpToggle("createOrg", true);
   }, []);
@@ -19,4 +19,4 @@ export const NonePage = () => {
       />
     </div>
   );
-};
+};

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

@@ -1 +1 @@
-export { NonePage } from "./NonePage";
+export { NonePage } from "./NonePage";

frontend/src/views/Org/components/CreateOrgModal.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
 import z from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useCreateOrg, useSelectOrganization } from "@app/hooks/api";
 
@@ -22,7 +22,7 @@ interface CreateOrgModalProps {
 }
 
 export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) => {
-  const { createNotification } = useNotificationContext();
+  
   const router = useRouter();
 
   const {

frontend/src/views/Project/AuditLogsPage/AuditLogsPage.tsx

@@ -6,9 +6,9 @@ import { LogsSection } from "./components";
 export const AuditLogsPage = withProjectPermission(
   () => {
     return (
-      <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="py-6 sticky top-0 z-10 bg-bunker-800">
+      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl px-6">
+          <div className="sticky top-0 z-10 bg-bunker-800 py-6">
             <p className="text-3xl font-semibold text-gray-200">Audit Logs</p>
             <div />
           </div>

frontend/src/views/Project/AuditLogsPage/components/index.tsx

@@ -1 +1 @@
-export { LogsSection } from "./LogsSection";
+export { LogsSection } from "./LogsSection";

frontend/src/views/Project/AuditLogsPage/components/types.tsx

@@ -2,25 +2,25 @@ import * as yup from "yup";
 
 import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 
-export const auditLogFilterFormSchema = yup.object({
-    eventType: yup.string()
-        .oneOf(Object.values(EventType), "Invalid event type"),
+export const auditLogFilterFormSchema = yup
+  .object({
+    eventType: yup.string().oneOf(Object.values(EventType), "Invalid event type"),
     actor: yup.string(),
-    userAgentType: yup.string()
-        .oneOf(Object.values(UserAgentType), "Invalid user agent type"),
+    userAgentType: yup.string().oneOf(Object.values(UserAgentType), "Invalid user agent type"),
     startDate: yup.date(),
     endDate: yup.date().min(yup.ref("startDate"), "End date cannot be before start date"),
     page: yup.number(),
     perPage: yup.number()
-}).required();
+  })
+  .required();
 
 export type AuditLogFilterFormData = yup.InferType<typeof auditLogFilterFormSchema>;
 
 export type SetValueType = (
-  name: keyof AuditLogFilterFormData, 
-  value: any, 
+  name: keyof AuditLogFilterFormData,
+  value: any,
   options?: {
-    shouldValidate?: boolean,
-    shouldDirty?: boolean
+    shouldValidate?: boolean;
+    shouldDirty?: boolean;
   }
-) => void;
+) => void;

frontend/src/views/Project/AuditLogsPage/index.tsx

@@ -1 +1 @@
-export { AuditLogsPage } from "./AuditLogsPage";
+export { AuditLogsPage } from "./AuditLogsPage";

frontend/src/views/Project/IPAllowListPage/IPAllowlistPage.tsx

@@ -6,8 +6,8 @@ import { IPAllowlistSection } from "./components";
 export const IPAllowlistPage = withProjectPermission(
   () => {
     return (
-      <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="flex h-full w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl px-6">
           <div className="my-6">
             <p className="text-3xl font-semibold text-gray-200">IP Allowlist</p>
             <div />

frontend/src/views/Project/IPAllowListPage/components/IPAllowlistModal.tsx

@@ -3,7 +3,7 @@ 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 { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useAddTrustedIp, useGetMyIp, useUpdateTrustedIp } from "@app/hooks/api";
@@ -25,7 +25,7 @@ type Props = {
 };
 
 export const IPAllowlistModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { data, isLoading } = useGetMyIp();
 
   const { currentWorkspace } = useWorkspace();

frontend/src/views/Project/IPAllowListPage/components/IPAllowlistSection.tsx

@@ -1,7 +1,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal, UpgradePlanModal } from "@app/components/v2";
 import {
@@ -17,7 +17,7 @@ import { IPAllowlistModal } from "./IPAllowlistModal";
 import { IPAllowlistTable } from "./IPAllowlistTable";
 
 export const IPAllowlistSection = () => {
-  const { createNotification } = useNotificationContext();
+  
   const { mutateAsync } = useDeleteTrustedIp();
   const { subscription } = useSubscription();
   const { currentWorkspace } = useWorkspace();

frontend/src/views/Project/IPAllowListPage/components/index.tsx

@@ -1 +1 @@
-export { IPAllowlistSection } from "./IPAllowlistSection";
+export { IPAllowlistSection } from "./IPAllowlistSection";

frontend/src/views/Project/IPAllowListPage/index.tsx

@@ -1 +1 @@
-export { IPAllowlistPage } from "./IPAllowlistPage";
+export { IPAllowlistPage } from "./IPAllowlistPage";

frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx

@@ -1,19 +1,17 @@
 import { motion } from "framer-motion";
 
-import { 
-    IdentitySection,
-} from "./components";
+import { IdentitySection } from "./components";
 
 export const IdentityTab = () => {
-    return (
-        <motion.div
-            key="panel-identity"
-            transition={{ duration: 0.15 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-        >
-            <IdentitySection />
-        </motion.div>
-    );
-}
+  return (
+    <motion.div
+      key="panel-identity"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <IdentitySection />
+    </motion.div>
+  );
+};

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
@@ -30,7 +30,7 @@ type Props = {
 };
 
 export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentOrg } = useOrganization();
   const { currentWorkspace } = useWorkspace();
 

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityRoles.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   Checkbox,
@@ -207,7 +207,7 @@ export const IdentityRoles = ({
   identityId
 }: TMemberRolesProp) => {
   const { currentWorkspace } = useWorkspace();
-  const { createNotification } = useNotificationContext();
+  
   const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
   const [searchRoles, setSearchRoles] = useState("");
 
@@ -318,7 +318,7 @@ export const IdentityRoles = ({
                               icon={faClock}
                               className={twMerge(
                                 new Date() > new Date(temporaryAccessEndTime as string) &&
-                                "text-red-600"
+                                  "text-red-600"
                               )}
                             />
                           </Tooltip>
@@ -391,14 +391,14 @@ export const IdentityRoles = ({
                               defaultValue={
                                 userProjectRoleDetails?.isTemporary
                                   ? {
-                                    isTemporary: true,
-                                    temporaryAccessStartTime:
-                                      userProjectRoleDetails.temporaryAccessStartTime as string,
-                                    temporaryRange:
-                                      userProjectRoleDetails.temporaryRange as string,
-                                    temporaryAccessEndTime:
-                                      userProjectRoleDetails.temporaryAccessEndTime
-                                  }
+                                      isTemporary: true,
+                                      temporaryAccessStartTime:
+                                        userProjectRoleDetails.temporaryAccessStartTime as string,
+                                      temporaryRange:
+                                        userProjectRoleDetails.temporaryRange as string,
+                                      temporaryAccessEndTime:
+                                        userProjectRoleDetails.temporaryAccessEndTime
+                                    }
                                   : false
                               }
                               render={({ field }) => (

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { faArrowUpRightFromSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
@@ -15,7 +15,7 @@ import { IdentityTable } from "./IdentityTable";
 
 export const IdentitySection = withProjectPermission(
   () => {
-    const { createNotification } = useNotificationContext();
+    
     const { currentWorkspace } = useWorkspace();
 
     const workspaceId = currentWorkspace?.id ?? "";

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/index.tsx

@@ -1 +1 @@
-export { IdentitySection } from "./IdentitySection";
+export { IdentitySection } from "./IdentitySection";

frontend/src/views/Project/MembersPage/components/IdentityTab/components/index.tsx

@@ -1 +1 @@
-export { IdentitySection } from "./IdentitySection";
+export { IdentitySection } from "./IdentitySection";

frontend/src/views/Project/MembersPage/components/IdentityTab/index.tsx

@@ -1 +1 @@
-export { IdentityTab } from "./IdentityTab";
+export { IdentityTab } from "./IdentityTab";

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx

@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -57,7 +57,7 @@ const addMemberFormSchema = z.object({
 type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
 
 export const MemberListTab = () => {
-  const { createNotification } = useNotificationContext();
+  
   const { t } = useTranslation();
 
   const { currentOrg } = useOrganization();
@@ -71,7 +71,7 @@ export const MemberListTab = () => {
   const { data: wsKey } = useGetUserWsKey(workspaceId);
   const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
   const { data: orgUsers } = useGetOrgUsers(orgId);
-  
+
   const [searchMemberFilter, setSearchMemberFilter] = useState("");
 
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -105,7 +105,8 @@ export const MemberListTab = () => {
     const orgUser = (orgUsers || []).find(({ id }) => id === orgMembershipId);
     if (!orgUser) return;
 
-    try { // TODO: update
+    try {
+      // TODO: update
       if (currentWorkspace.version === ProjectVersion.V1) {
         await addUserToWorkspace({
           workspaceId,
@@ -236,14 +237,14 @@ export const MemberListTab = () => {
                           a={ProjectPermissionSub.Member}
                         >
                           {(isAllowed) => (
-                              <MemberRoles
-                                roles={roles}
-                                disableEdit={u.id === user?.id || !isAllowed}
-                                onOpenUpgradeModal={(description) =>
-                                  handlePopUpOpen("upgradePlan", { description })
-                                }
-                                membershipId={membershipId}
-                              />
+                            <MemberRoles
+                              roles={roles}
+                              disableEdit={u.id === user?.id || !isAllowed}
+                              onOpenUpgradeModal={(description) =>
+                                handlePopUpOpen("upgradePlan", { description })
+                              }
+                              membershipId={membershipId}
+                            />
                           )}
                         </ProjectPermissionCan>
                       </Td>

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoles.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   Checkbox,
@@ -209,7 +209,7 @@ export const MemberRoles = ({
   onOpenUpgradeModal
 }: TMemberRolesProp) => {
   const { currentWorkspace } = useWorkspace();
-  const { createNotification } = useNotificationContext();
+  
   const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
   const [searchRoles, setSearchRoles] = useState("");
   const { subscription } = useSubscription();
@@ -325,14 +325,12 @@ export const MemberRoles = ({
                       <div>{formatRoleName(role, customRoleName)}</div>
                       {isTemporary && (
                         <div>
-                          <Tooltip
-                            content={isExpired ? "Access expired" : "Temporary access"}
-                          >
+                          <Tooltip content={isExpired ? "Access expired" : "Temporary access"}>
                             <FontAwesomeIcon
                               icon={faClock}
                               className={twMerge(
                                 new Date() > new Date(temporaryAccessEndTime as string) &&
-                                "text-red-600"
+                                  "text-red-600"
                               )}
                             />
                           </Tooltip>
@@ -405,14 +403,14 @@ export const MemberRoles = ({
                               defaultValue={
                                 userProjectRoleDetails?.isTemporary
                                   ? {
-                                    isTemporary: true,
-                                    temporaryAccessStartTime:
-                                      userProjectRoleDetails.temporaryAccessStartTime as string,
-                                    temporaryRange:
-                                      userProjectRoleDetails.temporaryRange as string,
-                                    temporaryAccessEndTime:
-                                      userProjectRoleDetails.temporaryAccessEndTime
-                                  }
+                                      isTemporary: true,
+                                      temporaryAccessStartTime:
+                                        userProjectRoleDetails.temporaryAccessStartTime as string,
+                                      temporaryRange:
+                                        userProjectRoleDetails.temporaryRange as string,
+                                      temporaryAccessEndTime:
+                                        userProjectRoleDetails.temporaryAccessEndTime
+                                    }
                                   : false
                               }
                               render={({ field }) => (

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { faEdit, faMagnifyingGlass, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -29,7 +29,7 @@ type Props = {
 
 export const ProjectRoleList = ({ onSelectRole }: Props) => {
   const [searchRoles, setSearchRoles] = useState("");
-  const { createNotification } = useNotificationContext();
+  
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
   const { currentWorkspace } = useWorkspace();
   const workspaceId = currentWorkspace?.id || "";

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -18,7 +18,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useCreateProjectRole, useUpdateProjectRole } from "@app/hooks/api";
@@ -125,7 +125,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
   const isNonEditable = ["admin", "member", "viewer", "no-access"].includes(role?.slug || "");
   const isNewRole = !role?.slug;
 
-  const { createNotification } = useNotificationContext();
+  
   const { currentWorkspace } = useWorkspace();
   const workspaceId = currentWorkspace?.id || "";
 

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx

@@ -91,7 +91,7 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -99,8 +99,8 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P
         <div>
           <FontAwesomeIcon icon={faPuzzlePiece} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">Secret Rollback</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">Secret Rollback</div>
           <div className="text-xs font-light">Secret rollback control actions</div>
         </div>
         <div>
@@ -120,7 +120,7 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           PERMISSIONS.map(({ action, label }) => (

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx

@@ -135,7 +135,7 @@ export const SingleProjectPermission = ({
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -143,8 +143,8 @@ export const SingleProjectPermission = ({
         <div>
           <FontAwesomeIcon icon={icon} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">{title}</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">{title}</div>
           <div className="text-xs font-light">{subtitle}</div>
         </div>
         <div>
@@ -164,7 +164,7 @@ export const SingleProjectPermission = ({
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           getPermissionList(formName).map(({ action, label }) => (

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx

@@ -71,7 +71,7 @@ export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props)
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -79,8 +79,8 @@ export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props)
         <div>
           <FontAwesomeIcon icon={faPuzzlePiece} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">Project</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">Project</div>
           <div className="text-xs font-light">Project control actions</div>
         </div>
         <div>
@@ -99,7 +99,7 @@ export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props)
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           PERMISSIONS.map(({ action, label }) => (

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx

@@ -1,19 +1,17 @@
 import { motion } from "framer-motion";
 
-import { 
-    ServiceTokenSection, 
-} from "./components";
+import { ServiceTokenSection } from "./components";
 
 export const ServiceTokenTab = () => {
-    return (
-        <motion.div
-            key="panel-service-token"
-            transition={{ duration: 0.15 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-        >
-            <ServiceTokenSection />
-        </motion.div>
-    );
-}
+  return (
+    <motion.div
+      key="panel-service-token"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <ServiceTokenSection />
+    </motion.div>
+  );
+};

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -9,7 +9,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { AxiosError } from "axios";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   decryptAssymmetric,
   encryptSymmetric
@@ -79,7 +79,7 @@ type Props = {
 
 export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
   const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
+  
   const { currentWorkspace } = useWorkspace();
   const {
     control,
@@ -161,7 +161,7 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
       });
     } catch (err) {
       console.error(err);
-      const axiosError = err as AxiosError
+      const axiosError = err as AxiosError;
       if (axiosError?.response?.status === 401) {
         createNotification({
           text: "You do not have access to the selected environment/path",

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
@@ -18,7 +18,7 @@ type DeleteModalData = { name: string; id: string };
 export const ServiceTokenSection = withProjectPermission(
   () => {
     const { t } = useTranslation();
-    const { createNotification } = useNotificationContext();
+    
     const deleteServiceToken = useDeleteServiceToken();
 
     const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
@@ -49,9 +49,7 @@ export const ServiceTokenSection = withProjectPermission(
     return (
       <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">
-            Service Tokens
-          </p>
+          <p className="text-xl font-semibold text-mineshaft-100">Service Tokens</p>
           <ProjectPermissionCan
             I={ProjectPermissionActions.Create}
             a={ProjectPermissionSub.ServiceTokens}

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/index.tsx

@@ -1 +1 @@
-export {ServiceTokenSection} from "./ServiceTokenSection"
+export { ServiceTokenSection } from "./ServiceTokenSection";

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/index.tsx

@@ -1 +1 @@
-export { ServiceTokenSection } from "./ServiceTokenSection";
+export { ServiceTokenSection } from "./ServiceTokenSection";

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/index.tsx

@@ -1 +1 @@
-export { ServiceTokenTab } from "./ServiceTokenTab";
+export { ServiceTokenTab } from "./ServiceTokenTab";

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

@@ -2,4 +2,4 @@ export { GroupsTab } from "./GroupsTab";
 export { IdentityTab } from "./IdentityTab";
 export { MemberListTab } from "./MemberListTab";
 export { ProjectRoleListTab } from "./ProjectRoleListTab";
-export { ServiceTokenTab } from "./ServiceTokenTab";
+export { ServiceTokenTab } from "./ServiceTokenTab";

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/SecretApprovalPolicyList.tsx

@@ -1,7 +1,7 @@
 import { faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -46,7 +46,7 @@ export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
   ] as const);
   const { permission } = useProjectPermission();
   const { subscription } = useSubscription();
-  const { createNotification } = useNotificationContext();
+  
 
   const { data: members } = useGetWorkspaceUsers(workspaceId);
   const { data: policies, isLoading: isPoliciesLoading } = useGetSecretApprovalPolicies({

frontend/src/views/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretPolicyForm.tsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   DropdownMenu,
@@ -65,7 +65,7 @@ export const SecretPolicyForm = ({
     values: editValues ? { ...editValues, environment: editValues.environment.slug } : undefined
   });
   const { currentWorkspace } = useWorkspace();
-  const { createNotification } = useNotificationContext();
+  
 
   const environments = currentWorkspace?.environments || [];
   useEffect(() => {

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx

@@ -9,7 +9,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button } from "@app/components/v2";
 import {
   usePerformSecretApprovalRequestMerge,
@@ -37,7 +37,7 @@ export const SecretApprovalRequestAction = ({
   workspaceId,
   canApprove
 }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { mutateAsync: performSecretApprovalMerge, isLoading: isMerging } =
     usePerformSecretApprovalRequestMerge();
 

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx

@@ -151,7 +151,7 @@ export const SecretApprovalRequestChangeItem = ({
                 </Td>
                 <Td>
                   {(op === CommitType.CREATE ? newVersion?.tags : secretVersion?.tags)?.map(
-                    ({ name, id: tagId, color}) => (
+                    ({ name, id: tagId, color }) => (
                       <Tag
                         className="flex w-min items-center space-x-2"
                         key={`${

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -11,7 +11,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, ContentLoader, EmptyState, IconButton, Tooltip } from "@app/components/v2";
 import { useUser } from "@app/context";
 import {
@@ -83,7 +83,7 @@ export const SecretApprovalRequestChanges = ({
   workspaceId,
   members = {}
 }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { user } = useUser();
   const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
   const {

frontend/src/views/SecretMainPage/SecretMainPage.store.tsx

@@ -31,6 +31,7 @@ const createSelectedSecretStore: StateCreator<SelectedSecretState> = (set) => ({
 export enum PopUpNames {
   CreateSecretForm = "create-secret-form"
 }
+
 type PopUpState = {
   popUp: Record<string, { isOpen: boolean; data?: any }>;
   popUpActions: {

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -5,8 +5,8 @@ import { subject } from "@casl/ability";
 import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
+import { createNotification } from "@app/components/notifications";
 import { PermissionDeniedBanner } from "@app/components/permissions";
 import { ContentLoader } from "@app/components/v2";
 import {
@@ -17,7 +17,8 @@ import {
 } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
-  useGetImportedSecrets,
+  useGetDynamicSecrets,
+  useGetImportedSecretsSingleEnv,
   useGetProjectFolders,
   useGetProjectSecrets,
   useGetSecretApprovalPolicyOfABoard,
@@ -31,6 +32,7 @@ import {
 import { ProjectIndexSecretsSection } from "../SecretOverviewPage/components/ProjectIndexSecretsSection";
 import { ActionBar } from "./components/ActionBar";
 import { CreateSecretForm } from "./components/CreateSecretForm";
+import { DynamicSecretListView } from "./components/DynamicSecretListView";
 import { FolderListView } from "./components/FolderListView";
 import { PitDrawer } from "./components/PitDrawer";
 import { SecretDropzone } from "./components/SecretDropzone";
@@ -51,7 +53,7 @@ export const SecretMainPage = () => {
   const { currentWorkspace, isLoading: isWorkspaceLoading } = useWorkspace();
   const router = useRouter();
   const { permission } = useProjectPermission();
-  const { createNotification } = useNotificationContext();
+  
 
   const [isVisible, setIsVisible] = useState(false);
   const [sortDir, setSortDir] = useState<SortDir>(SortDir.ASC);
@@ -67,6 +69,7 @@ export const SecretMainPage = () => {
   // env slug
   const environment = router.query.env as string;
   const workspaceId = currentWorkspace?.id || "";
+  const projectSlug = currentWorkspace?.slug || "";
   const secretPath = (router.query.secretPath as string) || "/";
   const canReadSecret = permission.can(
     ProjectPermissionActions.Read,
@@ -103,12 +106,14 @@ export const SecretMainPage = () => {
       enabled: canReadSecret
     }
   });
+
   // fetch folders
   const { data: folders, isLoading: isFoldersLoading } = useGetProjectFolders({
     projectId: workspaceId,
     environment,
     path: secretPath
   });
+
   // fetch secret imports
   const {
     data: secretImports,
@@ -124,7 +129,7 @@ export const SecretMainPage = () => {
   });
 
   // fetch imported secrets to show user the overriden ones
-  const { data: importedSecrets } = useGetImportedSecrets({
+  const { data: importedSecrets } = useGetImportedSecretsSingleEnv({
     projectId: workspaceId,
     environment,
     decryptFileKey: decryptFileKey!,
@@ -133,6 +138,13 @@ export const SecretMainPage = () => {
       enabled: canReadSecret
     }
   });
+
+  const { data: dynamicSecrets, isLoading: isDynamicSecretLoading } = useGetDynamicSecrets({
+    projectSlug,
+    environmentSlug: environment,
+    path: secretPath
+  });
+
   // fech tags
   const { data: tags } = useGetWsTags(canReadSecret ? workspaceId : "");
 
@@ -163,7 +175,9 @@ export const SecretMainPage = () => {
     isPaused: !canDoReadRollback
   });
 
-  const isNotEmtpy = Boolean(secrets?.length || folders?.length || secretImports?.length);
+  const isNotEmtpy = Boolean(
+    secrets?.length || folders?.length || secretImports?.length || dynamicSecrets?.length
+  );
 
   const handleSortToggle = () =>
     setSortDir((state) => (state === SortDir.ASC ? SortDir.DESC : SortDir.ASC));
@@ -213,7 +227,8 @@ export const SecretMainPage = () => {
 
   // loading screen when u have permission
   const loadingOnAccess =
-    canReadSecret && (isSecretsLoading || isSecretImportsLoading || isFoldersLoading);
+    canReadSecret &&
+    (isSecretsLoading || isSecretImportsLoading || isFoldersLoading || isDynamicSecretLoading);
   // loading screen when you don't have permission but as folder's is viewable need to wait for that
   const loadingOnDenied = !canReadSecret && isFoldersLoading;
   if (loadingOnAccess || loadingOnDenied) {
@@ -244,6 +259,7 @@ export const SecretMainPage = () => {
               importedSecrets={importedSecrets}
               environment={environment}
               workspaceId={workspaceId}
+              projectSlug={projectSlug}
               secretPath={secretPath}
               isVisible={isVisible}
               filter={filter}
@@ -298,6 +314,15 @@ export const SecretMainPage = () => {
                   secretPath={secretPath}
                   sortDir={sortDir}
                 />
+                {canReadSecret && (
+                  <DynamicSecretListView
+                    sortDir={sortDir}
+                    environment={environment}
+                    projectSlug={projectSlug}
+                    secretPath={secretPath}
+                    dynamicSecrets={dynamicSecrets || []}
+                  />
+                )}
                 {canReadSecret && (
                   <SecretListView
                     secrets={secrets}

frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx

@@ -9,6 +9,7 @@ import {
   faEyeSlash,
   faFileImport,
   faFilter,
+  faFingerprint,
   faFolderPlus,
   faMagnifyingGlass,
   faMinusSquare,
@@ -19,7 +20,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import FileSaver from "file-saver";
 import { twMerge } from "tailwind-merge";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -52,6 +53,7 @@ import {
   useSelectedSecrets
 } from "../../SecretMainPage.store";
 import { Filter, GroupBy } from "../../SecretMainPage.types";
+import { CreateDynamicSecretForm } from "./CreateDynamicSecretForm";
 import { CreateSecretImportForm } from "./CreateSecretImportForm";
 import { FolderForm } from "./FolderForm";
 
@@ -60,7 +62,9 @@ type Props = {
   // swtich the secrets type as it gets decrypted after api call
   importedSecrets?: Array<Omit<TImportedSecrets, "secrets"> & { secrets: DecryptedSecret[] }>;
   environment: string;
+  // @depreciated will be moving all these details to zustand
   workspaceId: string;
+  projectSlug: string;
   secretPath?: string;
   filter: Filter;
   tags?: WsTag[];
@@ -79,6 +83,7 @@ export const ActionBar = ({
   importedSecrets = [],
   environment,
   workspaceId,
+  projectSlug,
   secretPath = "/",
   filter,
   tags = [],
@@ -93,13 +98,13 @@ export const ActionBar = ({
 }: Props) => {
   const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
     "addFolder",
+    "addDynamicSecret",
     "addSecretImport",
     "bulkDeleteSecrets",
     "misc",
     "upgradePlan"
   ] as const);
   const { subscription } = useSubscription();
-  const { createNotification } = useNotificationContext();
   const { openPopUp } = usePopUpAction();
 
   const { mutateAsync: createFolder } = useCreateFolder();
@@ -311,7 +316,6 @@ export const ActionBar = ({
               </Button>
             )}
           </ProjectPermissionCan>
-
           <DropdownMenu
             open={popUp.misc.isOpen}
             onOpenChange={(isOpen) => handlePopUpToggle("misc", isOpen)}
@@ -333,14 +337,14 @@ export const ActionBar = ({
                 >
                   {(isAllowed) => (
                     <Button
-                      leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
+                      leftIcon={<FontAwesomeIcon icon={faFolderPlus} className="pr-2" />}
                       onClick={() => {
                         handlePopUpOpen("addFolder");
                         handlePopUpClose("misc");
                       }}
                       isDisabled={!isAllowed}
                       variant="outline_bg"
-                      className="h-10"
+                      className="h-10 text-left"
                       isFullWidth
                     >
                       Add Folder
@@ -353,13 +357,37 @@ export const ActionBar = ({
                 >
                   {(isAllowed) => (
                     <Button
-                      leftIcon={<FontAwesomeIcon icon={faFileImport} />}
+                      leftIcon={<FontAwesomeIcon icon={faFingerprint} className="pr-2" />}
+                      onClick={() => {
+                        if (subscription && subscription.dynamicSecret) {
+                          handlePopUpOpen("addDynamicSecret");
+                          handlePopUpClose("misc");
+                          return;
+                        }
+                        handlePopUpOpen("upgradePlan");
+                      }}
+                      isDisabled={!isAllowed}
+                      variant="outline_bg"
+                      className="h-10 text-left"
+                      isFullWidth
+                    >
+                      Add Dynamic Secret
+                    </Button>
+                  )}
+                </ProjectPermissionCan>
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Create}
+                  a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                >
+                  {(isAllowed) => (
+                    <Button
+                      leftIcon={<FontAwesomeIcon icon={faFileImport} className="pr-2" />}
                       onClick={() => {
                         handlePopUpOpen("addSecretImport");
                         handlePopUpClose("misc");
                       }}
                       variant="outline_bg"
-                      className="h-10"
+                      className="h-10 text-left"
                       isFullWidth
                       isDisabled={!isAllowed}
                     >
@@ -418,6 +446,13 @@ export const ActionBar = ({
         onClose={() => handlePopUpClose("addSecretImport")}
         onTogglePopUp={(isOpen) => handlePopUpToggle("addSecretImport", isOpen)}
       />
+      <CreateDynamicSecretForm
+        isOpen={popUp.addDynamicSecret.isOpen}
+        onToggle={(isOpen) => handlePopUpToggle("addDynamicSecret", isOpen)}
+        projectSlug={projectSlug}
+        environment={environment}
+        secretPath={secretPath}
+      />
       <Modal
         isOpen={popUp.addFolder.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("addFolder", isOpen)}
@@ -439,8 +474,8 @@ export const ActionBar = ({
           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"
+              ? "You can perform this action under an Enterprise license"
+              : "You can perform this action if you switch to Infisical's Team plan"
           }
         />
       )}

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { faDatabase } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Modal, ModalContent } from "@app/components/v2";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+import { SqlDatabaseInputForm } from "./SqlDatabaseInputForm";
+
+type Props = {
+  isOpen?: boolean;
+  onToggle: (isOpen: boolean) => void;
+  projectSlug: string;
+  environment: string;
+  secretPath: string;
+};
+
+enum WizardSteps {
+  SelectProvider = "select-provider",
+  ProviderInputs = "provider-inputs"
+}
+
+export const CreateDynamicSecretForm = ({
+  isOpen,
+  onToggle,
+  projectSlug,
+  environment,
+  secretPath
+}: Props) => {
+  const [wizardStep, setWizardStep] = useState(WizardSteps.SelectProvider);
+  const [selectedProvider, setSelectedProvider] = useState<DynamicSecretProviders | null>(null);
+
+  const handleFormReset = (state: boolean = false) => {
+    onToggle(state);
+    setWizardStep(WizardSteps.SelectProvider);
+    setSelectedProvider(null);
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={(state) => handleFormReset(state)}>
+      <ModalContent
+        title="Dynamic secret setup"
+        subTitle="Configure dynamic secret parameters"
+        className="my-4 max-w-3xl"
+      >
+        <AnimatePresence exitBeforeEnter>
+          {wizardStep === WizardSteps.SelectProvider && (
+            <motion.div
+              key="select-type-step"
+              transition={{ duration: 0.1 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: -30 }}
+            >
+              <div className="mb-4 text-mineshaft-300">Select a service to connect to:</div>
+              <div className="flex items-center space-x-4">
+                <div
+                  className="flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    setSelectedProvider(DynamicSecretProviders.SqlDatabase);
+                    setWizardStep(WizardSteps.ProviderInputs);
+                  }}
+                  onKeyDown={(evt) => {
+                    if (evt.key === "Enter") {
+                      setSelectedProvider(DynamicSecretProviders.SqlDatabase);
+                      setWizardStep(WizardSteps.ProviderInputs);
+                    }
+                  }}
+                >
+                  <FontAwesomeIcon icon={faDatabase} size="lg" />
+                  <div className="text-center text-sm">
+                    SQL
+                    <br />
+                    Database
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          )}
+          {wizardStep === WizardSteps.ProviderInputs &&
+            selectedProvider === DynamicSecretProviders.SqlDatabase && (
+              <motion.div
+                key="select-input-step"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: -30 }}
+              >
+                <SqlDatabaseInputForm
+                  onCompleted={handleFormReset}
+                  onCancel={handleFormReset}
+                  projectSlug={projectSlug}
+                  secretPath={secretPath}
+                  environment={environment}
+                />
+              </motion.div>
+            )}
+        </AnimatePresence>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx

@@ -0,0 +1,364 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders, SqlProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+  provider: z.object({
+    client: z.nativeEnum(SqlProviders),
+    host: z.string().toLowerCase().min(1),
+    port: z.coerce.number(),
+    database: z.string().min(1),
+    username: z.string().min(1),
+    password: z.string().min(1),
+    creationStatement: z.string().min(1),
+    revocationStatement: z.string().min(1),
+    renewStatement: z.string().min(1),
+    ca: z.string().optional()
+  }),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      // a day
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onCompleted: () => void;
+  onCancel: () => void;
+  secretPath: string;
+  projectSlug: string;
+  environment: string;
+};
+
+export const SqlDatabaseInputForm = ({
+  onCompleted,
+  onCancel,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      provider: {
+        creationStatement:
+          "CREATE USER \"{{username}}\" WITH ENCRYPTED PASSWORD '{{password}}' VALID UNTIL '{{expiration}}';\nGRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO \"{{username}}\";",
+        renewStatement: "ALTER ROLE \"{{username}}\" VALID UNTIL '{{expiration}}';",
+        revocationStatement:
+          'REVOKE ALL PRIVILEGES ON ALL TABLES IN SCHEMA public FROM "{{username}}";\nDROP ROLE "{{username}}";'
+      }
+    }
+  });
+
+  const createDynamicSecret = useCreateDynamicSecret();
+
+  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+    // wait till previous request is finished
+    if (createDynamicSecret.isLoading) return;
+    try {
+      await createDynamicSecret.mutateAsync({
+        provider: { type: DynamicSecretProviders.SqlDatabase, inputs: provider },
+        maxTTL,
+        name,
+        path: secretPath,
+        defaultTTL,
+        projectSlug,
+        environmentSlug: environment
+      });
+      onCompleted();
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to create dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleCreateDynamicSecret)}>
+        <div>
+          <div className="flex items-center space-x-2">
+            <div className="flex-grow">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="name"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Name"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="dynamic-postgres" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="defaultTTL"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="maxTTL"
+                defaultValue="24h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Max TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+            </div>
+            <div className="flex flex-col">
+              <div className="pl-1 pb-0.5 text-sm text-mineshaft-400">Service</div>
+              <Controller
+                control={control}
+                name="provider.client"
+                defaultValue={SqlProviders.Postgres}
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
+                    <Select
+                      value={value}
+                      onValueChange={(val) => onChange(val)}
+                      className="w-full border border-mineshaft-500"
+                    >
+                      <SelectItem value={SqlProviders.Postgres}>PostgreSQL</SelectItem>
+                    </Select>
+                  </FormControl>
+                )}
+              />
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="provider.host"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Host"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.port"
+                  defaultValue={5432}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Port"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="provider.username"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="User"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.password"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Password"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.database"
+                  defaultValue="default"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Database Name"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="provider.ca"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isOptional
+                      label="CA(SSL)"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <SecretInput
+                        {...field}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                      />
+                    </FormControl>
+                  )}
+                />
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                  <AccordionItem value="advance-statements">
+                    <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
+                    <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="provider.creationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Creation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username, password and expiration are dynamically provisioned"
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="provider.revocationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Revocation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username is dynamically provisioned"
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="provider.renewStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Renew Statement"
+                            helperText="username and expiration are dynamically provisioned"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Submit
+          </Button>
+          <Button variant="outline_bg" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};

frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/index.tsx

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

frontend/src/views/SecretMainPage/components/ActionBar/CreateSecretImportForm.tsx

@@ -3,7 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { AxiosError } from "axios";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   FormControl,
@@ -55,7 +55,7 @@ export const CreateSecretImportForm = ({
   const { currentWorkspace } = useWorkspace();
   const environments = currentWorkspace?.environments || [];
 
-  const { createNotification } = useNotificationContext();
+  
 
   const { mutateAsync: createSecretImport } = useCreateSecretImport();
 

frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -2,7 +2,7 @@ import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent, SecretInput } from "@app/components/v2";
 import { useCreateSecretV3 } from "@app/hooks/api";
 import { UserWsKeyPair } from "@app/hooks/api/types";
@@ -44,7 +44,7 @@ export const CreateSecretForm = ({
   const { isOpen } = usePopUpState(PopUpNames.CreateSecretForm);
   const { closePopUp, togglePopUp } = usePopUpAction();
 
-  const { createNotification } = useNotificationContext();
+  
 
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
 

frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx

@@ -0,0 +1,185 @@
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AnimatePresence, motion } from "framer-motion";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, IconButton, Input, SecretInput, Tooltip } from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+import { useCreateDynamicSecretLease } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const OutputDisplay = ({
+  value,
+  label,
+  helperText
+}: {
+  value: string;
+  label: string;
+  helperText?: string;
+}) => {
+  const [copyText, isCopying, setCopyText] = useTimedReset<string>({
+    initialState: "Copy to clipboard"
+  });
+
+  return (
+    <div className="relative">
+      <FormControl label={label} className="flex-grow" helperText={helperText}>
+        <SecretInput
+          isReadOnly
+          value={value}
+          containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+        />
+      </FormControl>
+      <Tooltip content={copyText}>
+        <IconButton
+          ariaLabel="Copy to clipboard"
+          variant="plain"
+          size="md"
+          className="absolute right-2 top-7"
+          onClick={() => {
+            navigator.clipboard.writeText(value as string);
+            setCopyText("Copied");
+          }}
+        >
+          <FontAwesomeIcon icon={isCopying ? faCheck : faCopy} />
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+};
+
+const renderOutputForm = (provider: DynamicSecretProviders, data: unknown) => {
+  const { DB_PASSWORD, DB_USERNAME } = data as { DB_USERNAME: string; DB_PASSWORD: string };
+  if (provider === DynamicSecretProviders.SqlDatabase) {
+    return (
+      <div>
+        <OutputDisplay label="Database User" value={DB_USERNAME} />
+        <OutputDisplay
+          label="Database Password"
+          value={DB_PASSWORD}
+          helperText="Important: Copy these credentials now. You will not be able to see them again after you close the modal."
+        />
+      </div>
+    );
+  }
+  return null;
+};
+
+const formSchema = z.object({
+  ttl: z.string().refine((val) => ms(val) > 0, "TTL must be a positive number")
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecretName: string;
+  provider: DynamicSecretProviders;
+  projectSlug: string;
+  environment: string;
+  secretPath: string;
+};
+
+export const CreateDynamicSecretLease = ({
+  onClose,
+  projectSlug,
+  dynamicSecretName,
+  provider,
+  secretPath,
+  environment
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ttl: "1h"
+    }
+  });
+  
+
+  const createDynamicSecretLease = useCreateDynamicSecretLease();
+
+  const handleDynamicSecretLeaseCreate = async ({ ttl }: TForm) => {
+    if (createDynamicSecretLease.isLoading) return;
+    try {
+      await createDynamicSecretLease.mutateAsync({
+        environmentSlug: environment,
+        projectSlug,
+        path: secretPath,
+        ttl,
+        dynamicSecretName
+      });
+      createNotification({
+        type: "success",
+        text: "Successfully leased dynamic secret"
+      });
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        type: "error",
+        text: "Failed to lease dynamic secret"
+      });
+    }
+  };
+
+  const isOutputMode = Boolean(createDynamicSecretLease?.data);
+
+  return (
+    <div>
+      <AnimatePresence>
+        {!isOutputMode && (
+          <motion.div
+            key="lease-input"
+            transition={{ duration: 0.1 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+          >
+            <form onSubmit={handleSubmit(handleDynamicSecretLeaseCreate)}>
+              <Controller
+                control={control}
+                name="ttl"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+              <div className="mt-4 flex items-center space-x-4">
+                <Button type="submit" isLoading={isSubmitting}>
+                  Submit
+                </Button>
+                <Button variant="outline_bg" onClick={onClose}>
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          </motion.div>
+        )}
+        {isOutputMode && (
+          <motion.div
+            key="lease-output"
+            transition={{ duration: 0.1 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+          >
+            {renderOutputForm(provider, createDynamicSecretLease.data?.data)}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

frontend/src/views/SecretMainPage/components/DynamicSecretListView/DynamicSecretLease.tsx

@@ -0,0 +1,244 @@
+import { subject } from "@casl/ability";
+import {
+  faClose,
+  faFileContract,
+  faRepeat,
+  faTrash,
+  faWarning
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format, formatDistance } from "date-fns";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  EmptyState,
+  IconButton,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useGetDynamicSecretLeases, useRevokeDynamicSecretLease } from "@app/hooks/api";
+import { DynamicSecretLeaseStatus } from "@app/hooks/api/dynamicSecretLease/types";
+
+import { RenewDynamicSecretLease } from "./RenewDynamicSecretLease";
+
+type Props = {
+  dynamicSecretName: string;
+  projectSlug: string;
+  environment: string;
+  secretPath: string;
+  onClickNewLease: () => void;
+  onClose: () => void;
+};
+
+export const DynamicSecretLease = ({
+  projectSlug,
+  dynamicSecretName,
+  environment,
+  secretPath,
+  onClickNewLease,
+  onClose
+}: Props) => {
+  const { handlePopUpOpen, popUp, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteSecret",
+    "renewSecret"
+  ] as const);
+  const { data: leases, isLoading: isLeaseLoading } = useGetDynamicSecretLeases({
+    projectSlug,
+    environmentSlug: environment,
+    path: secretPath,
+    dynamicSecretName
+  });
+  
+
+  const deleteDynamicSecretLease = useRevokeDynamicSecretLease();
+
+  const handleDynamicSecretDeleteLease = async () => {
+    try {
+      const { leaseId, isForced } = popUp.deleteSecret.data as {
+        leaseId: string;
+        isForced?: boolean;
+      };
+      await deleteDynamicSecretLease.mutateAsync({
+        environmentSlug: environment,
+        projectSlug,
+        path: secretPath,
+        dynamicSecretName,
+        leaseId,
+        isForced
+      });
+      handlePopUpClose("deleteSecret");
+      createNotification({
+        type: "success",
+        text: "Successfully deleted lease"
+      });
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        type: "error",
+        text: "Failed to delete lease"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <TableContainer>
+        <Table className="bg-mineshaft-600">
+          <THead>
+            <Tr>
+              <Td>Lease ID</Td>
+              <Td>Expire At</Td>
+              <Td />
+            </Tr>
+          </THead>
+          <TBody>
+            {!isLeaseLoading && leases?.length === 0 && (
+              <tr>
+                <td colSpan={3}>
+                  <EmptyState title="No leases found" icon={faFileContract}>
+                    <Button
+                      onClick={onClickNewLease}
+                      className="mt-4"
+                      colorSchema="primary"
+                      size="sm"
+                    >
+                      New Lease
+                    </Button>
+                  </EmptyState>
+                </td>
+              </tr>
+            )}
+            {(leases || []).map(({ id, expireAt, status, statusDetails }) => (
+              <Tr key={id}>
+                <Td>
+                  {id}
+                  {Boolean(status) && (
+                    <Tooltip content={statusDetails || status || ""}>
+                      <FontAwesomeIcon className="ml-2 text-yellow-600" icon={faWarning} />
+                    </Tooltip>
+                  )}
+                </Td>
+                <Td>
+                  <Tooltip content={format(new Date(expireAt), "yyyy-MM-dd, hh:mm aaa")}>
+                    <span className="capitalize">
+                      {formatDistance(new Date(expireAt), new Date())}
+                    </span>
+                  </Tooltip>
+                </Td>
+                <Td>
+                  <div className="flex items-center space-x-4">
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Edit}
+                      a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                      renderTooltip
+                      allowedLabel="Renew"
+                    >
+                      {(isAllowed) => (
+                        <IconButton
+                          ariaLabel="edit-folder"
+                          variant="plain"
+                          size="sm"
+                          className="p-0"
+                          isDisabled={!isAllowed}
+                          onClick={() => handlePopUpOpen("renewSecret", { leaseId: id })}
+                        >
+                          <FontAwesomeIcon icon={faRepeat} size="lg" />
+                        </IconButton>
+                      )}
+                    </ProjectPermissionCan>
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Delete}
+                      a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                      renderTooltip
+                      allowedLabel="Delete"
+                    >
+                      {(isAllowed) => (
+                        <IconButton
+                          ariaLabel="delete-folder"
+                          variant="plain"
+                          size="md"
+                          className="p-0"
+                          isDisabled={!isAllowed}
+                          onClick={() => handlePopUpOpen("deleteSecret", { leaseId: id })}
+                        >
+                          <FontAwesomeIcon icon={faClose} size="lg" />
+                        </IconButton>
+                      )}
+                    </ProjectPermissionCan>
+                    {status === DynamicSecretLeaseStatus.FailedDeletion && (
+                      <ProjectPermissionCan
+                        I={ProjectPermissionActions.Delete}
+                        a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                        renderTooltip
+                        allowedLabel="Force Delete. This action will remove the secret from internal storage, but it will remain in external systems."
+                      >
+                        {(isAllowed) => (
+                          <IconButton
+                            ariaLabel="delete-folder"
+                            variant="plain"
+                            size="md"
+                            className="p-0 text-red-600"
+                            isDisabled={!isAllowed}
+                            onClick={() =>
+                              handlePopUpOpen("deleteSecret", { leaseId: id, isForced: true })
+                            }
+                          >
+                            <FontAwesomeIcon icon={faTrash} />
+                          </IconButton>
+                        )}
+                      </ProjectPermissionCan>
+                    )}
+                  </div>
+                </Td>
+              </Tr>
+            ))}
+          </TBody>
+        </Table>
+      </TableContainer>
+      {!isLeaseLoading && Boolean(leases?.length) && (
+        <div className="mt-6 flex items-center space-x-4">
+          <Button onClick={onClickNewLease} size="xs">
+            New Lease
+          </Button>
+          <Button onClick={onClose} variant="plain" colorSchema="secondary" size="xs">
+            Close
+          </Button>
+        </div>
+      )}
+      <Modal
+        isOpen={popUp.renewSecret.isOpen}
+        onOpenChange={(state) => handlePopUpToggle("renewSecret", state)}
+      >
+        <ModalContent title="Renew Lease">
+          <RenewDynamicSecretLease
+            onClose={() => handlePopUpClose("renewSecret")}
+            projectSlug={projectSlug}
+            leaseId={(popUp.renewSecret?.data as { leaseId: string })?.leaseId}
+            dynamicSecretName={dynamicSecretName}
+            secretPath={secretPath}
+            environment={environment}
+          />
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={popUp.deleteSecret.isOpen}
+        deleteKey="delete"
+        title="Do you want to delete this lease?"
+        onChange={(isOpen) => handlePopUpToggle("deleteSecret", isOpen)}
+        onDeleteApproved={handleDynamicSecretDeleteLease}
+      />
+    </div>
+  );
+};

frontend/src/views/SecretMainPage/components/DynamicSecretListView/DynamicSecretListView.tsx

@@ -0,0 +1,289 @@
+import { subject } from "@casl/ability";
+import {
+  faClose,
+  faFingerprint,
+  faPencilSquare,
+  faWarning
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  IconButton,
+  Modal,
+  ModalContent,
+  Tag,
+  Tooltip
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteDynamicSecret } from "@app/hooks/api";
+import {
+  DynamicSecretProviders,
+  DynamicSecretStatus,
+  TDynamicSecret
+} from "@app/hooks/api/dynamicSecret/types";
+
+import { SortDir } from "../../SecretMainPage.types";
+import { CreateDynamicSecretLease } from "./CreateDynamicSecretLease";
+import { DynamicSecretLease } from "./DynamicSecretLease";
+import { EditDynamicSecretForm } from "./EditDynamicSecretForm";
+
+const formatProviderName = (type: DynamicSecretProviders) => {
+  if (type === DynamicSecretProviders.SqlDatabase) return "SQL Database";
+  return "";
+};
+
+type Props = {
+  dynamicSecrets: TDynamicSecret[];
+  environment: string;
+  projectSlug: string;
+  secretPath?: string;
+  sortDir: SortDir;
+};
+
+export const DynamicSecretListView = ({
+  dynamicSecrets = [],
+  environment,
+  projectSlug,
+  secretPath = "/",
+  sortDir = SortDir.ASC
+}: Props) => {
+  const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "dynamicSecretLeases",
+    "createDynamicSecretLease",
+    "updateDynamicSecret",
+    "deleteDynamicSecret"
+  ] as const);
+
+  
+  const deleteDynamicSecret = useDeleteDynamicSecret();
+
+  const handleDynamicSecretDelete = async () => {
+    try {
+      const { name, isForced } = popUp.deleteDynamicSecret.data as TDynamicSecret & {
+        isForced?: boolean;
+      };
+      await deleteDynamicSecret.mutateAsync({
+        environmentSlug: environment,
+        projectSlug,
+        path: secretPath,
+        name,
+        isForced
+      });
+      handlePopUpClose("deleteDynamicSecret");
+      createNotification({
+        type: "success",
+        text: "Successfully deleted dynamic secret"
+      });
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        type: "error",
+        text: "Failed to delete dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <>
+      {dynamicSecrets
+        .sort((a, b) =>
+          sortDir === SortDir.ASC
+            ? a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+            : b.name.toLowerCase().localeCompare(a.name.toLowerCase())
+        )
+        .map((secret) => {
+          const isRevocking = secret.status === DynamicSecretStatus.Deleting;
+          return (
+            <Modal
+              key={secret.id}
+              isOpen={
+                popUp.dynamicSecretLeases.isOpen && popUp.dynamicSecretLeases.data === secret.id
+              }
+              onOpenChange={(state) => handlePopUpToggle("dynamicSecretLeases", state)}
+            >
+              <div
+                className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
+                role="button"
+                tabIndex={0}
+                onKeyDown={(evt) => {
+                  if (evt.key === "Enter" && !isRevocking)
+                    handlePopUpOpen("dynamicSecretLeases", secret.id);
+                }}
+                onClick={() => {
+                  if (!isRevocking) {
+                    handlePopUpOpen("dynamicSecretLeases", secret.id);
+                  }
+                }}
+              >
+                <div className="flex w-11 items-center px-5 py-3 text-yellow-700">
+                  <FontAwesomeIcon icon={faFingerprint} />
+                </div>
+                <div
+                  className="flex flex-grow items-center px-4 py-3"
+                  role="button"
+                  tabIndex={0}
+                >
+                  {secret.name}
+                  <Tag className="ml-4 py-0 px-2 text-xs normal-case">
+                    {formatProviderName(secret.type)}
+                  </Tag>
+                  {Boolean(secret.status) && (
+                    <Tooltip content={secret?.statusDetails || secret.status || ""}>
+                      <FontAwesomeIcon
+                        className={
+                          secret.status === DynamicSecretStatus.Deleting
+                            ? "text-yellow-600"
+                            : "text-red-600"
+                        }
+                        icon={faWarning}
+                      />
+                    </Tooltip>
+                  )}
+                </div>
+                <div className="flex items-center space-x-2 px-4 py-2">
+                  <Button
+                    size="xs"
+                    className="m-0 py-0.5 px-2 opacity-0 group-hover:opacity-100"
+                    isDisabled={isRevocking}
+                    onClick={(evt) => {
+                      evt.stopPropagation();
+                      handlePopUpOpen("createDynamicSecretLease", secret);
+                    }}
+                  >
+                    Generate
+                  </Button>
+                  {secret.status === DynamicSecretStatus.FailedDeletion && (
+                    <Tooltip content="This action will remove the secret from internal storage, but it will remain in external systems. Use this option only after you've confirmed that your external leases are handled.">
+                      <Button
+                        size="xs"
+                        className="m-0 py-0.5 px-2"
+                        colorSchema="danger"
+                        isDisabled={isRevocking}
+                        onClick={(evt) => {
+                          evt.stopPropagation();
+                          handlePopUpOpen("deleteDynamicSecret", {
+                            ...secret,
+                            isForced: true
+                          });
+                        }}
+                      >
+                        Force Delete
+                      </Button>
+                    </Tooltip>
+                  )}
+                </div>
+                <div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Edit}
+                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                    renderTooltip
+                    allowedLabel="Edit"
+                  >
+                    {(isAllowed) => (
+                      <IconButton
+                        ariaLabel="edit-dynamic-secret"
+                        variant="plain"
+                        size="sm"
+                        className="p-0 opacity-0 group-hover:opacity-100"
+                        onClick={(evt) => {
+                          evt.stopPropagation();
+                          handlePopUpOpen("updateDynamicSecret", secret);
+                        }}
+                        isDisabled={!isAllowed || isRevocking}
+                      >
+                        <FontAwesomeIcon icon={faPencilSquare} size="lg" />
+                      </IconButton>
+                    )}
+                  </ProjectPermissionCan>
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Delete}
+                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                    renderTooltip
+                    allowedLabel="Delete"
+                  >
+                    {(isAllowed) => (
+                      <IconButton
+                        ariaLabel="delete-dynamic-secret"
+                        variant="plain"
+                        size="md"
+                        className="p-0 opacity-0 group-hover:opacity-100"
+                        onClick={(evt) => {
+                          evt.stopPropagation();
+                          handlePopUpOpen("deleteDynamicSecret", secret);
+                        }}
+                        isDisabled={!isAllowed || isRevocking}
+                      >
+                        <FontAwesomeIcon icon={faClose} size="lg" />
+                      </IconButton>
+                    )}
+                  </ProjectPermissionCan>
+                </div>
+              </div>
+              <ModalContent
+                title="Dynamic secret leases"
+                subTitle="Revoke or renew your secret leases"
+                className="max-w-3xl"
+              >
+                <DynamicSecretLease
+                  onClickNewLease={() => handlePopUpOpen("createDynamicSecretLease", secret)}
+                  onClose={() => handlePopUpClose("dynamicSecretLeases")}
+                  projectSlug={projectSlug}
+                  key={secret.id}
+                  dynamicSecretName={secret.name}
+                  secretPath={secretPath}
+                  environment={environment}
+                />
+              </ModalContent>
+            </Modal>
+          );
+        })}
+      <Modal
+        isOpen={popUp.createDynamicSecretLease.isOpen}
+        onOpenChange={(state) => handlePopUpToggle("createDynamicSecretLease", state)}
+      >
+        <ModalContent title="Provision lease">
+          <CreateDynamicSecretLease
+            provider={
+              (popUp.createDynamicSecretLease?.data as { type: DynamicSecretProviders })?.type
+            }
+            onClose={() => handlePopUpClose("createDynamicSecretLease")}
+            projectSlug={projectSlug}
+            dynamicSecretName={(popUp.createDynamicSecretLease?.data as { name: string })?.name}
+            secretPath={secretPath}
+            environment={environment}
+          />
+        </ModalContent>
+      </Modal>
+      <Modal
+        isOpen={popUp.updateDynamicSecret.isOpen}
+        onOpenChange={(state) => handlePopUpToggle("updateDynamicSecret", state)}
+      >
+        <ModalContent title="Edit dynamic secret" className="max-w-3xl">
+          <EditDynamicSecretForm
+            onClose={() => handlePopUpClose("updateDynamicSecret")}
+            projectSlug={projectSlug}
+            dynamicSecretName={(popUp.updateDynamicSecret?.data as TDynamicSecret)?.name}
+            secretPath={secretPath}
+            environment={environment}
+          />
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={popUp.deleteDynamicSecret.isOpen}
+        deleteKey={(popUp.deleteDynamicSecret?.data as TDynamicSecret)?.name}
+        title={
+          (popUp.deleteDynamicSecret?.data as { isForced?: boolean })?.isForced
+            ? "Do you want to force delete this dynamic secret?"
+            : "Do you want to delete this dynamic secret?"
+        }
+        onChange={(isOpen) => handlePopUpToggle("deleteDynamicSecret", isOpen)}
+        onDeleteApproved={handleDynamicSecretDelete}
+      />
+    </>
+  );
+};

frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx

@@ -0,0 +1,61 @@
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Spinner } from "@app/components/v2";
+import { useGetDynamicSecretDetails } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+import { EditDynamicSecretSqlProviderForm } from "./EditDynamicSecretSqlProviderForm";
+
+type Props = {
+  onClose: () => void;
+  dynamicSecretName: string;
+  projectSlug: string;
+  environment: string;
+  secretPath: string;
+};
+
+export const EditDynamicSecretForm = ({
+  dynamicSecretName,
+  environment,
+  projectSlug,
+  onClose,
+  secretPath
+}: Props) => {
+  const { data: dynamicSecretDetails, isLoading: isDynamicSecretLoading } =
+    useGetDynamicSecretDetails({
+      projectSlug,
+      environmentSlug: environment,
+      name: dynamicSecretName,
+      path: secretPath
+    });
+
+  if (isDynamicSecretLoading) {
+    return (
+      <div className="flex w-full items-center justify-center p-8">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <AnimatePresence exitBeforeEnter>
+      {dynamicSecretDetails?.type === DynamicSecretProviders.SqlDatabase && (
+        <motion.div
+          key="sqldatabase-provider-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretSqlProviderForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSqlProviderForm.tsx

@@ -0,0 +1,375 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { SqlProviders, TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+  inputs: z
+    .object({
+      client: z.nativeEnum(SqlProviders),
+      host: z.string().toLowerCase().min(1),
+      port: z.number(),
+      database: z.string().min(1),
+      username: z.string().min(1),
+      password: z.string().min(1),
+      creationStatement: z.string().min(1),
+      revocationStatement: z.string().min(1),
+      renewStatement: z.string().min(1),
+      ca: z.string().optional()
+    })
+    .partial(),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      // a day
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    })
+    .nullable(),
+  newName: z
+    .string()
+    .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+    .optional()
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  environment: string;
+  projectSlug: string;
+};
+
+export const EditDynamicSecretSqlProviderForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      defaultTTL: dynamicSecret.defaultTTL,
+      maxTTL: dynamicSecret.maxTTL,
+      newName: dynamicSecret.name,
+      inputs: {
+        ...(dynamicSecret.inputs as TForm["inputs"])
+      }
+    }
+  });
+  
+  const updateDynamicSecret = useUpdateDynamicSecret();
+
+  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+    // wait till previous request is finished
+    if (updateDynamicSecret.isLoading) return;
+    try {
+      await updateDynamicSecret.mutateAsync({
+        name: dynamicSecret.name,
+        path: secretPath,
+        projectSlug,
+        environmentSlug: environment,
+        data: {
+          maxTTL: maxTTL || undefined,
+          defaultTTL,
+          inputs,
+          newName: newName === dynamicSecret.name ? undefined : newName
+        }
+      });
+      onClose();
+      createNotification({
+        type: "success",
+        text: "Successfully updated dynamic secret"
+      });
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleUpdateDynamicSecret)}>
+        <div className="flex items-center space-x-2">
+          <div className="flex-grow">
+            <Controller
+              control={control}
+              name="newName"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Secret Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="DYN-1" />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="w-32">
+            <Controller
+              control={control}
+              name="defaultTTL"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label={<TtlFormLabel label="Default TTL" />}
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="w-32">
+            <Controller
+              control={control}
+              name="maxTTL"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label={<TtlFormLabel label="Max TTL" />}
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} value={field.value || ""} />
+                </FormControl>
+              )}
+            />
+          </div>
+        </div>
+        <div>
+          <div className="mb-4 border-b border-b-mineshaft-600 pb-2">Configuration</div>
+          <div className="flex flex-col">
+            <Controller
+              control={control}
+              name="inputs.client"
+              defaultValue={SqlProviders.Postgres}
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl isError={Boolean(error?.message)} errorText={error?.message}>
+                  <Select
+                    value={value}
+                    onValueChange={(val) => onChange(val)}
+                    className="w-full border border-mineshaft-500"
+                  >
+                    <SelectItem value={SqlProviders.Postgres}>PostgreSQL</SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <div className="flex items-center space-x-2">
+              <Controller
+                control={control}
+                name="inputs.host"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Host"
+                    className="flex-grow"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.port"
+                defaultValue={5432}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Port"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} type="number" onChange={(el) => field.onChange(parseInt(el.target.value, 10))} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="flex items-center space-x-2">
+              <Controller
+                control={control}
+                name="inputs.username"
+                defaultValue=""
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="User"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.password"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Password"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} type="password" />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="inputs.database"
+                defaultValue="default"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Database Name"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div>
+              <Controller
+                control={control}
+                name="inputs.ca"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isOptional
+                    label="CA(SSL)"
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <SecretInput
+                      {...field}
+                      containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                    />
+                  </FormControl>
+                )}
+              />
+              <Accordion type="multiple" className="w-full bg-mineshaft-700">
+                <AccordionItem value="modify-sql-statement">
+                  <AccordionTrigger>Modify SQL Statements</AccordionTrigger>
+                  <AccordionContent>
+                    <Controller
+                      control={control}
+                      name="inputs.creationStatement"
+                      defaultValue={
+                        "CREATE USER \"{{username}}\" WITH SUPERUSER ENCRYPTED PASSWORD '{{password}}' VALID UNTIL '{{expiration}}';\nGRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO \"{{username}}\";"
+                      }
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Creation Statement"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          helperText="username, password and expiration are dynamically provisioned"
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.revocationStatement"
+                      defaultValue={
+                        'REVOKE ALL PRIVILEGES ON ALL TABLES IN SCHEMA public FROM "{{username}}";\nDROP OWNED BY "{{username}}"; DROP ROLE "{{username}}";'
+                      }
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Revocation Statement"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                          helperText="username is dynamically provisioned"
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                    <Controller
+                      control={control}
+                      name="inputs.renewStatement"
+                      defaultValue={"ALTER ROLE \"{{username}}\" VALID UNTIL '{{expiration}}';"}
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Renew Statement"
+                          helperText="username and expiration are dynamically provisioned"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <TextArea
+                            {...field}
+                            reSize="none"
+                            rows={3}
+                            className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Save
+          </Button>
+          <Button variant="outline_bg" onClick={onClose}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};

frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/index.tsx

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

frontend/src/views/SecretMainPage/components/DynamicSecretListView/RenewDynamicSecretLease.tsx

@@ -0,0 +1,107 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useRenewDynamicSecretLease } from "@app/hooks/api";
+
+const formSchema = z.object({
+  ttl: z.string().superRefine((val, ctx) => {
+    if (!val) return;
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  })
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  leaseId: string;
+  dynamicSecretName: string;
+  projectSlug: string;
+  environment: string;
+  secretPath: string;
+};
+
+export const RenewDynamicSecretLease = ({
+  onClose,
+  projectSlug,
+  dynamicSecretName,
+  leaseId,
+  secretPath,
+  environment
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ttl: "1h"
+    }
+  });
+  
+
+  const renewDynamicSecretLease = useRenewDynamicSecretLease();
+
+  const handleDynamicSecretLeaseCreate = async ({ ttl }: TForm) => {
+    if (renewDynamicSecretLease.isLoading) return;
+    try {
+      await renewDynamicSecretLease.mutateAsync({
+        environmentSlug: environment,
+        projectSlug,
+        path: secretPath,
+        ttl,
+        dynamicSecretName,
+        leaseId
+      });
+      onClose();
+      createNotification({
+        type: "success",
+        text: "Successfully renewed lease"
+      });
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        type: "error",
+        text: "Failed to renew lease"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleDynamicSecretLeaseCreate)}>
+      <Controller
+        control={control}
+        name="ttl"
+        defaultValue="1h"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label={<TtlFormLabel label="TTL" />}
+            isError={Boolean(error?.message)}
+            errorText={error?.message}
+            helperText="The existing expiration time will be extended by the TTL"
+          >
+            <Input {...field} />
+          </FormControl>
+        )}
+      />
+      <div className="mt-4 flex items-center space-x-4">
+        <Button type="submit" isLoading={isSubmitting}>
+          Renew
+        </Button>
+        <Button variant="outline_bg" onClick={onClose}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/views/SecretMainPage/components/DynamicSecretListView/index.tsx

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

frontend/src/views/SecretMainPage/components/FolderListView/FolderListView.tsx

@@ -3,7 +3,7 @@ import { subject } from "@casl/ability";
 import { faClose, faFolder, faPencilSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { DeleteActionModal, IconButton, Modal, ModalContent } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
@@ -35,7 +35,7 @@ export const FolderListView = ({
   ] as const);
   const router = useRouter();
 
-  const { createNotification } = useNotificationContext();
+  
 
   const { mutateAsync: updateFolder } = useUpdateFolder();
   const { mutateAsync: deleteFolder } = useDeleteFolder();

frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQueryClient } from "@tanstack/react-query";
 import { twMerge } from "tailwind-merge";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 // TODO:(akhilmhdh) convert all the util functions like this into a lib folder grouped by functionality
 import { parseDotEnv } from "@app/components/utilities/parseDotEnv";
@@ -60,7 +60,7 @@ export const SecretDropzone = ({
   const { t } = useTranslation();
   const [isDragActive, setDragActive] = useToggle();
   const [isLoading, setIsLoading] = useToggle();
-  const { createNotification } = useNotificationContext();
+
   const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "importSecEnv",
     "overlapKeyWarning"
@@ -119,8 +119,7 @@ export const SecretDropzone = ({
     if (!file) {
       createNotification({
         text: "You can't inject files from VS Code. Click 'Reveal in finder', and drag your file directly from the directory where it's located.",
-        type: "error",
-        timeoutMs: 10000
+        type: "error"
       });
       return;
     }

frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportListView.tsx

@@ -12,7 +12,7 @@ import {
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { DeleteActionModal } from "@app/components/v2";
 import { usePopUp } from "@app/hooks";
 import { useDeleteSecretImport, useUpdateSecretImport } from "@app/hooks/api";
@@ -90,7 +90,7 @@ export const SecretImportListView = ({
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "deleteSecretImport"
   ] as const);
-  const { createNotification } = useNotificationContext();
+  
   const sensors = useSensors(
     useSensor(MouseSensor, {}),
     useSensor(TouchSensor, {}),

frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx

@@ -13,7 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -71,7 +71,7 @@ export const SecretDetailSidebar = ({
   environment,
   secretPath
 }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const {
     register,
     control,

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { twMerge } from "tailwind-merge";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { CreateTagModal } from "@app/components/tags/CreateTagModal";
 import { DeleteActionModal } from "@app/components/v2";
 import { usePopUp } from "@app/hooks";
@@ -89,7 +89,7 @@ export const SecretListView = ({
   isVisible,
   isProtectedBranch = false
 }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const queryClient = useQueryClient();
   const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "deleteSecret",

frontend/src/views/SecretMainPage/components/SnapshotView/SnapshotView.tsx

@@ -9,7 +9,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, ContentLoader, Input, Tag, Tooltip } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
@@ -52,7 +52,7 @@ export const SnapshotView = ({
   snapshotCount,
   onClickListSnapshot
 }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const [search, setSearch] = useState("");
   const { mutateAsync: performRollback, isLoading: isRollingBack } = usePerformSecretRollback();
 

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -16,8 +16,8 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -54,7 +54,9 @@ import {
   useCreateFolder,
   useCreateSecretV3,
   useDeleteSecretV3,
+  useGetDynamicSecretsOfAllEnv,
   useGetFoldersByEnv,
+  useGetImportedSecretsAllEnvs,
   useGetProjectSecretsAllEnv,
   useGetUserWsKey,
   useUpdateSecretV3
@@ -65,12 +67,13 @@ import { FolderForm } from "../SecretMainPage/components/ActionBar/FolderForm";
 import { CreateSecretForm } from "./components/CreateSecretForm";
 import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
 import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSection";
+import { SecretOverviewDynamicSecretRow } from "./components/SecretOverviewDynamicSecretRow";
 import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
 import { SecretOverviewTableRow } from "./components/SecretOverviewTableRow";
 
 export const SecretOverviewPage = () => {
   const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
+
   const router = useRouter();
 
   // this is to set expandable table width
@@ -97,6 +100,7 @@ export const SecretOverviewPage = () => {
   const { currentWorkspace, isLoading: isWorkspaceLoading } = useWorkspace();
   const { currentOrg } = useOrganization();
   const workspaceId = currentWorkspace?.id as string;
+  const projectSlug = currentWorkspace?.slug as string;
   const { data: latestFileKey } = useGetUserWsKey(workspaceId);
   const [searchFilter, setSearchFilter] = useState("");
   const secretPath = (router.query?.secretPath as string) || "/";
@@ -131,6 +135,19 @@ export const SecretOverviewPage = () => {
     environments: userAvailableEnvs.map(({ slug }) => slug)
   });
 
+  const { isImportedSecretPresentInEnv } = useGetImportedSecretsAllEnvs({
+    projectId: workspaceId,
+    decryptFileKey: latestFileKey!,
+    environments: userAvailableEnvs.map(({ slug }) => slug)
+  });
+
+  const { dynamicSecretNames, dynamicSecrets, isDynamicSecretPresentInEnv } =
+    useGetDynamicSecretsOfAllEnv({
+      projectSlug,
+      environmentSlugs: userAvailableEnvs.map(({ slug }) => slug),
+      path: secretPath
+    });
+
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
   const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
   const { mutateAsync: deleteSecretV3 } = useDeleteSecretV3();
@@ -329,12 +346,19 @@ export const SecretOverviewPage = () => {
   const filteredFolderNames = folderNames?.filter((name) =>
     name.toLowerCase().includes(searchFilter.toLowerCase())
   );
+  const filteredDynamicSecrets = dynamicSecretNames?.filter((name) =>
+    name.toLowerCase().includes(searchFilter.toLowerCase())
+  );
+
   const isTableEmpty =
     !(
-      folders?.every(({ isLoading }) => isLoading) && secrets?.every(({ isLoading }) => isLoading)
+      folders?.every(({ isLoading }) => isLoading) &&
+      secrets?.every(({ isLoading }) => isLoading) &&
+      dynamicSecrets?.every(({ isLoading }) => isLoading)
     ) &&
     filteredSecretNames?.length === 0 &&
-    filteredFolderNames?.length === 0;
+    filteredFolderNames?.length === 0 &&
+    filteredDynamicSecrets?.length === 0;
 
   return (
     <>
@@ -644,11 +668,21 @@ export const SecretOverviewPage = () => {
                       onClick={handleFolderClick}
                     />
                   ))}
+                {!isTableLoading &&
+                  filteredDynamicSecrets.map((dynamicSecretName, index) => (
+                    <SecretOverviewDynamicSecretRow
+                      dynamicSecretName={dynamicSecretName}
+                      isDynamicSecretInEnv={isDynamicSecretPresentInEnv}
+                      environments={visibleEnvs}
+                      key={`overview-${dynamicSecretName}-${index + 1}`}
+                    />
+                  ))}
                 {!isTableLoading &&
                   visibleEnvs?.length > 0 &&
                   filteredSecretNames.map((key, index) => (
                     <SecretOverviewTableRow
                       secretPath={secretPath}
+                      isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
                       onSecretCreate={handleSecretCreate}
                       onSecretDelete={handleSecretDelete}
                       onSecretUpdate={handleSecretUpdate}

frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   Checkbox,
@@ -64,7 +64,7 @@ export const CreateSecretForm = ({
   const workspaceId = currentWorkspace?.id || "";
   const environments = currentWorkspace?.environments || [];
 
-  const { createNotification } = useNotificationContext();
+  
 
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
   const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();

frontend/src/views/SecretOverviewPage/components/CreateSecretForm/index.tsx

@@ -1 +1 @@
-export { CreateSecretForm } from "./CreateSecretForm"
+export { CreateSecretForm } from "./CreateSecretForm";