diff --git a/clients/search-component/example/src/routes/ecommerce.tsx b/clients/search-component/example/src/routes/ecommerce.tsx
index cc5baf678f..88851531b3 100644
--- a/clients/search-component/example/src/routes/ecommerce.tsx
+++ b/clients/search-component/example/src/routes/ecommerce.tsx
@@ -2,7 +2,6 @@
 import { TrieveModalSearch } from "../../../src/index";
 import "../../../dist/index.css";
 import { useState } from "react";
-
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/ecommerce")({
diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
index e5a0496db6..123292860e 100644
--- a/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
+++ b/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import React, { Suspense, useEffect, useRef } from "react";
 import { useModalState } from "../../utils/hooks/modal-context";
 import { AIInitialMessage } from "./AIInitalMessage";
 import { useChatState } from "../../utils/hooks/chat-context";
@@ -27,9 +27,9 @@ export const ChatMode = () => {
     stopGeneratingMessage,
   } = useChatState();
 
-  const chatInput = React.useRef<HTMLInputElement>(null);
+  const chatInput = useRef<HTMLInputElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (mode == "chat" && open) {
       chatInput.current?.focus();
     }
diff --git a/clients/search-component/src/TrieveModal/Search/ProductItem.tsx b/clients/search-component/src/TrieveModal/Search/ProductItem.tsx
index e1e96f2dd4..2af0d468e7 100644
--- a/clients/search-component/src/TrieveModal/Search/ProductItem.tsx
+++ b/clients/search-component/src/TrieveModal/Search/ProductItem.tsx
@@ -148,7 +148,10 @@ export const ProductItem = ({
                 </h6>
                 {group && (
                   <button
-                    title={`Chat with ${betterGroupName || group.name}`}
+                    title={`Chat with ${(betterGroupName || group.name).replace(
+                      /<[^>]*>/g,
+                      ""
+                    )}`}
                     className="chat-product-button"
                     onClick={(e) => {
                       e.preventDefault();
diff --git a/clients/search-component/src/TrieveModal/Tags.tsx b/clients/search-component/src/TrieveModal/Tags.tsx
index a27703b1d1..0e2015c6a3 100644
--- a/clients/search-component/src/TrieveModal/Tags.tsx
+++ b/clients/search-component/src/TrieveModal/Tags.tsx
@@ -10,7 +10,10 @@ export const Tags = () => {
     (props.tags?.length ? (
       <ul className="tags">
         {[ALL_TAG, ...props.tags].map((tag, idx) => (
-          <li className={currentTag === tag.tag ? "active" : ""} key={tag.tag}>
+          <li
+            className={currentTag === tag.tag ? "active" : ""}
+            key={tag.tag ?? idx}
+          >
             <button onClick={() => setCurrentTag(tag.tag)}>
               {tag.iconClassName && <i className={tag.iconClassName}></i>}
               {tag.icon && typeof tag.icon === "function" && tag.icon()}
diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
index bab809a07e..a9c3fb9072 100644
--- a/clients/search-component/src/TrieveModal/index.css
+++ b/clients/search-component/src/TrieveModal/index.css
@@ -253,10 +253,6 @@ body {
       }
     }
 
-    .trieve-footer.ecommerce {
-      @apply -mx-4;
-    }
-
     .commands.ecommerce {
       visibility: hidden;
     }
diff --git a/clients/search-component/src/TrieveModal/index.tsx b/clients/search-component/src/TrieveModal/index.tsx
index 0ce1442603..f74e80f74d 100644
--- a/clients/search-component/src/TrieveModal/index.tsx
+++ b/clients/search-component/src/TrieveModal/index.tsx
@@ -10,14 +10,16 @@ import {
 import { useKeyboardNavigation } from "../utils/hooks/useKeyboardNavigation";
 import { ModeSwitch } from "./ModeSwitch";
 import { OpenModalButton } from "./OpenModalButton";
-import { ChatProvider } from "../utils/hooks/chat-context";
+import { ChatProvider, useChatState } from "../utils/hooks/chat-context";
 import r2wc from "@r2wc/react-to-web-component";
 import { setClickTriggers } from "../utils/hooks/setClickTriggers";
+import { ChunkGroup } from "trieve-ts-sdk";
 
 const Modal = () => {
   useKeyboardNavigation();
   setClickTriggers();
   const { mode, open, setOpen, setMode, props } = useModalState();
+  const { askQuestion, chatWithGroup } = useChatState();
 
   useEffect(() => {
     const script = document.createElement("script");
@@ -26,6 +28,31 @@ const Modal = () => {
     script.setAttribute("data-auto-replace-svg", "");
 
     document.head.appendChild(script);
+
+    const eventListener: EventListener = (e: Event) => {
+      const customEvent = e as CustomEvent<{
+        message: string;
+        group: ChunkGroup;
+        betterGroupName?: string;
+      }>;
+      if (customEvent.detail?.message && customEvent.detail.group) {
+        setOpen(true);
+        if (customEvent.detail.betterGroupName) {
+          customEvent.detail.group.name = customEvent.detail.betterGroupName;
+        }
+        chatWithGroup(
+          customEvent.detail.group,
+          customEvent.detail.betterGroupName
+        );
+        askQuestion(customEvent.detail.message, customEvent.detail.group);
+      }
+    };
+    window.removeEventListener("trieve-start-chat-with-group", eventListener);
+    window.addEventListener("trieve-start-chat-with-group", eventListener);
+
+    return () => {
+      window.removeEventListener("trieve-start-chat-with-group", eventListener);
+    };
   }, []);
 
   useEffect(() => {
diff --git a/clients/search-component/src/utils/hooks/chat-context.tsx b/clients/search-component/src/utils/hooks/chat-context.tsx
index 2321742ff2..10e0466632 100644
--- a/clients/search-component/src/utils/hooks/chat-context.tsx
+++ b/clients/search-component/src/utils/hooks/chat-context.tsx
@@ -32,7 +32,7 @@ function removeBrackets(str: string) {
 }
 
 const ChatContext = createContext<{
-  askQuestion: (question?: string) => Promise<void>;
+  askQuestion: (question?: string, group?: ChunkGroup) => Promise<void>;
   isLoading: boolean;
   messages: Messages;
   currentQuestion: string;
@@ -167,18 +167,22 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
   const createQuestion = async ({
     id,
     question,
+    group,
   }: {
     id?: string;
     question?: string;
+    group?: ChunkGroup;
   }) => {
     setIsLoading(true);
 
+    const curGroup = group || currentGroup;
+
     // Use group search
-    if (currentGroup) {
+    if (curGroup) {
       // Should already be preloaded when group selected to chat with
       const groupChunks = await cached(() => {
-        return getAllChunksForGroup(currentGroup.id, trieveSDK);
-      }, `chunk-ids-${currentGroup.id}`);
+        return getAllChunksForGroup(curGroup.id, trieveSDK);
+      }, `chunk-ids-${curGroup.id}`);
 
       const { reader, queryId } = await trieveSDK.ragOnChunkReaderWithQueryId(
         {
@@ -220,7 +224,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
     }
   };
 
-  const chatWithGroup = async (group: ChunkGroup, betterGroupName?: string) => {
+  const chatWithGroup = (group: ChunkGroup, betterGroupName?: string) => {
     if (betterGroupName) {
       group.name = betterGroupName;
     }
@@ -256,7 +260,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
     clearConversation();
   };
 
-  const askQuestion = async (question?: string) => {
+  const askQuestion = async (question?: string, group?: ChunkGroup) => {
     isDoneReading.current = false;
     setMessages((m) => [
       ...m,
@@ -270,10 +274,15 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
       ],
     ]);
 
-    if (!currentTopic) {
+    if (!currentGroup && group) {
+      chatWithGroup(group);
+      setCurrentGroup(group);
+    }
+
+    if (!currentTopic && !currentGroup && !group) {
       await createTopic({ question: question || currentQuestion });
     } else {
-      await createQuestion({ question: question || currentQuestion });
+      await createQuestion({ question: question || currentQuestion, group });
     }
 
     setCurrentQuestion("");
diff --git a/clients/ts-sdk/openapi.json b/clients/ts-sdk/openapi.json
index 889f4e2300..26245dcf17 100644
--- a/clients/ts-sdk/openapi.json
+++ b/clients/ts-sdk/openapi.json
@@ -15287,6 +15287,10 @@
       "SingleProductOptions": {
         "type": "object",
         "properties": {
+          "groupTrackingId": {
+            "type": "string",
+            "nullable": true
+          },
           "productDescriptionHtml": {
             "type": "string",
             "nullable": true
@@ -15299,6 +15303,13 @@
             "type": "string",
             "nullable": true
           },
+          "productQuestions": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "nullable": true
+          },
           "productTrackingId": {
             "type": "string",
             "nullable": true
diff --git a/clients/ts-sdk/src/types.gen.ts b/clients/ts-sdk/src/types.gen.ts
index 22782d2c8c..ddd8a8dd03 100644
--- a/clients/ts-sdk/src/types.gen.ts
+++ b/clients/ts-sdk/src/types.gen.ts
@@ -2853,9 +2853,11 @@ export type SemanticBoost = {
 };
 
 export type SingleProductOptions = {
+    groupTrackingId?: (string) | null;
     productDescriptionHtml?: (string) | null;
     productName?: (string) | null;
     productPrimaryImageUrl?: (string) | null;
+    productQuestions?: Array<(string)> | null;
     productTrackingId?: (string) | null;
     recSearchQuery?: (string) | null;
 };
diff --git a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
index c880875a89..45314834c6 100644
--- a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
+++ b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
@@ -866,6 +866,7 @@ export const SingleProductOptions = () => {
   const { extraParams, setExtraParams } = usePublicPage();
   const [defaultDetailOpen] = createSignal(
     !!extraParams.singleProductOptions?.productTrackingId ||
+      !!extraParams.singleProductOptions?.groupTrackingId ||
       !!extraParams.singleProductOptions?.productName ||
       !!extraParams.singleProductOptions?.productDescriptionHtml ||
       !!extraParams.singleProductOptions?.productPrimaryImageUrl,
@@ -922,6 +923,46 @@ export const SingleProductOptions = () => {
           />
         </div>
       </div>
+      <div class="flex gap-4 pb-2 pt-2">
+        <div class="grow">
+          <label class="block">Group Tracking ID</label>
+          <input
+            placeholder="Tracking ID of the product to display"
+            value={extraParams.singleProductOptions?.groupTrackingId || ""}
+            onInput={(e) => {
+              setExtraParams("singleProductOptions", {
+                ...extraParams.singleProductOptions,
+                groupTrackingId: e.currentTarget.value,
+              });
+            }}
+            class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+          />
+        </div>
+        <div class="grow">
+          <div class="flex items-center gap-1">
+            <label class="block" for="">
+              Product Questions
+            </label>
+            <Tooltip
+              tooltipText="Example AI questions which may be asked about the product"
+              body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
+            />
+          </div>
+          <MultiStringInput
+            placeholder="What does it do?..."
+            value={extraParams.singleProductOptions?.productQuestions || []}
+            onChange={(e) => {
+              setExtraParams("singleProductOptions", {
+                ...extraParams.singleProductOptions,
+                productQuestions: e,
+              });
+            }}
+            addLabel="Add Product Question"
+            addClass="text-sm"
+            inputClass="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+          />
+        </div>
+      </div>
       <div class="flex gap-4 pb-2 pt-2">
         <div class="grow">
           <label class="block">Recommendation Search Query</label>
diff --git a/server/src/handlers/page_handler.rs b/server/src/handlers/page_handler.rs
index 185df142b6..51a4dadb4e 100644
--- a/server/src/handlers/page_handler.rs
+++ b/server/src/handlers/page_handler.rs
@@ -140,10 +140,12 @@ pub struct OpenGraphMetadata {
 #[serde(rename_all = "camelCase")]
 pub struct SingleProductOptions {
     product_tracking_id: Option<String>,
+    group_tracking_id: Option<String>,
     product_name: Option<String>,
     product_description_html: Option<String>,
     product_primary_image_url: Option<String>,
     rec_search_query: Option<String>,
+    product_questions: Option<Vec<String>>,
 }
 
 #[derive(Serialize, Deserialize, Debug, Clone, ToSchema, Default)]
diff --git a/server/src/public/navbar.html b/server/src/public/navbar.html
index c363cf55be..9a41de8c8d 100644
--- a/server/src/public/navbar.html
+++ b/server/src/public/navbar.html
@@ -1,6 +1,6 @@
 <nav class="bg-white border-b">
   <div
-    class="max-w-screen-2xl mx-auto w-full p-2 flex items-center justify-center flex-col gap-4 sm:justify-between sm:!flex-row"
+    class="max-w-screen-2xl mx-auto w-full p-2 flex items-center justify-center flex-col gap-2 sm:gap-4 sm:justify-between sm:!flex-row"
   >
     <a class="flex items-center" href="https://trieve.ai">
       <img
@@ -33,7 +33,7 @@
         </a>
       </p>
     </div>
-    <div class="sm:flex-1"></div>
+    <div class="flex-1"></div>
     <div
       id="nav-links"
       class="flex flex-wrap items-center gap-4 justify-center sm:justify-right"
diff --git a/server/src/public/page.html b/server/src/public/page.html
index 57aee8fdae..bfdae6e359 100644
--- a/server/src/public/page.html
+++ b/server/src/public/page.html
@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="/static/output.css" />
     <link
       rel="stylesheet"
-      href="https://unpkg.com/trieve-search-component@0.2.22/dist/index.css"
+      href="https://unpkg.com/trieve-search-component@0.2.25/dist/index.css"
     />
     <link
       rel="apple-touch-icon"
@@ -267,7 +267,7 @@
     </style>
 
     <script type="module">
-      import {renderToDiv} from 'https://unpkg.com/trieve-search-component@0.2.22/dist/vanilla/index.js';
+      import {renderToDiv} from 'https://unpkg.com/trieve-search-component@0.2.25/dist/vanilla/index.js';
       const root = document.getElementById('root');
       renderToDiv(root, {
         ... {{params | tojson}}
@@ -280,7 +280,7 @@
     <main>
       <div class="basic">
         <div id="root" class="min-h-[36px]"></div>
-        {% if params.type == "ecommerce" %} {% include "product.html" %} {%
+        {% if params.singleProductOptions.productName %} {% include "product.html" %} {%
         endif %} {% if tabs|length > 0 %} {% include "tabs.html" %} {% else %}
         {% include "search-component-code.html" %} {% endif %}
       </div>
@@ -320,10 +320,22 @@
       await new Promise((resolve) => setTimeout(resolve, 10));
     }
 
-    const circleAnimation = annotate(openTrieveModalElement, {
+    let recElement = document.querySelector(".recs-section");
+    let recBracketAnimation = null;
+    if (window.innerWidth > 1024 && recElement) {
+      recElement.style.width = tabContainer.offsetWidth + "px";
+      recBracketAnimation = annotate(recElement, {
+        type: "bracket",
+        color: window.paramsData.brandColor || "black",
+        padding: 8,
+        brackets: ["left"],
+      });
+    }
+
+    const circleSearchAnimation = annotate(openTrieveModalElement, {
       type: "circle",
       color: window.paramsData.brandColor || "black",
-      padding: 30,
+      padding: 35,
     });
 
     const brandUnderlineAnimation = annotate(brandNameElement, {
@@ -333,19 +345,6 @@
       padding: 3,
     });
 
-    const rect = openTrieveModalElement.getBoundingClientRect();
-
-    let endX = rect.right + 128;
-    let endY = rect.bottom + 45;
-
-    if (endX > window.innerWidth) {
-      endX = window.innerWidth - 125;
-      endY += 15;
-    }
-
-    const startX = rect.right + 40;
-    const startY = rect.bottom - 15;
-
     const canvas = document.getElementById("canvas");
     canvas.style.position = "absolute";
     canvas.style.left = "0";
@@ -355,12 +354,21 @@
     canvas.height =
       document.documentElement.clientHeight || document.body.clientHeight;
     canvas.style.zIndex = "-1";
-
     const rc = rough.canvas(canvas);
 
+    const openTrieveRect = openTrieveModalElement.getBoundingClientRect();
+    let endOpenX = openTrieveRect.right + 133;
+    let endOpenY = openTrieveRect.bottom + 45;
+    if (endOpenX > window.innerWidth) {
+      endOpenX = window.innerWidth - 125;
+      endOpenY += 15;
+    }
+    const startOpenX = openTrieveRect.right + 55;
+    const startOpenY = openTrieveRect.bottom - 15;
+
     rc.path(
-      `M ${startX} ${startY}
-         Q ${startX + 85} ${endY - 85} ${endX} ${endY}`,
+      `M ${startOpenX} ${startOpenY}
+         Q ${startOpenX + 85} ${endOpenY - 85} ${endOpenX} ${endOpenY}`,
       {
         stroke: window.paramsData.brandColor || "black",
         strokeWidth: 2,
@@ -370,14 +378,69 @@
     );
 
     const arrowSize = 10;
-    rc.line(startX, startY, startX + arrowSize, startY + arrowSize, {
-      stroke: window.paramsData.brandColor || "black",
-      strokeWidth: 2,
-    });
-    rc.line(startX, startY, startX + arrowSize, startY - arrowSize, {
-      stroke: window.paramsData.brandColor || "black",
-      strokeWidth: 2,
-    });
+    rc.line(
+      startOpenX - 5,
+      startOpenY,
+      startOpenX + arrowSize,
+      startOpenY + arrowSize,
+      {
+        stroke: window.paramsData.brandColor || "black",
+        strokeWidth: 2,
+      }
+    );
+    rc.line(
+      startOpenX - 5,
+      startOpenY,
+      startOpenX + arrowSize,
+      startOpenY - arrowSize,
+      {
+        stroke: window.paramsData.brandColor || "black",
+        strokeWidth: 2,
+      }
+    );
+
+    let endRecX = 0;
+    let endRecY = 0;
+    if (recBracketAnimation) {
+      const relHeadingElement = document.getElementById("related-heading");
+      const recHeadingRect = relHeadingElement.getBoundingClientRect();
+      endRecX = recHeadingRect.right + 164;
+      endRecY = recHeadingRect.top - 5;
+      const startRecX = recHeadingRect.right + 15;
+      const startRecY = recHeadingRect.top + 15;
+
+      rc.path(
+        `M ${startRecX} ${startRecY}
+           Q ${startRecX + 80} ${startRecY + 20} ${endRecX} ${endRecY}`,
+        {
+          stroke: window.paramsData.brandColor || "black",
+          strokeWidth: 2,
+          roughness: 3,
+          bowing: 3,
+        }
+      );
+
+      rc.line(
+        startRecX - 5,
+        startRecY,
+        startRecX + arrowSize,
+        startRecY + arrowSize * 1.5,
+        {
+          stroke: window.paramsData.brandColor || "black",
+          strokeWidth: 2,
+        }
+      );
+      rc.line(
+        startRecX - 5,
+        startRecY,
+        startRecX + arrowSize,
+        startRecY - arrowSize,
+        {
+          stroke: window.paramsData.brandColor || "black",
+          strokeWidth: 2,
+        }
+      );
+    }
 
     await Promise.all([
       document.fonts.load("16px Architects Daughter"),
@@ -388,9 +451,15 @@
     ctx.font = "500 32px Architects Daughter, cursive";
     ctx.fontDisplay = "swap";
     ctx.fillStyle = window.paramsData.brandColor || "black";
-    ctx.fillText("Try Me!", endX - 30, endY + 30);
+    ctx.fillText("Try Me!", endOpenX - 40, endOpenY + 30);
+
+    if (recBracketAnimation) {
+      ctx.font = "500 20px Architects Daughter, cursive";
+      ctx.fillText("Personalized + auto optimized", endRecX + 10, endRecY - 5);
+      recBracketAnimation.show();
+    }
 
-    circleAnimation.show();
+    circleSearchAnimation.show();
     brandUnderlineAnimation.show();
   </script>
 </html>
diff --git a/server/src/public/product.html b/server/src/public/product.html
index 9026dc9af8..28e525ac07 100644
--- a/server/src/public/product.html
+++ b/server/src/public/product.html
@@ -6,12 +6,12 @@
       <div class="lg:w-1/2">
         <img
           src="{{ params.singleProductOptions.productPrimaryImageUrl }}"
-          alt="Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles."
-          class="aspect-4/3 w-full rounded-lg bg-gray-100 object-cover"
+          alt="View of product."
+          class="aspect-4/3 w-full rounded-lg bg-gray-100 object-cover max-h-80 sm:max-h-[30rem]"
         />
       </div>
 
-      <div class="mx-auto lg:w-1/2">
+      <div class="mx-auto mt-4 lg:mt-0 lg:w-1/2">
         <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
           {{ params.singleProductOptions.productName }}
         </h1>
@@ -36,25 +36,15 @@ <h3 class="text-sm font-medium text-gray-900 mt-4">
             ></span>
             Ask AI
           </h3>
-          <div class="flex flex-wrap gap-1 mt-2">
+          <div class="starter-questions flex flex-wrap gap-1 mt-2">
+            {% for question in params.singleProductOptions.productQuestions %}
             <button
               type="button"
               class="bg-gray-50 px-3 py-1.5 text-sm rounded-lg text-brand-color"
             >
-              Are these good in deep snow?
-            </button>
-            <button
-              type="button"
-              class="bg-gray-50 px-3 py-1.5 text-sm rounded-lg text-brand-color"
-            >
-              What kind of bindings do these require?
-            </button>
-            <button
-              type="button"
-              class="bg-gray-50 px-3 py-1.5 text-sm rounded-lg text-brand-color"
-            >
-              Are these the right length for my height and skill level?
+              {{ question }}
             </button>
+            {% endfor %}
             <button
               type="button"
               class="bg-brand-color px-3 py-1.5 text-sm rounded-lg text-white"
@@ -70,37 +60,39 @@ <h3 class="text-sm font-medium text-gray-900 mt-4">
       aria-labelledby="related-heading"
       class="border-t border-gray-200 px-4 mt-4 sm:px-0"
     >
-      <h2 id="related-heading" class="text-xl font-bold text-gray-900 mt-8">
-        Related products
-      </h2>
-
-      <div
-        class="recs mt-6 flex flex-nowrap overflow-x-auto sm:gap-x-6 xl:gap-x-8 py-2"
-      >
-        {% for i in range(5) %}
-        <div class="w-64 flex-shrink-0">
-          <div class="h-72 w-full overflow-hidden rounded-lg">
-            <div class="h-full w-full bg-gray-200 animate-pulse"></div>
-          </div>
-          <div class="mt-4">
-            <div class="h-4 w-2/3 bg-gray-200 rounded animate-pulse"></div>
-            <div class="mt-1 h-4 w-1/2 bg-gray-200 rounded animate-pulse"></div>
-          </div>
-          <div
-            class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4"
-          >
-            <div
-              class="h-6 w-16 bg-gray-200 line-clamp-1 rounded animate-pulse"
-            ></div>
-          </div>
-          <div class="mt-6">
-            <div
-              class="w-full cursor-not-allowed h-10 bg-gray-200 rounded-md animate-pulse"
-            ></div>
+      <div class="recs-section">
+        <h2
+          id="related-heading"
+          class="text-xl font-bold text-gray-900 mt-8 w-fit"
+        >
+          Related products
+        </h2>
+        <h4 class="text-sm text-gray-500 mt-2 w-fit">
+          Tailored to user history. AI automatically optimizes conversions.
+        </h4>
+
+        <div
+          class="recs mt-6 flex flex-nowrap overflow-x-auto gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 mx-4 sm:mx-6 lg:mx-8"
+        >
+          {% for i in range(5) %}
+          <div class="w-64 flex-shrink-0">
+            <div class="h-72 w-full overflow-hidden rounded-lg">
+              <div class="h-full w-full bg-gray-200 animate-pulse"></div>
+            </div>
+            <div class="mt-4">
+              <div class="h-4 w-2/3 bg-gray-200 rounded animate-pulse"></div>
+              <div
+                class="mt-1 h-4 w-1/2 bg-gray-200 rounded animate-pulse"
+              ></div>
+            </div>
+            <div class="mt-6">
+              <div
+                class="w-full cursor-not-allowed h-10 bg-gray-200 rounded-md animate-pulse"
+              ></div>
+            </div>
           </div>
+          {% endfor %}
         </div>
-
-        {% endfor %}
       </div>
     </section>
   </div>
@@ -178,16 +170,10 @@ <h2 id="related-heading" class="text-xl font-bold text-gray-900 mt-8">
         />
       </div>
       <div class="mt-4">
-        <h3 class="rec-title text-sm font-medium text-gray-900">${title}</h3>
+        <h3 class="rec-title line-clamp-1 text-sm font-medium text-gray-900">${title}</h3>
+        <h6 class="rec-price mt-1 text-sm text-gray-700">${price}</h6>
         <p class="rec-description line-clamp-1 mt-1 text-sm text-gray-500">${description}</p>
       </div>
-      <div
-        class="absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4"
-      >
-        <p class="rec-price text-lg font-semibold text-white">
-          $${price}
-        </p>
-      </div>
       <div class="mt-6">
         <button
           class="bg-brand-color cursor-not-allowed w-full flex items-center justify-center rounded-md border border-transparent px-8 py-2 text-sm font-medium text-white"
@@ -205,8 +191,40 @@ <h3 class="rec-title text-sm font-medium text-gray-900">${title}</h3>
   recDivs.forEach((recDiv) => {
     recs.appendChild(recDiv);
   });
+</script>
+<script type="module">
+  const getGroupByTrackingIdResp = await fetch(
+    `${window.paramsData.baseUrl}/api/chunk_group/tracking_id/${window.paramsData.singleProductOptions.groupTrackingId}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: "Bearer " + window.paramsData.apiKey,
+        "TR-Dataset": window.paramsData.datasetId,
+      },
+    }
+  );
+  const group = await getGroupByTrackingIdResp.json();
 
-  // TODO: Refresh button for recommendations
-
-  // TODO: Refresh button for AI questions
+  const starterQuestions = document.querySelectorAll(
+    ".starter-questions button"
+  );
+  starterQuestions.forEach((button) => {
+    button.addEventListener("click", async () => {
+      const message = button.textContent;
+      const betterGroupName =
+        window.paramsData.singleProductOptions.productName;
+
+
+      window.dispatchEvent(
+        new CustomEvent("trieve-start-chat-with-group", {
+          detail: {
+            group,
+            betterGroupName,
+            message,
+          },
+        })
+      );
+    });
+  });
 </script>
diff --git a/server/static/output.css b/server/static/output.css
index 34b4a94621..95249a2c64 100644
--- a/server/static/output.css
+++ b/server/static/output.css
@@ -566,20 +566,16 @@ video {
   position: relative;
 }
 
-.inset-x-0 {
-  left: 0px;
-  right: 0px;
-}
-
-.top-0 {
-  top: 0px;
-}
-
 .-my-4 {
   margin-top: -1rem;
   margin-bottom: -1rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -637,10 +633,6 @@ video {
   height: 1rem;
 }
 
-.h-6 {
-  height: 1.5rem;
-}
-
 .h-72 {
   height: 18rem;
 }
@@ -649,6 +641,10 @@ video {
   height: 100%;
 }
 
+.max-h-80 {
+  max-height: 20rem;
+}
+
 .min-h-\[36px\] {
   min-height: 36px;
 }
@@ -657,10 +653,6 @@ video {
   width: 50%;
 }
 
-.w-16 {
-  width: 4rem;
-}
-
 .w-2\/3 {
   width: 66.666667%;
 }
@@ -669,6 +661,11 @@ video {
   width: 16rem;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .w-full {
   width: 100%;
 }
@@ -681,6 +678,10 @@ video {
   max-width: 1536px;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -711,18 +712,10 @@ video {
   flex-wrap: nowrap;
 }
 
-.items-end {
-  align-items: flex-end;
-}
-
 .items-center {
   align-items: center;
 }
 
-.justify-end {
-  justify-content: flex-end;
-}
-
 .justify-center {
   justify-content: center;
 }
@@ -739,6 +732,11 @@ video {
   gap: 1rem;
 }
 
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -809,10 +807,6 @@ video {
   padding: 0.5rem;
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -874,11 +868,6 @@ video {
   line-height: 1.5rem;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -897,10 +886,6 @@ video {
   font-weight: 500;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -915,6 +900,11 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -929,10 +919,6 @@ video {
   text-decoration-line: underline;
 }
 
-.outline {
-  outline-style: solid;
-}
-
 .focus\:ring-0:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -940,12 +926,17 @@ video {
 }
 
 @media (min-width: 640px) {
+  .sm\:mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
   .sm\:mt-6 {
     margin-top: 1.5rem;
   }
 
-  .sm\:flex-1 {
-    flex: 1 1 0%;
+  .sm\:max-h-\[30rem\] {
+    max-height: 30rem;
   }
 
   .sm\:\!flex-row {
@@ -956,6 +947,10 @@ video {
     justify-content: space-between;
   }
 
+  .sm\:gap-4 {
+    gap: 1rem;
+  }
+
   .sm\:gap-x-6 {
     -moz-column-gap: 1.5rem;
          column-gap: 1.5rem;
@@ -987,6 +982,15 @@ video {
 }
 
 @media (min-width: 1024px) {
+  .lg\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .lg\:mt-0 {
+    margin-top: 0px;
+  }
+
   .lg\:flex {
     display: flex;
   }