diff --git a/packages/atomic-react/src/components/commerce/components.ts b/packages/atomic-react/src/components/commerce/components.ts
index 6bcfecff5f8..2039889d4f2 100644
--- a/packages/atomic-react/src/components/commerce/components.ts
+++ b/packages/atomic-react/src/components/commerce/components.ts
@@ -31,6 +31,7 @@ import {
   AtomicIcon as LitAtomicIcon,
   AtomicInsightGenerateAnswerButton as LitAtomicInsightGenerateAnswerButton,
   AtomicInsightInterface as LitAtomicInsightInterface,
+  AtomicInsightResultTemplate as LitAtomicInsightResultTemplate,
   AtomicLayoutSection as LitAtomicLayoutSection,
   AtomicNumericRange as LitAtomicNumericRange,
   AtomicProduct as LitAtomicProduct,
@@ -251,6 +252,12 @@ export const AtomicInsightInterface = createComponent({
   elementClass: LitAtomicInsightInterface,
 });
 
+export const AtomicInsightResultTemplate = createComponent({
+  tagName: 'atomic-insight-result-template',
+  react: React,
+  elementClass: LitAtomicInsightResultTemplate,
+});
+
 export const AtomicLayoutSection = createComponent({
   tagName: 'atomic-layout-section',
   react: React,
diff --git a/packages/atomic-react/src/components/search/components.ts b/packages/atomic-react/src/components/search/components.ts
index db3743b8a99..4e46ff2c3a8 100644
--- a/packages/atomic-react/src/components/search/components.ts
+++ b/packages/atomic-react/src/components/search/components.ts
@@ -20,6 +20,7 @@ import {
   AtomicIcon as LitAtomicIcon,
   AtomicInsightGenerateAnswerButton as LitAtomicInsightGenerateAnswerButton,
   AtomicInsightInterface as LitAtomicInsightInterface,
+  AtomicInsightResultTemplate as LitAtomicInsightResultTemplate,
   AtomicLayoutSection as LitAtomicLayoutSection,
   AtomicLoadMoreResults as LitAtomicLoadMoreResults,
   AtomicNoResults as LitAtomicNoResults,
@@ -207,6 +208,12 @@ export const AtomicInsightInterface = createComponent({
   elementClass: LitAtomicInsightInterface,
 });
 
+export const AtomicInsightResultTemplate = createComponent({
+  tagName: 'atomic-insight-result-template',
+  react: React,
+  elementClass: LitAtomicInsightResultTemplate,
+});
+
 export const AtomicLayoutSection = createComponent({
   tagName: 'atomic-layout-section',
   react: React,
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
index 83074a36a0f..841f460da5d 100644
--- a/packages/atomic/src/components.d.ts
+++ b/packages/atomic/src/components.d.ts
@@ -6,7 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { DateFilterRange, DateRangeRequest, FacetResultsMustMatch, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, RangeFacetSortCriterion, Result, ResultTemplate, ResultTemplateCondition } from "@coveo/headless";
-import { FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "@coveo/headless/insight";
+import { FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, UserAction as IUserAction } from "@coveo/headless/insight";
 import { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
 import { ItemRenderingFunction } from "./components/common/item-list/stencil-item-list-common";
 import { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
@@ -20,7 +20,7 @@ import { AnyBindings } from "./components/common/interface/bindings";
 import { i18n } from "i18next";
 import { SearchBoxSuggestionElement } from "./components/common/suggestions/suggestions-types";
 export { DateFilterRange, DateRangeRequest, FacetResultsMustMatch, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, RangeFacetSortCriterion, Result, ResultTemplate, ResultTemplateCondition } from "@coveo/headless";
-export { FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, ResultTemplate as InsightResultTemplate, ResultTemplateCondition as InsightResultTemplateCondition, UserAction as IUserAction } from "@coveo/headless/insight";
+export { FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, UserAction as IUserAction } from "@coveo/headless/insight";
 export { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
 export { ItemRenderingFunction } from "./components/common/item-list/stencil-item-list-common";
 export { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
@@ -397,38 +397,6 @@ export namespace Components {
          */
         "sandbox": string;
     }
-    interface AtomicInsightResultTemplate {
-        /**
-          * A function that must return true on results for the result template to apply. Set programmatically before initialization, not via attribute.  For example, the following targets a template and sets a condition to make it apply only to results whose `title` contains `singapore`: `document.querySelector('#target-template').conditions = [(result) => /singapore/i.test(result.title)];`
-         */
-        "conditions": InsightResultTemplateCondition[];
-        /**
-          * Gets the appropriate result template based on conditions applied.
-         */
-        "getTemplate": () => Promise<InsightResultTemplate<DocumentFragment> | null>;
-        /**
-          * The field that, when defined on a result item, would allow the template to be applied.  For example, a template with the following attribute only applies to result items whose `filetype` and `sourcetype` fields are defined: `if-defined="filetype,sourcetype"`
-         */
-        "ifDefined"?: string;
-        /**
-          * The field that, when defined on a result item, would prevent the template from being applied.  For example, a template with the following attribute only applies to result items whose `filetype` and `sourcetype` fields are NOT defined: `if-not-defined="filetype,sourcetype"`
-         */
-        "ifNotDefined"?: string;
-        /**
-          * The field and values that define which result items the condition must be applied to.  For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`
-         */
-        "mustMatch": Record<
-    string,
-    string[]
-  >;
-        /**
-          * The field and values that define which result items the condition must not be applied to.  For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage"`
-         */
-        "mustNotMatch": Record<
-    string,
-    string[]
-  >;
-    }
     interface AtomicInsightSearchBox {
         /**
           * Whether to prevent the user from triggering a search from the component. Perfect for use cases where you need to disable the search conditionally, like when the input is empty.
@@ -1343,12 +1311,6 @@ declare global {
         prototype: HTMLAtomicInsightResultQuickviewActionElement;
         new (): HTMLAtomicInsightResultQuickviewActionElement;
     };
-    interface HTMLAtomicInsightResultTemplateElement extends Components.AtomicInsightResultTemplate, HTMLStencilElement {
-    }
-    var HTMLAtomicInsightResultTemplateElement: {
-        prototype: HTMLAtomicInsightResultTemplateElement;
-        new (): HTMLAtomicInsightResultTemplateElement;
-    };
     interface HTMLAtomicInsightSearchBoxElement extends Components.AtomicInsightSearchBox, HTMLStencilElement {
     }
     var HTMLAtomicInsightSearchBoxElement: {
@@ -1789,7 +1751,6 @@ declare global {
         "atomic-insight-result-children-template": HTMLAtomicInsightResultChildrenTemplateElement;
         "atomic-insight-result-list": HTMLAtomicInsightResultListElement;
         "atomic-insight-result-quickview-action": HTMLAtomicInsightResultQuickviewActionElement;
-        "atomic-insight-result-template": HTMLAtomicInsightResultTemplateElement;
         "atomic-insight-search-box": HTMLAtomicInsightSearchBoxElement;
         "atomic-insight-smart-snippet": HTMLAtomicInsightSmartSnippetElement;
         "atomic-insight-smart-snippet-feedback-modal": HTMLAtomicInsightSmartSnippetFeedbackModalElement;
@@ -2181,34 +2142,6 @@ declare namespace LocalJSX {
          */
         "sandbox"?: string;
     }
-    interface AtomicInsightResultTemplate {
-        /**
-          * A function that must return true on results for the result template to apply. Set programmatically before initialization, not via attribute.  For example, the following targets a template and sets a condition to make it apply only to results whose `title` contains `singapore`: `document.querySelector('#target-template').conditions = [(result) => /singapore/i.test(result.title)];`
-         */
-        "conditions"?: InsightResultTemplateCondition[];
-        /**
-          * The field that, when defined on a result item, would allow the template to be applied.  For example, a template with the following attribute only applies to result items whose `filetype` and `sourcetype` fields are defined: `if-defined="filetype,sourcetype"`
-         */
-        "ifDefined"?: string;
-        /**
-          * The field that, when defined on a result item, would prevent the template from being applied.  For example, a template with the following attribute only applies to result items whose `filetype` and `sourcetype` fields are NOT defined: `if-not-defined="filetype,sourcetype"`
-         */
-        "ifNotDefined"?: string;
-        /**
-          * The field and values that define which result items the condition must be applied to.  For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`
-         */
-        "mustMatch"?: Record<
-    string,
-    string[]
-  >;
-        /**
-          * The field and values that define which result items the condition must not be applied to.  For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage"`
-         */
-        "mustNotMatch"?: Record<
-    string,
-    string[]
-  >;
-    }
     interface AtomicInsightSearchBox {
         /**
           * Whether to prevent the user from triggering a search from the component. Perfect for use cases where you need to disable the search conditionally, like when the input is empty.
@@ -2878,7 +2811,6 @@ declare namespace LocalJSX {
         "atomic-insight-result-children-template": AtomicInsightResultChildrenTemplate;
         "atomic-insight-result-list": AtomicInsightResultList;
         "atomic-insight-result-quickview-action": AtomicInsightResultQuickviewAction;
-        "atomic-insight-result-template": AtomicInsightResultTemplate;
         "atomic-insight-search-box": AtomicInsightSearchBox;
         "atomic-insight-smart-snippet": AtomicInsightSmartSnippet;
         "atomic-insight-smart-snippet-feedback-modal": AtomicInsightSmartSnippetFeedbackModal;
@@ -2949,7 +2881,6 @@ declare module "@stencil/core" {
             "atomic-insight-result-children-template": LocalJSX.AtomicInsightResultChildrenTemplate & JSXBase.HTMLAttributes<HTMLAtomicInsightResultChildrenTemplateElement>;
             "atomic-insight-result-list": LocalJSX.AtomicInsightResultList & JSXBase.HTMLAttributes<HTMLAtomicInsightResultListElement>;
             "atomic-insight-result-quickview-action": LocalJSX.AtomicInsightResultQuickviewAction & JSXBase.HTMLAttributes<HTMLAtomicInsightResultQuickviewActionElement>;
-            "atomic-insight-result-template": LocalJSX.AtomicInsightResultTemplate & JSXBase.HTMLAttributes<HTMLAtomicInsightResultTemplateElement>;
             "atomic-insight-search-box": LocalJSX.AtomicInsightSearchBox & JSXBase.HTMLAttributes<HTMLAtomicInsightSearchBoxElement>;
             "atomic-insight-smart-snippet": LocalJSX.AtomicInsightSmartSnippet & JSXBase.HTMLAttributes<HTMLAtomicInsightSmartSnippetElement>;
             "atomic-insight-smart-snippet-feedback-modal": LocalJSX.AtomicInsightSmartSnippetFeedbackModal & JSXBase.HTMLAttributes<HTMLAtomicInsightSmartSnippetFeedbackModalElement>;
diff --git a/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.mdx b/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.mdx
new file mode 100644
index 00000000000..64542518f90
--- /dev/null
+++ b/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.mdx
@@ -0,0 +1,147 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as AtomicInsightResultTemplateStories from './atomic-insight-result-template.new.stories';
+import { AtomicDocTemplate } from '@/storybook-utils/documentation/atomic-doc-template';
+
+<Meta of={AtomicInsightResultTemplateStories} />
+
+<AtomicDocTemplate
+  stories={AtomicInsightResultTemplateStories}
+  defaultStory="Default"
+  githubPath="insight/atomic-insight-result-template/atomic-insight-result-template.ts"
+  tagName="atomic-insight-result-template"
+  className="AtomicInsightResultTemplate"
+>
+
+This component defines the UI display of your search results within an Insight interface.
+A `template` element must be the child of an `atomic-insight-result-template`. Furthermore, an `atomic-insight-result-list` or `atomic-insight-folded-result-list` must be the parent of each `atomic-insight-result-template`.
+
+**Note:** Any `<script>` tags that are defined inside a `<template>` element will not be executed when the results are being rendered.
+
+Example using the `atomic-insight-result-list`:
+
+```html
+<atomic-insight-interface>
+  <atomic-insight-result-list>
+    <atomic-insight-result-template>
+      <template>
+        <atomic-result-section-visual>
+          <atomic-result-image field="ytthumbnailurl" fallback="https://picsum.photos/seed/picsum/350"></atomic-result-image>
+        </atomic-result-section-visual>
+        
+        <atomic-result-section-badges>
+          <atomic-field-condition must-match-sourcetype="YouTube">
+            <atomic-result-badge
+              label="YouTube"
+              class="youtube-badge"
+            ></atomic-result-badge>
+          </atomic-field-condition>
+        </atomic-result-section-badges>
+
+        <atomic-result-section-title>
+          <atomic-result-link></atomic-result-link>
+        </atomic-result-section-title>
+
+        <atomic-result-section-excerpt>
+          <atomic-result-text field="excerpt"></atomic-result-text>
+        </atomic-result-section-excerpt>
+
+        <atomic-result-section-bottom-metadata>
+          <atomic-result-fields-list>
+            <atomic-field-condition class="field" if-defined="source">
+              <span class="field-label">
+                <atomic-text value="source"></atomic-text>:
+              </span>
+              <atomic-result-text field="source"></atomic-result-text>
+            </atomic-field-condition>
+            
+            <atomic-field-condition class="field" if-defined="author">
+              <span class="field-label">
+                <atomic-text value="author"></atomic-text>:
+              </span>
+              <atomic-result-text field="author"></atomic-result-text>
+            </atomic-field-condition>
+            
+            <atomic-field-condition class="field" if-defined="date">
+              <span class="field-label">
+                <atomic-text value="date"></atomic-text>:
+              </span>
+              <atomic-result-date></atomic-result-date>
+            </atomic-field-condition>
+          </atomic-result-fields-list>
+        </atomic-result-section-bottom-metadata>
+      </template>
+    </atomic-insight-result-template>
+  </atomic-insight-result-list>
+</atomic-insight-interface>
+```
+
+## Template Conditions
+
+You can use conditions to display different templates based on result properties. You can specify as many `must-match-*` and `must-not-match-*` attributes as you want on a template, each targeting a different field. Each attribute can accept multiple comma-separated values.
+
+**Comma represents OR:** Within a single attribute, comma-separated values represent a logical OR. For example, `must-match-sourcetype="YouTube,Salesforce"` means the sourcetype must be YouTube OR Salesforce.
+
+**Multiple attributes represent AND:** All conditions from different attributes must be met (logical AND) for the template to apply to a result.
+
+If you set both `must-match-*` and `must-not-match-*` for the same field and there is any overlap in values, the template will be ignored (it will never match any result).
+
+**Order of declaration matters:** The first template whose conditions are met will be applied. If a default template (without conditions) is declared first, it will apply to all results, even if other templates with conditions are declared later.
+
+### Examples
+
+```html
+<!-- Template applies if sourcetype is YouTube or Salesforce, and language is NOT fr -->
+<atomic-insight-result-template
+  must-match-sourcetype="YouTube,Salesforce"
+  must-not-match-language="fr"
+>
+  <template>
+    <!-- ... -->
+  </template>
+</atomic-insight-result-template>
+
+<!-- This template will never apply, because the same value is required and forbidden -->
+<atomic-insight-result-template
+  must-match-sourcetype="YouTube"
+  must-not-match-sourcetype="YouTube"
+>
+  <template>
+    <!-- ... -->
+  </template>
+</atomic-insight-result-template>
+```
+
+### Multiple Templates Example
+
+```html
+<atomic-insight-result-list>
+  <!-- Template for YouTube videos -->
+  <atomic-insight-result-template must-match-sourcetype="YouTube">
+    <template>
+      <atomic-result-section-visual>
+        <atomic-result-image field="ytthumbnailurl"></atomic-result-image>
+      </atomic-result-section-visual>
+      <atomic-result-section-title>
+        <atomic-result-link></atomic-result-link>
+      </atomic-result-section-title>
+      <atomic-result-section-excerpt>
+        <atomic-result-text field="excerpt"></atomic-result-text>
+      </atomic-result-section-excerpt>
+    </template>
+  </atomic-insight-result-template>
+
+  <!-- Default template for all other results -->
+  <atomic-insight-result-template>
+    <template>
+      <atomic-result-section-title>
+        <atomic-result-link></atomic-result-link>
+      </atomic-result-section-title>
+      <atomic-result-section-excerpt>
+        <atomic-result-text field="excerpt"></atomic-result-text>
+      </atomic-result-section-excerpt>
+    </template>
+  </atomic-insight-result-template>
+</atomic-insight-result-list>
+```
+
+</AtomicDocTemplate>
diff --git a/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.new.stories.tsx b/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.new.stories.tsx
new file mode 100644
index 00000000000..52e5b258569
--- /dev/null
+++ b/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.new.stories.tsx
@@ -0,0 +1,284 @@
+import type {Meta, StoryObj as Story} from '@storybook/web-components-vite';
+import {getStorybookHelpers} from '@wc-toolkit/storybook-helpers';
+import {html} from 'lit';
+import {MockInsightApi} from '@/storybook-utils/api/insight/mock';
+import {parameters} from '@/storybook-utils/common/common-meta-parameters';
+import {wrapInInsightInterface} from '@/storybook-utils/insight/insight-interface-wrapper';
+
+const mockInsightApi = new MockInsightApi();
+
+const TEMPLATE_EXAMPLE = `<template>
+  <atomic-result-section-visual>
+    <atomic-result-image field="ytthumbnailurl" fallback="https://picsum.photos/seed/picsum/350"></atomic-result-image>
+  </atomic-result-section-visual>
+  <atomic-result-section-badges>
+    <atomic-field-condition must-match-sourcetype="YouTube">
+      <atomic-result-badge
+        label="YouTube"
+        class="youtube-badge"
+      ></atomic-result-badge>
+    </atomic-field-condition>
+    <atomic-result-badge
+      icon="https://raw.githubusercontent.com/Rush/Font-Awesome-SVG-PNG/master/black/svg/language.svg"
+    >
+      <atomic-result-multi-value-text
+        field="language"
+      ></atomic-result-multi-value-text>
+    </atomic-result-badge>
+  </atomic-result-section-badges>
+  <atomic-result-section-title>
+    <atomic-result-link></atomic-result-link>
+  </atomic-result-section-title>
+  <atomic-result-section-excerpt>
+    <atomic-result-text field="excerpt"></atomic-result-text>
+  </atomic-result-section-excerpt>
+  <atomic-result-section-bottom-metadata>
+    <atomic-result-fields-list>
+      <atomic-field-condition class="field" if-defined="source">
+        <span class="field-label">
+          <atomic-text value="source"></atomic-text>:
+        </span>
+        <atomic-result-text field="source"></atomic-result-text>
+      </atomic-field-condition>
+      <atomic-field-condition class="field" if-defined="author">
+        <span class="field-label">
+          <atomic-text value="author"></atomic-text>:
+        </span>
+        <atomic-result-text field="author"></atomic-result-text>
+      </atomic-field-condition>
+      <atomic-field-condition class="field" if-defined="date">
+        <span class="field-label">
+          <atomic-text value="date"></atomic-text>:
+        </span>
+        <atomic-result-date></atomic-result-date>
+      </atomic-field-condition>
+    </atomic-result-fields-list>
+  </atomic-result-section-bottom-metadata>
+</template>`;
+
+const FOLDED_TEMPLATE_EXAMPLE = `<template>
+  <style>
+    .field {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .field-label {
+      font-weight: bold;
+      margin-right: 0.25rem;
+    }
+
+    .thumbnail {
+      border-radius: var(--atomic-border-radius);
+    }
+  </style>
+  <atomic-result-section-visual>
+    <atomic-result-image field="ytthumbnailurl" fallback="https://picsum.photos/seed/picsum/350" class="thumbnail"></atomic-result-image>
+  </atomic-result-section-visual>
+  <atomic-result-section-title>
+    <atomic-result-link></atomic-result-link>
+  </atomic-result-section-title>
+  <atomic-result-section-excerpt>
+    <atomic-result-text field="excerpt"></atomic-result-text>
+  </atomic-result-section-excerpt>
+  <atomic-result-section-bottom-metadata>
+    <atomic-result-fields-list>
+      <atomic-field-condition class="field" if-defined="source">
+        <span class="field-label">Source:</span>
+        <atomic-result-text field="source"></atomic-result-text>
+      </atomic-field-condition>
+      <atomic-field-condition class="field" if-defined="author">
+        <span class="field-label">Author:</span>
+        <atomic-result-text field="author"></atomic-result-text>
+      </atomic-field-condition>
+    </atomic-result-fields-list>
+  </atomic-result-section-bottom-metadata>
+  <atomic-result-section-children>
+    <atomic-insight-result-children image-size="icon">
+      <atomic-insight-result-children-template>
+        <template>
+          <style>
+            .field {
+              display: inline-flex;
+              align-items: center;
+            }
+
+            .field-label {
+              font-weight: bold;
+              margin-right: 0.25rem;
+            }
+
+            .child-thumbnail {
+              border-radius: var(--atomic-border-radius);
+            }
+          </style>
+          <atomic-result-section-visual>
+            <atomic-result-image field="ytthumbnailurl" fallback="https://picsum.photos/seed/child/200" class="child-thumbnail"></atomic-result-image>
+          </atomic-result-section-visual>
+          <atomic-result-section-title>
+            <atomic-result-link></atomic-result-link>
+          </atomic-result-section-title>
+          <atomic-result-section-excerpt>
+            <atomic-result-text field="excerpt"></atomic-result-text>
+          </atomic-result-section-excerpt>
+          <atomic-result-section-children>
+            <atomic-insight-result-children inherit-templates></atomic-insight-result-children>
+          </atomic-result-section-children>
+        </template>
+      </atomic-insight-result-children-template>
+    </atomic-insight-result-children>
+  </atomic-result-section-children>
+</template>`;
+
+const {events, args, argTypes, template} = getStorybookHelpers(
+  'atomic-insight-result-template',
+  {excludeCategories: ['methods']}
+);
+
+const meta: Meta = {
+  component: 'atomic-insight-result-template',
+  title: 'Insight/Result Template',
+  id: 'atomic-insight-result-template',
+  render: (args) => template(args),
+  parameters: {
+    ...parameters,
+    actions: {
+      handles: events,
+    },
+    msw: {
+      handlers: [...mockInsightApi.handlers],
+    },
+  },
+  args: {
+    ...args,
+    'default-slot': TEMPLATE_EXAMPLE,
+  },
+  argTypes: {
+    ...argTypes,
+    'must-match': {
+      ...argTypes['must-match'],
+      control: false,
+    },
+    'must-not-match': {
+      ...argTypes['must-not-match'],
+      control: false,
+    },
+    conditions: {
+      ...argTypes.conditions,
+      control: false,
+    },
+  },
+};
+
+export default meta;
+
+const {decorator: insightInterfaceDecorator, play: initializeInsightInterface} =
+  wrapInInsightInterface();
+
+export const Default: Story = {
+  name: 'In a result list',
+  decorators: [
+    (story) => html`
+      <atomic-insight-layout>
+        <atomic-layout-section section="results">
+          <atomic-insight-result-list
+            display="list"
+            density="normal"
+            image-size="icon"
+          >
+            ${story()}
+          </atomic-insight-result-list>
+        </atomic-layout-section>
+      </atomic-insight-layout>
+    `,
+    insightInterfaceDecorator,
+  ],
+  play: initializeInsightInterface,
+};
+
+export const InAFoldedResultList: Story = {
+  name: 'In a folded result list',
+  args: {
+    ...args,
+    'default-slot': FOLDED_TEMPLATE_EXAMPLE,
+  },
+  decorators: [
+    (story) => html`
+      <atomic-insight-layout>
+        <atomic-layout-section section="results">
+          <atomic-insight-folded-result-list
+            image-size="small"
+            display="list"
+            collection-field="foldingcollection"
+            parent-field="foldingparent"
+            child-field="foldingchild"
+          >
+            ${story()}
+          </atomic-insight-folded-result-list>
+        </atomic-layout-section>
+      </atomic-insight-layout>
+    `,
+    insightInterfaceDecorator,
+  ],
+  parameters: {
+    docs: {
+      source: {
+        code: `<atomic-insight-folded-result-list
+  image-size="small"
+  display="list"
+  collection-field="foldingcollection"
+  parent-field="foldingparent"
+  child-field="foldingchild"
+>
+  <atomic-insight-result-template>
+${FOLDED_TEMPLATE_EXAMPLE}
+  </atomic-insight-result-template>
+</atomic-insight-folded-result-list>`,
+      },
+    },
+  },
+  play: initializeInsightInterface,
+};
+
+export const WithConditions: Story = {
+  name: 'With conditions',
+  args: {
+    ...args,
+    'default-slot': TEMPLATE_EXAMPLE,
+  },
+  decorators: [
+    (story) => html`
+      <atomic-insight-layout>
+        <atomic-layout-section section="results">
+          <atomic-insight-result-list
+            display="list"
+            density="normal"
+            image-size="icon"
+          >
+            <!-- Template for specific source types -->
+            <atomic-insight-result-template must-match-sourcetype="YouTube">
+              <template>
+                <atomic-result-section-badges>
+                  <atomic-result-badge
+                    label="YouTube Video"
+                    class="youtube-badge"
+                  ></atomic-result-badge>
+                </atomic-result-section-badges>
+                <atomic-result-section-title>
+                  <atomic-result-link></atomic-result-link>
+                </atomic-result-section-title>
+                <atomic-result-section-excerpt>
+                  <atomic-result-text field="excerpt"></atomic-result-text>
+                </atomic-result-section-excerpt>
+              </template>
+            </atomic-insight-result-template>
+            <!-- Default template -->
+            ${story()}
+          </atomic-insight-result-list>
+        </atomic-layout-section>
+      </atomic-insight-layout>
+    `,
+    insightInterfaceDecorator,
+  ],
+  play: initializeInsightInterface,
+};
diff --git a/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.spec.ts b/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.spec.ts
new file mode 100644
index 00000000000..7aa6a6f2560
--- /dev/null
+++ b/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.spec.ts
@@ -0,0 +1,143 @@
+import type {Result as InsightResult} from '@coveo/headless/insight';
+import {ResultTemplatesHelpers as InsightResultTemplatesHelpers} from '@coveo/headless/insight';
+import {html} from 'lit';
+import {describe, expect, it, vi} from 'vitest';
+import {ResultTemplateController} from '@/src/components/common/result-templates/result-template-controller.js';
+import {makeMatchConditions} from '@/src/components/common/template-controller/template-utils';
+import {fixture} from '@/vitest-utils/testing-helpers/fixture';
+import {sanitizeHtml} from '@/vitest-utils/testing-helpers/testing-utils/sanitize-html';
+import {AtomicInsightResultTemplate} from './atomic-insight-result-template.js';
+
+vi.mock('@coveo/headless/insight', {spy: true});
+vi.mock('@/src/components/common/template-controller/template-utils', {
+  spy: true,
+});
+
+describe('atomic-insight-result-template', () => {
+  type AtomicInsightResultTemplateProps = Pick<
+    AtomicInsightResultTemplate,
+    'conditions' | 'mustMatch' | 'mustNotMatch'
+  >;
+
+  const setupElement = async (
+    options: Partial<AtomicInsightResultTemplateProps> = {}
+  ) => {
+    const defaultProps: AtomicInsightResultTemplateProps = {
+      conditions: [],
+      mustMatch: {},
+      mustNotMatch: {},
+    };
+
+    const container = document.createElement('atomic-insight-result-list');
+    const element = await fixture<AtomicInsightResultTemplate>(
+      html`
+        <atomic-insight-result-template
+          .conditions=${options.conditions || defaultProps.conditions}
+          .mustMatch=${options.mustMatch || defaultProps.mustMatch}
+          .mustNotMatch=${options.mustNotMatch || defaultProps.mustNotMatch}
+        >
+          <template>
+            <div>Result Template Content</div>
+          </template>
+        </atomic-insight-result-template>
+      `,
+      container
+    );
+    return element;
+  };
+
+  it('should instantiate without errors', async () => {
+    const element = await setupElement();
+    expect(element).toBeInstanceOf(AtomicInsightResultTemplate);
+  });
+
+  it('should have default empty mustMatch, mustNotMatch, and conditions', async () => {
+    const element = await setupElement();
+    expect(element.mustMatch).toEqual({});
+    expect(element.mustNotMatch).toEqual({});
+    expect(element.conditions).toEqual([]);
+  });
+
+  describe('when added to the DOM (#connectedCallback)', () => {
+    it('should call the #makeMatchConditions util function with the correct arguments', async () => {
+      const mockMakeMatchConditions = vi.mocked(makeMatchConditions);
+      await setupElement({
+        mustMatch: {filetype: ['pdf']},
+        mustNotMatch: {source: ['spam']},
+      });
+      expect(mockMakeMatchConditions).toHaveBeenCalledExactlyOnceWith(
+        {filetype: ['pdf']},
+        {source: ['spam']},
+        InsightResultTemplatesHelpers
+      );
+    });
+
+    it('should set matchConditions on ResultTemplateController with correct value', async () => {
+      const mustMatch = {filetype: ['pdf']};
+      const mustNotMatch = {source: ['spam']};
+      const element = await setupElement({mustMatch, mustNotMatch});
+
+      const expected = makeMatchConditions(
+        mustMatch,
+        mustNotMatch,
+        InsightResultTemplatesHelpers
+      );
+
+      const template = await element.getTemplate();
+      expect(template).not.toBeNull();
+      expect(template!.conditions).toHaveLength(expected.length);
+    });
+  });
+
+  describe('#getTemplate', () => {
+    it('should call getTemplate on the controller', async () => {
+      const titleConditions = (result: InsightResult) =>
+        result.title === 'Coveo';
+      const fakeTemplate = {
+        conditions: [],
+        content: document.createDocumentFragment(),
+        priority: 1,
+      };
+      const spy = vi
+        .spyOn(ResultTemplateController.prototype, 'getTemplate')
+        .mockResolvedValue(fakeTemplate);
+      const element = await setupElement({conditions: [titleConditions]});
+      const result = await element.getTemplate();
+
+      expect(spy).toHaveBeenCalledWith([titleConditions]);
+      expect(result).toBe(fakeTemplate);
+      spy.mockRestore();
+    });
+  });
+
+  it('should render nothing by default', async () => {
+    const element = await setupElement();
+    expect(sanitizeHtml(element.shadowRoot!.innerHTML)).toBe('');
+  });
+
+  it('should render an atomic-component-error if error is thrown', async () => {
+    const mockedConsoleError = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    const container = await fixture(html`
+      <div>
+        <atomic-insight-result-template>
+          <template slot="default"><div>content</div></template>
+        </atomic-insight-result-template>
+      </div>
+    `);
+
+    const element = container.querySelector(
+      'atomic-insight-result-template'
+    ) as AtomicInsightResultTemplate;
+
+    await element.updateComplete;
+
+    const errorComponent = element.shadowRoot?.querySelector(
+      'atomic-component-error'
+    );
+    expect(errorComponent).toBeDefined();
+    mockedConsoleError.mockRestore();
+  });
+});
diff --git a/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.ts b/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.ts
new file mode 100644
index 00000000000..ee9716c3f55
--- /dev/null
+++ b/packages/atomic/src/components/insight/atomic-insight-result-template/atomic-insight-result-template.ts
@@ -0,0 +1,103 @@
+import type {
+  ResultTemplate as InsightResultTemplate,
+  ResultTemplateCondition as InsightResultTemplateCondition,
+} from '@coveo/headless/insight';
+import {ResultTemplatesHelpers as InsightResultTemplatesHelpers} from '@coveo/headless/insight';
+import {html, LitElement, nothing} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {ResultTemplateController} from '@/src/components/common/result-templates/result-template-controller';
+import {makeMatchConditions} from '@/src/components/common/template-controller/template-utils';
+import {arrayConverter} from '@/src/converters/array-converter';
+import {errorGuard} from '@/src/decorators/error-guard';
+import type {LitElementWithError} from '@/src/decorators/types';
+import {withTailwindStyles} from '@/src/decorators/with-tailwind-styles.js';
+import {mapProperty} from '@/src/utils/props-utils';
+
+/**
+ * The `atomic-insight-result-template` component determines the format of the query results for Insight interfaces, depending on the conditions that are defined for each template.
+ *
+ * @slot default - The default slot where to insert the template element.
+ * @slot link - A `template` element that contains a single `atomic-result-link` component.
+ */
+@customElement('atomic-insight-result-template')
+@withTailwindStyles
+export class AtomicInsightResultTemplate
+  extends LitElement
+  implements LitElementWithError
+{
+  private resultTemplateController: ResultTemplateController;
+  @state() error!: Error;
+
+  /**
+   * A function that must return true on results for the result template to apply.
+   * Set programmatically before initialization, not via attribute.
+   *
+   * For example, the following targets a template and sets a condition to make it apply only to results whose `title` contains `singapore`:
+   * `document.querySelector('#target-template').conditions = [(result) => /singapore/i.test(result.title)];`
+   */
+  @property({attribute: false, type: Array, converter: arrayConverter})
+  conditions: InsightResultTemplateCondition[] = [];
+
+  /**
+   * The field and values that define which result items the condition must be applied to.
+   *
+   * For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`
+   * @type {Record<string, string[]>}
+   * @default {}
+   */
+  @mapProperty({splitValues: true, attributePrefix: 'must-match'})
+  mustMatch!: Record<string, string[]>;
+
+  /**
+   * The field and values that define which result items the condition must not be applied to.
+   *
+   * For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage"`
+   * @type {Record<string, string[]>}
+   * @default {}
+   */
+  @mapProperty({splitValues: true, attributePrefix: 'must-not-match'})
+  mustNotMatch!: Record<string, string[]>;
+
+  constructor() {
+    super();
+    const validParent = [
+      'atomic-insight-result-list',
+      'atomic-insight-folded-result-list',
+    ];
+    const allowEmpty = true;
+    this.resultTemplateController = new ResultTemplateController(
+      this,
+      validParent,
+      allowEmpty
+    );
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resultTemplateController.matchConditions = makeMatchConditions(
+      this.mustMatch,
+      this.mustNotMatch,
+      InsightResultTemplatesHelpers
+    );
+  }
+
+  @errorGuard()
+  render() {
+    return html`${nothing}`;
+  }
+
+  /**
+   * Gets the appropriate result template based on conditions applied.
+   */
+  public async getTemplate(): Promise<InsightResultTemplate<DocumentFragment> | null> {
+    const template =
+      this.resultTemplateController?.getTemplate(this.conditions) || null;
+    return template;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'atomic-insight-result-template': AtomicInsightResultTemplate;
+  }
+}
diff --git a/packages/atomic/src/components/insight/atomic-insight-result-template/e2e/atomic-insight-result-template.e2e.ts b/packages/atomic/src/components/insight/atomic-insight-result-template/e2e/atomic-insight-result-template.e2e.ts
new file mode 100644
index 00000000000..ba1bc26230c
--- /dev/null
+++ b/packages/atomic/src/components/insight/atomic-insight-result-template/e2e/atomic-insight-result-template.e2e.ts
@@ -0,0 +1,27 @@
+import {expect, test} from './fixture';
+
+test.describe('atomic-insight-result-template', () => {
+  test('should display results when a child of a result list', async ({
+    resultTemplate,
+  }) => {
+    await resultTemplate.load({story: 'default'});
+
+    await expect(resultTemplate.result).toBeVisible();
+  });
+
+  test('should display results when a child of a folded result list', async ({
+    resultTemplate,
+  }) => {
+    await resultTemplate.load({story: 'in-a-folded-result-list'});
+
+    await expect(resultTemplate.result).toBeVisible();
+  });
+
+  test('should display results with conditions applied', async ({
+    resultTemplate,
+  }) => {
+    await resultTemplate.load({story: 'with-conditions'});
+
+    await expect(resultTemplate.result).toBeVisible();
+  });
+});
diff --git a/packages/atomic/src/components/insight/atomic-insight-result-template/e2e/fixture.ts b/packages/atomic/src/components/insight/atomic-insight-result-template/e2e/fixture.ts
new file mode 100644
index 00000000000..7c47f806667
--- /dev/null
+++ b/packages/atomic/src/components/insight/atomic-insight-result-template/e2e/fixture.ts
@@ -0,0 +1,14 @@
+import {test as base} from '@playwright/test';
+import {InsightResultTemplateObject} from './page-object';
+
+interface TestFixture {
+  resultTemplate: InsightResultTemplateObject;
+}
+
+export const test = base.extend<TestFixture>({
+  resultTemplate: async ({page}, use) => {
+    await use(new InsightResultTemplateObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';
diff --git a/packages/atomic/src/components/insight/atomic-insight-result-template/e2e/page-object.ts b/packages/atomic/src/components/insight/atomic-insight-result-template/e2e/page-object.ts
new file mode 100644
index 00000000000..4e41940e564
--- /dev/null
+++ b/packages/atomic/src/components/insight/atomic-insight-result-template/e2e/page-object.ts
@@ -0,0 +1,24 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '@/playwright-utils/lit-base-page-object';
+
+export class InsightResultTemplateObject extends BasePageObject {
+  constructor(page: Page) {
+    super(page, 'atomic-insight-result-template');
+  }
+
+  get result() {
+    return this.page.locator('atomic-insight-result').first();
+  }
+
+  get error() {
+    return this.page.locator('atomic-component-error').first();
+  }
+
+  get resultList() {
+    return this.page.locator('atomic-insight-result-list');
+  }
+
+  get foldedResultList() {
+    return this.page.locator('atomic-insight-folded-result-list');
+  }
+}
diff --git a/packages/atomic/src/components/insight/index.ts b/packages/atomic/src/components/insight/index.ts
index 2397cc73d6a..6c20a79b174 100644
--- a/packages/atomic/src/components/insight/index.ts
+++ b/packages/atomic/src/components/insight/index.ts
@@ -1,5 +1,6 @@
 // Auto-generated file
 export {AtomicInsightGenerateAnswerButton} from './atomic-insight-generate-answer-button/atomic-insight-generate-answer-button.js';
 export {AtomicInsightInterface} from './atomic-insight-interface/atomic-insight-interface.js';
+export {AtomicInsightResultTemplate} from './atomic-insight-result-template/atomic-insight-result-template.js';
 export {AtomicInsightTab} from './atomic-insight-tab/atomic-insight-tab.js';
 export {AtomicInsightTabs} from './atomic-insight-tabs/atomic-insight-tabs.js';
diff --git a/packages/atomic/src/components/insight/lazy-index.ts b/packages/atomic/src/components/insight/lazy-index.ts
index 60500915b59..23a8dfc647d 100644
--- a/packages/atomic/src/components/insight/lazy-index.ts
+++ b/packages/atomic/src/components/insight/lazy-index.ts
@@ -6,6 +6,10 @@ export default {
     ),
   'atomic-insight-interface': async () =>
     await import('./atomic-insight-interface/atomic-insight-interface.js'),
+  'atomic-insight-result-template': async () =>
+    await import(
+      './atomic-insight-result-template/atomic-insight-result-template.js'
+    ),
   'atomic-insight-tab': async () =>
     await import('./atomic-insight-tab/atomic-insight-tab.js'),
   'atomic-insight-tabs': async () =>
diff --git a/packages/atomic/src/components/insight/result-templates/atomic-insight-result-template/atomic-insight-result-template.tsx b/packages/atomic/src/components/insight/result-templates/atomic-insight-result-template/atomic-insight-result-template.tsx
deleted file mode 100644
index a21d8471644..00000000000
--- a/packages/atomic/src/components/insight/result-templates/atomic-insight-result-template/atomic-insight-result-template.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import {
-  ResultTemplate as InsightResultTemplate,
-  ResultTemplateCondition as InsightResultTemplateCondition,
-} from '@coveo/headless/insight';
-import {Component, Element, Prop, Method, State} from '@stencil/core';
-import {MapProp} from '../../../../utils/props-utils';
-import {
-  makeDefinedConditions,
-  makeMatchConditions,
-  ResultTemplateCommon,
-} from '../../../common/result-templates/stencil-result-template-common';
-
-/**
- * @internal
- */
-@Component({
-  tag: 'atomic-insight-result-template',
-  shadow: true,
-})
-export class AtomicInsightResultTemplate {
-  private resultTemplateCommon!: ResultTemplateCommon;
-
-  @State() public error!: Error;
-
-  @Element() public host!: HTMLDivElement;
-  public matchConditions: InsightResultTemplateCondition[] = [];
-
-  /**
-   * A function that must return true on results for the result template to apply.
-   * Set programmatically before initialization, not via attribute.
-   *
-   * For example, the following targets a template and sets a condition to make it apply only to results whose `title` contains `singapore`:
-   * `document.querySelector('#target-template').conditions = [(result) => /singapore/i.test(result.title)];`
-   */
-  @Prop() public conditions: InsightResultTemplateCondition[] = [];
-
-  /**
-   * The field that, when defined on a result item, would allow the template to be applied.
-   *
-   * For example, a template with the following attribute only applies to result items whose `filetype` and `sourcetype` fields are defined: `if-defined="filetype,sourcetype"`
-   */
-  @Prop({reflect: true}) ifDefined?: string;
-
-  /**
-   * The field that, when defined on a result item, would prevent the template from being applied.
-   *
-   * For example, a template with the following attribute only applies to result items whose `filetype` and `sourcetype` fields are NOT defined: `if-not-defined="filetype,sourcetype"`
-   */
-  @Prop({reflect: true}) ifNotDefined?: string;
-
-  /**
-   * The field and values that define which result items the condition must be applied to.
-   *
-   * For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`
-   */
-  @Prop() @MapProp({splitValues: true}) public mustMatch: Record<
-    string,
-    string[]
-  > = {};
-
-  /**
-   * The field and values that define which result items the condition must not be applied to.
-   *
-   * For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage"`
-   */
-  @Prop() @MapProp({splitValues: true}) public mustNotMatch: Record<
-    string,
-    string[]
-  > = {};
-
-  constructor() {}
-
-  connectedCallback() {
-    this.resultTemplateCommon = new ResultTemplateCommon({
-      host: this.host,
-      setError: (err) => {
-        this.error = err;
-      },
-      validParents: [
-        'atomic-insight-result-list',
-        'atomic-insight-folded-result-list',
-      ],
-      allowEmpty: true,
-    });
-  }
-
-  public componentWillLoad() {
-    this.conditions = makeDefinedConditions(this.ifDefined, this.ifNotDefined);
-    this.resultTemplateCommon.matchConditions = makeMatchConditions(
-      this.mustMatch,
-      this.mustNotMatch
-    );
-  }
-
-  /**
-   * Gets the appropriate result template based on conditions applied.
-   */
-  @Method()
-  public async getTemplate(): Promise<InsightResultTemplate<DocumentFragment> | null> {
-    return this.resultTemplateCommon.getTemplate(this.conditions, this.error);
-  }
-
-  public render() {
-    return this.resultTemplateCommon.renderIfError(this.error);
-  }
-}
diff --git a/packages/atomic/src/utils/custom-element-tags.ts b/packages/atomic/src/utils/custom-element-tags.ts
index 85485a08de3..a921f3a176a 100644
--- a/packages/atomic/src/utils/custom-element-tags.ts
+++ b/packages/atomic/src/utils/custom-element-tags.ts
@@ -59,6 +59,7 @@ export const ATOMIC_CUSTOM_ELEMENT_TAGS = new Set<string>([
   'atomic-icon',
   'atomic-insight-generate-answer-button',
   'atomic-insight-interface',
+  'atomic-insight-result-template',
   'atomic-insight-tab',
   'atomic-insight-tabs',
   'atomic-ipx-tab',