Fixed UI for the AWS integrations

backend/src/integrations/sync.ts

@@ -783,12 +783,12 @@ const syncSecretsAWSParameterStore = async ({
 };
 
 /**
- * Sync/push [secrets] to AWS secret manager
+ * Sync/push [secrets] to AWS Secrets Manager
  * @param {Object} obj
  * @param {IIntegration} obj.integration - integration details
  * @param {Object} obj.secrets - secrets to push to integration (object where keys are secret keys and values are secret values)
- * @param {String} obj.accessId - access id for AWS secret manager integration
+ * @param {String} obj.accessId - access id for AWS Secrets Manager integration
- * @param {String} obj.accessToken - access token for AWS secret manager integration
+ * @param {String} obj.accessToken - access token for AWS Secrets Manager integration
  */
 const syncSecretsAWSSecretManager = async ({
   integration,

backend/src/variables/integration.ts

@@ -192,7 +192,7 @@ export const getIntegrationOptions = async () => {
             docsLink: "",
         },
         {
-            name: "AWS Secret Manager",
+            name: "AWS Secrets Manager",
             slug: "aws-secret-manager",
             image: "Amazon Web Services.png",
             isAvailable: true,

docs/changelog/overview.mdx

@@ -76,7 +76,7 @@ The changelog below reflects new product developments and updates on a monthly b
 - Added secret backups support for the CLI; it now fetches and caches secrets locally to be used in the event of future failed fetch.
 - Added support for comparing secret values across environments on each secret.
 - Added native AWS Parameter Store integration.
-- Added native AWS Secret Manager integration.
+- Added native AWS Secrets Manager integration.
 - Added native GitLab integration.
 - Added native CircleCI integration.
 - Added native Travis CI integration.

docs/integrations/cloud/aws-secret-manager.mdx

@@ -1,6 +1,6 @@
 ---
-title: "AWS Secret Manager"
+title: "AWS Secrets Manager"
-description: "How to sync secrets from Infisical to AWS Secret Manager"
+description: "How to sync secrets from Infisical to AWS Secrets Manager"
 ---
 
 Prerequisites:
@@ -8,15 +8,15 @@ Prerequisites:
 - Set up and add envars to [Infisical Cloud](https://app.infisical.com)
 - Set up AWS and have/create an IAM user
 
-## Grant the IAM user permissions to access AWS Secret Manager
+## Grant the IAM user permissions to access AWS Secrets Manager
 
-Navigate to your IAM user permissions and add a permission policy to grant access to AWS Secret Manager.
+Navigate to your IAM user permissions and add a permission policy to grant access to AWS Secrets Manager.
 
 ![integration IAM 1](../../images/integrations-aws-iam-1.png)
 ![integration IAM 2](../../images/integrations-aws-secret-manager-iam-2.png)
 ![integrations IAM 3](../../images/integrations-aws-secret-manager-iam-3.png)
 
-For better security, here's a custom policy containing the minimum permissions required by Infisical to sync secrets to AWS Secret Manager for the IAM user that you can use:
+For better security, here's a custom policy containing the minimum permissions required by Infisical to sync secrets to AWS Secrets Manager for the IAM user that you can use:
 
 ```json
 {
@@ -40,7 +40,7 @@ For better security, here's a custom policy containing the minimum permissions r
 
 ![integrations](../../images/integrations.png)
 
-## Authorize Infisical for AWS Secret Manager
+## Authorize Infisical for AWS Secrets Manager
 
 Obtain a AWS access key ID and secret access key for your IAM user in IAM > Users > User > Security credentials > Access keys
 
@@ -48,7 +48,7 @@ Obtain a AWS access key ID and secret access key for your IAM user in IAM > User
 ![access key 2](../../images/integrations-aws-access-key-2.png)
 ![access key 3](../../images/integrations-aws-access-key-3.png)
 
-Press on the AWS Secret Manager tile and input your AWS access key ID and secret access key from the previous step.
+Press on the AWS Secrets Manager tile and input your AWS access key ID and secret access key from the previous step.
 
 ![integration auth](../../images/integrations-aws-secret-manager-auth.png)
 
@@ -61,12 +61,12 @@ Press on the AWS Secret Manager tile and input your AWS access key ID and secret
 
 ## Start integration
 
-Select which Infisical environment secrets you want to sync to which AWS Secret Manager region and under which secret name. Then, press create integration to start syncing secrets to AWS Secret Manager.
+Select which Infisical environment secrets you want to sync to which AWS Secrets Manager region and under which secret name. Then, press create integration to start syncing secrets to AWS Secrets Manager.
 
 ![integration create](../../images/integrations-aws-secret-manager-create.png)
 
 <Info>
-  Infisical currently syncs environment variables to AWS Secret Manager as
+  Infisical currently syncs environment variables to AWS Secrets Manager as
   key-value pairs under one secret. We're actively exploring ways to help users
   group environment variable key-pairs under multiple secrets for greater
   control.

docs/integrations/overview.mdx

@@ -29,7 +29,7 @@ Missing an integration? [Throw in a request](https://github.com/Infisical/infisi
 | [Checkly](/integrations/cloud/checkly)                         | Cloud                  | Available   |
 | [HashiCorp Vault](/integrations/cloud/hashicorp-vault)         | Cloud                  | Available   |
 | [AWS Parameter Store](/integrations/cloud/aws-parameter-store) | Cloud                  | Available   |
-| [AWS Secret Manager](/integrations/cloud/aws-secret-manager)   | Cloud                  | Available   |
+| [AWS Secrets Manager](/integrations/cloud/aws-secret-manager)   | Cloud                  | Available   |
 | [Azure Key Vault](/integrations/cloud/azure-key-vault)         | Cloud                  | Available   |
 | [GCP Secret Manager](/integrations/cloud/gcp-secret-manager)      | Cloud                  | Available   |
 | [Windmill](/integrations/cloud/windmill)                       | Cloud                  | Available   |

frontend/public/data/frequentConstants.ts

@@ -5,7 +5,7 @@ interface Mapping {
 const integrationSlugNameMapping: Mapping = {
   "azure-key-vault": "Azure Key Vault",
   "aws-parameter-store": "AWS Parameter Store",
-  "aws-secret-manager": "AWS Secret Manager",
+  "aws-secret-manager": "AWS Secrets Manager",
   "heroku": "Heroku",
   "vercel": "Vercel",
   "netlify": "Netlify",

frontend/src/pages/integrations/aws-parameter-store/authorize.tsx

@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   useSaveIntegrationAccessToken
@@ -56,12 +61,41 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
+      <Head>
-        <CardTitle className="mb-4 text-center">AWS Parameter Store Integration</CardTitle>
+        <title>Authorize AWS Parameter Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Parameter Store Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-parameter-store" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
         <FormControl
           label="Access Key ID"
           errorText={accessKeyErrorText}
           isError={accessKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input 
             placeholder="" 
@@ -73,6 +107,7 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
           label="Secret Access Key"
           errorText={accessSecretKeyErrorText}
           isError={accessSecretKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder=""
@@ -82,8 +117,9 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
+          colorSchema="primary"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
           Connect to AWS Parameter Store

frontend/src/pages/integrations/aws-parameter-store/create.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -57,7 +62,7 @@ export default function AWSParameterStoreCreateIntegrationPage() {
   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: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
@@ -113,10 +118,38 @@ export default function AWSParameterStoreCreateIntegrationPage() {
   };
 
   return integrationAuth && workspace && selectedSourceEnvironment ? (
-    <div className="flex h-full w-full items-center justify-center">
+    <div className="flex flex-col h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
+      <Head>
-        <CardTitle className="text-center">AWS Parameter Store Integration</CardTitle>
+        <title>Set Up AWS Parameter Integration</title>
-        <FormControl label="Project Environment" className="mt-4">
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment in Infisical you want to sync to secerts in AWS Parameter Store."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Parameter Store Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-parameter-store" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -132,14 +165,14 @@ export default function AWSParameterStoreCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="AWS Region">
+        <FormControl label="AWS Region" className="px-6">
           <Select
             value={selectedAWSRegion}
             onValueChange={(val) => setSelectedAWSRegion(val)}
@@ -152,7 +185,7 @@ export default function AWSParameterStoreCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Path" errorText={pathErrorText} isError={pathErrorText !== "" ?? false}>
+        <FormControl label="Path" errorText={pathErrorText} isError={pathErrorText !== "" ?? false} className="px-6">
           <Input
             placeholder={`/${workspace.name
               .toLowerCase()
@@ -164,15 +197,39 @@ export default function AWSParameterStoreCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in AWS Parameter Store with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up AWS Parameter Store Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isintegrationAuthLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:support@infisical.com"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }
 

frontend/src/pages/integrations/aws-secret-manager/authorize.tsx

@@ -1,5 +1,10 @@
 import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useSaveIntegrationAccessToken } from "@app/hooks/api";
 
@@ -54,12 +59,41 @@ export default function AWSSecretManagerCreateIntegrationPage() {
 
   return (
     <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
+      <Head>
-        <CardTitle className="mb-4 text-center">AWS Secret Manager Integration</CardTitle>
+        <title>Authorize AWS Secrets Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Secrets Manager Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-secret-manager" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
         <FormControl
           label="Access Key ID"
           errorText={accessKeyErrorText}
           isError={accessKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input placeholder="" value={accessKey} onChange={(e) => setAccessKey(e.target.value)} />
         </FormControl>
@@ -67,6 +101,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
           label="Secret Access Key"
           errorText={accessSecretKeyErrorText}
           isError={accessSecretKeyErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder=""
@@ -76,11 +111,12 @@ export default function AWSSecretManagerCreateIntegrationPage() {
         </FormControl>
         <Button
           onClick={handleButtonClick}
-          color="mineshaft"
+          colorSchema="primary"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6 w-min"
           isLoading={isLoading}
         >
-          Connect to AWS Secret Manager
+          Connect to AWS Secrets Manager
         </Button>
       </Card>
     </div>

frontend/src/pages/integrations/aws-secret-manager/create.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import queryString from "query-string";
 
 import {
@@ -57,7 +62,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
   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: integrationAuth, isLoading: isintegrationAuthLoading } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
 
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
@@ -112,10 +117,38 @@ export default function AWSSecretManagerCreateIntegrationPage() {
   };
 
   return integrationAuth && workspace && selectedSourceEnvironment ? (
-    <div className="flex h-full w-full items-center justify-center">
+    <div className="flex flex-col h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
+      <Head>
-        <CardTitle className="text-center">AWS Secret Manager Integration</CardTitle>
+        <title>Set Up AWS Secrets Manager Integration</title>
-        <FormControl label="Project Environment" className="mt-4">
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle 
+          className="text-left px-6 text-xl" 
+          subTitle="Choose which environment in Infisical you want to sync to secerts in AWS Secrets Manager."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
+            </div>
+            <span className="ml-1.5">AWS Secrets Manager Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-secret-manager" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5"/> 
+                  Docs
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-1.5 text-xxs mb-[0.07rem]"/> 
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <FormControl label="Project Environment" className="px-6">
           <Select
             value={selectedSourceEnvironment}
             onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -131,14 +164,14 @@ export default function AWSSecretManagerCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
-        <FormControl label="Secrets Path">
+        <FormControl label="Secrets Path" className="px-6">
           <Input
             value={secretPath}
             onChange={(evt) => setSecretPath(evt.target.value)}
             placeholder="Provide a path, default is /"
           />
         </FormControl>
-        <FormControl label="AWS Region">
+        <FormControl label="AWS Region" className="px-6">
           <Select
             value={selectedAWSRegion}
             onValueChange={(val) => setSelectedAWSRegion(val)}
@@ -155,6 +188,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
           label="AWS SM Secret Name"
           errorText={targetSecretNameErrorText}
           isError={targetSecretNameErrorText !== "" ?? false}
+          className="px-6"
         >
           <Input
             placeholder={`${workspace.name
@@ -167,15 +201,39 @@ export default function AWSSecretManagerCreateIntegrationPage() {
         <Button
           onClick={handleButtonClick}
           color="mineshaft"
-          className="mt-4"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
           isLoading={isLoading}
         >
           Create Integration
         </Button>
       </Card>
+      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
+      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
+        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
+        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in AWS Secrets Manager with secrets from Infisical.</span>
+      </div>
     </div>
   ) : (
-    <div />
+    <div className="flex justify-center items-center w-full h-full">
+      <Head>
+        <title>Set Up AWS Secrets Manager Integration</title>
+        <link rel='icon' href='/infisical.ico' />
+      </Head>
+      {isintegrationAuthLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+        <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
+        <p>
+          Something went wrong. Please contact <a
+            className="inline underline underline-offset-4 decoration-primary-500 opacity-80 hover:opacity-100 text-mineshaft-100 duration-200 cursor-pointer"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:support@infisical.com"
+          >
+            support@infisical.com
+          </a> if the issue persists.
+        </p>
+      </div>}
+    </div>
   );
 }