diff --git a/assets/css/code.css b/assets/css/code.css
index 08d9346fcc..2d77aa26a5 100644
--- a/assets/css/code.css
+++ b/assets/css/code.css
@@ -1,64 +1,80 @@
 @layer components {
-  .highlight,
-  :not(pre) > code {
-    font-size: 0.875em;
-    border: 1px solid;
-    border-radius: theme("spacing.1");
-    background: theme("colors.white");
-    border-color: theme("colors.gray.light.300");
-    .dark & {
-      background: theme("colors.gray.dark.200");
-      border-color: theme("colors.gray.dark.300");
+  .prose {
+    .highlight,
+    :not(pre) > code {
+      font-size: 0.875em;
+      border: 1px solid;
+      border-radius: theme("spacing.1");
+      background: theme("colors.white");
+      border-color: theme("colors.gray.light.300");
+      .dark & {
+        background: theme("colors.gray.dark.200");
+        border-color: theme("colors.gray.dark.300");
+      }
     }
-  }
 
-  :not(pre) > code {
-    background: theme("colors.gray.light.200");
-    display: inline-block;
-    margin: 0;
-    font-weight: 400;
-    overflow-wrap: anywhere;
-    padding: 0 4px;
-    table & {
-      overflow-wrap: unset;
-    }
-  }
-
-  /* Indented code blocks */
-  :not(.highlight) > pre {
-    @apply my-4 overflow-x-auto p-3;
-    font-size: 0.875em;
-    border: 1px solid;
-    border-radius: theme("spacing.1");
-    background: theme("colors.white");
-    border-color: theme("colors.gray.light.300");
-    .dark & {
-      background: theme("colors.gray.dark.200");
-      border-color: theme("colors.gray.dark.300");
-    }
-  }
-
-  .highlight {
-    @apply my-4 overflow-x-auto p-3;
-
-    /* LineTableTD */
-    .lntd {
-      vertical-align: top;
-      padding: 0;
+    :not(pre) > code {
+      background: theme("colors.gray.light.200");
+      display: inline-block;
       margin: 0;
-      border: 0;
+      font-weight: 400;
+      overflow-wrap: anywhere;
+      padding: 0 4px;
+      table & {
+        overflow-wrap: unset;
+      }
     }
-    /* LineTable */
-    .lntable {
-      display: table;
-      width: 100%;
-      border-spacing: 0;
-      padding: 0;
-      margin: 0;
-      border: 0;
-      /* LineNumberColumnHighlight */
-      .lntd:first-child .hl {
-        display: block;
+
+    /* Indented code blocks */
+    :not(.highlight) > pre {
+      @apply my-4 overflow-x-auto p-3;
+      font-size: 0.875em;
+      border: 1px solid;
+      border-radius: theme("spacing.1");
+      background: theme("colors.white");
+      border-color: theme("colors.gray.light.300");
+      .dark & {
+        background: theme("colors.gray.dark.200");
+        border-color: theme("colors.gray.dark.300");
+      }
+    }
+
+    .highlight {
+      @apply my-4 overflow-x-auto p-3;
+
+      /* LineTableTD */
+      .lntd {
+        vertical-align: top;
+        padding: 0;
+        margin: 0;
+        white-space: nowrap;
+        font-weight: 400;
+        padding: 0 4px;
+      }
+
+      .highlight {
+        @apply my-4 overflow-x-auto p-3;
+
+        /* LineTableTD */
+        .lntd {
+          vertical-align: top;
+          padding: 0;
+          margin: 0;
+          border: 0;
+        }
+        /* LineTable */
+        .lntable {
+          display: table;
+          width: 100%;
+          border-spacing: 0;
+          padding: 0;
+          margin: 0;
+          border: 0;
+          /* LineNumberColumnHighlight */
+          .lntd:first-child .hl {
+            display: block;
+          }
+        }
       }
     }
   }
diff --git a/assets/css/kapa.css b/assets/css/kapa.css
new file mode 100644
index 0000000000..2976a1853c
--- /dev/null
+++ b/assets/css/kapa.css
@@ -0,0 +1,17 @@
+.mantine-Modal-root {
+  ol {
+    list-style-type: decimal;
+  }
+
+  .mantine-List-root {
+    min-width: 100%;
+  }
+
+  .mantine-List-itemWrapper {
+    max-width: 100%;
+  }
+
+  .mantine-Prism-copy {
+    background-color: rgb(20, 21, 23)
+  }
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 9a0e27ef3a..641ad6ecec 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -10,6 +10,7 @@
 @import "/assets/css/code";
 @import "/assets/css/toc";
 @import "/assets/css/callouts";
+@import "/assets/css/kapa";
 
 @import "tailwindcss/utilities";
 @import "/assets/css/syntax-light";
diff --git a/hugo.yaml b/hugo.yaml
index d1af6445c2..f203e505d4 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -80,6 +80,8 @@ languages:
     languageName: English
 
 params:
+  kapa:
+    id: ba5c2cbc-6535-4334-a72e-050f7a681c8a
   analytics:
     hotjar:
       prod: 3169877
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 346ad0da13..6b0adedcf6 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -36,6 +36,32 @@
   })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
   </script>
 {{ end }}
+{{ if hugo.IsProduction }}
+  {{/*  kapa.ai widget */}}
+  <script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var script = document.createElement('script');
+    script.src = 'https://widget.kapa.ai/kapa-widget.bundle.js';
+    script.setAttribute('data-website-id', '{{ site.Params.kapa.id }}');
+    script.setAttribute('data-project-name', 'Docker');
+    script.setAttribute('data-button-image-height', '29px');
+    script.setAttribute('data-button-image-width', '40px');
+    script.setAttribute('data-modal-image-height', '29px');
+    script.setAttribute('data-modal-image-width', '40px');
+    script.setAttribute('data-modal-title-color', '#fff');
+    script.setAttribute('data-project-color', '#086dd7');
+    script.setAttribute('data-modal-header-bg-color', '#086dd7');
+    script.setAttribute('data-project-logo', '/assets/images/logo-icon-white.svg');
+    script.setAttribute('data-font-family', 'Roboto Flex,sans-serif');
+    script.setAttribute('data-modal-disclaimer', 'This is a custom LLM for answering questions about Docker. Answers are based on the contents of the documentation. This feature is experimental - rate the answers to let us know what you think!');
+    script.setAttribute('data-modal-disclaimer-bg-color', '#e5f2fc');
+    script.setAttribute('data-modal-disclaimer-text-color', '#086dd7');
+    script.setAttribute('data-modal-example-questions','What is a volume?,How do I build multi-platform images?,Can I configure Docker to use a proxy?,What does a Docker subscription include?');
+    script.async = true;
+    document.body.appendChild(script);
+  });
+  </script>
+{{ end }}
 {{/* preload Roboto Flex as it's a critical font: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload */}}
 <link href="/assets/fonts/RobotoFlex.woff2" rel="preload" as="font" type="font/woff2" crossorigin />
 {{ partialCached "utils/css.html" "-" }}
diff --git a/static/assets/images/logo-icon-white.svg b/static/assets/images/logo-icon-white.svg
new file mode 100644
index 0000000000..cc60a3627a
--- /dev/null
+++ b/static/assets/images/logo-icon-white.svg
@@ -0,0 +1,19 @@
+<svg width="40" height="29" viewBox="0 0 40 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_217_4032)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.6057 11.0964C39.4973 11.0086 38.4837 10.243 36.3481 10.243C35.8139 10.243 35.2504 10.2918 34.6649 10.388C34.2523 7.54965 31.9133 6.167 31.8045 6.10436L31.2305 5.77262L30.8523 6.31818C30.8241 6.35878 30.1594 7.32772 29.8333 8.70689C29.4504 10.3266 29.6828 11.8473 30.5045 13.1491C29.5122 13.702 27.9281 13.8462 27.5993 13.8505H1.25209C0.564673 13.8505 0.00308371 14.41 0.000381905 15.0978C-0.0100393 17.5252 0.389442 19.871 1.15521 21.8812C2.0634 24.2652 3.4143 26.0202 5.1697 27.0978C7.13854 28.3057 10.344 28.9986 13.9637 28.9986C15.6573 28.9986 17.3456 28.8455 18.8455 28.5555C21.2091 28.0992 23.3551 27.3186 25.2233 26.2364C26.8524 25.2926 28.3157 24.092 29.5724 22.6692C31.6601 20.3036 32.9037 17.6617 33.8285 15.3236C33.9532 15.3286 34.0759 15.331 34.1971 15.331C36.4824 15.331 37.8878 14.4161 38.6639 13.6483C39.5058 12.8154 39.8053 11.9853 39.8365 11.8933L40.0002 11.4134L39.6057 11.0964Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.69368 13.0787H7.22455C7.39477 13.0787 7.53333 12.9403 7.53333 12.769V9.61823C7.53333 9.44694 7.39477 9.30852 7.22455 9.30852H3.69368C3.52309 9.30852 3.38452 9.44694 3.38452 9.61823V12.769C3.38452 12.9403 3.52309 13.0787 3.69368 13.0787Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.55941 13.0787H12.0895C12.2605 13.0787 12.3987 12.9403 12.3987 12.769V9.61823C12.3987 9.44694 12.2605 9.30852 12.0895 9.30852H8.55941C8.38842 9.30852 8.25024 9.44694 8.25024 9.61823V12.769C8.25024 12.9403 8.38842 13.0787 8.55941 13.0787Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4994 13.0787H17.0299C17.2005 13.0787 17.339 12.9403 17.339 12.769V9.61823C17.339 9.44694 17.2005 9.30852 17.0299 9.30852H13.4994C13.3288 9.30852 13.1906 9.44694 13.1906 9.61823V12.769C13.1906 12.9403 13.3288 13.0787 13.4994 13.0787Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3806 13.0787H21.9111C22.082 13.0787 22.2202 12.9403 22.2202 12.769V9.61823C22.2202 9.44694 22.082 9.30852 21.9111 9.30852H18.3806C18.2104 9.30852 18.0714 9.44694 18.0714 9.61823V12.769C18.0714 12.9403 18.2104 13.0787 18.3806 13.0787Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.55941 8.54493H12.0895C12.2605 8.54493 12.3987 8.40651 12.3987 8.23561V5.08442C12.3987 4.91352 12.2605 4.77472 12.0895 4.77472H8.55941C8.38842 4.77472 8.25024 4.91352 8.25024 5.08442V8.23561C8.25024 8.40651 8.38842 8.54493 8.55941 8.54493Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4994 8.54493H17.0299C17.2005 8.54493 17.339 8.40651 17.339 8.23561V5.08442C17.339 4.91352 17.2005 4.77472 17.0299 4.77472H13.4994C13.3288 4.77472 13.1906 4.91352 13.1906 5.08442V8.23561C13.1906 8.40651 13.3288 8.54493 13.4994 8.54493Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3806 8.54492H21.9111C22.082 8.54492 22.2202 8.4065 22.2202 8.2356V5.08442C22.2202 4.91352 22.082 4.77471 21.9111 4.77471H18.3806C18.2104 4.77471 18.0714 4.91352 18.0714 5.08442V8.2356C18.0714 8.4065 18.2104 8.54492 18.3806 8.54492Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3806 4.01146H21.9111C22.082 4.01146 22.2202 3.87265 22.2202 3.70175V0.550951C22.2202 0.379665 22.082 0.241245 21.9111 0.241245H18.3806C18.2104 0.241245 18.0714 0.379665 18.0714 0.550951V3.70175C18.0714 3.87265 18.2104 4.01146 18.3806 4.01146Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3055 13.0787H26.8356C27.0066 13.0787 27.1448 12.9403 27.1448 12.769V9.61823C27.1448 9.44694 27.0066 9.30852 26.8356 9.30852H23.3055C23.1345 9.30852 22.9963 9.44694 22.9963 9.61823V12.769C22.9963 12.9403 23.1345 13.0787 23.3055 13.0787Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_217_4032">
+<rect width="40" height="28.9986" fill="white"/>
+</clipPath>
+</defs>
+</svg>