rename bit bucket options

feat(platform): Show imported/overwritten values in secret overview

.github/workflows/build-staging-and-deploy-aws.yml

@@ -50,6 +50,13 @@ jobs:
     environment:
       name: Gamma
     steps:
+      - uses: twingate/github-action@v1
+        with:
+          # The Twingate Service Key used to connect Twingate to the proper service
+          # Learn more about [Twingate Services](https://docs.twingate.com/docs/services)
+          #
+          # Required
+          service-key: ${{ secrets.TWINGATE_GAMMA_SERVICE_KEY }}
       - name: Checkout code
         uses: actions/checkout@v2
       - name: Setup Node.js environment
@@ -74,21 +81,21 @@ jobs:
         uses: pr-mpt/actions-commit-hash@v2
       - name: Download task definition
         run: |
-          aws ecs describe-task-definition --task-definition infisical-core-platform --query taskDefinition > task-definition.json
+          aws ecs describe-task-definition --task-definition infisical-core-gamma-stage --query taskDefinition > task-definition.json
       - name: Render Amazon ECS task definition
         id: render-web-container
         uses: aws-actions/amazon-ecs-render-task-definition@v1
         with:
           task-definition: task-definition.json
-          container-name: infisical-core-platform
+          container-name: infisical-core
           image: infisical/staging_infisical:${{ steps.commit.outputs.short }}
           environment-variables: "LOG_LEVEL=info"
       - name: Deploy to Amazon ECS service
         uses: aws-actions/amazon-ecs-deploy-task-definition@v1
         with:
           task-definition: ${{ steps.render-web-container.outputs.task-definition }}
-          service: infisical-core-platform
-          cluster: infisical-core-platform
+          service: infisical-core-gamma-stage
+          cluster: infisical-gamma-stage
           wait-for-service-stability: true
 
   production-postgres-deployment:

backend/src/ee/services/ldap-config/ldap-config-service.ts

@@ -23,8 +23,6 @@ import {
 } from "@app/lib/crypto/encryption";
 import { BadRequestError } from "@app/lib/errors";
 import { AuthMethod, AuthTokenType } from "@app/services/auth/auth-type";
-import { TAuthTokenServiceFactory } from "@app/services/auth-token/auth-token-service";
-import { TokenType } from "@app/services/auth-token/auth-token-types";
 import { TGroupProjectDALFactory } from "@app/services/group-project/group-project-dal";
 import { TOrgBotDALFactory } from "@app/services/org/org-bot-dal";
 import { TOrgDALFactory } from "@app/services/org/org-dal";
@@ -32,7 +30,6 @@ import { TOrgMembershipDALFactory } from "@app/services/org-membership/org-membe
 import { TProjectDALFactory } from "@app/services/project/project-dal";
 import { TProjectBotDALFactory } from "@app/services/project-bot/project-bot-dal";
 import { TProjectKeyDALFactory } from "@app/services/project-key/project-key-dal";
-import { SmtpTemplates, TSmtpService } from "@app/services/smtp/smtp-service";
 import { getServerCfg } from "@app/services/super-admin/super-admin-service";
 import { TUserDALFactory } from "@app/services/user/user-dal";
 import { normalizeUsername } from "@app/services/user/user-fns";
@@ -87,8 +84,6 @@ type TLdapConfigServiceFactoryDep = {
   userAliasDAL: Pick<TUserAliasDALFactory, "create" | "findOne">;
   permissionService: Pick<TPermissionServiceFactory, "getOrgPermission">;
   licenseService: Pick<TLicenseServiceFactory, "getPlan" | "updateSubscriptionOrgMemberCount">;
-  tokenService: Pick<TAuthTokenServiceFactory, "createTokenForUser">;
-  smtpService: Pick<TSmtpService, "sendMail">;
 };
 
 export type TLdapConfigServiceFactory = ReturnType<typeof ldapConfigServiceFactory>;
@@ -108,9 +103,7 @@ export const ldapConfigServiceFactory = ({
   userDAL,
   userAliasDAL,
   permissionService,
-  licenseService,
-  tokenService,
-  smtpService
+  licenseService
 }: TLdapConfigServiceFactoryDep) => {
   const createLdapCfg = async ({
     actor,
@@ -501,7 +494,7 @@ export const ldapConfigServiceFactory = ({
         if (!orgMembership) {
           await orgMembershipDAL.create(
             {
-              userId: newUser.id,
+              userId: userAlias.userId,
               inviteEmail: email,
               orgId,
               role: OrgMembershipRole.Member,
@@ -634,22 +627,6 @@ export const ldapConfigServiceFactory = ({
       }
     );
 
-    if (user.email && !user.isEmailVerified) {
-      const token = await tokenService.createTokenForUser({
-        type: TokenType.TOKEN_EMAIL_VERIFICATION,
-        userId: user.id
-      });
-
-      await smtpService.sendMail({
-        template: SmtpTemplates.EmailVerification,
-        subjectLine: "Infisical confirmation code",
-        recipients: [user.email],
-        substitutions: {
-          code: token
-        }
-      });
-    }
-
     return { isUserCompleted, providerAuthToken };
   };
 

backend/src/lib/crypto/srp.ts

@@ -101,33 +101,51 @@ export const getUserPrivateKey = async (
   password: string,
   user: Pick<
     TUserEncryptionKeys,
-    "protectedKeyTag" | "protectedKey" | "protectedKeyIV" | "encryptedPrivateKey" | "iv" | "salt" | "tag"
+    | "protectedKeyTag"
+    | "protectedKey"
+    | "protectedKeyIV"
+    | "encryptedPrivateKey"
+    | "iv"
+    | "salt"
+    | "tag"
+    | "encryptionVersion"
   >
 ) => {
-  const derivedKey = await argon2.hash(password, {
-    salt: Buffer.from(user.salt),
-    memoryCost: 65536,
-    timeCost: 3,
-    parallelism: 1,
-    hashLength: 32,
-    type: argon2.argon2id,
-    raw: true
-  });
-  if (!derivedKey) throw new Error("Failed to derive key from password");
-  const key = decryptSymmetric128BitHexKeyUTF8({
-    ciphertext: user.protectedKey as string,
-    iv: user.protectedKeyIV as string,
-    tag: user.protectedKeyTag as string,
-    key: derivedKey
-  });
+  if (user.encryptionVersion === 1) {
+    return decryptSymmetric128BitHexKeyUTF8({
+      ciphertext: user.encryptedPrivateKey,
+      iv: user.iv,
+      tag: user.tag,
+      key: password.slice(0, 32).padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0")
+    });
+  }
+  if (user.encryptionVersion === 2 && user.protectedKey && user.protectedKeyIV && user.protectedKeyTag) {
+    const derivedKey = await argon2.hash(password, {
+      salt: Buffer.from(user.salt),
+      memoryCost: 65536,
+      timeCost: 3,
+      parallelism: 1,
+      hashLength: 32,
+      type: argon2.argon2id,
+      raw: true
+    });
+    if (!derivedKey) throw new Error("Failed to derive key from password");
+    const key = decryptSymmetric128BitHexKeyUTF8({
+      ciphertext: user.protectedKey,
+      iv: user.protectedKeyIV,
+      tag: user.protectedKeyTag,
+      key: derivedKey
+    });
 
-  const privateKey = decryptSymmetric128BitHexKeyUTF8({
-    ciphertext: user.encryptedPrivateKey,
-    iv: user.iv,
-    tag: user.tag,
-    key: Buffer.from(key, "hex")
-  });
-  return privateKey;
+    const privateKey = decryptSymmetric128BitHexKeyUTF8({
+      ciphertext: user.encryptedPrivateKey,
+      iv: user.iv,
+      tag: user.tag,
+      key: Buffer.from(key, "hex")
+    });
+    return privateKey;
+  }
+  throw new Error(`GetUserPrivateKey: Encryption version not found`);
 };
 
 export const buildUserProjectKey = async (privateKey: string, publickey: string) => {

backend/src/server/routes/index.ts

@@ -392,9 +392,7 @@ export const registerRoutes = async (
     userDAL,
     userAliasDAL,
     permissionService,
-    licenseService,
-    tokenService,
-    smtpService
+    licenseService
   });
 
   const telemetryService = telemetryServiceFactory({

backend/src/services/auth/auth-login-service.ts

@@ -9,6 +9,7 @@ import { generateSrpServerKey, srpCheckClientProof } from "@app/lib/crypto";
 import { infisicalSymmetricEncypt } from "@app/lib/crypto/encryption";
 import { getUserPrivateKey } from "@app/lib/crypto/srp";
 import { BadRequestError, DatabaseError, UnauthorizedError } from "@app/lib/errors";
+import { logger } from "@app/lib/logger";
 import { getServerCfg } from "@app/services/super-admin/super-admin-service";
 
 import { TTokenDALFactory } from "../auth-token/auth-token-dal";
@@ -258,7 +259,13 @@ export const authLoginServiceFactory = ({
     });
     // from password decrypt the private key
     if (password) {
-      const privateKey = await getUserPrivateKey(password, userEnc);
+      const privateKey = await getUserPrivateKey(password, userEnc).catch((err) => {
+        logger.error(
+          err,
+          `loginExchangeClientProof: private key generation failed for [userId=${user.id}] and [email=${user.email}] `
+        );
+        return "";
+      });
       const hashedPassword = await bcrypt.hash(password, cfg.BCRYPT_SALT_ROUND);
       const { iv, tag, ciphertext, encoding } = infisicalSymmetricEncypt(privateKey);
       await userDAL.updateUserEncryptionByUserId(userEnc.userId, {

backend/src/services/auth/auth-signup-service.ts

@@ -165,7 +165,8 @@ export const authSignupServiceFactory = ({
       protectedKeyTag,
       encryptedPrivateKey,
       iv: encryptedPrivateKeyIV,
-      tag: encryptedPrivateKeyTag
+      tag: encryptedPrivateKeyTag,
+      encryptionVersion: 2
     });
     const { tag, encoding, ciphertext, iv } = infisicalSymmetricEncypt(privateKey);
     const updateduser = await authDAL.transaction(async (tx) => {
@@ -325,7 +326,8 @@ export const authSignupServiceFactory = ({
       protectedKeyTag,
       encryptedPrivateKey,
       iv: encryptedPrivateKeyIV,
-      tag: encryptedPrivateKeyTag
+      tag: encryptedPrivateKeyTag,
+      encryptionVersion: 2
     });
     const { tag, encoding, ciphertext, iv } = infisicalSymmetricEncypt(privateKey);
     const updateduser = await authDAL.transaction(async (tx) => {

backend/src/services/super-admin/super-admin-service.ts

@@ -98,6 +98,7 @@ export const superAdminServiceFactory = ({
     if (existingUser) throw new BadRequestError({ name: "Admin sign up", message: "User already exist" });
 
     const privateKey = await getUserPrivateKey(password, {
+      encryptionVersion: 2,
       salt,
       protectedKey,
       protectedKeyIV,

docs/documentation/platform/identities/machine-identities.mdx

@@ -26,13 +26,6 @@ A typical workflow for using identities consists of four steps:
 3. Authenticating the identity with the Infisical API based on the configured authentication method on it and receiving a short-lived access token back.
 4. Authenticating subsequent requests with the Infisical API using the short-lived access token.
 
-<Note>
-  Currently, identities can only be used to make authenticated requests to the Infisical API, SDKs, Terraform, Kubernetes Operator, and Infisical Agent. They do not work with clients such as CLI, Ansible look up plugin, etc.
-
-Machine Identity support for the rest of the clients is planned to be released in the current quarter.
-
-</Note>
-
 ## Authentication Methods
 
 To interact with various resources in Infisical, Machine Identities are able to authenticate using:

docs/documentation/platform/ldap/overview.mdx

@@ -14,8 +14,6 @@ then you should contact sales@infisical.com to purchase an enterprise license to
 
 You can configure your organization in Infisical to have members authenticate with the platform via [LDAP](https://en.wikipedia.org/wiki/Lightweight_Directory_Access_Protocol).
 
-To note, configuring LDAP retains the end-to-end encrypted nature of authentication in Infisical because we decouple the authentication and decryption steps; the LDAP server cannot and will not have access to the decryption key needed to decrypt your secrets.
-
 LDAP providers:
 
 - Active Directory

docs/documentation/platform/sso/overview.mdx

@@ -15,9 +15,6 @@ description: "Learn how to log in to Infisical via SSO protocols."
 
 You can configure your organization in Infisical to have members authenticate with the platform via protocols like [SAML 2.0](https://en.wikipedia.org/wiki/SAML_2.0).
 
-To note, Infisical's SSO implementation decouples the **authentication** and **decryption** steps – which implies that no
-Identity Provider can have access to the decryption key needed to decrypt your secrets (this also implies that Infisical requires entering the user's Master Password on top of authenticating with SSO).
-
 ## Identity providers
 
 Infisical supports these and many other identity providers:

docs/integrations/cicd/bitbucket.mdx

@@ -7,26 +7,62 @@ Prerequisites:
 
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
 
-<Steps>
-  <Step title="Authorize Infisical for Bitbucket">
-    Navigate to your project's integrations tab in Infisical.
+<AccordionGroup>
+  <Accordion title="Push secrets to Bitbucket from Infisical">
+    <Steps>
+      <Step title="Authorize Infisical for Bitbucket">
+        Navigate to your project's integrations tab in Infisical.
 
-    ![integrations](../../images/integrations.png)
+        ![integrations](../../images/integrations.png)
 
-    Press on the Bitbucket tile and grant Infisical access to your Bitbucket account.
+        Press on the Bitbucket tile and grant Infisical access to your Bitbucket account.
 
-    ![integrations bitbucket authorization](../../images/integrations/bitbucket/integrations-bitbucket-auth.png)
+        ![integrations bitbucket authorization](../../images/integrations/bitbucket/integrations-bitbucket-auth.png)
 
-    <Info>
-      If this is your project's first cloud integration, then you'll have to grant
-      Infisical access to your project's environment variables. Although this step
-      breaks E2EE, it's necessary for Infisical to sync the environment variables to
-      the cloud platform.
-    </Info>
-  </Step>
-  <Step title="Start integration">
-    Select which Infisical environment secrets you want to sync to which Bitbucket repo and press start integration to start syncing secrets to the repo.
+      </Step>
+      <Step title="Start integration">
+        Select which Infisical environment secrets you want to sync to which Bitbucket repo and press start integration to start syncing secrets to the repo.
 
-    ![integrations bitbucket](../../images/integrations/bitbucket/integrations-bitbucket.png)
-  </Step>
-</Steps>
+        ![integrations bitbucket](../../images/integrations/bitbucket/integrations-bitbucket.png)
+      </Step>
+    </Steps>
+
+  </Accordion>
+  <Accordion title="Pull secrets in Bitbucket pipelines from Infisical">
+    <Steps>
+      <Step title="Configure Infisical Access">
+        Configure a [Machine Identity](https://infisical.com/docs/documentation/platform/identities/universal-auth) for your project and give it permissions to read secrets from your desired Infisical projects and environments.
+      </Step>
+      <Step title="Initialize Bitbucket variables">
+      Create Bitbucket variables (can be either workspace, repository, or deployment-level) to store Machine Identity Client ID and Client Secret.
+      
+      ![integrations bitbucket](../../images/integrations/bitbucket/integrations-bitbucket-env.png)
+      </Step>
+      <Step title="Integrate Infisical secrets into the pipeline">
+        Edit your Bitbucket pipeline YAML file to include the use of the Infisical CLI to fetch and inject secrets into any script or command within the pipeline.
+        
+        #### Example
+
+        ```yaml
+        image: atlassian/default-image:3
+
+        pipelines:
+          default:
+            - step:
+                name: Build application with secrets from Infisical
+                script:
+                  - apt update && apt install -y curl
+                  - curl -1sLf 'https://dl.cloudsmith.io/public/infisical/infisical-cli/setup.deb.sh' | bash
+                  - apt-get update && apt-get install -y infisical
+                  - export INFISICAL_TOKEN=$(infisical login --method=universal-auth --client-id=$INFISICAL_CLIENT_ID --client-secret=$INFISICAL_CLIENT_SECRET --silent --plain)
+                  - infisical run --projectId=1d0443c1-cd43-4b3a-91a3-9d5f81254a89 --env=dev -- npm run build
+        ```
+
+      <Tip>
+        Set the values of `projectId` and `env` flags in the `infisical run` command to your intended source path. For more options, refer to the CLI command reference [here](https://infisical.com/docs/cli/commands/run).
+      </Tip>
+      </Step>
+    </Steps>
+
+  </Accordion>
+</AccordionGroup>

docs/integrations/cloud/terraform-cloud.mdx

@@ -27,12 +27,6 @@ Prerequisites:
 
     ![integrations terraform cloud authorization](../../images/integrations/terraform/integrations-terraformcloud-auth.png)
 
-    <Info>
-      If this is your project's first cloud integration, then you'll have to grant
-      Infisical access to your project's environment variables. Although this step
-      breaks E2EE, it's necessary for Infisical to sync the environment variables to
-      the cloud platform.
-    </Info>
   </Step>
   <Step title="Start integration">
     Select which Infisical environment secrets and Terraform Cloud variable type you want to sync to which Terraform Cloud workspace/project and press create integration to start syncing secrets to Terraform Cloud.
@@ -40,4 +34,4 @@ Prerequisites:
     ![integrations terraform cloud](../../images/integrations/terraform/integrations-terraformcloud-create.png)
     ![integrations terraform cloud](../../images/integrations/terraform/integrations-terraformcloud.png)
   </Step>
-</Steps>
+</Steps>

docs/mint.json

@@ -638,5 +638,10 @@
   ],
   "integrations": {
     "intercom": "hsg644ru"
+  },
+  "analytics": {
+    "koala": {
+      "publicApiKey": "pk_b50d7184e0e39ddd5cdb43cf6abeadd9b97d"
+    }
   }
 }

docs/sdks/overview.mdx

@@ -19,6 +19,9 @@ From local development to production, Infisical SDKs provide the easiest way for
     <Card href="/sdks/languages/java" title="Java" icon="java" color="#e41f23">
         Manage secrets for your Java application on demand
     </Card>
+    <Card href="/sdks/languages/go" title="Go icon="golang" color="#367B99">
+        Manage secrets for your Go application on demand
+    </Card>
     <Card href="/sdks/languages/csharp" title="C#" icon="bars" color="#368833">
         Manage secrets for your C#/.NET application on demand
     </Card>

docs/self-hosting/configuration/envars.mdx

@@ -25,6 +25,10 @@ Used to configure platform-specific security and operational settings
   https://app.infisical.com).
 </ParamField>
 
+<ParamField query="TELEMETRY_ENABLED" type="string" default="true" optional>
+  Telemetry helps us improve Infisical but if you want to dsiable it you may set this to `false`.
+</ParamField>
+
 ## Data Layer
 
 The platform utilizes Postgres to persist all of its data and Redis for caching and backgroud tasks

frontend/src/components/dashboard/DropZone.tsx

@@ -6,6 +6,8 @@ import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { parseDocument, Scalar, YAMLMap } from "yaml";
 
+import { SecretType } from "@app/hooks/api/types";
+
 import Button from "../basic/buttons/Button";
 import Error from "../basic/Error";
 import { createNotification } from "../notifications";
@@ -33,7 +35,6 @@ const DropZone = ({
   numCurrentRows
 }: DropZoneProps) => {
   const { t } = useTranslation();
-  
 
   const handleDragEnter = (e: DragEvent) => {
     e.preventDefault();
@@ -66,7 +67,7 @@ const DropZone = ({
           key,
           value: keyPairs[key as keyof typeof keyPairs].value,
           comment: keyPairs[key as keyof typeof keyPairs].comments.join("\n"),
-          type: "shared",
+          type: SecretType.Shared,
           tags: []
         }));
         break;
@@ -79,7 +80,7 @@ const DropZone = ({
           key,
           value: keyPairs[key as keyof typeof keyPairs],
           comment: "",
-          type: "shared",
+          type: SecretType.Shared,
           tags: []
         }));
         break;
@@ -102,7 +103,7 @@ const DropZone = ({
             key,
             value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? "",
             comment,
-            type: "shared",
+            type: SecretType.Shared,
             tags: []
           };
         });
@@ -132,7 +133,7 @@ const DropZone = ({
     if (file === undefined) {
       createNotification({
         text: "You can't inject files from VS Code. Click 'Reveal in finder', and drag your file directly from the directory where it's located.",
-        type: "error",
+        type: "error"
       });
       setLoading(false);
       return;

frontend/src/components/notifications/Notifications.tsx

@@ -26,4 +26,4 @@ export const createNotification = (
     type: myProps?.type || "info",
   });
 
-export const NotificationContainer = () => <ToastContainer hideProgressBar />;
+export const NotificationContainer = () => <ToastContainer pauseOnHover toastClassName="border border-mineshaft-500" style={{ width: "400px" }} />;

frontend/src/components/utilities/secrets/checkOverrides.ts

@@ -1,5 +1,7 @@
 import { SecretDataProps } from "public/data/frequentInterfaces";
 
+import { SecretType } from "@app/hooks/api/types";
+
 /**
  * This function downloads the secrets as a .env file
  * @param {object} obj
@@ -10,8 +12,8 @@ const checkOverrides = async ({ data }: { data: SecretDataProps[] }) => {
   let secrets: SecretDataProps[] = data!.map((secret) => Object.create(secret));
   const overridenSecrets = data!.filter((secret) =>
     secret.valueOverride === undefined || secret?.value !== secret?.valueOverride
-      ? "shared"
-      : "personal"
+      ? SecretType.Shared
+      : SecretType.Personal
   );
   if (overridenSecrets.length) {
     overridenSecrets.forEach((secret) => {

frontend/src/components/utilities/secrets/encryptSecrets.ts

@@ -3,6 +3,7 @@ import crypto from "crypto";
 import { SecretDataProps, Tag } from "public/data/frequentInterfaces";
 
 import { fetchUserWsKey } from "@app/hooks/api/keys/queries";
+import { SecretType } from "@app/hooks/api/types";
 
 import { decryptAssymmetric, encryptSymmetric } from "../cryptography/crypto";
 
@@ -20,7 +21,7 @@ interface EncryptedSecretProps {
   secretValueCiphertext: string;
   secretValueIV: string;
   secretValueTag: string;
-  type: "personal" | "shared";
+  type: SecretType;
   tags: Tag[];
 }
 
@@ -108,8 +109,8 @@ const encryptSecrets = async ({
         secretCommentTag,
         type:
           secret.valueOverride === undefined || secret?.value !== secret?.valueOverride
-            ? "shared"
-            : "personal",
+            ? SecretType.Shared
+            : SecretType.Personal,
         tags: secret.tags
       };
 

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -15,7 +15,7 @@ const replaceContentWithDot = (str: string) => {
 };
 
 const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?: boolean) => {
-  if (isImport) return "IMPORTED";
+  if (isImport && !content) return "IMPORTED";
   if (content === "") return "EMPTY";
   if (!content) return "EMPTY";
   if (!isVisible) return replaceContentWithDot(content);

frontend/src/hooks/api/secretImports/queries.tsx

@@ -279,7 +279,28 @@ export const useGetImportedSecretsAllEnvs = ({
     [(secretImports || []).map((response) => response.data)]
   );
 
-  return { secretImports, isImportedSecretPresentInEnv };
+  const getImportedSecretByKey = useCallback(
+    (envSlug: string, secretName: string) => {
+      const selectedEnvIndex = environments.indexOf(envSlug);
+
+      if (selectedEnvIndex !== -1) {
+        const secret = secretImports?.[selectedEnvIndex]?.data?.find(({ secrets }) =>
+          secrets.find((s) => s.key === secretName)
+        );
+
+        if (!secret) return undefined;
+
+        return {
+          secret: secret?.secrets.find((s) => s.key === secretName),
+          environmentInfo: secret?.environmentInfo
+        };
+      }
+      return undefined;
+    },
+    [(secretImports || []).map((response) => response.data)]
+  );
+
+  return { secretImports, isImportedSecretPresentInEnv, getImportedSecretByKey };
 };
 
 export const useGetImportedFoldersByEnv = ({

frontend/src/hooks/api/secretSnapshots/queries.tsx

@@ -7,7 +7,7 @@ import {
 } from "@app/components/utilities/cryptography/crypto";
 import { apiRequest } from "@app/config/request";
 
-import { DecryptedSecret } from "../secrets/types";
+import { DecryptedSecret, SecretType } from "../secrets/types";
 import {
   TGetSecretSnapshotsDTO,
   TSecretRollbackDTO,
@@ -112,7 +112,7 @@ export const useGetSnapshotSecrets = ({ decryptFileKey, snapshotId }: TSnapshotD
           version: encSecret.version
         };
 
-        if (encSecret.type === "personal") {
+        if (encSecret.type === SecretType.Personal) {
           personalSecrets[decryptedSecret.key] = { id: encSecret.secretId, value: secretValue };
         } else {
           sharedSecrets.push(decryptedSecret);

frontend/src/hooks/api/secrets/queries.tsx

@@ -14,6 +14,7 @@ import {
   EncryptedSecret,
   EncryptedSecretVersion,
   GetSecretVersionsDTO,
+  SecretType,
   TGetProjectSecretsAllEnvDTO,
   TGetProjectSecretsDTO,
   TGetProjectSecretsKey
@@ -77,7 +78,7 @@ export const decryptSecrets = (
       skipMultilineEncoding: encSecret.skipMultilineEncoding
     };
 
-    if (encSecret.type === "personal") {
+    if (encSecret.type === SecretType.Personal) {
       personalSecrets[decryptedSecret.key] = {
         id: encSecret.id,
         value: secretValue

frontend/src/hooks/api/secrets/types.ts

@@ -1,11 +1,16 @@
 import type { UserWsKeyPair } from "../keys/types";
 import type { WsTag } from "../tags/types";
 
+export enum SecretType {
+  Shared = "shared",
+  Personal = "personal"
+}
+
 export type EncryptedSecret = {
   id: string;
   version: number;
   workspace: string;
-  type: "shared" | "personal";
+  type: SecretType;
   environment: string;
   secretKeyCiphertext: string;
   secretKeyIV: string;
@@ -49,7 +54,7 @@ export type EncryptedSecretVersion = {
   secretId: string;
   version: number;
   workspace: string;
-  type: string;
+  type: SecretType;
   isDeleted: boolean;
   envId: string;
   secretKeyCiphertext: string;
@@ -101,14 +106,14 @@ export type TCreateSecretsV3DTO = {
   secretPath: string;
   workspaceId: string;
   environment: string;
-  type: string;
+  type: SecretType;
 };
 
 export type TUpdateSecretsV3DTO = {
   latestFileKey: UserWsKeyPair;
   workspaceId: string;
   environment: string;
-  type: string;
+  type: SecretType;
   secretPath: string;
   skipMultilineEncoding?: boolean;
   newSecretName?: string;
@@ -124,7 +129,7 @@ export type TUpdateSecretsV3DTO = {
 export type TDeleteSecretsV3DTO = {
   workspaceId: string;
   environment: string;
-  type: "shared" | "personal";
+  type: SecretType;
   secretPath: string;
   secretName: string;
   secretId?: string;
@@ -140,7 +145,7 @@ export type TCreateSecretBatchDTO = {
     secretValue: string;
     secretComment: string;
     skipMultilineEncoding?: boolean;
-    type: "shared" | "personal";
+    type: SecretType;
     metadata?: {
       source?: string;
     };
@@ -153,7 +158,7 @@ export type TUpdateSecretBatchDTO = {
   secretPath: string;
   latestFileKey: UserWsKeyPair;
   secrets: Array<{
-    type: "shared" | "personal";
+    type: SecretType;
     secretName: string;
     skipMultilineEncoding?: boolean;
     secretValue: string;
@@ -168,14 +173,14 @@ export type TDeleteSecretBatchDTO = {
   secretPath: string;
   secrets: Array<{
     secretName: string;
-    type: "shared" | "personal";
+    type: SecretType;
   }>;
 };
 
 export type CreateSecretDTO = {
   workspaceId: string;
   environment: string;
-  type: "shared" | "personal";
+  type: SecretType;
   secretKey: string;
   secretKeyCiphertext: string;
   secretKeyIV: string;

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

@@ -47,7 +47,7 @@ import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from
 import { interpolateSecrets } from "@app/helpers/secret";
 import { usePopUp } from "@app/hooks";
 import { useCreateFolder, useDeleteSecretBatch, useGetUserWsKey } from "@app/hooks/api";
-import { DecryptedSecret, TImportedSecrets, WsTag } from "@app/hooks/api/types";
+import { DecryptedSecret, SecretType, TImportedSecrets, WsTag } from "@app/hooks/api/types";
 import { debounce } from "@app/lib/fn/debounce";
 
 import {
@@ -211,7 +211,7 @@ export const ActionBar = ({
         secretPath,
         workspaceId,
         environment,
-        secrets: bulkDeletedSecrets.map(({ key }) => ({ secretName: key, type: "shared" }))
+        secrets: bulkDeletedSecrets.map(({ key }) => ({ secretName: key, type: SecretType.Shared }))
       });
       resetSelectedSecret();
       handlePopUpClose("bulkDeleteSecrets");

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

@@ -6,7 +6,7 @@ import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { useCreateSecretV3 } from "@app/hooks/api";
-import { UserWsKeyPair } from "@app/hooks/api/types";
+import { SecretType, UserWsKeyPair } from "@app/hooks/api/types";
 
 import { PopUpNames, usePopUpAction, usePopUpState } from "../../SecretMainPage.store";
 
@@ -56,7 +56,7 @@ export const CreateSecretForm = ({
         secretName: key,
         secretValue: value || "",
         secretComment: "",
-        type: "shared",
+        type: SecretType.Shared,
         latestFileKey: decryptFileKey
       });
       closePopUp(PopUpNames.CreateSecretForm);

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

@@ -16,7 +16,7 @@ import { usePopUp, useToggle } from "@app/hooks";
 import { useCreateSecretBatch, useUpdateSecretBatch } from "@app/hooks/api";
 import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
-import { DecryptedSecret, UserWsKeyPair } from "@app/hooks/api/types";
+import { DecryptedSecret, SecretType, UserWsKeyPair } from "@app/hooks/api/types";
 
 import { PopUpNames, usePopUpAction } from "../../SecretMainPage.store";
 import { CopySecretsFromBoard } from "./CopySecretsFromBoard";
@@ -170,7 +170,7 @@ export const SecretDropzone = ({
           workspaceId,
           environment,
           secrets: Object.entries(create).map(([secretName, secData]) => ({
-            type: "shared",
+            type: SecretType.Shared,
             secretComment: secData.comments.join("\n"),
             secretValue: secData.value,
             secretName
@@ -184,7 +184,7 @@ export const SecretDropzone = ({
           workspaceId,
           environment,
           secrets: Object.entries(update).map(([secretName, secData]) => ({
-            type: "shared",
+            type: SecretType.Shared,
             secretComment: secData.comments.join("\n"),
             secretValue: secData.value,
             secretName

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

@@ -10,7 +10,7 @@ import { usePopUp } from "@app/hooks";
 import { useCreateSecretV3, useDeleteSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
 import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
-import { DecryptedSecret } from "@app/hooks/api/secrets/types";
+import { DecryptedSecret, SecretType } from "@app/hooks/api/secrets/types";
 import { secretSnapshotKeys } from "@app/hooks/api/secretSnapshots/queries";
 import { UserWsKeyPair, WsTag } from "@app/hooks/api/types";
 
@@ -119,7 +119,7 @@ export const SecretListView = ({
 
   const handleSecretOperation = async (
     operation: "create" | "update" | "delete",
-    type: "shared" | "personal",
+    type: SecretType,
     key: string,
     {
       value,
@@ -227,23 +227,25 @@ export const SecretListView = ({
       try {
         // personal secret change
         if (overrideAction === "deleted") {
-          await handleSecretOperation("delete", "personal", oldKey, {
+          await handleSecretOperation("delete", SecretType.Personal, oldKey, {
             secretId: orgSecret.idOverride
           });
         } else if (overrideAction && idOverride) {
-          await handleSecretOperation("update", "personal", oldKey, {
+          await handleSecretOperation("update", SecretType.Personal, oldKey, {
             value: valueOverride,
             newKey: hasKeyChanged ? key : undefined,
             secretId: orgSecret.idOverride,
             skipMultilineEncoding: modSecret.skipMultilineEncoding
           });
         } else if (overrideAction) {
-          await handleSecretOperation("create", "personal", oldKey, { value: valueOverride });
+          await handleSecretOperation("create", SecretType.Personal, oldKey, {
+            value: valueOverride
+          });
         }
 
         // shared secret change
         if (!isSharedSecUnchanged) {
-          await handleSecretOperation("update", "shared", oldKey, {
+          await handleSecretOperation("update", SecretType.Shared, oldKey, {
             value,
             tags: tagIds,
             comment,
@@ -286,7 +288,7 @@ export const SecretListView = ({
   const handleSecretDelete = useCallback(async () => {
     const { key, id: secretId } = popUp.deleteSecret?.data as DecryptedSecret;
     try {
-      await handleSecretOperation("delete", "shared", key, { secretId });
+      await handleSecretOperation("delete", SecretType.Shared, key, { secretId });
       // wrap this in another function and then reuse
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -64,7 +64,7 @@ import {
 } from "@app/hooks/api";
 import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
 import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
-import { TSecretFolder } from "@app/hooks/api/types";
+import { SecretType, TSecretFolder } from "@app/hooks/api/types";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
 import { FolderForm } from "../SecretMainPage/components/ActionBar/FolderForm";
@@ -188,7 +188,7 @@ export const SecretOverviewPage = () => {
     environments: userAvailableEnvs.map(({ slug }) => slug)
   });
 
-  const { isImportedSecretPresentInEnv } = useGetImportedSecretsAllEnvs({
+  const { isImportedSecretPresentInEnv, getImportedSecretByKey } = useGetImportedSecretsAllEnvs({
     projectId: workspaceId,
     decryptFileKey: latestFileKey!,
     path: secretPath,
@@ -320,7 +320,7 @@ export const SecretOverviewPage = () => {
         secretName: key,
         secretValue: value,
         secretComment: "",
-        type: "shared",
+        type: SecretType.Shared,
         latestFileKey: latestFileKey!
       });
       createNotification({
@@ -344,7 +344,13 @@ export const SecretOverviewPage = () => {
     }
   };
 
-  const handleSecretUpdate = async (env: string, key: string, value: string, secretId?: string) => {
+  const handleSecretUpdate = async (
+    env: string,
+    key: string,
+    value: string,
+    type = SecretType.Shared,
+    secretId?: string
+  ) => {
     try {
       await updateSecretV3({
         environment: env,
@@ -353,7 +359,7 @@ export const SecretOverviewPage = () => {
         secretId,
         secretName: key,
         secretValue: value,
-        type: "shared",
+        type,
         latestFileKey: latestFileKey!
       });
       createNotification({
@@ -377,7 +383,7 @@ export const SecretOverviewPage = () => {
         secretPath,
         secretName: key,
         secretId,
-        type: "shared"
+        type: SecretType.Shared
       });
       createNotification({
         type: "success",
@@ -807,6 +813,7 @@ export const SecretOverviewPage = () => {
                       isSelected={selectedEntries.secret[key]}
                       onToggleSecretSelect={() => toggleSelectedEntry(EntryType.SECRET, key)}
                       secretPath={secretPath}
+                      getImportedSecretByKey={getImportedSecretByKey}
                       isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
                       onSecretCreate={handleSecretCreate}
                       onSecretDelete={handleSecretDelete}

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

@@ -18,7 +18,7 @@ import {
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { useWorkspace } from "@app/context";
 import { useCreateFolder, useCreateSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
-import { DecryptedSecret, UserWsKeyPair } from "@app/hooks/api/types";
+import { DecryptedSecret, SecretType, UserWsKeyPair } from "@app/hooks/api/types";
 
 const typeSchema = z
   .object({
@@ -103,7 +103,7 @@ export const CreateSecretForm = ({
           secretPath,
           secretName: key,
           secretValue: value || "",
-          type: "shared",
+          type: SecretType.Shared,
           latestFileKey: decryptFileKey
         });
       }
@@ -115,7 +115,7 @@ export const CreateSecretForm = ({
         secretName: key,
         secretValue: value || "",
         secretComment: "",
-        type: "shared",
+        type: SecretType.Shared,
         latestFileKey: decryptFileKey
       });
     });

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -10,24 +10,33 @@ import { IconButton, Tooltip } from "@app/components/v2";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { useToggle } from "@app/hooks";
+import { SecretType } from "@app/hooks/api/types";
 
 type Props = {
   defaultValue?: string | null;
   secretName: string;
   secretId?: string;
+  isOverride?: boolean;
   isCreatable?: boolean;
   isVisible?: boolean;
   isImportedSecret: boolean;
   environment: string;
   secretPath: string;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
-  onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
+  onSecretUpdate: (
+    env: string,
+    key: string,
+    value: string,
+    type?: SecretType,
+    secretId?: string
+  ) => Promise<void>;
   onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
 };
 
 export const SecretEditRow = ({
   defaultValue,
   isCreatable,
+  isOverride,
   isImportedSecret,
   onSecretUpdate,
   secretName,
@@ -73,7 +82,13 @@ export const SecretEditRow = ({
       if (isCreatable) {
         await onSecretCreate(environment, secretName, value);
       } else {
-        await onSecretUpdate(environment, secretName, value, secretId);
+        await onSecretUpdate(
+          environment,
+          secretName,
+          value,
+          isOverride ? SecretType.Personal : SecretType.Shared,
+          secretId
+        );
       }
     }
     reset({ value });
@@ -93,12 +108,13 @@ export const SecretEditRow = ({
     <div className="group flex w-full cursor-text items-center space-x-2">
       <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <Controller
-          disabled={isImportedSecret}
+          disabled={isImportedSecret && !defaultValue}
           control={control}
           name="value"
           render={({ field }) => (
             <InfisicalSecretInput
               {...field}
+              isReadOnly={isImportedSecret}
               value={field.value as string}
               key="secret-input"
               isVisible={isVisible}

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

@@ -13,7 +13,8 @@ import { twMerge } from "tailwind-merge";
 
 import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
-import { DecryptedSecret } from "@app/hooks/api/secrets/types";
+import { DecryptedSecret, SecretType } from "@app/hooks/api/secrets/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 import { SecretEditRow } from "./SecretEditRow";
 import SecretRenameRow from "./SecretRenameRow";
@@ -27,9 +28,19 @@ type Props = {
   onToggleSecretSelect: (key: string) => void;
   getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
-  onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
+  onSecretUpdate: (
+    env: string,
+    key: string,
+    value: string,
+    type?: SecretType,
+    secretId?: string
+  ) => Promise<void>;
   onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
   isImportedSecretPresentInEnv: (env: string, secretName: string) => boolean;
+  getImportedSecretByKey: (
+    env: string,
+    secretName: string
+  ) => { secret?: DecryptedSecret; environmentInfo?: WorkspaceEnv } | undefined;
 };
 
 export const SecretOverviewTableRow = ({
@@ -41,6 +52,7 @@ export const SecretOverviewTableRow = ({
   onSecretCreate,
   onSecretDelete,
   isImportedSecretPresentInEnv,
+  getImportedSecretByKey,
   expandableColWidth,
   onToggleSecretSelect,
   isSelected
@@ -53,8 +65,9 @@ export const SecretOverviewTableRow = ({
     <>
       <Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
         <Td
-          className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${isFormExpanded && "border-t-2 border-mineshaft-500"
-            }`}
+          className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${
+            isFormExpanded && "border-t-2 border-mineshaft-500"
+          }`}
         >
           <div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
             <div className="flex items-center space-x-5">
@@ -107,8 +120,8 @@ export const SecretOverviewTableRow = ({
                         isSecretPresent
                           ? "Present secret"
                           : isSecretImported
-                            ? "Imported secret"
-                            : "Missing secret"
+                          ? "Imported secret"
+                          : "Missing secret"
                       }
                     >
                       <FontAwesomeIcon
@@ -132,8 +145,9 @@ export const SecretOverviewTableRow = ({
         <Tr>
           <Td
             colSpan={totalCols}
-            className={`bg-bunker-600 px-0 py-0 ${isFormExpanded && "border-b-2 border-mineshaft-500"
-              }`}
+            className={`bg-bunker-600 px-0 py-0 ${
+              isFormExpanded && "border-b-2 border-mineshaft-500"
+            }`}
           >
             <div
               className="ml-2 p-2"
@@ -179,6 +193,7 @@ export const SecretOverviewTableRow = ({
                       const isCreatable = !secret;
 
                       const isImportedSecret = isImportedSecretPresentInEnv(slug, secretKey);
+                      const importedSecret = getImportedSecretByKey(slug, secretKey);
 
                       return (
                         <tr
@@ -189,8 +204,15 @@ export const SecretOverviewTableRow = ({
                             className="flex h-full items-center"
                             style={{ padding: "0.25rem 1rem" }}
                           >
-                            <div title={name} className="flex h-8 w-[8rem] items-center ">
+                            <div title={name} className="flex h-8 w-[8rem] items-center space-x-2 ">
                               <span className="truncate">{name}</span>
+                              {isImportedSecret && (
+                                <Tooltip
+                                  content={`Imported secret from the '${importedSecret?.environmentInfo?.name}' environment`}
+                                >
+                                  <FontAwesomeIcon icon={faFileImport} />
+                                </Tooltip>
+                              )}
                             </div>
                           </td>
                           <td className="col-span-2 h-8 w-full">
@@ -198,8 +220,13 @@ export const SecretOverviewTableRow = ({
                               secretPath={secretPath}
                               isVisible={isSecretVisible}
                               secretName={secretKey}
-                              defaultValue={secret?.value}
+                              defaultValue={
+                                secret?.valueOverride ||
+                                secret?.value ||
+                                importedSecret?.secret?.value
+                              }
                               secretId={secret?.id}
+                              isOverride={Boolean(secret?.valueOverride)}
                               isImportedSecret={isImportedSecret}
                               isCreatable={isCreatable}
                               onSecretDelete={onSecretDelete}

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx

@@ -18,7 +18,7 @@ import {
 } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { useGetUserWsKey, useUpdateSecretV3 } from "@app/hooks/api";
-import { DecryptedSecret } from "@app/hooks/api/types";
+import { DecryptedSecret, SecretType } from "@app/hooks/api/types";
 import { SecretActionType } from "@app/views/SecretMainPage/components/SecretListView/SecretListView.utils";
 
 type Props = {
@@ -37,7 +37,6 @@ type TFormSchema = z.infer<typeof formSchema>;
 function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }: Props) {
   const { currentWorkspace } = useWorkspace();
   const { permission } = useProjectPermission();
-  
 
   const secrets = environments.map((env) => getSecretByKey(env.slug, secretKey));
 
@@ -113,7 +112,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
           secretName: secret.key,
           secretId: secret.id,
           secretValue: secret.value || "",
-          type: "shared",
+          type: SecretType.Shared,
           latestFileKey: decryptFileKey!,
           tags: secret.tags.map((tag) => tag.id),
           secretComment: secret.comment,

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

@@ -13,7 +13,12 @@ import {
 } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteFolder, useDeleteSecretBatch } from "@app/hooks/api";
-import { DecryptedSecret, TDeleteSecretBatchDTO, TSecretFolder } from "@app/hooks/api/types";
+import {
+  DecryptedSecret,
+  SecretType,
+  TDeleteSecretBatchDTO,
+  TSecretFolder
+} from "@app/hooks/api/types";
 
 export enum EntryType {
   FOLDER = "folder",
@@ -100,7 +105,7 @@ export const SelectionPanel = ({
               ...accum,
               {
                 secretName: entry.key,
-                type: "shared" as "shared"
+                type: SecretType.Shared
               }
             ];
           }

frontend/src/views/ShareSecretPage/components/AddShareSecretForm.tsx

@@ -11,7 +11,6 @@ import {
   FormControl,
   Input,
   ModalClose,
-  SecretInput,
   Select,
   SelectItem
 } from "@app/components/v2";
@@ -125,7 +124,7 @@ export const AddShareSecretForm = ({
   };
   return (
     <form className="flex w-full flex-col items-center" onSubmit={handleSubmit(onFormSubmit)}>
-      <div className={`${!inModal && "border border-mineshaft-600 bg-mineshaft-800 p-4"}`}>
+      <div className={`${!inModal && "border border-mineshaft-600 bg-mineshaft-800 rounded-md p-6"}`}>
         <div className="mb-4">
           <Controller
             control={control}
@@ -137,25 +136,25 @@ export const AddShareSecretForm = ({
                 isError={Boolean(error)}
                 errorText={error?.message}
               >
-                <SecretInput
-                  isVisible
+                <textarea
+                  placeholder="Enter sensitive data to share via an encrypted link..."
                   {...field}
-                  containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2 text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 min-h-[70px]"
+                  className="py-1.5 w-full h-40 placeholder:text-mineshaft-400 rounded-md transition-all group-hover:mr-2 text-bunker-300 hover:border-primary-400/30 focus:border-primary-400/50 outline-none border border-mineshaft-600 bg-mineshaft-900 px-2 min-h-[70px]"
                 />
               </FormControl>
             )}
           />
         </div>
         <div className="flex w-full flex-row justify-center">
-          <div className="w-2/7 flex">
+          <div className="hidden sm:block sm:w-2/6 flex">
             <Controller
               control={control}
               name="expiresAfterViews"
-              defaultValue={6}
+              defaultValue={1}
               render={({ field, fieldState: { error } }) => (
                 <FormControl
                   className="mb-4 w-full"
-                  label="Expires After Views"
+                  label="Expires after Views"
                   isError={Boolean(error)}
                   errorText="Please enter a valid number of views"
                 >
@@ -164,16 +163,16 @@ export const AddShareSecretForm = ({
               )}
             />
           </div>
-          <div className="w-1/7 flex items-center justify-center px-2">
+          <div className="hidden sm:flex sm:w-1/7 items-center justify-center px-2 mx-auto">
             <p className="px-4 text-sm text-gray-400">OR</p>
           </div>
-          <div className="w-4/7 flex">
-            <div className="flex w-full">
-              <div className="flex w-2/5 w-full justify-center">
+          <div className="w-full sm:w-3/6 flex justify-end">
+            <div className="flex justify-start">
+              <div className="flex w-full pr-2 justify-center">
                 <Controller
                   control={control}
                   name="expiresInValue"
-                  defaultValue={6}
+                  defaultValue={10}
                   render={({ field, fieldState: { error } }) => (
                     <FormControl
                       label="Expires after Time"
@@ -185,7 +184,7 @@ export const AddShareSecretForm = ({
                   )}
                 />
               </div>
-              <div className="flex w-3/5 w-full justify-center">
+              <div className="flex justify-center">
                 <Controller
                   control={control}
                   name="expiresInUnit"
@@ -196,7 +195,7 @@ export const AddShareSecretForm = ({
                         defaultValue={field.value}
                         {...field}
                         onValueChange={(e) => onChange(e)}
-                        className="w-full"
+                        className="w-full border border-mineshaft-600"
                       >
                         {expirationUnitsAndActions.map(({ unit }) => (
                           <SelectItem value={unit} key={unit}>
@@ -211,7 +210,7 @@ export const AddShareSecretForm = ({
             </div>
           </div>
         </div>
-        <div className={`flex items-center ${!inModal && "justify-left pt-1"}`}>
+        <div className={`flex items-center ${!inModal && "justify-left pt-2"}`}>
           <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
             {inModal ? "Create" : "Share Secret"}
           </Button>

frontend/src/views/ShareSecretPage/components/ViewAndCopySharedSecret.tsx

@@ -15,9 +15,9 @@ export const ViewAndCopySharedSecret = ({
   copyUrlToClipboard: () => void;
 }) => {
   return (
-    <div className={`flex w-full justify-center ${!inModal ? "mx-auto max-w-[40rem]" : ""}`}>
-      <div className={`${!inModal ? "border border-mineshaft-600 bg-mineshaft-800 p-4" : ""}`}>
-        <div className="my-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+    <div className={`flex w-full justify-center px-6 ${!inModal ? "mx-auto max-w-2xl" : ""}`}>
+      <div className={`${!inModal ? "border border-mineshaft-600 bg-mineshaft-800 rounded-md p-4" : ""}`}>
+        <div className="my-2 flex items-center justify-end rounded-md border border-mineshaft-500 bg-mineshaft-700 p-2 text-base text-gray-400">
           <p className="mr-4 break-all">{newSharedSecret}</p>
           <IconButton
             ariaLabel="copy icon"

frontend/src/views/ShareSecretPublicPage/ShareSecretPublicPage.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faArrowRight, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { decryptSymmetric } from "@app/components/utilities/cryptography/crypto";
@@ -54,107 +54,114 @@ export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean
     navigator.clipboard.writeText(decryptedSecret);
     setIsUrlCopied(true);
   };
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["createSharedSecret"] as const);
+  const { popUp, handlePopUpToggle } = usePopUp(["createSharedSecret"] as const);
 
   return (
-    <div className="h-screen bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200">
+    <div className="h-screen dark:[color-scheme:dark] flex flex-col overflow-y-auto bg-gradient-to-tr from-mineshaft-700 to-bunker-800 text-gray-200">
       <Head>
         <title>Secret Shared | Infisical</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-      <div className="h-screen w-full flex-col items-center justify-center dark:[color-scheme:dark]">
-        <div className="mb-4 flex justify-center pt-8 md:pt-16">
-          <Link href="https://infisical.com">
-            <Image
-              src="/images/gradientLogo.svg"
-              height={90}
-              width={120}
-              alt="Infisical logo"
-              className="cursor-pointer"
-            />
-          </Link>
-        </div>
-        <h1 className="mt-6 mb-4 bg-gradient-to-b from-white to-bunker-200 bg-clip-text px-4 text-center text-2xl font-medium text-transparent">
-          {id ? "Someone shared a secret on Infisical with you." : "Share Secrets with Infisical"}
-        </h1>
-        <div className="m-auto mt-8 flex w-full max-w-xl justify-center px-4">
-          {id && (
-            <SecretTable
-              isLoading={isLoading}
-              decryptedSecret={decryptedSecret}
-              isUrlCopied={isUrlCopied}
-              copyUrlToClipboard={copyUrlToClipboard}
-            />
-          )}
-        </div>
-
-        {isNewSession && (
-          <AddShareSecretModal
-            popUp={popUp}
-            handlePopUpToggle={handlePopUpToggle}
-            inModal={false}
-            isPublic
-          />
-        )}
-
-        <div className="m-auto my-6 flex w-full max-w-xl justify-center px-8 px-4 sm:my-8">
-          <div className="w-full border-t border-mineshaft-600" />
-        </div>
-
-        <div className="m-auto max-w-xl px-4">
-          {!isNewSession && (
-            <div className="flex flex-1 flex-col items-center justify-center px-4 pb-4">
-              <Button
-                className="bg-mineshaft-700 text-bunker-200"
-                colorSchema="primary"
-                variant="outline_bg"
-                size="sm"
-                onClick={() => {
-                  handlePopUpOpen("createSharedSecret");
-                }}
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              >
-                Share your own Secret
-              </Button>
-            </div>
-          )}
-          <div className="m-auto mb-8 flex flex max-w-xl flex-col justify-center gap-2 rounded-md border border-primary-500/30 bg-primary/5 p-6">
-            <p className="pb-2 font-semibold text-mineshaft-100 md:pb-4 md:text-xl">
-              Safe, Secure, & Open Source
-            </p>
-            <p className="md:text-md text-sm">
-              Infisical is the #1 {" "}
-              <a
-                href="https://github.com/infisical/infisical"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary underline"
-              >
-                open source
-              </a>{" "}
-              secrets management platform for developers. <br className="hidden md:inline" />
-              <div className="pb-2" />
-              Infisical Secret Sharing uses end-to-end encrypted architecture to ensure that your secrets are truly private, even from our servers.
-            </p>
+      <div className="w-full flex flex-grow items-center justify-center dark:[color-scheme:dark]">
+        <div className="relative">
+          <div className="mb-4 flex justify-center pt-8">
             <Link href="https://infisical.com">
-              <span className="mt-4 cursor-pointer duration-200 hover:text-primary">
-                Learn More <FontAwesomeIcon icon={faArrowRight} />
-              </span>
+              <Image
+                src="/images/gradientLogo.svg"
+                height={90}
+                width={120}
+                alt="Infisical logo"
+                className="cursor-pointer"
+              />
             </Link>
           </div>
+          <div className="w-full flex justify-center">
+            <h1 className={`${id ? "max-w-sm mb-4": "max-w-md mt-4 mb-6"} bg-gradient-to-b from-white to-bunker-200 bg-clip-text px-4 text-center text-3xl font-medium text-transparent`}>
+              {id ? "Someone shared a secret on Infisical with you" : "Share a secret with Infisical"}
+            </h1>
+          </div>
+          <div className="m-auto mt-4 flex w-full max-w-2xl justify-center px-6">
+            {id && (
+              <SecretTable
+                isLoading={isLoading}
+                decryptedSecret={decryptedSecret}
+                isUrlCopied={isUrlCopied}
+                copyUrlToClipboard={copyUrlToClipboard}
+              />
+            )}
+          </div>
+
+          {isNewSession && (
+            <div className="px-0 sm:px-6">
+              <AddShareSecretModal
+                popUp={popUp}
+                handlePopUpToggle={handlePopUpToggle}
+                inModal={false}
+                isPublic
+              />
+            </div>
+          )}
+          {!isNewSession && (
+            <div className="flex flex-1 flex-col items-center justify-center px-6 pt-4">
+              <a
+                href="https://share.infisical.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
+              >
+                <Button
+                  className="bg-mineshaft-700 text-bunker-200 w-full py-3"
+                  colorSchema="primary"
+                  variant="outline_bg"
+                  size="sm"
+                  onClick={() => {}}
+                  rightIcon={<FontAwesomeIcon icon={faArrowRight} className="pl-2" />}
+                >
+                  Share your own Secret
+                </Button>
+              </a>
+            </div>
+          )}
+          <div className="m-auto my-6 flex w-full max-w-xl justify-center px-8 px-4 sm:my-8">
+            <div className="w-full border-t border-mineshaft-600" />
+          </div>
+          <div className="flex flex-col justify-center items-center m-auto max-w-2xl px-6">
+            <div className="m-auto mb-12 flex flex max-w-2xl w-full flex-col justify-center rounded-md border border-primary-500/30 bg-primary/5 p-6 pt-5">
+              <p className="pb-2 font-semibold text-mineshaft-100 md:pb-3 text-lg md:text-xl w-full">
+                Open source <span className="bg-clip-text text-transparent bg-gradient-to-tr from-yellow-500 to-primary-500">secret management</span> for developers
+              </p>
+              <div className="flex flex-col sm:flex-row gap-x-4">
+                <p className="md:text-md text-md">
+                  <a
+                    href="https://github.com/infisical/infisical"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-clip-text text-transparent bg-gradient-to-tr from-yellow-500 to-primary-500 text-bold"
+                  >
+                    Infisical
+                  </a>{" "} is the all-in-one secret management platform to securely manage secrets, configs, and certificates across your team and infrastructure.
+                </p>
+                <Link href="https://infisical.com">
+                  <span className="mt-4 border border-mineshaft-400/40 w-[17.5rem] h-min py-2 px-3 rounded-md bg-mineshaft-600 cursor-pointer duration-200 hover:text-white hover:border-primary/60 hover:bg-primary/20">
+                    Try Infisical <FontAwesomeIcon icon={faArrowRight} className="pl-1"/>
+                  </span>
+                </Link>
+              </div>
+            </div>
+          </div>
+          <AddShareSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} isPublic inModal />
         </div>
-        <div className="bottom-0 flex w-full items-center justify-center bg-mineshaft-600 p-2 sm:absolute">
-          <p className="text-center text-sm text-mineshaft-300">
-            © 2024{" "}
-            <a className="text-primary" href="https://infisical.com">
-              Infisical
-            </a>
-            . All rights reserved.
-            <br />
-            156 2nd st, 3rd Floor, San Francisco, California, 94105, United States. 🇺🇸
-          </p>
-        </div>
-        <AddShareSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} isPublic inModal />
+      </div>
+      <div className="mt-auto flex w-full items-center justify-center bg-mineshaft-600 p-2">
+        <p className="text-center text-sm text-mineshaft-300">
+          © 2024{" "}
+          <a className="text-primary" href="https://infisical.com">
+            Infisical
+          </a>
+          . All rights reserved.
+          <br />
+          156 2nd st, 3rd Floor, San Francisco, California, 94105, United States. 🇺🇸
+        </p>
       </div>
     </div>
   );

frontend/src/views/ShareSecretPublicPage/components/SecretTable.tsx

@@ -16,7 +16,7 @@ export const SecretTable = ({
   isUrlCopied,
   copyUrlToClipboard
 }: Props) => (
-  <div className="flex w-full items-center justify-center rounded border border-solid border-mineshaft-700 bg-mineshaft-800 p-2">
+  <div className="flex w-full items-center justify-center rounded-md border border-solid border-mineshaft-700 bg-mineshaft-800 p-2">
     {isLoading && <div className="bg-mineshaft-800 text-center text-bunker-400">Loading...</div>}
     {!isLoading && !decryptedSecret && (
       <Tr>
@@ -37,7 +37,7 @@ export const SecretTable = ({
           colorSchema="primary"
           ariaLabel="copy to clipboard"
           onClick={copyUrlToClipboard}
-          className="mx-1 flex max-h-8 items-center rounded"
+          className="mx-1 flex max-h-8 items-center rounded absolute top-1 sm:top-2 right-0 sm:right-5"
           size="xs"
         >
           <FontAwesomeIcon className="pr-2" icon={isUrlCopied ? faCheck : faCopy} /> Copy