diff --git a/frontend/public/images/integrations/Agent.png b/frontend/public/images/integrations/Agent.png
new file mode 100644
index 000000000..662c1b273
Binary files /dev/null and b/frontend/public/images/integrations/Agent.png differ
diff --git a/frontend/public/images/integrations/Ansible.png b/frontend/public/images/integrations/Ansible.png
new file mode 100644
index 000000000..925e48ca6
Binary files /dev/null and b/frontend/public/images/integrations/Ansible.png differ
diff --git a/frontend/public/images/integrations/ECS.png b/frontend/public/images/integrations/ECS.png
new file mode 100644
index 000000000..92e0d23ca
Binary files /dev/null and b/frontend/public/images/integrations/ECS.png differ
diff --git a/frontend/public/images/integrations/Jenkins.png b/frontend/public/images/integrations/Jenkins.png
new file mode 100644
index 000000000..9df069a18
Binary files /dev/null and b/frontend/public/images/integrations/Jenkins.png differ
diff --git a/frontend/public/json/frameworkIntegrations.json b/frontend/public/json/frameworkIntegrations.json
index 1a6ff94f2..c96c0a0b4 100644
--- a/frontend/public/json/frameworkIntegrations.json
+++ b/frontend/public/json/frameworkIntegrations.json
@@ -1,28 +1,4 @@
 [
-    {
-        "name": "Docker",
-        "slug": "docker",
-        "image": "Docker",
-        "docsLink": "https://infisical.com/docs/integrations/platforms/docker"
-    },
-    {
-        "name": "Docker Compose",
-        "slug": "docker-compose",
-        "image": "Docker Compose",
-        "docsLink": "https://infisical.com/docs/integrations/platforms/docker-compose"
-    },
-    {
-        "name": "Kubernetes",
-        "slug": "kubernetes",
-        "image": "Kubernetes",
-        "docsLink": "https://infisical.com/docs/integrations/platforms/kubernetes"
-    },
-    {
-        "name": "Terraform",
-        "slug": "terraform",
-        "image": "Terraform",
-        "docsLink": "https://infisical.com/docs/integrations/frameworks/terraform"
-    },
     {
         "name": "React",
         "slug": "react",
diff --git a/frontend/public/json/infrastructureIntegrations.json b/frontend/public/json/infrastructureIntegrations.json
new file mode 100644
index 000000000..657cd17eb
--- /dev/null
+++ b/frontend/public/json/infrastructureIntegrations.json
@@ -0,0 +1,50 @@
+[
+    {
+        "name": "Docker",
+        "slug": "docker",
+        "image": "Docker",
+        "docsLink": "https://infisical.com/docs/integrations/platforms/docker"
+    },
+    {
+        "name": "Docker Compose",
+        "slug": "docker-compose",
+        "image": "Docker Compose",
+        "docsLink": "https://infisical.com/docs/integrations/platforms/docker-compose"
+    },
+    {
+        "name": "Kubernetes",
+        "slug": "kubernetes",
+        "image": "Kubernetes",
+        "docsLink": "https://infisical.com/docs/integrations/platforms/kubernetes"
+    },
+    {
+        "name": "Terraform",
+        "slug": "terraform",
+        "image": "Terraform",
+        "docsLink": "https://infisical.com/docs/integrations/frameworks/terraform"
+    },
+    {
+        "name": "Jenkins",
+        "slug": "jenkins",
+        "image": "Jenkins",
+        "docsLink": "https://infisical.com/docs/integrations/cicd/jenkins"
+    },
+    {
+        "name": "Infisical Agent",
+        "slug": "agent",
+        "image": "Agent",
+        "docsLink": "https://infisical.com/docs/integrations/platforms/infisical-agent"
+    },
+    {
+        "name": "Amazon ECS",
+        "slug": "ecs",
+        "image": "ECS",
+        "docsLink": "https://infisical.com/docs/integrations/platforms/ecs-with-agent"
+    },
+    {
+        "name": "Ansible",
+        "slug": "ansible",
+        "image": "Ansible",
+        "docsLink": "https://infisical.com/docs/integrations/platforms/ansible"
+    }
+]
\ No newline at end of file
diff --git a/frontend/public/locales/en/translations.json b/frontend/public/locales/en/translations.json
index 8b0487292..b1465f04d 100644
--- a/frontend/public/locales/en/translations.json
+++ b/frontend/public/locales/en/translations.json
@@ -120,7 +120,7 @@
     "available": "Platform & Cloud Integrations",
     "available-text1": "Click on the integration you want to connect. This will let your environment variables flow automatically into selected third-party services.",
     "available-text2": "Note: during an integration with Heroku, for security reasons, it is impossible to maintain end-to-end encryption. In theory, this lets Infisical decrypt yor environment variables. In practice, we can assure you that this will never be done, and it allows us to protect your secrets from bad actors online. The core Infisical service will always stay end-to-end encrypted. With any questions, reach out support@infisical.com.",
-    "cloud-integrations": "Cloud Integrations",
+    "cloud-integrations": "Native Integrations",
     "framework-integrations": "Framework Integrations",
     "click-to-start": "Click on an integration to begin syncing secrets to it.",
     "click-to-setup": "Click on a framework to get the setup instructions.",
diff --git a/frontend/src/pages/integrations/[id].tsx b/frontend/src/pages/integrations/[id].tsx
index 143e3ad2f..8cc1baca3 100644
--- a/frontend/src/pages/integrations/[id].tsx
+++ b/frontend/src/pages/integrations/[id].tsx
@@ -1,14 +1,16 @@
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
 import frameworkIntegrationOptions from "public/json/frameworkIntegrations.json";
+import infrastructureIntegrationOptions from "public/json/infrastructureIntegrations.json";
 
 import { IntegrationsPage } from "@app/views/IntegrationsPage";
 
 type Props = {
   frameworkIntegrations: typeof frameworkIntegrationOptions;
+  infrastructureIntegrations: typeof infrastructureIntegrationOptions; 
 };
 
-const Integration = ({ frameworkIntegrations }: Props) => {
+const Integration = ({ frameworkIntegrations, infrastructureIntegrations }: Props) => {
   const { t } = useTranslation();
 
   return (
@@ -20,7 +22,7 @@ const Integration = ({ frameworkIntegrations }: Props) => {
         <meta property="og:title" content="Manage your .env files in seconds" />
         <meta name="og:description" content={t("integrations.description") as string} />
       </Head>
-      <IntegrationsPage frameworkIntegrations={frameworkIntegrations} />
+      <IntegrationsPage frameworkIntegrations={frameworkIntegrations} infrastructureIntegrations={infrastructureIntegrations} />
     </>
   );
 };
@@ -28,7 +30,8 @@ const Integration = ({ frameworkIntegrations }: Props) => {
 export const getStaticProps = () => {
   return {
     props: {
-      frameworkIntegrations: frameworkIntegrationOptions
+      frameworkIntegrations: frameworkIntegrationOptions,
+      infrastructureIntegrations: infrastructureIntegrationOptions
     }
   };
 };
diff --git a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
index 9f51ac137..73c443ca4 100644
--- a/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
+++ b/frontend/src/views/IntegrationsPage/IntegrationsPage.tsx
@@ -21,15 +21,17 @@ import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
 import { CloudIntegrationSection } from "./components/CloudIntegrationSection";
 import { FrameworkIntegrationSection } from "./components/FrameworkIntegrationSection";
+import { InfrastructureIntegrationSection } from "./components/InfrastructureIntegrationSection/InfrastructureIntegrationSection";
 import { IntegrationsSection } from "./components/IntegrationsSection";
 import { generateBotKey, redirectForProviderAuth } from "./IntegrationPage.utils";
 
 type Props = {
   frameworkIntegrations: Array<{ name: string; slug: string; image: string; docsLink: string }>;
+  infrastructureIntegrations: Array<{ name: string; slug: string; image: string; docsLink: string }>;
 };
 
 export const IntegrationsPage = withProjectPermission(
-  ({ frameworkIntegrations }: Props) => {
+  ({ frameworkIntegrations, infrastructureIntegrations }: Props) => {
     const { t } = useTranslation();
     
 
@@ -228,6 +230,7 @@ export const IntegrationsPage = withProjectPermission(
           </ModalContent>
         </Modal>
         <FrameworkIntegrationSection frameworks={frameworkIntegrations} />
+        <InfrastructureIntegrationSection integrations={infrastructureIntegrations} />
       </div>
     );
   },
diff --git a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
index d77b976bc..3b1df9bdd 100644
--- a/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
+++ b/frontend/src/views/IntegrationsPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx
@@ -1,4 +1,7 @@
 import { useTranslation } from "react-i18next";
+import { faKeyboard } from "@fortawesome/free-regular-svg-icons";
+import { faComputer } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props = {
   frameworks: Array<{
@@ -50,6 +53,36 @@ export const FrameworkIntegrationSection = ({ frameworks }: Props) => {
             </div>
           </a>
         ))}
+        <a
+          key="framework-integration-more"
+          href="https://infisical.com/docs/cli/commands/run"
+          rel="noopener noreferrer"
+          target="_blank"
+          className="relative flex h-32 cursor-pointer flex-row items-center justify-center rounded-md p-0.5 duration-200"
+        >
+          <div
+            className="flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 font-semibold text-gray-300 duration-200 hover:bg-mineshaft-700 group-hover:text-gray-200 px-1 text-xl w-full max-w-xs text-center"
+          >
+            <FontAwesomeIcon className="text-5xl mb-2 text-white/90" icon={faKeyboard} />
+            <div className="h-2" />
+            CLI
+          </div>
+        </a>
+        <a
+          key="framework-integration-more"
+          href="https://infisical.com/docs/sdks/overview"
+          rel="noopener noreferrer"
+          target="_blank"
+          className="relative flex h-32 cursor-pointer flex-row items-center justify-center rounded-md p-0.5 duration-200"
+        >
+          <div
+            className="flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 font-semibold text-gray-300 duration-200 hover:bg-mineshaft-700 group-hover:text-gray-200 px-1 text-xl w-full max-w-xs text-center"
+          >
+            <FontAwesomeIcon className="text-5xl mb-1 text-white/90" icon={faComputer} />
+            <div className="h-2" />
+            SDKs
+          </div>
+        </a>
       </div>
     </>
   );
diff --git a/frontend/src/views/IntegrationsPage/components/InfrastructureIntegrationSection/InfrastructureIntegrationSection.tsx b/frontend/src/views/IntegrationsPage/components/InfrastructureIntegrationSection/InfrastructureIntegrationSection.tsx
new file mode 100644
index 000000000..08652ff66
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/InfrastructureIntegrationSection/InfrastructureIntegrationSection.tsx
@@ -0,0 +1,50 @@
+type Props = {
+  integrations: Array<{
+    name: string;
+    image: string;
+    slug: string;
+    docsLink: string;
+  }>;
+};
+
+export const InfrastructureIntegrationSection = ({ integrations }: Props) => {
+  const sortedIntegrations = integrations.sort((a, b) => a.name.localeCompare(b.name));
+
+  return (
+    <>
+      <div className="mx-4 mt-12 mb-4 flex flex-col items-start justify-between px-2 text-xl">
+        <h1 className="text-3xl font-semibold">Infrastructure Integrations</h1>
+        <p className="text-base text-gray-400">Click on of the integration to read the documentation.</p>
+      </div>
+      <div className="mx-6 grid grid-cols-2 gap-4 lg:grid-cols-3 2xl:grid-cols-4">
+        {sortedIntegrations.map((integration) => (
+          <a
+            key={`framework-integration-${integration.slug}`}
+            href={integration.docsLink}
+            rel="noopener noreferrer"
+            target="_blank"
+            className="relative w-full flex h-32 cursor-pointer flex-row items-center justify-center rounded-md p-0.5 duration-200"
+          >
+            <div
+              onKeyDown={() => null}
+              role="button"
+              tabIndex={0}
+              className="group relative w-full cursor-pointer duration-200 hover:bg-mineshaft-700 flex h-32 flex-row items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+              key={integration?.name}
+            >
+              <img
+                src={`/images/integrations/${integration.image}.png`}
+                height={integration?.name ? 60 : 90}
+                width={integration?.name ? 60 : 90}
+                alt="integration logo"
+              />
+              <div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
+              {integration?.name && integration.name}
+              </div>
+            </div>
+          </a>
+        ))}
+      </div>
+    </>
+  );
+};
diff --git a/frontend/src/views/IntegrationsPage/components/InfrastructureIntegrationSection/index.tsx b/frontend/src/views/IntegrationsPage/components/InfrastructureIntegrationSection/index.tsx
new file mode 100644
index 000000000..8ca5a43c7
--- /dev/null
+++ b/frontend/src/views/IntegrationsPage/components/InfrastructureIntegrationSection/index.tsx
@@ -0,0 +1 @@
+export { InfrastructureIntegrationSection } from "./InfrastructureIntegrationSection";