diff --git a/i18n/en/code.json b/i18n/en/code.json
index eaa76aa7..61ccaf30 100644
--- a/i18n/en/code.json
+++ b/i18n/en/code.json
@@ -494,6 +494,9 @@
   "Trusted By": {
     "message": "Trusted By"
   },
+  "Integrate with Your Favorite Tools": {
+    "message": "Integrate with Your Favorite Tools"
+  },
   "KCL is in": {
     "message": "KCL is in"
   },
diff --git a/i18n/zh-CN/code.json b/i18n/zh-CN/code.json
index 6854f5d2..9dd514e2 100644
--- a/i18n/zh-CN/code.json
+++ b/i18n/zh-CN/code.json
@@ -323,6 +323,9 @@
   "Trusted By": {
     "message": "工程师信赖的技术产品"
   },
+  "Integrate with Your Favorite Tools": {
+    "message": "与您最喜欢的工具集成"
+  },
   "KCL is in": {
     "message": "KCL 已经加入"
   },
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 95bef8d1..092523cd 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -162,6 +162,23 @@
   }
 }
 
+.integrationLogoWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 120px;
+}
+
+.integrationLogoWrapper img {
+  height: 80%;
+}
+
+@media screen and (max-width: 768px) {
+  .integrationLogoWrapper {
+    height: 80px;
+  }
+}
+
 .cncfLogo {
   height: 96px;
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d4e55375..ccae54de 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -199,6 +199,70 @@ function ExampleSection() {
   );
 }
 
+function IntegrationSection() {
+  const integrations = [
+    {
+      name: "Kubernetes",
+      img: "/img/logos/k8s.svg",
+    },
+    {
+      name: "Kustomize",
+      img: "/img/logos/kustomize.png",
+    },
+    {
+      name: "Helm",
+      img: "/img/logos/helm.png",
+    },
+    {
+      name: "Helmfile",
+      img: "/img/logos/helmfile.png",
+    },
+    {
+      name: "KPT",
+      img: "/img/logos/kpt.png",
+    },
+    {
+      name: "Argo",
+      img: "/img/logos/argo.png",
+    },
+    {
+      name: "CrossPlane",
+      img: "/img/logos/crossplane.png",
+    },
+    {
+      name: "Terraform",
+      img: "/img/logos/terraform.png",
+    },
+  ];
+
+  return (
+    <section>
+      <div className="container">
+        <h2
+          className={clsx("text--center")}
+          style={{ color: "var(--ifm-color-primary)" }}
+        >
+          <Translate>Integrate with Your Favorite Tools</Translate>
+        </h2>
+        <div className={styles.whiteboard}>
+          <div className="row">
+            {integrations.map((w) => (
+              <div
+                key={w.name}
+                className={clsx("col col--3", styles.whiteboardCol)}
+              >
+                <a className={styles.integrationLogoWrapper} target="_blank">
+                  <img src={useBaseUrl(w.img)} alt={w.name} />
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function PartnerSection() {
   const partners = [
     {
@@ -323,6 +387,8 @@ export default function Home(): JSX.Element {
       <BreakSection />
       <ExampleSection />
       <BreakSection />
+      <IntegrationSection />
+      <BreakSection />
       <PartnerSection />
       <BreakSection />
       <CNCFSection />
diff --git a/static/img/logos/argo.png b/static/img/logos/argo.png
new file mode 100644
index 00000000..fc22b5d3
Binary files /dev/null and b/static/img/logos/argo.png differ
diff --git a/static/img/logos/crossplane.png b/static/img/logos/crossplane.png
new file mode 100644
index 00000000..c0d631e5
Binary files /dev/null and b/static/img/logos/crossplane.png differ
diff --git a/static/img/logos/helm.png b/static/img/logos/helm.png
new file mode 100644
index 00000000..c7e08736
Binary files /dev/null and b/static/img/logos/helm.png differ
diff --git a/static/img/logos/helmfile.png b/static/img/logos/helmfile.png
new file mode 100644
index 00000000..34e1002f
Binary files /dev/null and b/static/img/logos/helmfile.png differ
diff --git a/static/img/logos/kpt.png b/static/img/logos/kpt.png
new file mode 100644
index 00000000..c6531464
Binary files /dev/null and b/static/img/logos/kpt.png differ
diff --git a/static/img/logos/kustomize.png b/static/img/logos/kustomize.png
new file mode 100644
index 00000000..fdab57fc
Binary files /dev/null and b/static/img/logos/kustomize.png differ
diff --git a/static/img/logos/terraform.png b/static/img/logos/terraform.png
new file mode 100644
index 00000000..4223b5ce
Binary files /dev/null and b/static/img/logos/terraform.png differ