diff --git a/conf.yaml b/conf.yaml
index 8fa6c6499ece4..8203396eefec8 100644
--- a/conf.yaml
+++ b/conf.yaml
@@ -55,6 +55,7 @@ repos:
     guide:                https://github.com/elastic/elasticsearch-definitive-guide.git
     guide-cn:             https://github.com/elasticsearch-cn/elasticsearch-definitive-guide.git
     ingest-docs:          https://github.com/elastic/ingest-docs.git
+    integration-docs:     https://github.com/elastic/integration-docs.git
     kibana:               https://github.com/elastic/kibana.git
     kibana-cn:            https://github.com/elasticsearch-cn/kibana.git
     logstash:             https://github.com/elastic/logstash.git
@@ -125,6 +126,22 @@ variables:
 
 toc_extra: extra/docs_landing.html
 contents:
+    -   title:          Integrations
+        sections:
+          - title:      Integrations
+            prefix:     en/integrations
+            current:    main
+            branches:   [ main ]
+            live:       [ main ]
+            index:      dist/index.asciidoc
+            chunk:      2
+            private:    1
+            tags:       Integrations/Reference
+            subject:    Integrations
+            sources:
+              -
+                repo:   integration-docs
+                path:   dist
     -   title:      Serverless
         sections:
           - title:      Serverless
diff --git a/doc_build_aliases.sh b/doc_build_aliases.sh
index 36514b7b3fe15..a274f411b34ca 100644
--- a/doc_build_aliases.sh
+++ b/doc_build_aliases.sh
@@ -12,6 +12,9 @@
 # Serverless
 alias docbldserverless='$GIT_HOME/docs/build_docs --doc $GIT_HOME/docs-content/serverless/index.asciidoc --chunk 5 --resource $GIT_HOME/observability-docs/docs/en/serverless --resource $GIT_HOME/security-docs/docs/serverless --resource $GIT_HOME/docs-content/serverless'
 
+# Integrations
+alias docbldintegration='$GIT_HOME/docs/build_docs --doc $GIT_HOME/integration-docs/dist/index.asciidoc --chunk 2'
+
 # Elasticsearch
 alias docbldesx='$GIT_HOME/docs/build_docs --doc $GIT_HOME/elasticsearch/docs/reference/index.asciidoc --chunk 1'
 
diff --git a/resources/web/style/base_styles.pcss b/resources/web/style/base_styles.pcss
index 0be5cf2f3ff91..25a72887587d4 100644
--- a/resources/web/style/base_styles.pcss
+++ b/resources/web/style/base_styles.pcss
@@ -44,6 +44,36 @@ html {
 
   details {
     margin-bottom: 1.15em;
+    border: 1px #D3DAE6 solid;
+    border-radius: 3px;
+    summary {
+      list-style-type: none;
+      display: inline-block;
+      width: 100%;
+      padding: 10px;
+      &:before {
+        content: url('data:image/svg+xml;utf8,');
+        display: inline-block;
+        transform: translate(0px, 3.5px) rotate(0deg);
+        transition: .1s ease-in-out;
+        margin-right: 8px;
+      }
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+    .content {
+      padding: 5px 20px 0px 36px;
+    }
+  }
+
+  details[open] {
+    summary {
+      &:before {
+        transform: translate(-3.5px, 0px) rotate(90deg);
+        transition: .1s ease-in-out;
+      }
+    }
   }
 
   .container-fluid {
diff --git a/resources/web/style/child_attributes.pcss b/resources/web/style/child_attributes.pcss
deleted file mode 100644
index 1c00830228434..0000000000000
--- a/resources/web/style/child_attributes.pcss
+++ /dev/null
@@ -1,9 +0,0 @@
-#guide .child_attributes {
-
-  details > div {
-    border: 1px solid #A9A9A9;
-    border-radius: 10px;
-    padding: 15px 10px 0;
-    margin: 10px 5px 20px;
-  }
-}
diff --git a/resources/web/style/icons.pcss b/resources/web/style/icons.pcss
new file mode 100644
index 0000000000000..3426f18767f17
--- /dev/null
+++ b/resources/web/style/icons.pcss
@@ -0,0 +1,14 @@
+#guide {
+  .eui-icon {
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    background-size: contain;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    &.icon-bug { background-image: inline("img/icons/bug.svg"); }
+    &.icon-checkInCircleFilled { background-image: inline("img/icons/checkInCircleFilled.svg"); }
+    &.icon-warningFilled { background-image: inline("img/icons/warningFilled.svg"); }
+  }
+}
\ No newline at end of file
diff --git a/resources/web/style/img/icons/bug.svg b/resources/web/style/img/icons/bug.svg
new file mode 100644
index 0000000000000..19ee985ad0744
--- /dev/null
+++ b/resources/web/style/img/icons/bug.svg
@@ -0,0 +1,3 @@
+
diff --git a/resources/web/style/img/icons/checkInCircleFilled.svg b/resources/web/style/img/icons/checkInCircleFilled.svg
new file mode 100644
index 0000000000000..410cd1cd61b82
--- /dev/null
+++ b/resources/web/style/img/icons/checkInCircleFilled.svg
@@ -0,0 +1,3 @@
+
diff --git a/resources/web/style/img/icons/warningFilled.svg b/resources/web/style/img/icons/warningFilled.svg
new file mode 100644
index 0000000000000..d9952fd2a6408
--- /dev/null
+++ b/resources/web/style/img/icons/warningFilled.svg
@@ -0,0 +1,3 @@
+
diff --git a/resources/web/style/table.pcss b/resources/web/style/table.pcss
index fe4586a25ca86..3d4fed1679100 100644
--- a/resources/web/style/table.pcss
+++ b/resources/web/style/table.pcss
@@ -45,13 +45,16 @@
       padding-left: 0.15em;
     }
   }
-  tr:last-child {
-    th, td {
-      border: none;
+
+  tr {
+    &:last-child {
+      th, td {
+        border: none;
+      }
     }
   }
 
-  .monospaced { 
+  .monospaced {
     td p, th {
       font-family: Consolas, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Lucida Console", monospace;
     }
@@ -93,4 +96,25 @@
       vertical-align: middle;
     }
   }
+
+  /** Used in integration docs */
+  .condensed-table {
+    table {
+      tbody {
+        tr {
+          border-bottom: 1px solid #e5eae4;
+          &:first-child {
+            border-top: 1px solid #e5eae4!important;
+          }
+          td {
+            vertical-align: top;
+            padding: 0.6em;
+          }
+          p {
+            margin-bottom: 0px!important;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/resources/web/styles-v1.pcss b/resources/web/styles-v1.pcss
index 0a1c72bd0f7cc..7d2f62cba72bd 100644
--- a/resources/web/styles-v1.pcss
+++ b/resources/web/styles-v1.pcss
@@ -8,7 +8,6 @@
 @import './style/alternative_picker.pcss';
 @import './style/admonishment.pcss';
 @import './style/calloutlist.pcss';
-@import './style/child_attributes.pcss';
 @import './style/conum.pcss';
 @import './style/code.pcss';
 @import './style/console_widget.pcss';
@@ -16,6 +15,7 @@
 @import './style/example.pcss';
 @import './style/feedback.pcss';
 @import './style/heading.pcss';
+@import './style/icons.pcss';
 @import './style/img.pcss';
 @import './style/layout.pcss';
 @import './style/link.pcss';
diff --git a/shared/attributes.asciidoc b/shared/attributes.asciidoc
index f3b1925adb825..59dcc33974b07 100644
--- a/shared/attributes.asciidoc
+++ b/shared/attributes.asciidoc
@@ -569,3 +569,10 @@ Legacy definitions
 :apm-overview-ref-m:   https://www.elastic.co/guide/en/apm/get-started/master
 :infra-guide:          https://www.elastic.co/guide/en/infrastructure/guide/{branch}
 :a-data-source:        a data view
+
+////
+UI icons and logos from EUI
+////
+:icon-bug: pass:[]
+:icon-checkInCircleFilled: pass:[]
+:icon-warningFilled: pass:[]