Fix merge conflicts

2026-09-22 13:39:35 +00:00 · 2023-07-21 20:49:41 +07:00
parent d9f6c27e4d 9cef35e9e6
commit f450be3a00
217 changed files with 11802 additions and 20564 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -5,6 +5,9 @@
  "packages": {
    "": {
      "dependencies": {
+        "@dnd-kit/core": "^6.0.8",
+        "@dnd-kit/modifiers": "^6.0.1",
+        "@dnd-kit/sortable": "^7.0.2",
        "@emotion/css": "^11.10.0",
        "@emotion/server": "^11.10.0",
        "@fontsource/inter": "^4.5.15",
@@ -2468,6 +2471,68 @@
        "node": ">=10.0.0"
      }
    },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.0.1.tgz",
+      "integrity": "sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.0.8.tgz",
+      "integrity": "sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.0.0",
+        "@dnd-kit/utilities": "^3.2.1",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/modifiers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-6.0.1.tgz",
+      "integrity": "sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.1",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.0.6",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.2.tgz",
+      "integrity": "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.0",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.0.7",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.1.tgz",
+      "integrity": "sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/@emotion/babel-plugin": {
      "version": "11.11.0",
      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
@@ -24491,6 +24556,50 @@
      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
      "dev": true
    },
+    "@dnd-kit/accessibility": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.0.1.tgz",
+      "integrity": "sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@dnd-kit/core": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.0.8.tgz",
+      "integrity": "sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==",
+      "requires": {
+        "@dnd-kit/accessibility": "^3.0.0",
+        "@dnd-kit/utilities": "^3.2.1",
+        "tslib": "^2.0.0"
+      }
+    },
+    "@dnd-kit/modifiers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-6.0.1.tgz",
+      "integrity": "sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==",
+      "requires": {
+        "@dnd-kit/utilities": "^3.2.1",
+        "tslib": "^2.0.0"
+      }
+    },
+    "@dnd-kit/sortable": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.2.tgz",
+      "integrity": "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==",
+      "requires": {
+        "@dnd-kit/utilities": "^3.2.0",
+        "tslib": "^2.0.0"
+      }
+    },
+    "@dnd-kit/utilities": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.1.tgz",
+      "integrity": "sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
    "@emotion/babel-plugin": {
      "version": "11.11.0",
      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,9 @@
    "build-storybook": "storybook build"
  },
  "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
    "@emotion/css": "^11.10.0",
    "@emotion/server": "^11.10.0",
    "@fontsource/inter": "^4.5.15",
--- a/frontend/public/data/frequentConstants.ts
+++ b/frontend/public/data/frequentConstants.ts
@@ -21,6 +21,7 @@ const integrationSlugNameMapping: Mapping = {
  checkly: "Checkly",
  "hashicorp-vault": "Vault",
  "cloudflare-pages": "Cloudflare Pages",
+  "codefresh": "Codefresh",
  bitbucket: "BitBucket"
 };

--- a/frontend/public/images/integrations/codefresh.png
+++ b/frontend/public/images/integrations/codefresh.png
--- a/frontend/public/lotties/system-outline-69-document-scan.json
+++ b/frontend/public/lotties/system-outline-69-document-scan.json
--- a/frontend/src/components/login/InitialLoginStep.tsx
+++ b/frontend/src/components/login/InitialLoginStep.tsx
@@ -1,188 +0,0 @@
-import { FormEvent, useState } from "react";
-import { useTranslation } from "react-i18next";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import axios from "axios"
-
-import attemptLogin from "@app/components/utilities/attemptLogin";
-import getOrganizations from "@app/pages/api/organization/getOrgs";
-
-import Error from "../basic/Error";
-import attemptCliLogin from "../utilities/attemptCliLogin";
-// import { faGoogle } from '@fortawesome/free-brands-svg-icons';
-// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Input } from "../v2";
-
-export default function InitialLoginStep({
-    setStep,
-    email,
-    setEmail,
-    password,
-    setPassword,
-}: {
-    setStep: (step: number) => void;
-    email: string;
-    setEmail: (email: string) => void;
-    password: string;
-    setPassword: (password: string) => void;
-}) {
-
-    const router = useRouter();
-    const { t } = useTranslation();
-    const [isLoading, setIsLoading] = useState(false);
-    const [loginError, setLoginError] = useState(false);
-
-    const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-        try {
-            if (!email || !password) {
-                return;
-            }
-
-            setIsLoading(true);
-            const queryParams = new URLSearchParams(window.location.search)
-            if (queryParams && queryParams.get("callback_port")) {
-                const callbackPort = queryParams.get("callback_port")
-
-                // attemptCliLogin
-                const isCliLoginSuccessful = await attemptCliLogin({
-                    email,
-                    password,
-                })
-
-                if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
-
-                    if (isCliLoginSuccessful.mfaEnabled) {
-                        // case: login requires MFA step
-                        setStep(2);
-                        setIsLoading(false);
-                        return;
-                    }
-                    // case: login was successful
-                    const cliUrl = `http://localhost:${callbackPort}`
-
-                    // send request to server endpoint
-                    const instance = axios.create()
-                    const cliResp = await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse })
-                    console.log(cliResp)
-
-                    // cli page
-                    router.push("/cli-redirect");
-
-                    // on success, router.push to cli Login Successful page
-
-                }
-            } else {
-                const isLoginSuccessful = await attemptLogin({
-                    email,
-                    password,
-                });
-                if (isLoginSuccessful && isLoginSuccessful.success) {
-                    // case: login was successful
-
-                    if (isLoginSuccessful.mfaEnabled) {
-                        // case: login requires MFA step
-                        setStep(2);
-                        setIsLoading(false);
-                        return;
-                    }
-                    const userOrgs = await getOrganizations();
-                    const userOrg = userOrgs[0] && userOrgs[0]._id;
-
-                    // case: login does not require MFA step
-                    router.push(`/org/${userOrg}/overview`);
-                }
-            }
-
-
-        } catch (err) {
-            setLoginError(true);
-        }
-
-        setIsLoading(false);
-    }
-    
-    return <form onSubmit={handleLogin} className='flex flex-col mx-auto w-full justify-center items-center'>
-        <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
-        {/* <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
-            <Button
-                colorSchema="primary" 
-                variant="solid"
-                onClick={() => {
-                    window.open('/api/v1/auth/redirect/google')
-                }} 
-                leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
-                className="h-14 w-full mx-0"
-            > 
-                {t('login.continue-with-google')}
-            </Button>
-        </div> */}
-        <div className="relative md:px-1.5 flex items-center justify-center lg:w-1/6 w-1/4 min-w-[21.3rem] md:min-w-[22rem] mx-auto rounded-lg max-h-24 md:max-h-28">
-            <div className="flex items-center justify-center w-full md:px-2 md:py-1 rounded-lg max-h-24 md:max-h-28">
-                <Input
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    type="email"
-                    placeholder="Enter your email..."
-                    isRequired
-                    autoComplete="username"
-                    className="h-12"
-                />
-            </div>
-        </div>
-        <div className="relative pt-2 md:pt-0 md:px-1.5 flex items-center justify-center w-1/4 lg:w-1/6 min-w-[21.3rem] md:min-w-[22rem] mx-auto rounded-lg max-h-24 md:max-h-28">
-            <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
-                <Input
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    type="password"
-                    placeholder="Enter your password..."
-                    isRequired
-                    autoComplete="current-password"
-                    id="current-password"
-                    className="h-12 select:-webkit-autofill:focus"
-                />
-            </div>
-        </div>
-        {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
-        <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
-            <Button
-                type="submit"
-                size="sm"
-                isFullWidth
-                className='h-12'
-                colorSchema="primary"
-                variant="solid"
-                isLoading={isLoading}
-            > Login </Button>
-        </div>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center mt-4 py-2'>
-            <div className='w-1/2 border-t border-mineshaft-500' />
-            <span className='px-4 text-sm text-bunker-400'>or</span>
-            <div className='w-1/2 border-t border-mineshaft-500' />
-        </div>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
-            <Button
-                colorSchema="primary"
-                variant="outline_bg"
-                onClick={() => router.push("/saml-sso")}
-                isFullWidth
-                className="h-14 w-full mx-0"
-            >
-                Continue with SAML SSO
-            </Button>
-        </div>
-        <div className="mt-6 text-bunker-400 text-sm flex flex-row">
-            <span className="mr-1">Don&apos;t have an acount yet?</span>
-            <Link href="/signup">
-                <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("login.create-account")}</span>
-            </Link>
-        </div>
-        <div className="text-bunker-400 text-sm flex flex-row">
-            <span className="mr-1">Forgot password?</span>
-            <Link href="/verify-email">
-                <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>Recover your account</span>
-            </Link>
-        </div>
-    </form>
-}
--- a/frontend/src/components/login/PasswordInputStep.tsx
+++ b/frontend/src/components/login/PasswordInputStep.tsx
@@ -1,122 +0,0 @@
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import Error from "@app/components/basic/Error";
-import attemptLogin from "@app/components/utilities/attemptLogin";
-import getOrganizations from "@app/pages/api/organization/getOrgs";
-
-import SecurityClient from "../utilities/SecurityClient";
-import { Button, Input } from "../v2";
-
-export default function PasswordInputStep({
-  email,
-  password,
-  providerAuthToken,
-  setPassword,
-  setProviderAuthToken,
-  setStep
-}: {
-  email: string;
-  password: string;
-  providerAuthToken: string;
-  setPassword: (password: string) => void;
-  setProviderAuthToken: (value: string) => void;
-  setStep: (step: number) => void;
-}) {
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-  const [loginError, setLoginError] = useState(false);
-
-  const { t } = useTranslation();
-
-  const handleLogin = async () => {
-    try {
-      setIsLoading(true);
-      const loginAttempt = await attemptLogin({
-        email,
-        password,
-        providerAuthToken,
-      });
-
-      if (loginAttempt && loginAttempt.success) {
-        // case: login was successful
-
-        if (loginAttempt.mfaEnabled) {
-          // case: login requires MFA step
-          setStep(2);
-          setIsLoading(false);
-          return;
-        }
-
-        // case: login does not require MFA step
-        const userOrgs = await getOrganizations();
-        const userOrg = userOrgs[0]._id;
-        router.push(`/org/${userOrg?._id}/overview`);
-      }
-    } catch (err) {
-      setLoginError(true);
-    }
-
-    setIsLoading(false);
-  };
-
-  return (
-    <form onSubmit={(e) => e.preventDefault()}>
-      <div className="h-full mx-auto w-full max-w-md px-6 pt-8">
-        <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’s your Infisical Password?
-        </p>
-        <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 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 password..."
-              isRequired
-              autoComplete="current-password"
-              id="current-password"
-              className="h-12"
-            />
-          </div>
-        </div>
-        {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
-        <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[22rem] text-center rounded-md mt-4'>
-          <Button
-              colorSchema="primary" 
-              variant="outline_bg"
-              onClick={async () => handleLogin()} 
-              isFullWidth
-              isLoading={isLoading}
-              className="h-14"
-          > 
-              {t("login.login")} 
-          </Button>
-        </div>
-        <div className="text-bunker-400 text-xs flex flex-col items-center w-max mx-auto mt-4">
-          <span className='duration-200 max-w-sm text-center px-4'>
-            Infisical Master Password serves as a decryption mechanism so that even Google is not able to access your secrets.
-          </span>
-          <Link href="/verify-email">
-            <span className='hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("login.forgot-password")}</span>
-          </Link>
-        </div>
-        <div className="flex flex-row items-center justify-center">
-          <button
-            onClick={(e) => {
-              e.preventDefault();
-              SecurityClient.setProviderAuthToken("");
-              setProviderAuthToken("");
-            }}
-            type="button"
-            className="text-bunker-400 text-xs 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>
-    </form>
-  );
-}
--- a/frontend/src/components/signup/InitialSignupStep.tsx
+++ b/frontend/src/components/signup/InitialSignupStep.tsx
@@ -1,9 +1,9 @@
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-// import { faGoogle } from '@fortawesome/free-brands-svg-icons';
-// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from "../v2";

 export default function InitialSignupStep({
@@ -16,19 +16,6 @@ export default function InitialSignupStep({

    return <div className='flex flex-col mx-auto w-full justify-center items-center'>
        <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >{t("signup.initial-title")}</h1>
-        {/* <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
-            <Button
-                colorSchema="primary"
-                variant="solid"
-                onClick={() => {
-                    window.open('/api/v1/auth/redirect/google')
-                }}
-                leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
-                className="h-14 w-full mx-0"
-            >
-                {t('signup.continue-with-google')}
-            </Button>
-        </div> */}
        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md'>
            <Button
                colorSchema="primary"
@@ -42,6 +29,25 @@ export default function InitialSignupStep({
                Sign Up with email
            </Button>
        </div>
+        <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
+            <div className='w-1/2 border-t border-mineshaft-500' />
+            <span className='px-4 text-sm text-bunker-400'>or</span>
+            <div className='w-1/2 border-t border-mineshaft-500' />
+        </div>
+        <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
+            <Button
+                colorSchema="primary"
+                variant="solid"
+                onClick={() => {
+                    window.open("/api/v1/sso/redirect/google");
+                    window.close();
+                }}
+                leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
+                className="h-14 w-full mx-0"
+            >
+                {t("signup.continue-with-google")}
+            </Button>
+        </div>
        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
            <Button
                colorSchema="primary" 
--- a/frontend/src/components/v2/EmptyState/EmptyState.tsx
+++ b/frontend/src/components/v2/EmptyState/EmptyState.tsx
@@ -25,7 +25,7 @@ export const EmptyState = ({
      className
    )}
  >
-    <FontAwesomeIcon icon={icon} size={iconSize} className="mr-4" />
+    <FontAwesomeIcon icon={icon} size={iconSize} />
    <div className="flex flex-row items-center py-4">
      <div className="text-sm text-bunker-300">{title}</div>
      <div>{children}</div>
--- a/frontend/src/const.ts
+++ b/frontend/src/const.ts
@@ -4,6 +4,7 @@ export const publicPaths = [
  "/signupinvite",
  "/pricing",
  "/signup",
+  "/signup/sso",
  "/login",
  "/blog",
  "/docs",
@@ -18,8 +19,9 @@ export const publicPaths = [
  "/verify-email",
  "/password-reset",
  "/saml-sso",
-  "/login/provider/success",
-  "/login/provider/error"
+  "/login/provider/success", // TODO: change
+  "/login/provider/error", // TODO: change
+  "/login/sso"
 ];

 export const languageMap = {
--- a/frontend/src/hooks/api/index.tsx
+++ b/frontend/src/hooks/api/index.tsx
@@ -6,10 +6,12 @@ export * from "./integrations";
 export * from "./keys";
 export * from "./organization";
 export * from "./secretFolders";
+export * from "./secretImports";
 export * from "./secrets";
 export * from "./secretSnapshots";
 export * from "./serviceAccounts";
 export * from "./serviceTokens";
+export * from "./ssoConfig";
 export * from "./subscriptions";
 export * from "./tags";
 export * from "./users";
--- a/frontend/src/hooks/api/integrationAuth/queries.tsx
+++ b/frontend/src/hooks/api/integrationAuth/queries.tsx
@@ -19,6 +19,7 @@ const integrationAuthKeys = {
    integrationAuthId: string;
    appId: string;
  }) => [{ integrationAuthId, appId }, "integrationAuthVercelBranches"] as const,
+
  getIntegrationAuthRailwayEnvironments: ({
    integrationAuthId,
    appId
@@ -76,6 +77,7 @@ const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
  return data.teams;
 };

+
 const fetchIntegrationAuthVercelBranches = async ({
  integrationAuthId,
  appId
@@ -265,3 +267,4 @@ export const useDeleteIntegrationAuth = () => {
    }
  });
 };
+
--- a/frontend/src/hooks/api/organization/queries.tsx
+++ b/frontend/src/hooks/api/organization/queries.tsx
@@ -22,7 +22,7 @@ const organizationKeys = {
  getOrgBillingDetails: (orgId: string) => [{ orgId }, "organization-billing-details"] as const,
  getOrgPmtMethods: (orgId: string) => [{ orgId }, "organization-pmt-methods"] as const,
  getOrgTaxIds: (orgId: string) => [{ orgId }, "organization-tax-ids"] as const,
-  getOrgInvoices: (orgId: string) => [{ orgId }, "organization-invoices"] as const
+  getOrgInvoices: (orgId: string) => [{ orgId }, "organization-invoices"] as const,
 };

 export const useGetOrganization = () => {
--- a/frontend/src/hooks/api/secretImports/index.ts
+++ b/frontend/src/hooks/api/secretImports/index.ts
@@ -0,0 +1,2 @@
+export { useCreateSecretImport, useDeleteSecretImport, useUpdateSecretImport } from "./mutation";
+export { useGetImportedSecrets, useGetSecretImports } from "./queries";
--- a/frontend/src/hooks/api/secretImports/mutation.tsx
+++ b/frontend/src/hooks/api/secretImports/mutation.tsx
@@ -0,0 +1,78 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { secretImportKeys } from "./queries";
+import { TCreateSecretImportDTO, TDeleteSecretImportDTO, TUpdateSecretImportDTO } from "./types";
+
+export const useCreateSecretImport = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TCreateSecretImportDTO>({
+    mutationFn: async ({ secretImport, environment, workspaceId, folderId }) => {
+      const { data } = await apiRequest.post("/api/v1/secret-imports", {
+        secretImport,
+        environment,
+        workspaceId,
+        folderId
+      });
+      return data;
+    },
+    onSuccess: (_, { workspaceId, environment, folderId }) => {
+      queryClient.invalidateQueries(
+        secretImportKeys.getProjectSecretImports(workspaceId, environment, folderId)
+      );
+      queryClient.invalidateQueries(
+        secretImportKeys.getSecretImportSecrets(workspaceId, environment, folderId)
+      );
+    }
+  });
+};
+
+export const useUpdateSecretImport = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TUpdateSecretImportDTO>({
+    mutationFn: async ({ environment, workspaceId, folderId, secretImports, id }) => {
+      const { data } = await apiRequest.put(`/api/v1/secret-imports/${id}`, {
+        secretImports,
+        environment,
+        workspaceId,
+        folderId
+      });
+      return data;
+    },
+    onSuccess: (_, { workspaceId, environment, folderId }) => {
+      queryClient.invalidateQueries(
+        secretImportKeys.getProjectSecretImports(workspaceId, environment, folderId)
+      );
+      queryClient.invalidateQueries(
+        secretImportKeys.getSecretImportSecrets(workspaceId, environment, folderId)
+      );
+    }
+  });
+};
+
+export const useDeleteSecretImport = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TDeleteSecretImportDTO>({
+    mutationFn: async ({ id, secretImportEnv, secretImportPath }) => {
+      const { data } = await apiRequest.delete(`/api/v1/secret-imports/${id}`, {
+        data: {
+          secretImportPath,
+          secretImportEnv
+        }
+      });
+      return data;
+    },
+    onSuccess: (_, { workspaceId, environment, folderId }) => {
+      queryClient.invalidateQueries(
+        secretImportKeys.getProjectSecretImports(workspaceId, environment, folderId)
+      );
+      queryClient.invalidateQueries(
+        secretImportKeys.getSecretImportSecrets(workspaceId, environment, folderId)
+      );
+    }
+  });
+};
--- a/frontend/src/hooks/api/secretImports/queries.tsx
+++ b/frontend/src/hooks/api/secretImports/queries.tsx
@@ -0,0 +1,124 @@
+import { useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
+
+import {
+  decryptAssymmetric,
+  decryptSymmetric
+} from "@app/components/utilities/cryptography/crypto";
+import { apiRequest } from "@app/config/request";
+
+import { TGetImportedSecrets, TImportedSecrets, TSecretImports } from "./types";
+
+export const secretImportKeys = {
+  getProjectSecretImports: (workspaceId: string, env: string | string[], folderId?: string) => [
+    { workspaceId, env, folderId },
+    "secrets-imports"
+  ],
+  getSecretImportSecrets: (workspaceId: string, env: string | string[], folderId?: string) => [
+    { workspaceId, env, folderId },
+    "secrets-import-sec"
+  ]
+};
+
+const fetchSecretImport = async (workspaceId: string, environment: string, folderId?: string) => {
+  const { data } = await apiRequest.get<{ secretImport: TSecretImports }>(
+    "/api/v1/secret-imports",
+    {
+      params: {
+        workspaceId,
+        environment,
+        folderId
+      }
+    }
+  );
+  return data.secretImport;
+};
+
+export const useGetSecretImports = (workspaceId: string, env: string, folderId?: string) =>
+  useQuery({
+    enabled: Boolean(workspaceId) && Boolean(env),
+    queryKey: secretImportKeys.getProjectSecretImports(workspaceId, env, folderId),
+    queryFn: () => fetchSecretImport(workspaceId, env, folderId)
+  });
+
+const fetchImportedSecrets = async (
+  workspaceId: string,
+  environment: string,
+  folderId?: string
+) => {
+  const { data } = await apiRequest.get<{ secrets: TImportedSecrets }>(
+    "/api/v1/secret-imports/secrets",
+    {
+      params: {
+        workspaceId,
+        environment,
+        folderId
+      }
+    }
+  );
+  return data.secrets;
+};
+
+export const useGetImportedSecrets = ({
+  workspaceId,
+  environment,
+  folderId,
+  decryptFileKey
+}: TGetImportedSecrets) =>
+  useQuery({
+    enabled: Boolean(workspaceId) && Boolean(environment) && Boolean(decryptFileKey),
+    queryKey: secretImportKeys.getSecretImportSecrets(workspaceId, environment, folderId),
+    queryFn: () => fetchImportedSecrets(workspaceId, environment, folderId),
+    select: useCallback(
+      (data: TImportedSecrets) => {
+        const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+        const latestKey = decryptFileKey;
+        const key = decryptAssymmetric({
+          ciphertext: latestKey.encryptedKey,
+          nonce: latestKey.nonce,
+          publicKey: latestKey.sender.publicKey,
+          privateKey: PRIVATE_KEY
+        });
+
+        return data.map((el) => ({
+          environment: el.environment,
+          secretPath: el.secretPath,
+          folderId: el.folderId,
+          secrets: el.secrets.map((encSecret) => {
+            const secretKey = decryptSymmetric({
+              ciphertext: encSecret.secretKeyCiphertext,
+              iv: encSecret.secretKeyIV,
+              tag: encSecret.secretKeyTag,
+              key
+            });
+
+            const secretValue = decryptSymmetric({
+              ciphertext: encSecret.secretValueCiphertext,
+              iv: encSecret.secretValueIV,
+              tag: encSecret.secretValueTag,
+              key
+            });
+
+            const secretComment = decryptSymmetric({
+              ciphertext: encSecret.secretCommentCiphertext,
+              iv: encSecret.secretCommentIV,
+              tag: encSecret.secretCommentTag,
+              key
+            });
+
+            return {
+              _id: encSecret._id,
+              env: encSecret.environment,
+              key: secretKey,
+              value: secretValue,
+              tags: encSecret.tags,
+              comment: secretComment,
+              createdAt: encSecret.createdAt,
+              updatedAt: encSecret.updatedAt
+            };
+          })
+        }));
+      },
+      [decryptFileKey]
+    )
+  });
--- a/frontend/src/hooks/api/secretImports/types.ts
+++ b/frontend/src/hooks/api/secretImports/types.ts
@@ -0,0 +1,56 @@
+import { EncryptedSecret } from "../secrets/types";
+import { UserWsKeyPair } from "../types";
+
+export type TSecretImports = {
+  _id: string;
+  workspaceId: string;
+  environment: string;
+  folderId: string;
+  imports: Array<{ environment: string; secretPath: string }>;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TImportedSecrets = {
+  environment: string;
+  secretPath: string;
+  folderId: string;
+  secrets: EncryptedSecret[];
+}[];
+
+export type TGetImportedSecrets = {
+  workspaceId: string;
+  environment: string;
+  folderId?: string;
+  decryptFileKey: UserWsKeyPair;
+};
+
+export type TCreateSecretImportDTO = {
+  workspaceId: string;
+  environment: string;
+  folderId?: string;
+  secretImport: {
+    environment: string;
+    secretPath: string;
+  };
+};
+
+export type TUpdateSecretImportDTO = {
+  id: string;
+  workspaceId: string;
+  environment: string;
+  folderId?: string;
+  secretImports: Array<{
+    environment: string;
+    secretPath: string;
+  }>;
+};
+
+export type TDeleteSecretImportDTO = {
+  id: string;
+  workspaceId: string;
+  environment: string;
+  folderId?: string;
+  secretImportPath: string;
+  secretImportEnv: string;
+};
--- a/frontend/src/hooks/api/secrets/queries.tsx
+++ b/frontend/src/hooks/api/secrets/queries.tsx
@@ -24,6 +24,10 @@ export const secretKeys = {
    { workspaceId, env, folderId },
    "secrets"
  ],
+  getProjectSecretImports: (workspaceId: string, env: string | string[], folderId?: string) => [
+    { workspaceId, env, folderId },
+    "secrets-imports"
+  ],
  getSecretVersion: (secretId: string) => [{ secretId }, "secret-versions"]
 };

--- a/frontend/src/hooks/api/secrets/types.ts
+++ b/frontend/src/hooks/api/secrets/types.ts
@@ -34,6 +34,7 @@ export type DecryptedSecret = {
  valueOverride?: string;
  idOverride?: string;
  overrideAction?: string;
+  folderId?: string;
 };

 export type EncryptedSecretVersion = {
@@ -98,6 +99,7 @@ export type GetProjectSecretsDTO = {
  folderId?: string;
  secretPath?: string;
  isPaused?: boolean;
+  include_imports?: boolean;
  onSuccess?: (data: DecryptedSecret[]) => void;
 };

--- a/frontend/src/hooks/api/ssoConfig/index.tsx
+++ b/frontend/src/hooks/api/ssoConfig/index.tsx
@@ -0,0 +1,5 @@
+export {
+    useCreateSSOConfig,
+    useGetSSOConfig,
+    useUpdateSSOConfig
+} from "./queries";
--- a/frontend/src/hooks/api/ssoConfig/queries.tsx
+++ b/frontend/src/hooks/api/ssoConfig/queries.tsx
@@ -0,0 +1,103 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+const ssoConfigKeys = {
+    getSSOConfig: (orgId: string) => [{ orgId }, "organization-saml-sso"] as const,
+}
+
+export const useGetSSOConfig = (organizationId: string) => {
+  return useQuery({
+    queryKey: ssoConfigKeys.getSSOConfig(organizationId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get(
+        `/api/v1/sso/config?organizationId=${organizationId}`
+      );
+
+      return data;
+    },
+    enabled: true
+  });
+}
+
+export const useCreateSSOConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      organizationId,
+      authProvider,
+      isActive,
+      entryPoint,
+      issuer,
+      cert,
+      audience
+    }: {
+      organizationId: string;
+      authProvider: string;
+      isActive: boolean;
+      entryPoint: string;
+      issuer: string;
+      cert: string;
+      audience: string;
+    }) => {
+      const { data } = await apiRequest.post(
+        "/api/v1/sso/config",
+        {
+          organizationId,
+          authProvider,
+          isActive,
+          entryPoint,
+          issuer,
+          cert,
+          audience
+        }
+      );
+      
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(ssoConfigKeys.getSSOConfig(dto.organizationId));
+    }
+  });
+};
+
+export const useUpdateSSOConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      organizationId,
+      authProvider,
+      isActive,
+      entryPoint,
+      issuer,
+      cert,
+      audience
+    }: {
+      organizationId: string;
+      authProvider?: string;
+      isActive?: boolean;
+      entryPoint?: string;
+      issuer?: string;
+      cert?: string;
+      audience?: string;
+    }) => {
+      const { data } = await apiRequest.patch(
+        "/api/v1/sso/config",
+        {
+          organizationId,
+          ...(authProvider !== undefined ? { authProvider } : {}),
+          ...(isActive !== undefined ? { isActive } : {}),
+          ...(entryPoint !== undefined ? { entryPoint } : {}),
+          ...(issuer !== undefined ? { issuer } : {}),
+          ...(cert !== undefined ? { cert } : {}),
+          ...(audience !== undefined ? { audience } : {})
+        }
+      );
+      
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(ssoConfigKeys.getSSOConfig(dto.organizationId));
+    }
+  });
+};
--- a/frontend/src/hooks/api/subscriptions/types.ts
+++ b/frontend/src/hooks/api/subscriptions/types.ts
@@ -13,6 +13,7 @@ export type SubscriptionPlan = {
  workspaceLimit: number;
  workspacesUsed: number;
  environmentLimit: number;
+  samlSSO: boolean;
  status: "incomplete" | "incomplete_expired" | "trialing" | "active" | "past_due" | "canceled" | "unpaid" | null;
  trial_end: number | null;
  has_used_trial: boolean;
--- a/frontend/src/hooks/api/users/queries.tsx
+++ b/frontend/src/hooks/api/users/queries.tsx
@@ -16,6 +16,7 @@ import {
  CreateAPIKeyRes,
  DeletOrgMembershipDTO,
  OrgUser,
+  RenameUserDTO,
  TokenVersion,
  UpdateOrgUserRoleDTO,
  User} from "./types";
@@ -45,6 +46,18 @@ const fetchUserAction = async (action: string) => {
  return data.userAction;
 };

+export const useRenameUser = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, RenameUserDTO>({
+    mutationFn: ({ newName }) =>
+      apiRequest.patch("/api/v2/users/me/name", { firstName: newName?.split(" ")[0], lastName: newName?.split(" ").slice(1).join(" ") }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(userKeys.getUser);
+    }
+  });
+};
+
 export const useGetUserAction = (action: string) =>
  useQuery({
    queryKey: userKeys.userAction,
--- a/frontend/src/hooks/api/users/types.ts
+++ b/frontend/src/hooks/api/users/types.ts
@@ -67,6 +67,10 @@ export type CreateAPIKeyRes = {
  apiKeyData: APIKeyData;
 }

+export type RenameUserDTO = {
+  newName: string;
+};
+
 export type APIKeyData = {
  _id: string;
  name: string;
--- a/frontend/src/hooks/useProviderAuth.ts
+++ b/frontend/src/hooks/useProviderAuth.ts
@@ -1,99 +0,0 @@
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import jwt_decode from "jwt-decode";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import SecurityClient, { PROVIDER_AUTH_TOKEN_KEY } from "@app/components/utilities/SecurityClient";
-
-export const useProviderAuth = () => {
-    const router = useRouter();
-    const { providerAuthToken: redirectedProviderAuthToken } = router.query;
-    const [email, setEmail] = useState<string>("");
-    const [userId, setUserId] = useState<string>("");
-    const [providerAuthToken, setProviderAuthToken] = useState<string>(
-        redirectedProviderAuthToken as string || ""
-    );
-    const [isProviderUserCompleted, setIsProviderUserCompleted] = useState<boolean>();
-    const { createNotification } = useNotificationContext();
-    const AUTH_ERROR_KEY = "PROVIDER_AUTH_ERROR"
-
-    const handleRedirectWithToken = () => {
-        if (providerAuthToken) {
-            const {
-                userId: resultUserId,
-                email: resultEmail,
-                isUserCompleted: resultIsUserCompleted,
-            } = jwt_decode(providerAuthToken) as any;
-            setEmail(resultEmail);
-            setUserId(resultUserId);
-            setIsProviderUserCompleted(resultIsUserCompleted);
-        }
-
-    }
-
-    useEffect(() => {
-        handleRedirectWithToken();
-
-        // reset when there is no redirect auth token
-        if (!providerAuthToken) {
-            SecurityClient.setProviderAuthToken("");
-        }
-
-        window.localStorage.removeItem(AUTH_ERROR_KEY);
-
-        const handleStorageChange = (event: StorageEvent) => {
-            if (event.storageArea !== localStorage) {
-                return;
-            }
-
-            if (event.key === PROVIDER_AUTH_TOKEN_KEY) {
-                if (event.newValue) {
-                    const token = event.newValue;
-                    const {
-                        userId: resultUserId,
-                        email: resultEmail,
-                        isUserCompleted: resultIsUserCompleted,
-                    } = jwt_decode(token) as any;
-                    setIsProviderUserCompleted(resultIsUserCompleted);
-                    setProviderAuthToken(token);
-                    setEmail(resultEmail);
-                    setUserId(resultUserId);
-                } else {
-                    setProviderAuthToken("");
-                    setEmail("");
-                    setUserId("");
-                    setIsProviderUserCompleted(false);
-                }
-                setProviderAuthToken(event.newValue || "");
-            }
-
-            if (event.key === AUTH_ERROR_KEY) {
-                if (event.newValue) {
-                    createNotification({
-                        text: "An error has occured during login.",
-                        type: "error",
-                        timeoutMs: 6000,
-                    })
-
-                    window.localStorage.removeItem(AUTH_ERROR_KEY);
-                }
-            }
-        };
-
-        window.addEventListener("storage", handleStorageChange);
-
-        return () => {
-            window.removeEventListener("storage", handleStorageChange);
-        };
-    }, []);
-
-    return {
-        email,
-        isProviderUserCompleted,
-        providerAuthToken,
-        userId,
-        setEmail,
-        setProviderAuthToken,
-        setUserId,
-    };
-};
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -408,7 +408,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
                      <a>
                        <MenuItem
                          isSelected={router.asPath === `/project/${currentWorkspace?._id}/audit-logs`}
-                          // icon={<FontAwesomeIcon icon={faFileLines} size="lg" />}
                          icon="system-outline-168-view-headline"
                        >
                          Audit Logs
@@ -473,6 +472,16 @@ export const AppLayout = ({ children }: LayoutProps) => {
                          </MenuItem>
                        </a>
                      </Link>
+                      <Link href={`/org/${currentOrg?._id}/secret-scanning`} passHref>
+                        <a>
+                          <MenuItem
+                            isSelected={router.asPath === `/org/${currentOrg?._id}/secret-scanning`}
+                            icon="system-outline-69-document-scan"
+                          >
+                            Secret Scanning
+                          </MenuItem>
+                        </a>
+                      </Link>
                      <Link href={`/org/${currentOrg?._id}/billing`} passHref>
                        <a>
                          <MenuItem
--- a/frontend/src/pages/api/auth/CompleteAccountInformationSignup.ts
+++ b/frontend/src/pages/api/auth/CompleteAccountInformationSignup.ts
@@ -70,7 +70,7 @@ const completeAccountInformationSignup = async ({
    verifier,
    organizationName,
    providerAuthToken,
-    attributionSource,
+    ...(attributionSource ? { attributionSource } : {})
  });

  return data;
--- a/frontend/src/pages/api/secret-scanning/getRisksByOrganization.ts
+++ b/frontend/src/pages/api/secret-scanning/getRisksByOrganization.ts
@@ -1,7 +1,7 @@
 import SecurityClient from "@app/components/utilities/SecurityClient";

 export type GitRisks = {
-  id: string;
+  _id: string;
  description: string;
  startLine: string;
  endLine: string;
@@ -20,6 +20,7 @@ export type GitRisks = {
  tags: string[];
  ruleID: string;
  fingerprint: string;
+  status: string;

  isFalsePositive: boolean; // New field for marking risks as false positives
  isResolved: boolean; // New field for marking risks as resolved
--- a/frontend/src/pages/api/secret-scanning/linkGitAppInstallationWithOrganization.ts
+++ b/frontend/src/pages/api/secret-scanning/linkGitAppInstallationWithOrganization.ts
@@ -16,7 +16,7 @@ const linkGitAppInstallationWithOrganization = (installationId: string, sessionI
    })
  }).then(async (res) => {
    if (res && res.status === 200) {
-      return res.json();
+      return true
    }
    console.log("Failed to link installation to organization");
    return undefined;
--- a/frontend/src/pages/integrations/codefresh/authorize.tsx
+++ b/frontend/src/pages/integrations/codefresh/authorize.tsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function CodefreshCreateIntegrationPage() {
+  const router = useRouter();
+  const [apiKey, setApiKey] = useState("");
+  const [apiKeyErrorText, setApiKeyErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleButtonClick = async () => {
+    try {
+      setApiKeyErrorText("");
+      if (apiKey.length === 0) {
+        setApiKeyErrorText("API Key cannot be blank");
+        return;
+      }
+
+      setIsLoading(true);
+
+      const integrationAuth = await saveIntegrationAccessToken({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "codefresh",
+        accessId: null,
+        accessToken: apiKey,
+        url: null,
+        namespace: null
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/codefresh/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Codefresh Integration</CardTitle>
+        <FormControl
+          label="Codefresh API Key"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== "" ?? false}
+        >
+          <Input placeholder="" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+        >
+          Connect to Codefresh
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+CodefreshCreateIntegrationPage.requireAuth = true;
--- a/frontend/src/pages/integrations/codefresh/create.tsx
+++ b/frontend/src/pages/integrations/codefresh/create.tsx
@@ -0,0 +1,155 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "../../../components/v2";
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById
+} from "../../../hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function CodefreshCreateIntegrationPage() {
+  const router = useRouter();
+
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+    integrationAuthId: (integrationAuthId as string) ?? ""
+  });
+
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [targetApp, setTargetApp] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+    }
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        setTargetApp(integrationAuthApps[0].name);
+      } else {
+        setTargetApp("none");
+      }
+    }
+  }, [integrationAuthApps]);
+
+  const handleButtonClick = async () => {
+    try {
+      if (!integrationAuth?._id) return;
+
+      setIsLoading(true);
+
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: targetApp,
+        appId:
+          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
+            ?.appId ?? null,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment: null,
+        targetEnvironmentId: null,
+        targetService: null,
+        targetServiceId: null,
+        owner: null,
+        path: null,
+        region: null,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment &&
+    integrationAuthApps &&
+    targetApp ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Codefresh Integration</CardTitle>
+        <FormControl label="Project Environment" className="mt-4">
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem
+                value={sourceEnvironment.slug}
+                key={`source-environment-${sourceEnvironment.slug}`}
+              >
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
+        <FormControl label="Codefresh Service" className="mt-4">
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className="w-full border border-mineshaft-500"
+            isDisabled={integrationAuthApps.length === 0}
+          >
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem
+                  value={integrationAuthApp.name}
+                  key={`target-app-${integrationAuthApp.name}`}
+                >
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No services found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
+        >
+          Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : (
+    <div />
+  );
+}
+
+CodefreshCreateIntegrationPage.requireAuth = true;
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -1,139 +0,0 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import Head from "next/head";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import axios from "axios"
-
-// import ListBox from '@app/components/basic/Listbox';
-import InitialLoginStep from "@app/components/login/InitialLoginStep";
-import MFAStep from "@app/components/login/MFAStep";
-import PasswordInputStep from "@app/components/login/PasswordInputStep";
-import { fetchUserDetails } from "@app/hooks/api/users/queries";
-import { useProviderAuth } from "@app/hooks/useProviderAuth";
-import { getAuthToken, isLoggedIn } from "@app/reactQuery";
-
-import getOrganizations from "./api/organization/getOrgs";
-
-export default function Login() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [step, setStep] = useState(1);
-  const { t } = useTranslation();
-
-  // const lang = router.locale ?? 'en';
-  const {
-    providerAuthToken,
-    email: providerEmail,
-    setProviderAuthToken,
-    isProviderUserCompleted
-  } = useProviderAuth();
-
-  if (providerAuthToken && isProviderUserCompleted === false) {
-    router.push(`/signup?providerAuthToken=${encodeURIComponent(providerAuthToken)}`);
-  }
-
-  // const setLanguage = async (to: string) => {
-  //   router.push('/login', '/login', { locale: to });
-  //   localStorage.setItem('lang', to);
-  // };
-
-  useEffect(() => {
-    // TODO(akhilmhdh): workspace will be controlled by a workspace context
-    const redirectToDashboard = async () => {
-      try {
-        const userOrgs = await getOrganizations();
-        // userWorkspace = userWorkspaces[0] && userWorkspaces[0]._id;
-        const userOrg = userOrgs[0] && userOrgs[0]._id;
-
-        // user details
-        const userDetails = await fetchUserDetails()
-        // send details back to client
-
-        const queryParams = new URLSearchParams(window.location.search)
-        if (queryParams && queryParams.get("callback_port")) {
-          const callbackPort = queryParams.get("callback_port")
-
-          // send post request to cli with details
-          const cliUrl = `http://localhost:${callbackPort}`
-          const instance = axios.create()
-          await instance.post(cliUrl, { email: userDetails.email, privateKey: localStorage.getItem("PRIVATE_KEY"), JTWToken: getAuthToken() })
-        }
-        router.push(`/org/${userOrg}/overview`);
-      } catch (error) {
-        console.log("Error - Not logged in yet");
-      }
-    };
-    if (isLoggedIn()) {
-      redirectToDashboard();
-    }
-  }, []);
-
-  const renderView = (loginStep: number) => {
-    if (providerAuthToken && step === 1) {
-      return (
-        <PasswordInputStep
-          email={providerEmail}
-          password={password}
-          providerAuthToken={providerAuthToken}
-          setPassword={setPassword}
-          setProviderAuthToken={setProviderAuthToken}
-          setStep={setStep}
-        />
-      );
-    }
-
-    if (loginStep === 1) {
-      return <InitialLoginStep
-        setStep={setStep}
-        email={email}
-        setEmail={setEmail}
-        password={password}
-        setPassword={setPassword}
-      />;
-    }
-
-    if (step === 2) {
-      return (
-        <MFAStep
-          email={email || providerEmail}
-          password={password}
-          providerAuthToken={providerAuthToken}
-        />
-      );
-    }
-
-    return <div />;
-  };
-
-  return (
-    <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
-      <Head>
-        <title>{t("common.head-title", { title: t("login.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content={t("login.og-title") ?? ""} />
-        <meta name="og:description" content={t("login.og-description") ?? ""} />
-      </Head>
-      <Link href="/">
-        <div className="mb-4 mt-20 flex justify-center">
-          <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
-        </div>
-      </Link>
-      {renderView(step)}
-      {/* <div className="absolute right-4 top-0 mt-4 flex items-center justify-center">
-        <div className="mx-auto w-48">
-          <ListBox
-            isSelected={lang}
-            onChange={setLanguage}
-            data={['en', 'ko', 'fr', 'pt-BR']}
-            isFull
-            text={`${t('common.language')}: `}
-          />
-        </div>
-      </div> */}
-    </div>
-  );
-}
--- a/frontend/src/pages/login/index.tsx
+++ b/frontend/src/pages/login/index.tsx
@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+
+import { Login } from "@app/views/Login";
+
+export default function LoginPage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+      <Head>
+        <title>{t("common.head-title", { title: t("login.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content={t("login.og-title") ?? ""} />
+        <meta name="og:description" content={t("login.og-description") ?? ""} />
+      </Head>
+      <Link href="/">
+        <div className="mb-4 mt-20 flex justify-center">
+          <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
+        </div>
+      </Link>
+      <Login />
+    </div>
+  );
+}
--- a/frontend/src/pages/login/sso/index.tsx
+++ b/frontend/src/pages/login/sso/index.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router"
+
+import { LoginSSO } from "@app/views/Login";
+
+export default function LoginSSOPage() {
+    const { t } = useTranslation();
+    const router = useRouter();
+    const token = router.query.token as string;
+
+    return (
+        <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+            <Head>
+                <title>{t("common.head-title", { title: t("login.title") })}</title>
+                <link rel="icon" href="/infisical.ico" />
+                <meta property="og:image" content="/images/message.png" />
+                <meta property="og:title" content={t("login.og-title") ?? ""} />
+                <meta name="og:description" content={t("login.og-description") ?? ""} />
+            </Head>
+            <Link href="/">
+                <div className="mb-4 mt-20 flex justify-center">
+                <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
+                </div>
+            </Link>
+            <LoginSSO providerAuthToken={token} />
+    </div>
+    );
+}
--- a/frontend/src/pages/org/[id]/billing/index.tsx
+++ b/frontend/src/pages/org/[id]/billing/index.tsx
@@ -11,6 +11,7 @@ export default function SettingsBilling() {
      <Head>
        <title>{t("common.head-title", { title: t("billing.title") })}</title>
        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
      </Head>
      <BillingSettingsPage />
    </div>
--- a/frontend/src/pages/org/[id]/secret-scanning/index.tsx
+++ b/frontend/src/pages/org/[id]/secret-scanning/index.tsx
@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import Head from "next/head";
+import { useRouter } from "next/router"
+
+import { Button } from "@app/components/v2";
+import { SecretScanningLogsTable } from "@app/views/SecretScanning/components";
+
+import createNewIntegrationSession from "../../../api/secret-scanning/createSecretScanningSession";
+import getInstallationStatus from "../../../api/secret-scanning/getInstallationStatus";
+import linkGitAppInstallationWithOrganization from "../../../api/secret-scanning/linkGitAppInstallationWithOrganization";
+
+export default function SecretScanning() {
+  const router = useRouter()
+  const queryParams = router.query
+  const [integrationEnabled, setIntegrationStatus] = useState(false)
+
+  useEffect(()=>{
+    const linkInstallation = async () => {
+      if (typeof queryParams.state === "string" && typeof queryParams.installation_id === "string"){
+        try {
+          const isLinked = await linkGitAppInstallationWithOrganization(queryParams.installation_id as string, queryParams.state as string)
+          if (isLinked){
+            router.reload()
+          }
+          
+          console.log("installation verification complete")
+        }catch (e){
+          console.log("app installation is stale, start new session", e)
+        }
+      }
+    }
+
+    const fetchInstallationStatus = async () => {
+      const status = await getInstallationStatus(String(localStorage.getItem("orgData.id")))
+      setIntegrationStatus(status)
+    }
+
+    fetchInstallationStatus()
+    linkInstallation()
+  },[queryParams.state, queryParams.installation_id])
+
+  const generateNewIntegrationSession = async () => {
+    const session = await createNewIntegrationSession(String(localStorage.getItem("orgData.id")))
+    router.push(`https://github.com/apps/infisical-radar/installations/new?state=${session.sessionId}`)
+  }
+
+  return (
+    <div>
+      <Head>
+        <title>Secret scanning</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Head>
+      <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="mt-6 text-3xl font-semibold text-gray-200">Secret Scanning</div>      
+          <div className="mb-6 text-lg text-mineshaft-300">Automatically monitor your GitHub activity and prevent secret leaks</div>    
+          <div className="relative flex justify-between bg-mineshaft-800 border border-mineshaft-600 rounded-md p-6 mb-6">
+            <div className="flex flex-col items-start">
+              <div className="flex flex-row mb-1">Secret Scanning Status: {integrationEnabled ? <p className="text-green ml-1.5 font-semibold">Enabled</p> : <p className="text-red ml-1.5 font-semibold">Not enabled</p>}</div>
+              <div>{integrationEnabled ? <p className="text-mineshaft-300">Your GitHub organization is connected to Infisical, and is being continuously monitored for secret leaks.</p> : <p className="text-mineshaft-300">Connect your GitHub organization to Infisical.</p>}</div>
+            </div>
+            {integrationEnabled ? (
+              <div>
+                <div className="absolute right-[2.5rem] top-[2.5rem] animate-ping rounded-full h-6 w-6 bg-green flex items-center justify-center"/>
+                <div className="absolute right-[2.63rem] top-[2.63rem] animate-ping rounded-full h-5 w-5 bg-green flex items-center justify-center"/>
+                <div className="absolute right-[2.82rem] top-[2.82rem] animate-ping rounded-full h-3.5 w-3.5 bg-green flex items-center justify-center"/>
+              </div>
+            ) : (
+              <div className="flex items-center h-[3.25rem]">
+                <Button
+                  variant="solid"
+                  colorSchema="primary"
+                  onClick={generateNewIntegrationSession}
+                  className="py-2 h-min"
+                >
+                  Integrate with GitHub
+                </Button>
+              </div>
+            )}
+          </div>
+          <SecretScanningLogsTable />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+SecretScanning.requireAuth = true;
--- a/frontend/src/pages/saml-sso.tsx
+++ b/frontend/src/pages/saml-sso.tsx
@@ -1,90 +0,0 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import Head from "next/head";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { Button, Input } from "@app/components/v2";
-import { isLoggedIn } from "@app/reactQuery";
-
-import getOrganizations from "./api/organization/getOrgs";
-
-export default function Login() {
-  const router = useRouter();
-  const [password, setPassword] = useState("");
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    // TODO(akhilmhdh): workspace will be controlled by a workspace context
-    const redirectToDashboard = async () => {
-      let userOrg;
-      try {
-        const userOrgs = await getOrganizations();
-        userOrg = userOrgs[0] && userOrgs[0]._id;
-        router.push(`/org/${userOrg}/overview`);
-      } catch (error) {
-        console.log("Error - Not logged in yet");
-      }
-    };
-    if (isLoggedIn()) {
-      redirectToDashboard();
-    }
-  }, []);
-
-  return (
-    <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
-      <Head>
-        <title>{t("common.head-title", { title: t("login.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content={t("login.og-title") ?? ""} />
-        <meta name="og:description" content={t("login.og-description") ?? ""} />
-      </Head>
-      <Link href="/">
-        <div className="mb-4 mt-20 flex justify-center">
-          <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
-        </div>
-      </Link>
-      <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’s your email?
-        </p>
-        <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={password}
-              onChange={(e) => setPassword(e.target.value)}
-              type="email"
-              placeholder="Enter your email..."
-              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
-              colorSchema="primary" 
-              variant="outline_bg"
-              onClick={() => {}} 
-              isFullWidth
-              className="h-14"
-          > 
-              {t("login.login")} 
-          </Button>
-        </div>
-        <div className="flex flex-row items-center justify-center mt-4">
-          <button
-            onClick={() => {router.push("/login")}}
-            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>
-    </div>
-  );
-}
--- a/frontend/src/pages/secret-scanning.tsx
+++ b/frontend/src/pages/secret-scanning.tsx
@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router"
+
+export default function SecretScanning() {
+  const router = useRouter();
+
+  useEffect(()=>{
+    router.push(`${router.asPath.split("secret-scanning")[0]}/org/${localStorage.getItem("orgData.id")}/secret-scanning${router.asPath.split("secret-scanning")[1]}`)
+  }, [])
+
+
+  return <div/>;
+}
+
+SecretScanning.requireAuth = true;
--- a/frontend/src/pages/secret-scanning/index.tsx
+++ b/frontend/src/pages/secret-scanning/index.tsx
@@ -1,156 +0,0 @@
-import { useEffect, useState } from "react";
-import Head from "next/head";
-import { useRouter } from "next/router"
-
-import createNewIntegrationSession from "../api/secret-scanning/createSecretScanningSession";
-import getInstallationStatus from "../api/secret-scanning/getInstallationStatus";
-import getRisksByOrganization, { GitRisks } from "../api/secret-scanning/getRisksByOrganization";
-import linkGitAppInstallationWithOrganization from "../api/secret-scanning/linkGitAppInstallationWithOrganization";
-import { RiskStatus } from "../api/secret-scanning/updateRiskStatus";
-
-export default function SecretScanning() {
-  const router = useRouter()
-  const { state, installationId} = router.query
-  const [integrationEnabled, setIntegrationStatus] = useState(false)
-  const [gitRisks, setGitRisks] = useState<GitRisks[]>([]);
-  const [selectedRiskStatus, setSelectedRiskStatus] = useState("");
-
-  const handleSelectRiskStatusUpdate = (event: any) => {
-    setSelectedRiskStatus(event.target.value);
-  };
-
-  console.log("selectedRiskStatus===>", selectedRiskStatus)
-
-  useEffect(()=>{
-    const fetchRisks = async () =>{
-      const risks = await getRisksByOrganization(String(localStorage.getItem("orgData.id")))
-      setGitRisks(risks)
-    }
-
-    const linkInstallation = async () => {
-      if (typeof state === "string" && typeof installationId === "string"){
-        try {
-          await linkGitAppInstallationWithOrganization(installationId as string, state as string)
-          console.log("installation verification complete")
-        }catch (e){
-          console.log("app installation is stale, start new session", e)
-        }
-      }
-    }
-
-    const fetchInstallationStatus = async () => {
-      const status = await getInstallationStatus(String(localStorage.getItem("orgData.id")))
-      setIntegrationStatus(status)
-    }
-
-    fetchInstallationStatus()
-    linkInstallation()
-    fetchRisks()
-  },[state, installationId])
-
-  const generateNewIntegrationSession = async () => {
-    const session = await createNewIntegrationSession(String(localStorage.getItem("orgData.id")))
-    router.push(`https://github.com/apps/infisical-radar/installations/new?state=${session.sessionId}`)
-  }
-
-  return (
-    <div>
-      <Head>
-        <title>Secret scanning</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-      </Head>
-      {/* <NavHeader pageName={"Secret scanning"} isProjectRelated={false} /> */}
-      
-      <div className="text-left">
-        {integrationEnabled ? (
-          <b className="text-green-500">Git app is linked to this organization</b>
-        ) : (
-          <button
-            type="button"
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-            onClick={generateNewIntegrationSession}
-          >
-            Integrate with GitHub
-          </button>
-        )}
-      </div>
-
-      <table className="min-w-full divide-y divide-gray-200">
-  <thead>
-    <tr>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        Date
-      </th>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        Secret Type
-      </th>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        View Risk
-      </th>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        Info
-      </th>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        Status
-      </th>
-      <th className="py-3 px-6 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-        Action
-      </th>
-    </tr>
-  </thead>
-  <tbody className="bg-white divide-y divide-gray-200">
-      {gitRisks.map((risk) => {
-        return (
-          <tr key={risk.ruleID}>
-            <td className="py-4 px-6 whitespace-nowrap">{risk.createdAt}</td>
-            <td className="py-4 px-6 whitespace-nowrap">{risk.ruleID}</td>
-            <td className="py-4 px-6 whitespace-nowrap">
-              <a
-                href={`https://github.com/${risk.repositoryFullName}/blob/${risk.commit}/${risk.file}#L${risk.startLine}-L${risk.endLine}`}
-                target="_blank"
-                className="text-red-500" rel="noreferrer"
-              >
-                View Exposed Secret
-              </a>
-            </td>
-            <td className="py-4 px-6 whitespace-nowrap">
-              <div className="font-bold">
-                <a href={`https://github.com/${risk.repositoryFullName}`}>
-                  {risk.repositoryFullName}
-                </a>
-              </div>
-              <div className="text-xs">
-                <span>{risk.file}</span><br/>
-                <br/>
-                <span className="font-bold">{risk.author}</span><br/>
-                <span>{risk.email}</span>
-              </div>
-            </td>
-            <td className="py-4 px-6 whitespace-nowrap">
-              {risk.isResolved ? "Resolved" : "Needs Attention"}
-            </td>
-            <td className="py-4 px-6 whitespace-nowrap">
-              {risk.isResolved ? "Resolved" : "Needs Attention"}
-            </td>
-            <td className="py-4 px-6 whitespace-nowrap">
-              <select
-                value={selectedRiskStatus}
-                onChange={handleSelectRiskStatusUpdate}
-                className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-              >
-                <option>Unresolved</option>
-                <option value={RiskStatus.RESOLVED_FALSE_POSITIVE}>This is a false positive</option>
-                <option value={RiskStatus.RESOLVED_REVOKED}>I have rotated the secret, resolve risk</option>
-                <option value={RiskStatus.RESOLVED_NOT_REVOKED}>No rotate needed, resolve</option>
-              </select>
-            </td>
-          </tr>
-        );
-      })}
-    </tbody>
-  </table>
-
-    </div>
-  );
-}
--- a/frontend/src/pages/signup/index.tsx
+++ b/frontend/src/pages/signup/index.tsx
@@ -13,10 +13,8 @@ import TeamInviteStep from "@app/components/signup/TeamInviteStep";
 import UserInfoStep from "@app/components/signup/UserInfoStep";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
-import { useProviderAuth } from "@app/hooks/useProviderAuth";
-
-import checkEmailVerificationCode from "./api/auth/CheckEmailVerificationCode";
-import getOrganizations from "./api/organization/getOrgs";
+import checkEmailVerificationCode from "@app/pages/api/auth/CheckEmailVerificationCode";
+import getOrganizations from "@app/pages/api/organization/getOrgs";

 /**
 * @returns the signup page
@@ -35,15 +33,6 @@ export default function SignUp() {
  const [isSignupWithEmail, setIsSignupWithEmail] = useState(false);
  const [isCodeInputCheckLoading, setIsCodeInputCheckLoading] = useState(false);
  const { t } = useTranslation();
-  const { email: providerEmail, providerAuthToken, isProviderUserCompleted } = useProviderAuth();
-
-  if (providerAuthToken && isProviderUserCompleted) {
-    router.push(`/login?providerAuthToken=${encodeURIComponent(providerAuthToken)}`);
-  }
-
-  if (providerAuthToken && step < 3) {
-    setStep(3);
-  }

  useEffect(() => {
    const tryAuth = async () => {
@@ -121,7 +110,7 @@ export default function SignUp() {
      return (
        <UserInfoStep
          incrementStep={incrementStep}
-          email={email || providerEmail}
+          email={email}
          password={password}
          setPassword={setPassword}
          name={name}
@@ -130,7 +119,7 @@ export default function SignUp() {
          setOrganizationName={setOrganizationName}
          attributionSource={attributionSource}
          setAttributionSource={setAttributionSource}
-          providerAuthToken={providerAuthToken}
+          providerAuthToken={undefined}
        />
      );
    }
@@ -139,7 +128,7 @@ export default function SignUp() {
      return (
        <DownloadBackupPDF
          incrementStep={incrementStep}
-          email={email || providerEmail}
+          email={email}
          password={password}
          name={name}
        />
--- a/frontend/src/pages/signup/sso/index.tsx
+++ b/frontend/src/pages/signup/sso/index.tsx
@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+import Image from "next/image";
+import { useRouter } from "next/router"
+
+import { SignupSSO } from "@app/views/Signup";
+
+export default function SignupSSOPage() {
+    const { t } = useTranslation();
+    const router = useRouter();
+    const token = router.query.token as string;
+
+    return (
+        <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+            <Head>
+                <title>{t("common.head-title", { title: t("signup.title") })}</title>
+                <link rel="icon" href="/infisical.ico" />
+                <meta property="og:image" content="/images/message.png" />
+                <meta property="og:title" content={t("signup.og-title") as string} />
+                <meta name="og:description" content={t("signup.og-description") as string} />
+            </Head>
+            <div className="mb-4 mt-20 flex justify-center">
+                <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
+            </div>
+            <SignupSSO providerAuthToken={token} />
+        </div>
+    );
+}
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -3,6 +3,19 @@ import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { arrayMove } from "@dnd-kit/sortable";
+import {
+  faAngleDown,
  faArrowLeft,
  faCheck,
  faClockRotateLeft,
@@ -10,12 +23,14 @@ import {
  faDownload,
  faEye,
  faEyeSlash,
+  faFileImport,
  faFolderPlus,
  faMagnifyingGlass,
  faPlus
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import { useQueryClient } from "@tanstack/react-query";

 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -41,10 +56,14 @@ import { useLeaveConfirm, usePopUp, useToggle } from "@app/hooks";
 import {
  useBatchSecretsOp,
  useCreateFolder,
+  useCreateSecretImport,
  useCreateWsTag,
  useDeleteFolder,
+  useDeleteSecretImport,
+  useGetImportedSecrets,
  useGetProjectFolders,
  useGetProjectSecrets,
+  useGetSecretImports,
  useGetSecretVersion,
  useGetSnapshotSecrets,
  useGetUserAction,
@@ -55,7 +74,8 @@ import {
  useGetWsTags,
  usePerformSecretRollback,
  useRegisterUserAction,
-  useUpdateFolder
+  useUpdateFolder,
+  useUpdateSecretImport
 } from "@app/hooks/api";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
 import { WorkspaceEnv } from "@app/hooks/api/types";
@@ -71,6 +91,8 @@ import {
 import { PitDrawer } from "./components/PitDrawer";
 import { SecretDetailDrawer } from "./components/SecretDetailDrawer";
 import { SecretDropzone } from "./components/SecretDropzone";
+import { SecretImportForm } from "./components/SecretImportForm";
+import { SecretImportSection } from "./components/SecretImportSection";
 import { SecretInputRow } from "./components/SecretInputRow";
 import { SecretTableHeader } from "./components/SecretTableHeader";
 import {
@@ -84,7 +106,7 @@ import {
 } from "./DashboardPage.utils";

 const USER_ACTION_PUSH = "first_time_secrets_pushed";
-
+type TDeleteSecretImport = { environment: string; secretPath: string };
 /*
 * Some imp aspects to consider. Here there are multiple stats changing
 * Thus ideally we need to use a context. But instead we rely on react hook form
@@ -113,7 +135,9 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
    "compareSecrets",
    "folderForm",
    "deleteFolder",
-    "upgradePlan"
+    "upgradePlan",
+    "addSecretImport",
+    "deleteSecretImport"
  ] as const);
  const [isSecretValueHidden, setIsSecretValueHidden] = useToggle(true);
  const [searchFilter, setSearchFilter] = useState("");
@@ -129,6 +153,8 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
  const { currentWorkspace, isLoading } = useWorkspace();
  const { currentOrg } = useOrganization();
  const workspaceId = currentWorkspace?._id as string;
+  const selectedEnvSlug = selectedEnv?.slug || "";
+
  const { data: latestFileKey } = useGetUserWsKey(workspaceId);

  useEffect(() => {
@@ -161,7 +187,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {

  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
    workspaceId,
-    env: selectedEnv?.slug || "",
+    env: selectedEnvSlug,
    decryptFileKey: latestFileKey!,
    isPaused: Boolean(snapshotId),
    folderId
@@ -169,7 +195,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {

  const { data: folderData, isLoading: isFoldersLoading } = useGetProjectFolders({
    workspaceId: workspaceId || "",
-    environment: selectedEnv?.slug || "",
+    environment: selectedEnvSlug,
    parentFolderId: folderId,
    isPaused: isRollbackMode,
    sortDir
@@ -182,7 +208,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
    isFetchingNextPage
  } = useGetWorkspaceSecretSnapshots({
    workspaceId,
-    environment: selectedEnv?.slug || "",
+    environment: selectedEnvSlug,
    folder: folderId,
    limit: 10
  });
@@ -193,17 +219,18 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
    isFetching: isSnapshotChanging
  } = useGetSnapshotSecrets({
    snapshotId: snapshotId || "",
-    env: selectedEnv?.slug || "",
+    env: selectedEnvSlug,
    decryptFileKey: latestFileKey!
  });

  const { data: snapshotCount, isLoading: isLoadingSnapshotCount } = useGetWsSnapshotCount(
    workspaceId,
-    selectedEnv?.slug || "",
+    selectedEnvSlug,
    folderId
  );

  const { data: wsTags } = useGetWsTags(workspaceId);
+
  // mutation calls
  const { mutateAsync: batchSecretOp } = useBatchSecretsOp();
  const { mutateAsync: performSecretRollback } = usePerformSecretRollback();
@@ -213,6 +240,50 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
  const { mutateAsync: updateFolder } = useUpdateFolder(folderId);
  const { mutateAsync: deleteFolder } = useDeleteFolder(folderId);

+  const { data: secretImportCfg, isFetching: isSecretImportCfgFetching } = useGetSecretImports(
+    workspaceId,
+    selectedEnvSlug,
+    folderId
+  );
+
+  const { data: importedSecrets } = useGetImportedSecrets({
+    workspaceId,
+    decryptFileKey: latestFileKey!,
+    environment: selectedEnvSlug,
+    folderId
+  });
+
+  // This is for dnd-kit. As react-query state mutation async
+  // This will act as a placeholder to avoid a glitching animation on dropping items
+  const [items, setItems] = useState<
+    Array<{ environment: string; secretPath: string; id: string }>
+  >([]);
+
+  useEffect(() => {
+    if (
+      !isSecretImportCfgFetching ||
+      // case in which u go to a folder and come back to fill in with cache data
+      (items.length === 0 && secretImportCfg?.imports?.length !== 0 && isSecretImportCfgFetching)
+    ) {
+      setItems(
+        secretImportCfg?.imports?.map((el) => ({
+          ...el,
+          id: `${el.environment}-${el.secretPath}`
+        })) || []
+      );
+    }
+  }, [isSecretImportCfgFetching]);
+
+  const { mutateAsync: createSecretImport } = useCreateSecretImport();
+  const { mutate: updateSecretImportSync } = useUpdateSecretImport();
+  const { mutateAsync: deleteSecretImport } = useDeleteSecretImport();
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  );
+
  const method = useForm<FormData>({
    // why any: well yup inferred ts expects other keys to defined as undefined
    defaultValues: secrets as any,
@@ -319,14 +390,12 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
      await performSecretRollback({
        workspaceId,
        version: snapshotSecret.version,
-        environment: selectedEnv?.slug || "",
+        environment: selectedEnvSlug,
        folderId
      });
      setValue("isSnapshotMode", false);
      setSnaphotId(null);
-      queryClient.invalidateQueries(
-        secretKeys.getProjectSecret(workspaceId, selectedEnv?.slug || "")
-      );
+      queryClient.invalidateQueries(secretKeys.getProjectSecret(workspaceId, selectedEnvSlug));
      createNotification({
        text: "Successfully rollback secrets",
        type: "success"
@@ -522,6 +591,79 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
    }
  };

+  const handleSecretImportCreate = async (env: string, secretPath: string) => {
+    try {
+      await createSecretImport({
+        workspaceId,
+        environment: selectedEnv?.slug || "",
+        folderId,
+        secretImport: {
+          environment: env,
+          secretPath
+        }
+      });
+      createNotification({
+        type: "success",
+        text: "Successfully create secret link"
+      });
+      handlePopUpClose("addSecretImport");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create secret link",
+        type: "error"
+      });
+    }
+  };
+
+  const handleSecretImportDelete = async () => {
+    const { environment: importEnv, secretPath: impSecPath } = popUp.deleteSecretImport
+      ?.data as TDeleteSecretImport;
+    try {
+      if (secretImportCfg?._id) {
+        await deleteSecretImport({
+          workspaceId,
+          environment: selectedEnvSlug,
+          folderId,
+          id: secretImportCfg?._id,
+          secretImportEnv: importEnv,
+          secretImportPath: impSecPath
+        });
+        handlePopUpClose("deleteSecretImport");
+        createNotification({
+          type: "success",
+          text: "Successfully removed secret link"
+        });
+      }
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to remove secret link",
+        type: "error"
+      });
+    }
+  };
+
+  const handleDragEnd = (evt: DragEndEvent) => {
+    const { active, over } = evt;
+    if (over?.id && active.id !== over.id) {
+      const oldIndex = items.findIndex(({ id }) => id === active.id);
+      const newIndex = items.findIndex(({ id }) => id === over.id);
+      const newImportOrder = arrayMove(items, oldIndex, newIndex);
+      setItems(newImportOrder);
+      updateSecretImportSync({
+        workspaceId,
+        environment: selectedEnvSlug,
+        folderId,
+        id: secretImportCfg?._id || "",
+        secretImports: newImportOrder.map((el) => ({
+          environment: el.environment,
+          secretPath: el.secretPath
+        }))
+      });
+    }
+  };
+
  // when secrets is not loading and secrets list is empty
  const isDashboardSecretEmpty = !isSecretsLoading && !fields?.length;

@@ -534,7 +676,8 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
  const isSnapshotSecretEmtpy =
    isRollbackMode && !isSnapshotSecretsLoading && !snapshotSecret?.secrets?.length;
  const isSecretEmpty = (!isRollbackMode && isDashboardSecretEmpty) || isSnapshotSecretEmtpy;
-  const isEmptyPage = isFoldersEmpty && isSecretEmpty;
+  const isSecretImportEmpty = !secretImportCfg?.imports?.length;
+  const isEmptyPage = isFoldersEmpty && isSecretEmpty && isSecretImportEmpty;

  if (isSecretsLoading || isEnvListLoading) {
    return (
@@ -652,54 +795,11 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                </Button>
              </div>
              {!isReadOnly && !isRollbackMode && (
-                <>
-                  <div className="block lg:hidden">
-                    <Tooltip content="Add Folder">
-                      <IconButton
-                        ariaLabel="recovery"
-                        variant="outline_bg"
-                        onClick={() => handlePopUpOpen("folderForm")}
-                      >
-                        <FontAwesomeIcon icon={faFolderPlus} />
-                      </IconButton>
-                    </Tooltip>
-                  </div>
-
-                  <div className="block lg:hidden">
-                    <Tooltip content="Point-in-time Recovery">
-                      <IconButton
-                        ariaLabel="recovery"
-                        variant="outline_bg"
-                        onClick={() => {
-                          if (secretContainer.current) {
-                            secretContainer.current.scroll({
-                              top: 0,
-                              behavior: "smooth"
-                            });
-                          }
-                          prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false });
-                        }}
-                      >
-                        <FontAwesomeIcon icon={faPlus} />
-                      </IconButton>
-                    </Tooltip>
-                  </div>
-                  <div className="hidden lg:block">
-                    <Button
-                      leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
-                      onClick={() => handlePopUpOpen("folderForm")}
-                      isDisabled={isReadOnly || isRollbackMode}
-                      variant="outline_bg"
-                      className="h-10"
-                    >
-                      Add Folder
-                    </Button>
-                  </div>
-
-                  <div className="hidden lg:block">
-                    <Button
-                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                      onClick={() => {
+                <div className="flex flex-row items-center justify-center">
+                  <button 
+                    type="button"
+                    onClick={() => {
+                      if (!(isReadOnly || isRollbackMode)) {
                        if (secretContainer.current) {
                          secretContainer.current.scroll({
                            top: 0,
@@ -708,15 +808,48 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                        }
                        prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false });
                        setSearchFilter("");
-                      }}
-                      isDisabled={isReadOnly || isRollbackMode}
-                      variant="outline_bg"
-                      className="h-10"
-                    >
-                      Add Secret
-                    </Button>
-                  </div>
-                </>
+                      }
+                    }}
+                    className="font-semibold bg-mineshaft-600 border border-mineshaft-500 p-2 rounded-l-md text-sm text-mineshaft-300 cursor-pointer hover:bg-primary/[0.1] hover:border-primary/40 pr-4 duration-200"
+                  >
+                    <FontAwesomeIcon icon={faPlus} className="px-2"/>Add Secret
+                  </button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild className="data-[state=open]:bg-mineshaft-600">
+                      <div className="bg-mineshaft-600 border border-mineshaft-500 p-2 rounded-r-md text-sm text-mineshaft-300 cursor-pointer hover:bg-primary/[0.1] hover:border-primary/40 duration-200">
+                        <FontAwesomeIcon icon={faAngleDown} className="pr-2 pl-1.5"/>
+                      </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="mt-1 z-[60] left-20 w-[10.8rem]">
+                      <div className="bg-mineshaft-800 p-1 border border-mineshaft-600 rounded-md">
+                        <div className="w-full pb-1">
+                          <Button
+                            leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
+                            onClick={() => handlePopUpOpen("folderForm")}
+                            isDisabled={isReadOnly || isRollbackMode}
+                            variant="outline_bg"
+                            className="h-10"
+                            isFullWidth
+                          >
+                            Add Folder
+                          </Button>
+                        </div>
+                        <div className="w-full">
+                          <Button
+                            leftIcon={<FontAwesomeIcon icon={faFileImport} />}
+                            onClick={() => handlePopUpOpen("addSecretImport")}
+                            isDisabled={isReadOnly || isRollbackMode}
+                            variant="outline_bg"
+                            className="h-10"
+                            isFullWidth
+                          >
+                            Add Import
+                          </Button>
+                        </div>
+                      </div>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
              )}
              {isRollbackMode && (
                <Button
@@ -751,49 +884,67 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
            ref={secretContainer}
          >
            {!isEmptyPage && (
-              <TableContainer className="no-scrollbar::-webkit-scrollbar max-h-[calc(100%-120px)] no-scrollbar">
-                <table className="secret-table relative">
-                  <SecretTableHeader sortDir={sortDir} onSort={onSortSecrets} />
-                  <tbody className="max-h-96 overflow-y-auto">
-                    <FolderSection
-                      onFolderOpen={handleFolderOpen}
-                      onFolderUpdate={(id, name) => handlePopUpOpen("folderForm", { id, name })}
-                      onFolderDelete={(id, name) => handlePopUpOpen("deleteFolder", { id, name })}
-                      folders={folderList}
-                      search={searchFilter}
-                    />
-                    {fields.map(({ id, _id }, index) => (
-                      <SecretInputRow
-                        key={id}
-                        isReadOnly={isReadOnly}
-                        isRollbackMode={isRollbackMode}
-                        isAddOnly={isAddOnly}
-                        index={index}
-                        searchTerm={searchFilter}
-                        onSecretDelete={onSecretDelete}
-                        onRowExpand={() => onDrawerOpen({ id: _id as string, index })}
-                        isSecretValueHidden={isSecretValueHidden}
-                        wsTags={wsTags}
-                        onCreateTagOpen={() => handlePopUpOpen("addTag")}
+              <DndContext
+                onDragEnd={handleDragEnd}
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                modifiers={[restrictToVerticalAxis]}
+              >
+                <TableContainer className="no-scrollbar::-webkit-scrollbar max-h-[calc(100%-120px)] no-scrollbar">
+                  <table className="secret-table relative">
+                    <SecretTableHeader sortDir={sortDir} onSort={onSortSecrets} />
+                    <tbody className="max-h-96 overflow-y-auto">
+                      <SecretImportSection
+                        onSecretImportDelete={(impSecEnv, impSecPath) =>
+                          handlePopUpOpen("deleteSecretImport", {
+                            environment: impSecEnv,
+                            secretPath: impSecPath
+                          })
+                        }
+                        secrets={secrets?.secrets}
+                        importedSecrets={importedSecrets}
+                        items={items}
                      />
-                    ))}
-                    {!isReadOnly && !isRollbackMode && (
-                      <tr>
-                        <td colSpan={3} className="hover:bg-mineshaft-700">
-                          <button
-                            type="button"
-                            className="flex h-8 w-full cursor-default items-center justify-start pl-12 font-normal text-bunker-300"
-                            onClick={onAppendSecret}
-                          >
-                            <FontAwesomeIcon icon={faPlus} />
-                            <span className="ml-2 w-20">Add Secret</span>
-                          </button>
-                        </td>
-                      </tr>
-                    )}
-                  </tbody>
-                </table>
-              </TableContainer>
+                      <FolderSection
+                        onFolderOpen={handleFolderOpen}
+                        onFolderUpdate={(id, name) => handlePopUpOpen("folderForm", { id, name })}
+                        onFolderDelete={(id, name) => handlePopUpOpen("deleteFolder", { id, name })}
+                        folders={folderList}
+                        search={searchFilter}
+                      />
+                      {fields.map(({ id, _id }, index) => (
+                        <SecretInputRow
+                          key={id}
+                          isReadOnly={isReadOnly}
+                          isRollbackMode={isRollbackMode}
+                          isAddOnly={isAddOnly}
+                          index={index}
+                          searchTerm={searchFilter}
+                          onSecretDelete={onSecretDelete}
+                          onRowExpand={() => onDrawerOpen({ id: _id as string, index })}
+                          isSecretValueHidden={isSecretValueHidden}
+                          wsTags={wsTags}
+                          onCreateTagOpen={() => handlePopUpOpen("addTag")}
+                        />
+                      ))}
+                      {!isReadOnly && !isRollbackMode && (
+                        <tr>
+                          <td colSpan={3} className="hover:bg-mineshaft-700">
+                            <button
+                              type="button"
+                              className="flex h-8 w-full cursor-default items-center justify-start pl-12 font-normal text-bunker-300"
+                              onClick={onAppendSecret}
+                            >
+                              <FontAwesomeIcon icon={faPlus} />
+                              <span className="ml-2 w-20">Add Secret</span>
+                            </button>
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </TableContainer>
+              </DndContext>
            )}
            <PitDrawer
              isDrawerOpen={popUp?.secretSnapshots?.isOpen}
@@ -881,6 +1032,20 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
            />
          </ModalContent>
        </Modal>
+        <Modal
+          isOpen={popUp?.addSecretImport?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("addSecretImport", isOpen)}
+        >
+          <ModalContent
+            title="Add Secret Link"
+            subTitle="To inherit secrets from another environment or folder"
+          >
+            <SecretImportForm
+              environments={currentWorkspace?.environments}
+              onCreate={handleSecretImportCreate}
+            />
+          </ModalContent>
+        </Modal>
        <DeleteActionModal
          isOpen={popUp.deleteFolder.isOpen}
          deleteKey={(popUp.deleteFolder?.data as TDeleteFolderForm)?.name}
@@ -888,6 +1053,16 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
          onChange={(isOpen) => handlePopUpToggle("deleteFolder", isOpen)}
          onDeleteApproved={handleFolderDelete}
        />
+        <DeleteActionModal
+          isOpen={popUp.deleteSecretImport.isOpen}
+          deleteKey="unlink"
+          title="Do you want to remove this secret import?"
+          subTitle={`This will unlink secrets from environment ${
+            (popUp.deleteSecretImport?.data as TDeleteSecretImport)?.environment
+          } of path ${(popUp.deleteSecretImport?.data as TDeleteSecretImport)?.secretPath}?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteSecretImport", isOpen)}
+          onDeleteApproved={handleSecretImportDelete}
+        />
        <Modal
          isOpen={popUp?.compareSecrets?.isOpen}
          onOpenChange={(open) => handlePopUpToggle("compareSecrets", open)}
--- a/frontend/src/views/DashboardPage/components/FolderSection/FolderSection.tsx
+++ b/frontend/src/views/DashboardPage/components/FolderSection/FolderSection.tsx
@@ -67,7 +67,7 @@ export const FolderSection = ({
                      ariaLabel="delete"
                      onClick={() => handleFolderDelete(id, name)}
                    >
-                      <FontAwesomeIcon icon={faXmark} />
+                      <FontAwesomeIcon icon={faXmark} size="lg" />
                    </IconButton>
                  </Tooltip>
                </div>
--- a/frontend/src/views/DashboardPage/components/SecretImportForm/SecretImportForm.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretImportForm/SecretImportForm.tsx
@@ -0,0 +1,86 @@
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { Button, FormControl, Input, ModalClose, Select, SelectItem } from "@app/components/v2";
+
+type Props = {
+  onCreate: (environment: string, secretPath: string) => Promise<void>;
+  environments?: Array<{ slug: string; name: string }>;
+};
+
+const formSchema = yup.object({
+  environment: yup.string().required().label("Environment").trim(),
+  secretPath: yup
+    .string()
+    .required()
+    .label("Secret Path")
+    .trim()
+    .transform((val) =>
+      typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
+    )
+});
+
+type TFormData = yup.InferType<typeof formSchema>;
+
+export const SecretImportForm = ({ onCreate, environments = [] }: Props): JSX.Element => {
+  const {
+    control,
+    reset,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<TFormData>({
+    resolver: yupResolver(formSchema)
+  });
+
+  const onSubmit = async ({ environment, secretPath }: TFormData) => {
+    await onCreate(environment, secretPath);
+    reset();
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="environment"
+        defaultValue={environments?.[0]?.slug}
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl label="Environment" errorText={error?.message} isError={Boolean(error)}>
+            <Select
+              defaultValue={field.value}
+              {...field}
+              onValueChange={(e) => onChange(e)}
+              className="w-full"
+            >
+              {environments.map(({ name, slug }) => (
+                <SelectItem value={slug} key={slug}>
+                  {name}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="secretPath"
+        defaultValue="/"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
+            <Input {...field} />
+          </FormControl>
+        )}
+      />
+      <div className="mt-8 flex items-center">
+        <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
+          Create
+        </Button>
+        <ModalClose asChild>
+          <Button variant="plain" colorSchema="secondary">
+            Cancel
+          </Button>
+        </ModalClose>
+      </div>
+    </form>
+  );
+};
--- a/frontend/src/views/DashboardPage/components/SecretImportForm/index.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretImportForm/index.tsx
@@ -0,0 +1 @@
+export { SecretImportForm } from "./SecretImportForm";
--- a/frontend/src/views/DashboardPage/components/SecretImportSection/SecretImportItem.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretImportSection/SecretImportItem.tsx
@@ -0,0 +1,157 @@
+import { useEffect } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import {
+  faFileImport,
+  faFolder,
+  faKey,
+  faUpDown,
+  faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { EmptyState, IconButton, TableContainer, Tooltip } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks/useToggle";
+
+type Props = {
+  onDelete: (environment: string, secretPath: string) => void;
+  importedEnv: string;
+  importedSecPath: string;
+  importedSecrets: { key: string; value: string; overriden: { env: string; secretPath: string } }[];
+};
+
+// to show the environment and folder icon
+export const EnvFolderIcon = ({ env, secretPath }: { env: string; secretPath: string }) => (
+  <div className="inline-flex items-center space-x-2">
+    <div style={{ minWidth: "96px" }}>{env || "-"}</div>
+    {secretPath && (
+      <div className="inline-flex items-center space-x-2 border-l border-mineshaft-600 pl-2">
+        <FontAwesomeIcon icon={faFolder} size="lg" className="text-primary-700" />
+        <span>{secretPath}</span>
+      </div>
+    )}
+  </div>
+);
+
+export const SecretImportItem = ({
+  importedEnv,
+  importedSecPath,
+  onDelete,
+  importedSecrets = []
+}: Props) => {
+  const [isExpanded, setIsExpanded] = useToggle();
+  const { attributes, listeners, transform, transition, setNodeRef, isDragging } = useSortable({
+    id: `${importedEnv}-${importedSecPath}`
+  });
+  const { currentWorkspace } = useWorkspace();
+  const rowEnv = currentWorkspace?.environments?.find(({ slug }) => slug === importedEnv);
+
+  useEffect(() => {
+    if (isDragging) {
+      setIsExpanded.off();
+    }
+  }, [isDragging]);
+
+  const style = {
+    transform: transform ? `translateY(${transform.y ? Math.round(transform.y) : 0}px)` : "",
+    transition
+  };
+
+  return (
+    <>
+      <tr
+        ref={setNodeRef}
+        style={style}
+        className="group flex cursor-default flex-row items-center hover:bg-mineshaft-700"
+        onClick={() => setIsExpanded.toggle()}
+      >
+        <td className="ml-0.5 flex h-10 w-10 items-center justify-center border-none px-4">
+          <FontAwesomeIcon icon={faFileImport} className="text-primary-700" />
+        </td>
+        <td
+          colSpan={2}
+          className="relative flex w-full min-w-[220px] items-center justify-between overflow-hidden text-ellipsis lg:min-w-[240px] xl:min-w-[280px]"
+          style={{ paddingTop: "0", paddingBottom: "0" }}
+        >
+          <div className="flex-grow p-2">
+            <EnvFolderIcon env={rowEnv?.name || ""} secretPath={importedSecPath} />
+          </div>
+          <div className="duration-0 flex h-10 w-16 items-center justify-end space-x-2.5 overflow-hidden border-l border-mineshaft-600 transition-all">
+            <div className="opacity-0 group-hover:opacity-100">
+              <Tooltip content="Change Order" className="capitalize">
+                <IconButton
+                  size="md"
+                  colorSchema="primary"
+                  variant="plain"
+                  ariaLabel="expand"
+                  {...attributes}
+                  {...listeners}
+                >
+                  <FontAwesomeIcon icon={faUpDown} size="lg" />
+                </IconButton>
+              </Tooltip>
+            </div>
+            <div className="opacity-0 group-hover:opacity-100">
+              <Tooltip content="Delete" className="capitalize">
+                <IconButton
+                  size="md"
+                  variant="plain"
+                  colorSchema="danger"
+                  ariaLabel="delete"
+                  onClick={(evt) => {
+                    evt.stopPropagation();
+                    onDelete(importedEnv, importedSecPath);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faXmark} size="lg" />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        {isExpanded && !isDragging && (
+          <td colSpan={3}>
+            <div className="rounded-md bg-bunker-700 p-4 pb-6">
+              <div className="mb-2 text-lg font-medium">Secrets Imported</div>
+              <TableContainer>
+                <table className="secret-table">
+                  <thead>
+                    <tr>
+                      <td style={{ padding: "0.25rem 1rem" }}>Key</td>
+                      <td style={{ padding: "0.25rem 1rem" }}>Value</td>
+                      <td style={{ padding: "0.25rem 1rem" }}>Override</td>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {importedSecrets?.length === 0 && (
+                      <tr>
+                        <td colSpan={3}>
+                          <EmptyState title="No secrets found" icon={faKey} />
+                        </td>
+                      </tr>
+                    )}
+                    {importedSecrets.map(({ key, value, overriden }, index) => (
+                      <tr key={`${importedEnv}-${importedSecPath}-${key}-${index + 1}`}>
+                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                          {key}
+                        </td>
+                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                          {value}
+                        </td>
+                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                          <EnvFolderIcon env={overriden?.env} secretPath={overriden?.secretPath} />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </TableContainer>
+            </div>
+          </td>
+        )}
+      </tr>
+    </>
+  );
+};
--- a/frontend/src/views/DashboardPage/components/SecretImportSection/SecretImportSection.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretImportSection/SecretImportSection.tsx
@@ -0,0 +1,93 @@
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+
+import { useWorkspace } from "@app/context";
+import { DecryptedSecret } from "@app/hooks/api/secrets/types";
+
+import { SecretImportItem } from "./SecretImportItem";
+
+type TImportedSecrets = Array<{
+  environment: string;
+  secretPath: string;
+  folderId: string;
+  secrets: DecryptedSecret[];
+}>;
+
+const SECRET_IN_DASHBOARD = "Present In Dashboard";
+
+export const computeImportedSecretRows = (
+  importedSecEnv: string,
+  importedSecPath: string,
+  importSecrets: TImportedSecrets = [],
+  secrets: DecryptedSecret[] = [],
+  environments: { name: string; slug: string }[] = []
+) => {
+  const importedSecIndex = importSecrets.findIndex(
+    ({ secretPath, environment }) =>
+      secretPath === importedSecPath && importedSecEnv === environment
+  );
+  if (importedSecIndex === -1) return [];
+
+  const importedSec = importSecrets[importedSecIndex];
+
+  const overridenSec: Record<string, { env: string; secretPath: string }> = {};
+  const envSlug2Name: Record<string, string> = {};
+  environments.forEach((el) => {
+    envSlug2Name[el.slug] = el.name;
+  });
+
+  for (let i = importedSecIndex + 1; i < importSecrets.length; i += 1) {
+    importSecrets[i].secrets.forEach((el) => {
+      overridenSec[el.key] = {
+        env: envSlug2Name?.[importSecrets[i].environment] || "unknown",
+        secretPath: importSecrets[i].secretPath
+      };
+    });
+  }
+
+  secrets.forEach((el) => {
+    overridenSec[el.key] = { env: SECRET_IN_DASHBOARD, secretPath: "" };
+  });
+
+  return importedSec.secrets.map(({ key, value }) => ({
+    key,
+    value,
+    overriden: overridenSec?.[key]
+  }));
+};
+
+type Props = {
+  secrets?: DecryptedSecret[];
+  importedSecrets?: TImportedSecrets;
+  onSecretImportDelete: (env: string, secPath: string) => void;
+  items: { id: string; environment: string; secretPath: string }[];
+};
+
+export const SecretImportSection = ({
+  secrets = [],
+  importedSecrets = [],
+  onSecretImportDelete,
+  items = []
+}: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const environments = currentWorkspace?.environments || [];
+
+  return (
+    <SortableContext items={items} strategy={verticalListSortingStrategy}>
+      {items.map(({ secretPath: impSecPath, environment: importSecEnv, id }) => (
+        <SecretImportItem
+          key={id}
+          importedEnv={importSecEnv}
+          importedSecrets={computeImportedSecretRows(
+            importSecEnv,
+            impSecPath,
+            importedSecrets,
+            secrets,
+            environments
+          )}
+          onDelete={onSecretImportDelete}
+          importedSecPath={impSecPath}
+        />
+      ))}
+    </SortableContext>
+  );
+};
--- a/frontend/src/views/DashboardPage/components/SecretImportSection/index.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretImportSection/index.tsx
@@ -0,0 +1 @@
+export { SecretImportSection } from "./SecretImportSection";
--- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
@@ -407,7 +407,7 @@ export const SecretInputRow = memo(
              <div className="opacity-0 group-hover:opacity-100">
                <Tooltip content="Delete">
                  <IconButton
-                    size="md"
+                    size="lg"
                    variant="plain"
                    colorSchema="danger"
                    ariaLabel="delete"
--- a/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
+++ b/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
@@ -95,6 +95,9 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
      case "bitbucket":
        link = `https://bitbucket.org/site/oauth2/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/bitbucket/oauth2/callback&state=${state}`;
        break;
+      case "codefresh":
+        link = `${window.location.origin}/integrations/codefresh/authorize`;
+        break;
      default:
        break;
    }
--- a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
+++ b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
@@ -48,6 +48,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {

  const { data: cloudIntegrations, isLoading: isCloudIntegrationsLoading } =
    useGetCloudIntegrations();
+
  const { data: integrationAuths, isLoading: isIntegrationAuthLoading } =
    useGetWorkspaceAuthorizations(
      workspaceId,
--- a/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx
@@ -32,7 +32,6 @@ export const IntegrationsSection = ({
  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
    "deleteConfirmation"
  ] as const);
-
  return (
    <div className="mb-8">
      <div className="mx-4 mb-4 mt-6 flex flex-col items-start justify-between px-2 text-xl">
--- a/frontend/src/views/Login/Login.tsx
+++ b/frontend/src/views/Login/Login.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import axios from "axios"
+
+import { fetchUserDetails } from "@app/hooks/api/users/queries";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+import { getAuthToken, isLoggedIn } from "@app/reactQuery";
+
+import { 
+    InitialStep,
+    MFAStep,
+    SAMLSSOStep
+} from "./components";
+
+export const Login = () => {
+    const router = useRouter();
+    const [step, setStep] = useState(0);
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    
+    useEffect(() => {
+    // TODO(akhilmhdh): workspace will be controlled by a workspace context
+    const redirectToDashboard = async () => {
+      try {
+        const userOrgs = await getOrganizations();
+        // userWorkspace = userWorkspaces[0] && userWorkspaces[0]._id;
+        const userOrg = userOrgs[0] && userOrgs[0]._id;
+
+        // user details
+        const userDetails = await fetchUserDetails()
+        // send details back to client
+
+        const queryParams = new URLSearchParams(window.location.search)
+        if (queryParams && queryParams.get("callback_port")) {
+          const callbackPort = queryParams.get("callback_port")
+
+          // send post request to cli with details
+          const cliUrl = `http://localhost:${callbackPort}`
+          const instance = axios.create()
+          await instance.post(cliUrl, { email: userDetails.email, privateKey: localStorage.getItem("PRIVATE_KEY"), JTWToken: getAuthToken() })
+        }
+        router.push(`/org/${userOrg}/overview`);
+      } catch (error) {
+        console.log("Error - Not logged in yet");
+      }
+    };
+    if (isLoggedIn()) {
+      redirectToDashboard();
+    }
+  }, []);
+
+    const renderView = () => {
+        switch (step) {
+            case 0:
+                return (
+                    <InitialStep 
+                        setStep={setStep}
+                        email={email}
+                        setEmail={setEmail}
+                        password={password}
+                        setPassword={setPassword}
+                    />
+                );
+            case 1:
+                return (
+                    <MFAStep 
+                        email={email}
+                        password={password}
+                        providerAuthToken={undefined}
+                    />
+                );
+            case 2:
+                return (
+                    <SAMLSSOStep setStep={setStep} />
+                );
+            
+            default:
+                return <div />;
+        }
+    }
+    
+    return (
+        <div>
+            {renderView()}
+        </div>
+    );
+}
--- a/frontend/src/views/Login/LoginSSO.tsx
+++ b/frontend/src/views/Login/LoginSSO.tsx
@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router"
+import jwt_decode from "jwt-decode";
+
+import {
+    MFAStep,
+    PasswordStep
+} from "./components";
+
+type Props = { 
+    providerAuthToken: string;
+}
+
+export const LoginSSO = ({ providerAuthToken }: Props) => {
+    const [step, setStep] = useState(0);
+    const [password, setPassword] = useState("");
+    const router = useRouter();
+
+    const {
+        email,
+        isUserCompleted,
+    } = jwt_decode(providerAuthToken) as any;
+
+    useEffect(() => {
+        if (!isUserCompleted) {
+            router.push(`/signup/sso?token=${encodeURIComponent(providerAuthToken)}`); 
+        }
+        
+        if (isUserCompleted) {
+            setStep(1);
+        }
+    }, []);
+    
+    const renderView = () => {
+        // TODO: consider adding a complete account step here that's uniquely for SSO
+        switch (step) {
+            case 0:
+                return (
+                    <div />
+                );
+            case 1:
+                return (
+                    <PasswordStep 
+                        providerAuthToken={providerAuthToken}
+                        email={email}
+                        password={password}
+                        setPassword={setPassword}
+                        setStep={setStep}
+                    />
+                );
+            case 2: 
+                return (
+                    <MFAStep 
+                        providerAuthToken={providerAuthToken}
+                        email={email}
+                        password={password}
+                    />
+                );
+            default:
+                return <div />;
+        }
+    }
+
+    return (
+        <div>
+            {renderView()}
+        </div>
+    );
+}
--- a/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
+++ b/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
@@ -0,0 +1,203 @@
+import { FormEvent, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import axios from "axios"
+
+import Error from "@app/components/basic/Error";
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
+import attemptLogin from "@app/components/utilities/attemptLogin";
+import { Button, Input } from "@app/components/v2";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+
+type Props = {
+    setStep: (step: number) => void;
+    email: string;
+    setEmail: (email: string) => void;
+    password: string;
+    setPassword: (email: string) => void;
+}
+
+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);
+
+    const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        try {
+            if (!email || !password) {
+                return;
+            }
+
+            setIsLoading(true);
+            const queryParams = new URLSearchParams(window.location.search)
+            if (queryParams && queryParams.get("callback_port")) {
+                const callbackPort = queryParams.get("callback_port")
+
+                // attemptCliLogin
+                const isCliLoginSuccessful = await attemptCliLogin({
+                    email,
+                    password,
+                })
+
+                if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
+
+                    if (isCliLoginSuccessful.mfaEnabled) {
+                        // case: login requires MFA step
+                        setStep(1);
+                        setIsLoading(false);
+                        return;
+                    }
+                    // case: login was successful
+                    const cliUrl = `http://localhost:${callbackPort}`
+
+                    // send request to server endpoint
+                    const instance = axios.create()
+                    const cliResp = await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse })
+                    console.log(cliResp)
+
+                    // cli page
+                    router.push("/cli-redirect");
+
+                    // on success, router.push to cli Login Successful page
+
+                }
+            } else {
+                const isLoginSuccessful = await attemptLogin({
+                    email,
+                    password,
+                });
+                if (isLoginSuccessful && isLoginSuccessful.success) {
+                    // case: login was successful
+
+                    if (isLoginSuccessful.mfaEnabled) {
+                        // case: login requires MFA step
+                        setStep(1);
+                        setIsLoading(false);
+                        return;
+                    }
+                    const userOrgs = await getOrganizations();
+                    const userOrg = userOrgs[0] && userOrgs[0]._id;
+
+                    // case: login does not require MFA step
+                    createNotification({
+                        text: "Successfully logged in",
+                        type: "success"
+                    });
+                    router.push(`/org/${userOrg}/overview`);
+                }
+            }
+
+
+        } catch (err) {
+            setLoginError(true);
+            createNotification({
+                text: "Login unsuccessful. Double-check your credentials and try again.",
+                type: "error"
+            });
+        }
+
+        setIsLoading(false);
+    }
+
+    return (
+        <form onSubmit={handleLogin} className='flex flex-col mx-auto w-full justify-center items-center'>
+            <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
+            <div className="relative md:px-1.5 flex items-center justify-center lg:w-1/6 w-1/4 min-w-[21.3rem] md:min-w-[22rem] mx-auto rounded-lg max-h-24 md:max-h-28">
+                <div className="flex items-center justify-center w-full md:px-2 md:py-1 rounded-lg max-h-24 md:max-h-28">
+                    <Input
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        type="email"
+                        placeholder="Enter your email..."
+                        isRequired
+                        autoComplete="username"
+                        className="h-12"
+                    />
+                </div>
+            </div>
+            <div className="relative pt-2 md:pt-0 md:px-1.5 flex items-center justify-center w-1/4 lg:w-1/6 min-w-[21.3rem] md:min-w-[22rem] mx-auto rounded-lg max-h-24 md:max-h-28">
+                <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
+                    <Input
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        type="password"
+                        placeholder="Enter your password..."
+                        isRequired
+                        autoComplete="current-password"
+                        id="current-password"
+                        className="h-12 select:-webkit-autofill:focus"
+                    />
+                </div>
+            </div>
+            {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+                <Button
+                    type="submit"
+                    size="sm"
+                    isFullWidth
+                    className='h-12'
+                    colorSchema="primary"
+                    variant="solid"
+                    isLoading={isLoading}
+                > Login </Button>
+            </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
+                <div className='w-1/2 border-t border-mineshaft-500' />
+                <span className='px-4 text-sm text-bunker-400'>or</span>
+                <div className='w-1/2 border-t border-mineshaft-500' />
+            </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
+                <Button
+                    colorSchema="primary" 
+                    variant="solid"
+                    onClick={() => {
+                        window.open("/api/v1/sso/redirect/google");
+                        window.close();
+                    }} 
+                    leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-1" />}
+                    className="h-14 w-full mx-0"
+                > 
+                    {t("login.continue-with-google")}
+                </Button>
+            </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
+                <Button
+                    colorSchema="primary"
+                    variant="outline_bg"
+                    onClick={() => {
+                        setStep(2);
+                    }}
+                    isFullWidth
+                    className="h-14 w-full mx-0"
+                >
+                    Continue with SAML SSO
+                </Button>
+            </div>
+            <div className="mt-6 text-bunker-400 text-sm flex flex-row">
+                <span className="mr-1">Don&apos;t have an acount yet?</span>
+                <Link href="/signup">
+                    <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("login.create-account")}</span>
+                </Link>
+            </div>
+            <div className="text-bunker-400 text-sm flex flex-row">
+                <span className="mr-1">Forgot password?</span>
+                <Link href="/verify-email">
+                    <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>Recover your account</span>
+                </Link>
+            </div>
+        </form>
+    );
+}
--- a/frontend/src/views/Login/components/InitialStep/index.tsx
+++ b/frontend/src/views/Login/components/InitialStep/index.tsx
@@ -0,0 +1 @@
+export { InitialStep } from "./InitialStep";
--- a/frontend/src/views/Login/components/MFAStep/MFAStep.tsx
+++ b/frontend/src/views/Login/components/MFAStep/MFAStep.tsx
@@ -1,18 +1,17 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React, { useState } from "react";
 import ReactCodeInput from "react-code-input";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 import axios from "axios"

+import Error from "@app/components/basic/Error"; // which to notification
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import attemptCliLoginMfa from "@app/components/utilities/attemptCliLoginMfa"
 import attemptLoginMfa from "@app/components/utilities/attemptLoginMfa";
+import { Button } from "@app/components/v2";    
 import { useSendMfaToken } from "@app/hooks/api/auth";
 import getOrganizations from "@app/pages/api/organization/getOrgs";

-import Error from "../basic/Error";
-import { Button } from "../v2";
-
 // The style for the verification code input
 const props = {
  inputStyle: {
@@ -33,6 +32,12 @@ const props = {
  }
 } as const;

+type Props = {
+  email: string;
+  password: string;
+  providerAuthToken?: string;
+}
+
 interface VerifyMfaTokenError {
  response: {
    data: {
@@ -45,23 +50,12 @@ interface VerifyMfaTokenError {
  };
 }

-/**
- * 2nd step of login - users enter their MFA code
- * @param {Object} obj
- * @param {String} obj.email - email of user
- * @param {String} obj.password - password of user
- * @param {Function} obj.setStep - function to set the login flow step
- * @returns
- */
-export default function MFAStep({
+export const MFAStep = ({
  email,
  password,
-  providerAuthToken,
-}: {
-  email: string;
-  password: string;
-  providerAuthToken?: string;
-}): JSX.Element {
+  providerAuthToken
+}: Props) => {
+  const { createNotification } = useNotificationContext();
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingResend, setIsLoadingResend] = useState(false);
@@ -75,6 +69,10 @@ export default function MFAStep({
  const handleLoginMfa = async () => {
    try {
      if (mfaCode.length !== 6) {
+        createNotification({
+          text: "Please enter a 6-digit MFA code and try again",
+          type: "error"
+        });
        return;
      }

@@ -116,12 +114,25 @@ export default function MFAStep({
          const userOrg = userOrgs[0] && userOrgs[0]._id;

          // case: login does not require MFA step
+          createNotification({
+              text: "Successfully logged in",
+              type: "success"
+          });
          router.push(`/org/${userOrg}/overview`);
+        } else {
+          createNotification({
+            text: "Failed to log in",
+            type: "error"
+          });
        }
      }
      
    } catch (err) {
      const error = err as VerifyMfaTokenError;
+      createNotification({
+        text: "Failed to log in",
+        type: "error"
+      });

      if (error?.response?.status === 500) {
        window.location.reload();
@@ -147,8 +158,8 @@ export default function MFAStep({
    }
  };

-  return (
-    <form className="mx-auto w-max md:px-8 pb-4 pt-4 md:mb-16">
+    return (
+       <form className="mx-auto w-max md:px-8 pb-4 pt-4 md:mb-16">
      <p className="text-l flex justify-center text-bunker-300">{t("mfa.step2-message")}</p>
      <p className="text-l my-1 flex justify-center font-semibold text-bunker-300">{email} </p>
      <div className="hidden md:block w-max min-w-[20rem] mx-auto">
@@ -204,6 +215,6 @@ export default function MFAStep({
        </div>
        <p className="text-sm text-bunker-400 pb-2">{t("signup.step2-spam-alert")}</p>
      </div>
-    </form>
-  );
-}
+    </form> 
+    );
+}
--- a/frontend/src/views/Login/components/MFAStep/index.tsx
+++ b/frontend/src/views/Login/components/MFAStep/index.tsx
@@ -0,0 +1 @@
+export { MFAStep } from "./MFAStep";
--- a/frontend/src/views/Login/components/PasswordStep/PasswordStep.tsx
+++ b/frontend/src/views/Login/components/PasswordStep/PasswordStep.tsx
@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Link from "next/link";
+import { useRouter } from "next/router"
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import attemptLogin from "@app/components/utilities/attemptLogin";
+import { Button, Input } from "@app/components/v2";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+
+type Props = { 
+    providerAuthToken: string;
+    email: string;
+    password: string;
+    setPassword: (password: string) => void;
+    setStep: (step: number) => void;
+}
+
+export const PasswordStep = ({
+    providerAuthToken,
+    email,
+    password,
+    setPassword,
+    setStep
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const [isLoading, setIsLoading] = useState(false);
+    const { t } = useTranslation();
+    const router = useRouter();
+    
+    const handleLogin = async () => {
+        try {
+            setIsLoading(true);
+            const loginAttempt = await attemptLogin({
+                email,
+                password,
+                providerAuthToken,
+            });
+
+            if (loginAttempt && loginAttempt.success) {
+                // case: login was successful
+
+                if (loginAttempt.mfaEnabled) {
+                    // TODO: deal with MFA
+                    // case: login requires MFA step
+                    setIsLoading(false);
+                    setStep(2);
+                    return;
+                }
+
+                // case: login does not require MFA step
+                const userOrgs = await getOrganizations();
+                const userOrg = userOrgs[0]._id;
+                setIsLoading(false);
+                createNotification({
+                    text: "Successfully logged in",
+                    type: "success"
+                });
+                router.push(`/org/${userOrg?._id}/overview`);
+            }
+
+        } catch (err) {
+            setIsLoading(false);
+            createNotification({
+                text: "Login unsuccessful. Double-check your master password and try again.",
+                type: "error"
+            });
+            console.error(err);
+        }
+    };
+    
+    return (
+        <form 
+            onSubmit={(e) => e.preventDefault()}
+            className="h-full mx-auto w-full max-w-md px-6 pt-8"
+        >
+            <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’s your Infisical Password?
+            </p>
+            <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 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 password..."
+                        isRequired
+                        autoComplete="current-password"
+                        id="current-password"
+                        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-[22rem] text-center rounded-md mt-4'>
+                <Button
+                    colorSchema="primary" 
+                    variant="outline_bg"
+                    onClick={async () => handleLogin()} 
+                    isFullWidth
+                    isLoading={isLoading}
+                    className="h-14"
+                > 
+                    {t("login.login")} 
+                </Button>
+            </div>
+            <div className="text-bunker-400 text-xs flex flex-col items-center w-max mx-auto mt-4">
+                <span className='duration-200 max-w-sm text-center px-4'>
+                    Infisical Master Password serves as a decryption mechanism so that even Google is not able to access your secrets.
+                </span>
+                <Link href="/verify-email">
+                    <span className='hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("login.forgot-password")}</span>
+                </Link>
+            </div>
+            <div className="flex flex-row items-center justify-center">
+                <button
+                    onClick={() => {
+                        router.push("/login");
+                    }}
+                    type="button"
+                    className="text-bunker-400 text-xs 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>
+        </form>
+    );
+}
--- a/frontend/src/views/Login/components/PasswordStep/index.tsx
+++ b/frontend/src/views/Login/components/PasswordStep/index.tsx
@@ -0,0 +1 @@
+export { PasswordStep } from "./PasswordStep";
--- a/frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx
+++ b/frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button, Input } from "@app/components/v2";
+
+type Props = {
+    setStep: (step: number) => void;
+}
+
+export const SAMLSSOStep = ({
+    setStep
+}: Props) => {
+    const [ssoIdentifier, setSSOIdentifier] = useState("");
+    const { t } = useTranslation();
+
+    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 SSO Identifier?
+            </p>
+            <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="Enter your SSO identifier..."
+                    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
+                    colorSchema="primary" 
+                    variant="outline_bg"
+                    onClick={() => {
+                        window.open(`/api/v1/sso/redirect/saml2/${ssoIdentifier}`);
+                        window.close();
+                    }} 
+                    isFullWidth
+                    className="h-14"
+                > 
+                    {t("login.login")} 
+                </Button>
+            </div>
+            <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>
+    );
+}
--- a/frontend/src/views/Login/components/SAMLSSOStep/index.tsx
+++ b/frontend/src/views/Login/components/SAMLSSOStep/index.tsx
@@ -0,0 +1 @@
+export { SAMLSSOStep } from "./SAMLSSOStep";
--- a/frontend/src/views/Login/components/index.tsx
+++ b/frontend/src/views/Login/components/index.tsx
@@ -0,0 +1,6 @@
+export { InitialStep } from "./InitialStep";
+export { MFAStep } from "./MFAStep";
+export { SAMLSSOStep } from "./SAMLSSOStep";
+
+// SSO-specific step
+export { PasswordStep } from "./PasswordStep";
--- a/frontend/src/views/Login/index.tsx
+++ b/frontend/src/views/Login/index.tsx
@@ -0,0 +1,2 @@
+export { Login } from "./Login";
+export { LoginSSO } from "./LoginSSO";
--- a/frontend/src/views/SecretScanning/components/RiskStatusSelection.tsx
+++ b/frontend/src/views/SecretScanning/components/RiskStatusSelection.tsx
@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+import updateRiskStatus, { RiskStatus } from "@app/pages/api/secret-scanning/updateRiskStatus";
+
+export const RiskStatusSelection = ({riskId, currentSelection}: {riskId: any, currentSelection: any }) => {
+    const [selectedRiskStatus, setSelectedRiskStatus] = useState(currentSelection);
+    useEffect(()=>{
+        if (currentSelection !== selectedRiskStatus){
+            const updateSelection = async () =>{ 
+                await updateRiskStatus(String(localStorage.getItem("orgData.id")), riskId, selectedRiskStatus)
+            }
+            updateSelection()
+        }
+    },[selectedRiskStatus])
+
+    return (
+    <select
+        value={selectedRiskStatus}
+        onChange={(e) => setSelectedRiskStatus(e.target.value)}
+        className="block w-full py-2 px-3 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+    >
+        <option>Unresolved</option>
+        <option value={RiskStatus.RESOLVED_FALSE_POSITIVE}>This is a false positive, resolved</option>
+        <option value={RiskStatus.RESOLVED_REVOKED}>I have rotated the secret, resolved</option>
+        <option value={RiskStatus.RESOLVED_NOT_REVOKED}>No rotate needed, resolved</option>
+    </select>         
+    );
+}
--- a/frontend/src/views/SecretScanning/components/SecretScanningLogsTable.tsx
+++ b/frontend/src/views/SecretScanning/components/SecretScanningLogsTable.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr} from "@app/components/v2";
+import timeSince from "@app/ee/utilities/timeSince";
+import getRisksByOrganization, { GitRisks } from "@app/pages/api/secret-scanning/getRisksByOrganization";
+
+import { RiskStatusSelection } from "./RiskStatusSelection";
+
+export const SecretScanningLogsTable = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [gitRisks, setGitRisks] = useState<GitRisks[]>([]);
+
+    useEffect(() => {
+        const fetchRisks = async () => {
+            setIsLoading(true);
+            const risks = await getRisksByOrganization(String(localStorage.getItem("orgData.id")))
+            setGitRisks(risks);
+            setIsLoading(false);
+        }
+
+        fetchRisks();
+    },[])
+
+
+    return (
+        <TableContainer className="mt-8">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th className="flex-1">Date</Th>
+                  <Th className="flex-1">Secret Type</Th>
+                  <Th className="flex-1">View Risk</Th>
+                  <Th className="flex-1">Info</Th>
+                  <Th className="flex-1">Status</Th>
+                  <Th className="flex-1">Action</Th>
+                  <Th className="w-5" />
+                </Tr>
+              </THead>
+              <TBody>
+                {!isLoading && gitRisks && gitRisks?.map((risk) => {
+                    return (
+                        <Tr key={risk.ruleID} className="h-10">
+                            <Td>{timeSince(new Date(risk.createdAt))}</Td>
+                            <Td>{risk.ruleID}</Td>
+                            <Td>
+                                <a
+                                    href={`https://github.com/${risk.repositoryFullName}/blob/${risk.commit}/${risk.file}#L${risk.startLine}-L${risk.endLine}`}
+                                    target="_blank"
+                                    className="text-red-500" rel="noreferrer"
+                                >
+                                View Exposed Secret
+                                </a>
+                            </Td>
+                            <Td>
+                                <div className="font-bold">
+                                    <a href={`https://github.com/${risk.repositoryFullName}`}>
+                                        {risk.repositoryFullName}
+                                    </a>
+                                </div>
+                                <div className="text-xs">
+                                    <span>{risk.file}</span><br/>
+                                    <br/>
+                                    <span className="font-bold">{risk.author}</span><br/>
+                                    <span>{risk.email}</span>
+                                </div>    
+                            </Td>
+                            <Td>{risk.isResolved ? "Resolved" : "Needs Attention"}</Td>
+                            <Td>
+                                <RiskStatusSelection riskId={risk._id} currentSelection={risk.status}/>
+                            </Td>
+                        </Tr>
+                    );
+                })}
+                {isLoading && <TableSkeleton columns={7} key="gitRisks" />}
+                {!isLoading && gitRisks && gitRisks?.length === 0 && (
+                    <Tr>
+                        <Td colSpan={7}>
+                            <EmptyState 
+                                title="No risks detected." 
+                                icon={faCheck}
+                            />
+                        </Td>
+                    </Tr>
+                )}
+              </TBody>
+            </Table>
+        </TableContainer>
+    );
+}
--- a/frontend/src/views/SecretScanning/components/index.tsx
+++ b/frontend/src/views/SecretScanning/components/index.tsx
@@ -0,0 +1 @@
+export { SecretScanningLogsTable } from "./SecretScanningLogsTable";
--- a/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx
@@ -7,8 +7,8 @@ import {
 export const BillingSettingsPage = () => {
    const { t } = useTranslation();
    return (
-      <div className="flex justify-center bg-bunker-800 text-white w-full h-full px-6">
-        <div className="max-w-7xl w-full">
+      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
+        <div className="max-w-7xl px-6 w-full">
          <div className="my-6">
              <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
            <div />
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
@@ -7,7 +7,8 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { 
    Button,
    FormControl,
-    Input} from "@app/components/v2";
+    Input
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { 
    useGetOrgBillingDetails,
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
@@ -29,7 +29,7 @@ export const PmtMethodsSection = () => {
        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
            <div className="flex items-center mb-8">
                <h2 className="text-xl font-semibold flex-1 text-white">
-                    Payment Methods
+                    Payment methods
                </h2>
                <Button
                    onClick={handleAddPmtMethodBtnClick}
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDModal.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDModal.tsx
@@ -10,7 +10,8 @@ import {
  Modal,
  ModalContent,
  Select,
-  SelectItem} from "@app/components/v2";
+  SelectItem
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useAddOrgTaxId } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -138,22 +139,22 @@ export const TaxIDModal = ({
                    defaultValue="eu_vat"
                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
                        <FormControl
-                        label="Type"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
+                            label="Type"
+                            errorText={error?.message}
+                            isError={Boolean(error)}
                        >
-                        <Select
-                            defaultValue={field.value}
-                            {...field}
-                            onValueChange={(e) => onChange(e)}
-                            className="w-full"
-                        >
-                            {taxIDTypes.map(({ label, value }) => (
-                            <SelectItem value={String(value || "")} key={label}>
-                                {label}
-                            </SelectItem>
-                            ))}
-                        </Select>
+                            <Select
+                                defaultValue={field.value}
+                                {...field}
+                                onValueChange={(e) => onChange(e)}
+                                className="w-full"
+                            >
+                                {taxIDTypes.map(({ label, value }) => (
+                                    <SelectItem value={String(value || "")} key={label}>
+                                        {label}
+                                    </SelectItem>
+                                ))}
+                            </Select>
                        </FormControl>
                    )}
                />
@@ -163,9 +164,9 @@ export const TaxIDModal = ({
                    name="value"
                    render={({ field, fieldState: { error } }) => (
                        <FormControl
-                        label="Value"
-                        isError={Boolean(error)}
-                        errorText={error?.message}
+                            label="Value"
+                            isError={Boolean(error)}
+                            errorText={error?.message}
                        >
                        <Input 
                            {...field} 
--- a/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx
@@ -1,10 +1,6 @@
 import { useTranslation } from "react-i18next";

-import {
-  OrgIncidentContactsSection,
-  OrgNameChangeSection,
-  OrgServiceAccountsTable
-} from "./components";
+import { OrgTabGroup } from "./components";

 export const OrgSettingsPage = () => {
  const { t } = useTranslation();
@@ -15,11 +11,7 @@ export const OrgSettingsPage = () => {
 			<div className="mb-4">
 				<p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
 			</div>
-			<OrgNameChangeSection />
-			<OrgIncidentContactsSection />
-			<div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-				<OrgServiceAccountsTable />
-			</div>
+			<OrgTabGroup />
 		</div>
    </div>
  );
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx
@@ -0,0 +1,9 @@
+import { OrgSSOSection } from "./OrgSSOSection";
+
+export const OrgAuthTab = () => {
+    return (
+        <div>
+            <OrgSSOSection />
+        </div>
+    );
+}
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx
@@ -0,0 +1,119 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import { 
+    useGetSSOConfig,
+    useUpdateSSOConfig
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { SSOModal } from "./SSOModal";
+
+const ssoAuthProviderMap: { [key: string]: string } = {
+    "okta-saml": "Okta SAML 2.0"
+}
+
+export const OrgSSOSection = (): JSX.Element => {
+    const { currentOrg } = useOrganization();
+    const { subscription } = useSubscription();
+    const { createNotification } = useNotificationContext();
+    const { data, isLoading } = useGetSSOConfig(currentOrg?._id ?? "");
+    const { mutateAsync } = useUpdateSSOConfig();
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+        "upgradePlan",
+        "addSSO"
+    ] as const);
+
+    const handleSamlSSOToggle = async (value: boolean) => {
+        try {
+            if (!currentOrg?._id) return;
+
+            await mutateAsync({
+                organizationId: currentOrg?._id,
+                isActive: value
+            });
+
+            createNotification({
+                text: `Successfully ${value ? "enabled" : "disabled"} SAML SSO`,
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${value ? "enable" : "disable"} SAML SSO`,
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
+            <div className="flex items-center mb-8">
+                <h2 className="text-xl font-semibold flex-1 text-white">
+                    Configuration
+                </h2>
+                {!isLoading && (
+                    <Button
+                        onClick={() => {
+                            if (subscription?.samlSSO) {
+                                handlePopUpOpen("addSSO");
+                            } else {
+                                handlePopUpOpen("upgradePlan");
+                            }
+                        }}
+                        colorSchema="secondary"
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    >
+                        {data ? "Update SAML SSO" : "Set up SAML SSO"}
+                    </Button> 
+                )}
+            </div>
+            {!isLoading && data && (
+                <>
+                    <div className="mb-4">
+                        <Switch
+                            id="enable-saml-sso"
+                            onCheckedChange={(value) => handleSamlSSOToggle(value)}
+                            isChecked={data.isActive}
+                        >
+                            Enable SAML SSO
+                        </Switch>
+                    </div>
+                    <div className="mb-4">
+                        <h3 className="text-mineshaft-400 text-sm">SSO identifier</h3>
+                        <p className="text-gray-400 text-md">{data._id}</p>
+                    </div>
+                    <div className="mb-4">
+                        <h3 className="text-mineshaft-400 text-sm">Type</h3>
+                        <p className="text-gray-400 text-md">{ssoAuthProviderMap[data.authProvider]}</p>
+                    </div>
+                    <div className="mb-4">
+                        <h3 className="text-mineshaft-400 text-sm">Audience</h3>
+                        <p className="text-gray-400 text-md">{data.audience}</p>
+                    </div>
+                    <div className="mb-4">
+                        <h3 className="text-mineshaft-400 text-sm">Entrypoint</h3>
+                        <p className="text-gray-400 text-md">{data.entryPoint}</p>
+                    </div>
+                    <div className="mb-4">
+                        <h3 className="text-mineshaft-400 text-sm">Issuer</h3>
+                        <p className="text-gray-400 text-md">{data.issuer}</p>
+                    </div>
+                </>
+            )}
+            <SSOModal 
+                popUp={popUp}
+                handlePopUpClose={handlePopUpClose}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+            <UpgradePlanModal
+                isOpen={popUp.upgradePlan.isOpen}
+                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+                text="You can use SAML SSO if you switch to Infisical's Pro plan."
+            />
+        </div>
+    );
+};
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx
@@ -0,0 +1,253 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    Input,
+    Modal,
+    ModalContent,
+    Select,
+    SelectItem,
+    TextArea} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+    useCreateSSOConfig,
+    useGetSSOConfig,
+    useUpdateSSOConfig
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const ssoAuthProviders = [
+    { label: "Okta SAML 2.0", value: "okta-saml" }
+];
+
+const schema = yup.object({
+    authProvider: yup.string().required("SSO Type is required"),
+    entryPoint: yup.string().required("IDP entrypoint is required"),
+    issuer: yup.string().required("Issuer string is required"),
+    cert: yup.string().required("IDP's public signing certificate is required"),
+    audience: yup.string().required("Expected SAML response audience is required"),
+}).required();
+
+export type AddSSOFormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["addSSO"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["addSSO"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addSSO"]>, state?: boolean) => void;
+};
+
+export const SSOModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+    const { currentOrg } = useOrganization();
+    const { createNotification } = useNotificationContext();
+    const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateSSOConfig();
+    const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateSSOConfig();
+    const { data } = useGetSSOConfig(currentOrg?._id ?? "");
+    
+    const {
+        control,
+        handleSubmit,
+        reset,
+        watch,
+    } = useForm<AddSSOFormData>({
+        defaultValues: {
+            authProvider: "okta-saml"
+        },
+        resolver: yupResolver(schema)
+    });
+    
+    useEffect(() => {
+        if (data) {
+            reset({
+                authProvider: data?.authProvider ?? "",
+                entryPoint: data?.entryPoint ?? "",
+                issuer: data?.issuer ?? "",
+                cert: data?.cert ?? "",
+                audience: data?.audience ?? ""
+            });
+        }
+    }, [data]);
+    
+    const onSSOModalSubmit = async ({
+        authProvider,
+        entryPoint,
+        issuer,
+        cert,
+        audience
+    }: AddSSOFormData) => {
+        try {
+            if (!currentOrg) return;
+            
+            if (!data) {
+                await createMutateAsync({
+                    organizationId: currentOrg._id,
+                    authProvider,
+                    isActive: false,
+                    entryPoint,
+                    issuer,
+                    cert,
+                    audience
+                });
+            } else {
+                await updateMutateAsync({
+                    organizationId: currentOrg._id,
+                    authProvider,
+                    isActive: false,
+                    entryPoint,
+                    issuer,
+                    cert,
+                    audience 
+                });
+            }
+
+            handlePopUpClose("addSSO");
+
+            createNotification({
+                text: `Successfully ${!data ? "added" : "updated"} SAML SSO configuration`,
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${!data ? "add" : "update"} SAML SSO configuration`,
+                type: "error"
+            });
+        }
+    }
+
+    const authProvider = watch("authProvider");
+
+    return (
+        <Modal
+            isOpen={popUp?.addSSO?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("addSSO", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Add SSO">
+                <form onSubmit={handleSubmit(onSSOModalSubmit)}>
+                    <Controller
+                        control={control}
+                        name="authProvider"
+                        defaultValue="okta-saml"
+                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                            <FormControl
+                                label="Type"
+                                errorText={error?.message}
+                                isError={Boolean(error)}
+                            >
+                                <Select
+                                    defaultValue={field.value}
+                                    {...field}
+                                    onValueChange={(e) => onChange(e)}
+                                    className="w-full"
+                                >
+                                    {ssoAuthProviders.map(({ label, value }) => (
+                                        <SelectItem value={String(value || "")} key={label}>
+                                            {label}
+                                        </SelectItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                        )}
+                    />
+                    {authProvider && authProvider === "okta-saml" && (
+                        <>
+                            <Controller
+                                control={control}
+                                name="audience"
+                                render={({ field, fieldState: { error } }) => (
+                                    <FormControl
+                                        label="Audience"
+                                        errorText={error?.message}
+                                        isError={Boolean(error)}
+                                    >
+                                        <Input 
+                                            {...field} 
+                                            placeholder="https://your-domain.com"
+                                        />
+                                    </FormControl>
+                                )}
+                            />
+                            <Controller
+                                control={control}
+                                name="entryPoint"
+                                render={({ field, fieldState: { error } }) => (
+                                    <FormControl
+                                        label="Entrypoint"
+                                        errorText={error?.message}
+                                        isError={Boolean(error)}
+                                    >
+                                        <Input 
+                                            {...field} 
+                                            placeholder="https://your-domain.okta.com/app/app-name/xxx/sso/saml"
+                                        />
+                                    </FormControl>
+                                )}
+                            />
+                            <Controller
+                                control={control}
+                                name="issuer"
+                                render={({ field, fieldState: { error } }) => (
+                                    <FormControl
+                                        label="Issuer"
+                                        errorText={error?.message}
+                                        isError={Boolean(error)}
+                                    >
+                                        <Input 
+                                            {...field} 
+                                            placeholder="http://www.okta.com/xxx"
+                                        />
+                                    </FormControl>
+                                )}
+                            />
+                            <Controller
+                                control={control}
+                                name="cert"
+                                render={({ field, fieldState: { error } }) => (
+                                    <FormControl
+                                        label="Certificate"
+                                        errorText={error?.message}
+                                        isError={Boolean(error)}
+                                    >
+                                        <TextArea 
+                                            {...field} 
+                                            placeholder="-----BEGIN CERTIFICATE----- ..."
+                                        />
+                                    </FormControl>
+                                )}
+                            />
+                        </>
+                    )}
+                    
+                    <div className="mt-8 flex items-center">
+                        <Button
+                            className="mr-4"
+                            size="sm"
+                            type="submit"
+                            isLoading={createIsLoading || updateIsLoading}
+                        >
+                            {!data ? "Add" : "Update"}
+                        </Button>
+                        <Button 
+                            colorSchema="secondary" 
+                            variant="plain"
+                            onClick={() => handlePopUpClose("addSSO")}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </ModalContent>
+        </Modal>
+    );
+}
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/index.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/index.tsx
@@ -0,0 +1 @@
+export { OrgAuthTab } from "./OrgAuthTab";
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
@@ -0,0 +1,15 @@
+import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
+import { OrgNameChangeSection } from "../OrgNameChangeSection";
+import { OrgServiceAccountsTable } from "../OrgServiceAccountsTable";
+
+export const OrgGeneralTab = () => {
+    return (
+        <div>
+            <OrgNameChangeSection />
+			<div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
+				<OrgServiceAccountsTable />
+			</div>
+			<OrgIncidentContactsSection />
+        </div>
+    );
+}
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/index.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/index.tsx
@@ -0,0 +1 @@
+export { OrgGeneralTab } from "./OrgGeneralTab";
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx
@@ -17,7 +17,7 @@ export const OrgIncidentContactsSection = () => {
    ] as const);

    return (
-        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+        <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
            <div className="flex justify-between mb-4">
                <p className="min-w-max text-xl font-semibold">
                    {t("section.incident.incident-contacts")}
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
@@ -0,0 +1,59 @@
+import { Fragment } from "react"
+import { Tab } from "@headlessui/react"
+
+import { useOrganization,useUser } from "@app/context";
+import {
+    useGetOrgUsers
+} from "@app/hooks/api";
+
+import { OrgAuthTab } from "../OrgAuthTab";
+import { OrgGeneralTab } from "../OrgGeneralTab";
+
+export const OrgTabGroup = () => {
+    const { currentOrg } = useOrganization();
+    const { user } = useUser();
+    const { data } = useGetOrgUsers(currentOrg?._id ?? "");
+
+    const isRoleSufficient = data?.some((orgUser) => {
+        return orgUser.role !== "member" && orgUser.user._id === user._id;
+    });
+
+    const tabs = [
+        { name: "General", key: "tab-org-general" },
+    ];
+        
+    if (isRoleSufficient) {
+        tabs.push(
+            { name: "SAML SSO", key: "tab-org-saml" }
+        );
+    }
+
+    return (
+        <Tab.Group>
+            <Tab.List className="mb-6 border-b-2 border-mineshaft-800 w-full">
+                {tabs.map((tab) => (
+                    <Tab as={Fragment} key={tab.key}> 
+                        {({ selected }) => (
+                            <button 
+                                type="button"
+                                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
+                            >
+                                {tab.name}
+                            </button>
+                        )}
+                    </Tab>
+                ))}
+            </Tab.List>
+            <Tab.Panels>
+                <Tab.Panel>
+                    <OrgGeneralTab />
+                </Tab.Panel>
+                {isRoleSufficient && (
+                    <Tab.Panel>
+                        <OrgAuthTab />
+                    </Tab.Panel>
+                )}
+            </Tab.Panels>
+        </Tab.Group>
+    );
+}
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/index.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/index.tsx
@@ -0,0 +1 @@
+export { OrgTabGroup } from "./OrgTabGroup";
--- a/frontend/src/views/Settings/OrgSettingsPage/components/index.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/index.tsx
@@ -1,3 +1 @@
-export { OrgIncidentContactsSection } from "./OrgIncidentContactsSection";
-export { OrgNameChangeSection } from "./OrgNameChangeSection";
-export { OrgServiceAccountsTable } from "./OrgServiceAccountsTable";
+export { OrgTabGroup } from "./OrgTabGroup";
--- a/frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/ChangeLanguageSection.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/ChangeLanguageSection/ChangeLanguageSection.tsx
@@ -15,7 +15,7 @@ export const ChangeLanguageSection = () => {
    };

    return (
-        <div className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
            <p className="text-xl font-semibold text-mineshaft-100 mb-8">
                {t("settings.personal.change-language")}
            </p>
--- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalSecurityTab/PersonalSecurityTab.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalSecurityTab/PersonalSecurityTab.tsx
@@ -3,10 +3,12 @@ import { ChangePasswordSection } from "../ChangePasswordSection";
 import { EmergencyKitSection } from "../EmergencyKitSection";
 import { SecuritySection } from "../SecuritySection";
 import { SessionsSection } from "../SessionsSection";
+import { UserNameSection } from "../UserNameSection";

 export const PersonalSecurityTab = () => {
    return (
        <div>
+            <UserNameSection />
            <ChangeLanguageSection />
            <SecuritySection />
            <SessionsSection />
--- a/frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/PersonalTabGroup.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/PersonalTabGroup.tsx
@@ -12,7 +12,7 @@ const tabs = [
 export const PersonalTabGroup = () => {
    return (
        <Tab.Group>
-            <Tab.List className="mb-6 border-b-2 border-mineshaft-800 w-full">
+            <Tab.List className="mb-4 border-b-2 border-mineshaft-800 w-full">
                {tabs.map((tab) => (
                    <Tab as={Fragment} key={tab.key}> 
                        {({ selected }) => (
--- a/frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/UserNameSection.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/UserNameSection.tsx
@@ -0,0 +1,82 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useUser } from "@app/context";
+import { useRenameUser } from "@app/hooks/api/users/queries";
+
+const formSchema = yup.object({
+  name: yup.string().required().label("User Name"),
+});
+
+type FormData = yup.InferType<typeof formSchema>;
+
+export const UserNameSection = (): JSX.Element => {
+  const { user } = useUser();
+  const { createNotification } = useNotificationContext();
+  const {
+    handleSubmit,
+    control,
+    reset
+  } = useForm<FormData>({ resolver: yupResolver(formSchema) });
+  const { mutateAsync, isLoading } = useRenameUser();
+
+  useEffect(() => {
+    if (user) {
+      reset({ name: `${user?.firstName}${user?.lastName && " "}${user?.lastName}` });
+    }
+  }, [user]);
+
+  const onFormSubmit = async ({ name }: FormData) => {
+    try {
+      if (!user?._id) return;
+      if (name === "") return;
+
+      await mutateAsync({ newName: name});
+      createNotification({
+        text: "Successfully renamed user",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to rename user",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form 
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+    >
+        <p className="text-xl font-semibold text-mineshaft-100 mb-4">
+          User name
+        </p>
+        <div className="mb-2 max-w-md">
+          <Controller
+            defaultValue=""
+            render={({ field, fieldState: { error } }) => (
+              <FormControl isError={Boolean(error)} errorText={error?.message}>
+                <Input placeholder={`${user?.firstName} ${user?.lastName}`} {...field} />
+              </FormControl>
+            )}
+            control={control}
+            name="name"
+          />
+        </div>
+        <Button
+          isLoading={isLoading}
+          colorSchema="primary"
+          variant="outline_bg"
+          type="submit"
+        >
+          Save
+        </Button>
+    </form>
+  );
+};
--- a/frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/index.tsx
+++ b/frontend/src/views/Settings/PersonalSettingsPage/UserNameSection/index.tsx
@@ -0,0 +1 @@
+export { UserNameSection } from "./UserNameSection";
--- a/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx
@@ -26,15 +26,13 @@ export const ProjectSettingsPage = () => {
          <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
        </div>
        <Tab.Group>
-          <Tab.List className="mb-6 w-full border-b-2 border-mineshaft-800">
+          <Tab.List className="mb-4 w-full border-b-2 border-mineshaft-800">
            {tabs.map((tab) => (
              <Tab as={Fragment} key={tab.key}>
                {({ selected }) => (
                  <button
                    type="button"
-                    className={`w-30 p-4 font-semibold outline-none ${
-                      selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
-                    }`}
+                    className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
                  >
                    {tab.name}
                  </button>
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";

@@ -27,7 +26,6 @@ export const ProjectNameChangeSection = () => {
    control,
    reset
  } = useForm<FormData>({ resolver: yupResolver(formSchema) });
-  const { t } = useTranslation();

  useEffect(() => {
    if (currentWorkspace) {
@@ -67,7 +65,7 @@ export const ProjectNameChangeSection = () => {
      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
    >
      <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
-        {t("common.display-name")}      
+        Project Name    
      </h2>
        <div className="max-w-md">
          <Controller
--- a/frontend/src/views/Signup/SignupSSO.tsx
+++ b/frontend/src/views/Signup/SignupSSO.tsx
@@ -0,0 +1,57 @@
+import { useState } from "react";
+import jwt_decode from "jwt-decode";
+
+import {
+    BackupPDFStep,
+    UserInfoSSOStep} from "./components";
+
+type Props = { 
+    providerAuthToken: string;
+}
+
+export const SignupSSO = ({
+    providerAuthToken
+}: Props) => {
+    const [step, setStep] = useState(0);
+    const [password, setPassword] = useState("");
+
+    const {
+        email,
+        organizationName,
+        firstName,
+        lastName
+    } = jwt_decode(providerAuthToken) as any;
+
+    const renderView = () => {
+        switch (step) {
+            case 0:
+                return (
+                    <UserInfoSSOStep 
+                        email={email}
+                        name={`${firstName} ${lastName}`}
+                        providerOrganizationName={organizationName}
+                        password={password}
+                        setPassword={setPassword}
+                        setStep={setStep}
+                        providerAuthToken={providerAuthToken}
+                    />
+                );
+            case 1:
+                return (
+                    <BackupPDFStep 
+                        email={email}
+                        password={password}
+                        name={`${firstName} ${lastName}`}
+                    />
+                );
+            default:
+                return <div />
+        }
+    }
+    
+    return (
+        <div>
+            {renderView()}
+        </div>
+    );
+}
--- a/frontend/src/views/Signup/components/BackupPDFStep/BackupPDFStep.tsx
+++ b/frontend/src/views/Signup/components/BackupPDFStep/BackupPDFStep.tsx
@@ -0,0 +1,66 @@
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router"
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
+import { Button } from "@app/components/v2";
+
+interface DownloadBackupPDFStepProps {
+    email: string;
+    password: string;
+    name: string;
+}
+
+/**
+ * This is the step of the signup flow where the user downloads the backup pdf
+ * @param {object} obj
+ * @param {function} obj.incrementStep - function that moves the user on to the next stage of signup
+ * @param {string} obj.email - user's email
+ * @param {string} obj.password - user's password
+ * @param {string} obj.name - user's name
+ * @returns
+ */
+export const BackupPDFStep = ({
+    email,
+    password,
+    name
+}: DownloadBackupPDFStepProps) => {
+    const { t } = useTranslation();
+    const router = useRouter();
+
+  return (
+    <div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
+      <p className="text-xl text-center font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />{t("signup.step4-message")}
+      </p>
+      <div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">
+        <div className="w-full mt-4 md:mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 lg:w-1/6 w-full md:min-w-[23rem] px-3 mx-auto">
+          <span className='mb-2'>{t("signup.step4-description1")} {t("signup.step4-description3")}</span>
+        </div>
+        <div className="flex flex-col items-center px-3 justify-center mt-0 md:mt-4 mb-2 md:mb-4 lg:w-1/6 w-full md:min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
+          <div className="text-l py-1 text-lg w-full">
+            <Button
+              onClick={async () => {
+                await issueBackupKey({
+                  email,
+                  password,
+                  personalName: name,
+                  setBackupKeyError: () => { },
+                  setBackupKeyIssued: () => { }
+                });
+
+                router.push(`/org/${localStorage.getItem("orgData.id")}/overview`);
+              }}
+              size="sm"
+              isFullWidth
+              className='h-12'
+              colorSchema="primary"
+              variant="outline_bg"
+            > Download PDF </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/views/Signup/components/BackupPDFStep/index.tsx
+++ b/frontend/src/views/Signup/components/BackupPDFStep/index.tsx
@@ -0,0 +1 @@
+export { BackupPDFStep } from "./BackupPDFStep";
--- a/frontend/src/views/Signup/components/UserInfoSSOStep/UserInfoSSOStep.tsx
+++ b/frontend/src/views/Signup/components/UserInfoSSOStep/UserInfoSSOStep.tsx
@@ -0,0 +1,310 @@
+
+import crypto from "crypto";
+
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import jsrp from "jsrp";
+import nacl from "tweetnacl";
+import { encodeBase64 } from "tweetnacl-util";
+
+import InputField from "@app/components/basic/InputField";
+import checkPassword from "@app/components/utilities/checks/checkPassword";
+import Aes256Gcm from "@app/components/utilities/cryptography/aes-256-gcm";
+import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
+import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLocalStorage";
+import SecurityClient from "@app/components/utilities/SecurityClient";
+import { Button, Input } from "@app/components/v2";
+import { useGetCommonPasswords } from "@app/hooks/api";
+import completeAccountInformationSignup from "@app/pages/api/auth/CompleteAccountInformationSignup";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+import ProjectService from "@app/services/ProjectService";
+
+// eslint-disable-next-line new-cap
+const client = new jsrp.client();
+
+type Props = {
+    setStep: (step: number) => void;
+    email: string;
+    password: string;
+    setPassword: (value: string) => void;
+    name: string;
+    providerOrganizationName: string;
+    providerAuthToken?: string;
+}
+
+type Errors = {
+  length?: string,
+  upperCase?: string,
+  lowerCase?: string,
+  number?: string,
+  specialChar?: string,
+  repeatedChar?: string,
+};
+
+/**
+ * This is the step of the sign up flow where people provife their name/surname and password
+ * @param {object} obj
+ * @param {string} obj.verificationToken - the token which we use to verify the legitness of a user
+ * @param {string} obj.incrementStep - a function to move to the next signup step
+ * @param {string} obj.email - email of a user who is signing up
+ * @param {string} obj.password - user's password
+ * @param {string} obj.setPassword - function managing the state of user's password
+ * @param {string} obj.firstName - user's first name
+ * @param {string} obj.setFirstName  - function managing the state of user's first name
+ * @param {string} obj.lastName - user's lastName
+ * @param {string} obj.setLastName - function managing the state of user's last name
+ */
+export const UserInfoSSOStep = ({
+  email,
+  name,
+  providerOrganizationName,
+  password,
+  setPassword,
+  setStep,
+  providerAuthToken,
+}: Props) => {
+  const { data: commonPasswords } = useGetCommonPasswords();
+  const [nameError, setNameError] = useState(false);
+  const [organizationName, setOrganizationName] = useState("");
+  const [organizationNameError, setOrganizationNameError] = useState(false);
+  const [errors, setErrors] = useState<Errors>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    console.log("providerOrganizationName: ", providerOrganizationName);
+    if (providerOrganizationName) {
+      setOrganizationName(providerOrganizationName);
+    }
+  }, []);
+
+  // Verifies if the information that the users entered (name, workspace)
+  // is there, and if the password matches the criteria.
+  const signupErrorCheck = async () => {
+    setIsLoading(true);
+    let errorCheck = false;
+    if (!name) {
+      setNameError(true);
+      errorCheck = true;
+    } else {
+      setNameError(false);
+    }
+    if (!organizationName) {
+      setOrganizationNameError(true);
+      errorCheck = true;
+    } else {
+      setOrganizationNameError(false);
+    }
+    
+    errorCheck = checkPassword({
+      password,
+      commonPasswords,
+      setErrors
+    });
+
+    if (!errorCheck) {
+      // Generate a random pair of a public and a private key
+      const pair = nacl.box.keyPair();
+      const secretKeyUint8Array = pair.secretKey;
+      const publicKeyUint8Array = pair.publicKey;
+      const privateKey = encodeBase64(secretKeyUint8Array);
+      const publicKey = encodeBase64(publicKeyUint8Array);
+      localStorage.setItem("PRIVATE_KEY", privateKey);
+      
+      console.log("make");
+      console.log("email: ", email);
+      console.log("password: ", password);
+
+      client.init(
+        {
+          username: email,
+          password
+        },
+        async () => {
+          client.createVerifier(async (err: any, result: { salt: string; verifier: string }) => {
+            try {
+              // TODO: moduralize into KeyService
+              const derivedKey = await deriveArgonKey({
+                password,
+                salt: result.salt,
+                mem: 65536,
+                time: 3,
+                parallelism: 1,
+                hashLen: 32
+              });
+
+              if (!derivedKey) throw new Error("Failed to derive key from password");
+
+              const key = crypto.randomBytes(32);
+
+              // create encrypted private key by encrypting the private
+              // key with the symmetric key [key]
+              const {
+                ciphertext: encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag
+              } = Aes256Gcm.encrypt({
+                text: privateKey,
+                secret: key
+              });
+
+              // create the protected key by encrypting the symmetric key
+              // [key] with the derived key
+              const {
+                ciphertext: protectedKey,
+                iv: protectedKeyIV,
+                tag: protectedKeyTag
+              } = Aes256Gcm.encrypt({
+                text: key.toString("hex"),
+                secret: Buffer.from(derivedKey.hash)
+              });
+
+              const response = await completeAccountInformationSignup({
+                email,
+                firstName: name.split(" ")[0],
+                lastName: name.split(" ").slice(1).join(" "),
+                protectedKey,
+                protectedKeyIV,
+                protectedKeyTag,
+                publicKey,
+                encryptedPrivateKey,
+                encryptedPrivateKeyIV,
+                encryptedPrivateKeyTag,
+                providerAuthToken,
+                salt: result.salt,
+                verifier: result.verifier,
+                organizationName
+              });
+
+              // unset signup JWT token and set JWT token
+              SecurityClient.setSignupToken("");
+              SecurityClient.setToken(response.token);
+              SecurityClient.setProviderAuthToken("");
+
+              saveTokenToLocalStorage({
+                publicKey,
+                encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag,
+                privateKey
+              });
+
+              const userOrgs = await getOrganizations();
+              const orgId = userOrgs[0]?._id;
+              const project = await ProjectService.initProject({
+                organizationId: orgId,
+                projectName: "Example Project"
+              });
+
+              localStorage.setItem("orgData.id", orgId);
+              localStorage.setItem("projectData.id", project._id);
+
+                setStep(1);
+            } catch (error) {
+              setIsLoading(false);
+              console.error(error);
+            }
+          });
+        }
+      );
+    } else {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="h-full mx-auto mb-36 w-max rounded-xl md:px-8 md:mb-16">
+      <p className="mx-8 mb-6 flex justify-center text-xl font-bold text-medium md:mx-16 text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+        {t("signup.step3-message")}
+      </p>
+      <div className="h-full mx-auto mb-36 w-max rounded-xl py-6 md:px-8 md:mb-16 md:border md:border-mineshaft-600 md:bg-mineshaft-800">
+        <div className="relative z-0 lg:w-1/6 w-1/4 min-w-[20rem] flex flex-col items-center justify-end w-full py-2 rounded-lg">
+          <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Your Name</p>
+          <Input
+            placeholder="Jane Doe"
+            value={name}
+            disabled
+            isRequired
+            autoComplete="given-name"
+            className="h-12"
+          />
+          {nameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your name</p>}
+        </div>
+        <div className="relative z-0 lg:w-1/6 w-1/4 min-w-[20rem] flex flex-col items-center justify-end w-full py-2 rounded-lg">
+          <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Organization Name</p>
+          <Input
+            placeholder="Infisical"
+            value={organizationName}
+            onChange={(e) => setOrganizationName(e.target.value)}
+            isRequired
+            className="h-12"
+            disabled
+          />
+          {organizationNameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your organization name</p>}
+        </div>
+        <div className="mt-2 flex lg:w-1/6 w-1/4 min-w-[20rem] max-h-60 w-full flex-col items-center justify-center rounded-lg py-2">
+          <InputField
+            label={t("section.password.password")}
+            onChangeHandler={(pass: string) => {
+              setPassword(pass);
+              checkPassword({
+                password: pass,
+                commonPasswords,
+                setErrors
+              });
+            }}
+            type="password"
+            value={password}
+            isRequired
+            error={Object.keys(errors).length > 0}
+            autoComplete="new-password"
+            id="new-password"
+          />
+          {Object.keys(errors).length > 0 && (
+            <div className="mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-2 py-2">
+              <div className="mb-2 text-sm text-gray-400">{t("section.password.validate-base")}</div> 
+              {Object.keys(errors).map((key) => {
+                if (errors[key as keyof Errors]) {
+                  return (
+                    <div 
+                      className="ml-1 flex flex-row items-top justify-start"
+                      key={key}
+                    >
+                      <div>
+                        <FontAwesomeIcon 
+                          icon={faXmark} 
+                          className="text-md text-red ml-0.5 mr-2.5"
+                        />
+                      </div>
+                      <p className="text-gray-400 text-sm">
+                        {errors[key as keyof Errors]} 
+                      </p>
+                    </div>
+                  );
+                }
+
+                return null;
+              })}
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
+          <div className="text-l py-1 text-lg w-full">
+            <Button
+              type="submit"
+              onClick={signupErrorCheck}
+              size="sm"
+              isFullWidth
+              className='h-14'
+              colorSchema="primary"
+              variant="outline_bg"
+              isLoading={isLoading}
+            > {String(t("signup.signup"))} </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/views/Signup/components/UserInfoSSOStep/index.tsx
+++ b/frontend/src/views/Signup/components/UserInfoSSOStep/index.tsx
@@ -0,0 +1 @@
+export { UserInfoSSOStep } from "./UserInfoSSOStep";
--- a/frontend/src/views/Signup/components/index.tsx
+++ b/frontend/src/views/Signup/components/index.tsx
@@ -0,0 +1,2 @@
+export { BackupPDFStep } from "./BackupPDFStep";
+export { UserInfoSSOStep } from "./UserInfoSSOStep";
--- a/frontend/src/views/Signup/index.tsx
+++ b/frontend/src/views/Signup/index.tsx
@@ -0,0 +1 @@
+export { SignupSSO } from "./SignupSSO";
				`@@ -0,0 +1 @@`
				`export { SecretImportForm } from "./SecretImportForm";`
				`@@ -0,0 +1 @@`
				`export { SecretImportSection } from "./SecretImportSection";`
				`@@ -0,0 +1 @@`
				`export { InitialStep } from "./InitialStep";`
				`@@ -0,0 +1 @@`
				`export { PasswordStep } from "./PasswordStep";`
				`@@ -0,0 +1 @@`
				`export { SAMLSSOStep } from "./SAMLSSOStep";`
				`@@ -0,0 +1 @@`
				`export { SecretScanningLogsTable } from "./SecretScanningLogsTable";`
				`@@ -0,0 +1 @@`
				`export { OrgGeneralTab } from "./OrgGeneralTab";`
				`@@ -0,0 +1 @@`
				`export { OrgTabGroup } from "./OrgTabGroup";`
				`@@ -0,0 +1 @@`
				`export { UserNameSection } from "./UserNameSection";`
				`@@ -0,0 +1 @@`
				`export { BackupPDFStep } from "./BackupPDFStep";`