diff --git a/src/adapter/adapter.ts b/src/adapter/adapter.ts
index 6dbaca3a..336c2676 100644
--- a/src/adapter/adapter.ts
+++ b/src/adapter/adapter.ts
@@ -1,8 +1,3 @@
-import type {
-  PlatformRecommendationsRequest,
-  PlatformResult,
-  PlatformSemanticQueriesRequest,
-} from '@empathyco/x-adapter-platform'
 import type {
   ExperienceControlsResponse,
   RecommendationsRequest,
@@ -12,7 +7,11 @@ import type {
 import {
   experienceControlsResponseSchema,
   platformAdapter,
+  type PlatformRecommendationsRequest,
+  type PlatformResult,
+  type PlatformSemanticQueriesRequest,
   recommendationsRequestSchema,
+  relatedPromptsEndpointAdapter,
   resultSchema,
   semanticQueriesRequestSchema,
 } from '@empathyco/x-adapter-platform'
@@ -74,3 +73,9 @@ experienceControlsResponseSchema.$override<
     },
   },
 })
+
+adapter.relatedPrompts = relatedPromptsEndpointAdapter.extends({
+  endpoint:
+    'https://api.empathy.co/relatedprompts/mymotivemarketplace?store=Labstore+London&lang=en',
+  requestMapper: ({ query }) => ({ query }),
+})
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index 1848edd5..cb98e091 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -9,7 +9,11 @@
             <LocationProvider location="results">
               <SpellcheckMessage class="x-mb-16" data-test="spellcheck-message" />
             </LocationProvider>
-            <NoResultsMessage class="x-mb-16" data-test="no-results-message" />
+            <NoResultsMessage
+              v-if="showNoResultsMessage"
+              class="x-mb-16"
+              data-test="no-results-message"
+            />
             <FallbackDisclaimerMessage class="x-mb-16" />
           </div>
 
@@ -52,9 +56,9 @@
 </template>
 
 <script lang="ts">
-import { animateTranslate, BaseIdModal, LocationProvider } from '@empathyco/x-components'
+import { animateTranslate, BaseIdModal, LocationProvider, useState } from '@empathyco/x-components'
 import { MainScroll, Scroll } from '@empathyco/x-components/scroll'
-import { defineAsyncComponent, defineComponent } from 'vue'
+import { computed, defineAsyncComponent, defineComponent } from 'vue'
 import { useHasSearched } from '../../composables/use-has-searched.composable'
 import MainComponent from '../main.vue'
 import MaxDesktopWidthItem from '../max-desktop-width-item.vue'
@@ -89,7 +93,15 @@ export default defineComponent({
   setup() {
     const rightAsideAnimation = animateTranslate('right')
     const { hasSearched } = useHasSearched()
-    return { rightAsideAnimation, hasSearched }
+    const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts'])
+
+    const showNoResultsMessage = computed(() => !relatedPrompts.value?.length)
+
+    return {
+      hasSearched,
+      rightAsideAnimation,
+      showNoResultsMessage,
+    }
   },
 })
 </script>
diff --git a/src/components/main.vue b/src/components/main.vue
index 870ba3bc..adbbb6d7 100644
--- a/src/components/main.vue
+++ b/src/components/main.vue
@@ -4,10 +4,16 @@
     <LocationProvider location="results">
       <Results />
     </LocationProvider>
-    <LocationProvider :location="semanticsLocation">
+    <LocationProvider v-if="showRelatedPrompts" location="related_prompts">
+      <CustomRelatedPrompts
+        :related-prompt-list="relatedPrompts"
+        :class="x.noResults ? 'desktop:x-mt-24' : 'x-mt-24 desktop:x-mt-32'"
+      />
+    </LocationProvider>
+    <LocationProvider v-if="!showRelatedPrompts" :location="semanticsLocation">
       <CustomSemanticQueries />
     </LocationProvider>
-    <LocationProvider v-if="!x.semanticQueries.length" location="results">
+    <LocationProvider v-if="showPartials" location="results">
       <PartialResults />
     </LocationProvider>
     <LocationProvider v-if="showRecommendations" location="no_results">
@@ -18,34 +24,64 @@
 
 <script lang="ts">
 import type { FeatureLocation } from '@empathyco/x-components'
-import { LocationProvider, use$x } from '@empathyco/x-components'
+import type { SemanticQueriesConfig } from '@empathyco/x-components/types'
+import type { ComputedRef } from 'vue'
+import { LocationProvider, use$x, useState } from '@empathyco/x-components'
 import { computed, defineAsyncComponent, defineComponent } from 'vue'
 import { useHasSearched } from '../composables/use-has-searched.composable'
+import CustomRelatedPrompts from './related-prompts/custom-related-prompts.vue'
 import CustomRecommendations from './results/custom-recommendations.vue'
 import CustomSemanticQueries from './search/custom-semantic-queries.vue'
 
 export default defineComponent({
   name: 'MainComponent',
   components: {
+    CustomRecommendations,
+    CustomRelatedPrompts,
     CustomSemanticQueries,
     LocationProvider,
-    CustomRecommendations,
     PartialResults: defineAsyncComponent(() => import('./search').then(m => m.PartialResults)),
-    Results: defineAsyncComponent(() => import('./search').then(m => m.Results)),
     Redirection: defineAsyncComponent(() => import('./search').then(m => m.Redirection)),
+    Results: defineAsyncComponent(() => import('./search').then(m => m.Results)),
   },
   setup() {
     const { hasSearched } = useHasSearched()
     const x = use$x()
 
+    const semanticQueriesConfig = useState('semanticQueries', ['config'])
+      .config as ComputedRef<SemanticQueriesConfig>
+
+    const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts'])
+
     const semanticsLocation = computed<FeatureLocation>(() =>
       x.results.length > 0 ? 'low_results' : 'no_results',
     )
+
     const showRecommendations = computed(
       () => x.noResults && !x.partialResults.length && !x.semanticQueries.length,
     )
 
-    return { hasSearched, semanticsLocation, showRecommendations, x }
+    const showPartials = computed(
+      () => x.noResults && !x.semanticQueries.length && !relatedPrompts.value?.length,
+    )
+
+    const isLowResult = computed(
+      () => x.totalResults > 0 && x.totalResults < semanticQueriesConfig.value.threshold,
+    )
+
+    const showRelatedPrompts = computed(
+      () => (x.noResults || isLowResult.value) && relatedPrompts.value?.length,
+    )
+
+    return {
+      hasSearched,
+      relatedPrompts,
+      semanticsLocation,
+      showPartials,
+      showRecommendations,
+      showRelatedPrompts,
+      x,
+    }
   },
 })
 </script>
diff --git a/src/components/related-prompts/custom-related-prompts.vue b/src/components/related-prompts/custom-related-prompts.vue
new file mode 100644
index 00000000..1088b18c
--- /dev/null
+++ b/src/components/related-prompts/custom-related-prompts.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="x-mb-32 x-flex x-flex-col">
+    <i18n-t
+      class="x-no-results-message x-text1 x-flex x-flex-wrap x-items-center x-justify-center x-break-words x-bg-neutral-10 x-p-24 x-text-center x-text-neutral-90 desktop:x-text1-lg"
+      keypath="relatedPrompts.title"
+      tag="span"
+      scope="global"
+    >
+      <template #query>
+        <span class="x-title3 x-w-auto">{{ x.query.search }}</span>
+      </template>
+    </i18n-t>
+
+    <div class="x-flex x-flex-col">
+      <RelatedPromptsTagList class="x-my-24" />
+      <CustomQueryPreview
+        v-if="selectedPrompt !== -1"
+        :key="queriesPreviewInfo.length"
+        class="x-rounded-[12px] x-bg-neutral-10 x-px-16"
+        :queries-preview-info="queriesPreviewInfo"
+      ></CustomQueryPreview>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import type { RelatedPrompt } from '@empathyco/x-types'
+import type { PropType } from 'vue'
+import { use$x, useState } from '@empathyco/x-components'
+import { relatedPromptsXModule } from '@empathyco/x-components/related-prompts'
+import { computed, defineComponent } from 'vue'
+import CustomQueryPreview from '../search/results/custom-query-preview.vue'
+import RelatedPromptsTagList from './related-prompts-tag-list.vue'
+
+export default defineComponent({
+  name: 'CustomRelatedPrompts',
+  xModule: relatedPromptsXModule.name,
+  components: {
+    CustomQueryPreview,
+    RelatedPromptsTagList,
+  },
+  props: {
+    relatedPromptList: {
+      type: Array as PropType<RelatedPrompt[]>,
+      required: true,
+      default: () => [],
+    },
+  },
+  setup() {
+    const x = use$x()
+    const { relatedPrompts, selectedPrompt, selectedQuery } = useState('relatedPrompts', [
+      'relatedPrompts',
+      'selectedPrompt',
+      'selectedQuery',
+    ])
+
+    const queriesPreviewInfo = computed(() => {
+      const queries = relatedPrompts.value[selectedPrompt.value].nextQueries as string[]
+      if (selectedQuery.value === -1) {
+        return queries.map(query => ({ query }))
+      } else {
+        return [{ query: queries[selectedQuery.value] }]
+      }
+    })
+
+    return {
+      queriesPreviewInfo,
+      selectedPrompt,
+      x,
+    }
+  },
+})
+</script>
diff --git a/src/components/related-prompts/related-prompts-tag-list.vue b/src/components/related-prompts/related-prompts-tag-list.vue
new file mode 100644
index 00000000..b4e1abac
--- /dev/null
+++ b/src/components/related-prompts/related-prompts-tag-list.vue
@@ -0,0 +1,224 @@
+<template>
+  <CustomSlidingPanel
+    :reset-on-content-change="true"
+    :scroll-container-class="
+      selectedIndex === -1 ? 'desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm' : ''
+    "
+  >
+    <div
+      ref="slidingPanelContent"
+      class="x-flex x-gap-8 x-font-main desktop:x-mx-0 desktop:x-mb-0"
+      :class="{ 'x-w-[calc(100%)]': selectedIndex !== -1 }"
+    >
+      <div
+        v-for="(suggestion, index) in relatedPrompts"
+        :key="index"
+        :style="{ animationDelay: `${index * 0.4 + 0.05}s` }"
+        class="x-text-neutral-80 x-flex x-h-[112px] x-flex-col x-rounded-[12px] x-bg-neutral-10 x-text-md x-font-[400] x-transition-all x-duration-500 x-staggered-initial"
+        :class="[
+          { 'x-staggered-animation': isVisible },
+          { 'x-hidden': shouldHideButton(index) },
+          isSelected(index) ? 'x-w-full' : 'x-w-[204px] desktop:x-w-[303px]',
+        ]"
+        data-test="related-prompt-item"
+      >
+        <!-- Suggestion -->
+        <button
+          class="x-flex x-flex-row x-items-start x-justify-between x-gap-12 x-px-16 x-pt-8 x-text-start x-transition-all x-duration-500"
+          :class="isSelected(index) ? 'x-w-full' : 'x-w-[204px] x-grow desktop:x-w-[303px]'"
+          @click="toggleSuggestion(index)"
+        >
+          <div class="x-flex x-min-h-[32px]">
+            <span
+              class="x-typewritter-initial"
+              :class="[{ 'x-typewritter-animation': isVisible }]"
+              :style="{
+                animationDelay: `${index * 0.4 + 0.05}s`,
+                '--suggestion-text-length': suggestion.suggestionText.length,
+              }"
+            >
+              {{ suggestion.suggestionText }}
+            </span>
+          </div>
+          <div class="x-mr-8 x-mt-8">
+            <CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
+            <PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
+          </div>
+        </button>
+
+        <!-- Next queries -->
+        <div
+          v-if="isSelected(index)"
+          class="x-no-scrollbar x-mt-8 x-flex x-w-full x-gap-12 x-overflow-y-hidden x-overflow-x-scroll x-px-16"
+        >
+          <button
+            v-for="(query, queryIndex) in suggestion.nextQueries"
+            :key="query"
+            :style="{ animationDelay: `${queryIndex * 0.3}s` }"
+            class="x-tag-outlined x-flex x-h-[40px] x-items-center x-justify-center x-gap-4 x-rounded-full x-border-1 x-px-12 x-staggered-initial x-staggered-animation"
+            :class="[
+              { 'x-hidden': shouldHideButton(queryIndex) },
+              isQuerySelected(queryIndex) ? 'x-bg-neutral-25' : 'x-bg-neutral-0',
+            ]"
+            @click="toggleQuery(queryIndex)"
+          >
+            <span
+              class="x-whitespace-nowrap x-text-sm"
+              :class="[isQuerySelected(queryIndex) ? ' x-text-neutral-90' : 'x-text-neutral-75']"
+            >
+              {{ query }}
+            </span>
+            <CrossTinyIcon v-if="isQuerySelected(queryIndex)" class="x-text-16 x-h-20" />
+            <PlusIcon v-else class="x-text-16 x-h-20" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </CustomSlidingPanel>
+</template>
+<script lang="ts">
+import { CrossTinyIcon, PlusIcon, use$x, useState } from '@empathyco/x-components'
+import { relatedPromptsXModule } from '@empathyco/x-components/related-prompts'
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
+import CustomSlidingPanel from '../../components/custom-sliding-panel.vue'
+import { useDevice } from '../../composables/use-device.composable'
+
+export default defineComponent({
+  name: 'RelatedPromptsTagList',
+  xModule: relatedPromptsXModule.name,
+  components: { PlusIcon, CrossTinyIcon, CustomSlidingPanel },
+  setup() {
+    const x = use$x()
+    const { isTouchable } = useDevice()
+    const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts'])
+
+    const slidingPanelContent = ref<Element>()
+    const isVisible = ref(false)
+
+    const selectedIndex = ref<number>(-1)
+    const selectedQuery = ref<number>(-1)
+
+    const observer = new IntersectionObserver(([entry]) => {
+      isVisible.value = entry.isIntersecting
+    })
+
+    onMounted(() => {
+      observer.observe(slidingPanelContent.value as Element)
+    })
+
+    onUnmounted(() => {
+      observer.disconnect()
+    })
+
+    const toggleSuggestion = (index: number): void => {
+      if (selectedIndex.value === index) {
+        selectedIndex.value = -1
+      } else {
+        selectedIndex.value = index
+      }
+      selectedQuery.value = -1
+      x.emit('UserSelectedARelatedPrompt', selectedIndex.value)
+      x.emit('UserSelectedARelatedPromptQuery', selectedQuery.value)
+    }
+
+    const isSelected = (index: number): boolean => selectedIndex.value === index
+
+    const toggleQuery = (queryIndex: number): void => {
+      if (selectedQuery.value === queryIndex) {
+        selectedQuery.value = -1
+      } else {
+        selectedQuery.value = queryIndex
+      }
+      x.emit('UserSelectedARelatedPromptQuery', selectedQuery.value)
+    }
+
+    const isQuerySelected = (queryIndex: number): boolean => selectedQuery.value === queryIndex
+
+    const shouldHideButton = (index: number): boolean =>
+      selectedIndex.value !== -1 && selectedIndex.value !== index
+
+    const shouldHideQuery = (queryIndex: number): boolean =>
+      selectedQuery.value !== -1 && selectedQuery.value !== queryIndex
+
+    x.on('UserAcceptedAQueryPreview', false).subscribe(() => {
+      toggleSuggestion(-1)
+      toggleQuery(-1)
+    })
+
+    x.on('SearchRequestChanged', false).subscribe(() => {
+      toggleSuggestion(-1)
+      toggleQuery(-1)
+    })
+
+    return {
+      isQuerySelected,
+      isSelected,
+      isTouchable,
+      isVisible,
+      relatedPrompts,
+      selectedIndex,
+      shouldHideButton,
+      shouldHideQuery,
+      slidingPanelContent,
+      toggleQuery,
+      toggleSuggestion,
+    }
+  },
+})
+</script>
+
+<style>
+.x-no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.x-no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.x-typewritter-initial {
+  color: #0000;
+  background:
+    linear-gradient(-90deg, transparent 5px, #0000 0) 10px 0,
+    linear-gradient(#575757 0 0) 0 0;
+  background-size: 0 200%;
+  -webkit-background-clip: padding-box, text;
+  background-clip: padding-box, text;
+  background-repeat: no-repeat;
+}
+
+.x-typewritter-animation {
+  animation: typewritter calc(var(--suggestion-text-length) * 0.05s)
+    steps(var(--suggestion-text-length)) forwards;
+}
+
+@keyframes typewritter {
+  from {
+    background-size: 0 200%;
+  }
+  to {
+    background-size: calc(var(--suggestion-text-length) * 1ch) 200%;
+  }
+}
+
+.x-staggered-initial {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.x-staggered-animation {
+  animation: fadeInUp 0.6s forwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/src/components/search/results/custom-query-preview.vue b/src/components/search/results/custom-query-preview.vue
new file mode 100644
index 00000000..d72284d1
--- /dev/null
+++ b/src/components/search/results/custom-query-preview.vue
@@ -0,0 +1,73 @@
+<template>
+  <QueryPreviewList
+    v-if="queriesPreviewInfo"
+    v-slot="{ queryPreviewInfo, totalResults, results, queryTagging }"
+    :debounce-time-ms="250"
+    :queries-preview-info="queriesPreviewInfo"
+    :persist-in-cache="true"
+    :query-feature="queryFeature"
+    data-wysiwyg="query-previews"
+  >
+    <div class="x-mb-40 x-flex x-flex-col x-gap-2 desktop:x-mb-64 desktop:x-gap-16">
+      <h1 class="x-title1 x-text-neutral-90 max-desktop:x-title1-sm max-desktop:x-px-16">
+        {{ queryPreviewInfo.title }}
+      </h1>
+      <CustomSlidingPanel>
+        <template #header>
+          <QueryPreviewButton
+            :query-preview-info="queryPreviewInfo"
+            class="x-button x-button-lead x-button-tight x-title3 x-title3-sm desktop:x-title3-md max-desktop:x-px-16"
+          >
+            {{ queryPreviewInfo.query }}
+            ({{ totalResults }})
+            <ArrowRightIcon class="x-icon-lg" />
+          </QueryPreviewButton>
+        </template>
+        <DisplayClickProvider result-feature="query-preview" :query-tagging="queryTagging">
+          <div class="x-transform-style-3d x-flex x-gap-16 x-pt-16 max-desktop:x-px-16">
+            <Result
+              v-for="result in results"
+              :key="result.id"
+              :result="result"
+              class="x-w-[calc(38vw-16px)] x-min-w-[142px] desktop:x-w-[216px]"
+            />
+          </div>
+        </DisplayClickProvider>
+      </CustomSlidingPanel>
+    </div>
+  </QueryPreviewList>
+</template>
+
+<script lang="ts">
+import type { QueryFeature } from '@empathyco/x-components'
+import type { QueryPreviewInfo } from '@empathyco/x-components/queries-preview'
+import type { PropType } from 'vue'
+import { ArrowRightIcon } from '@empathyco/x-components'
+import { QueryPreviewButton, QueryPreviewList } from '@empathyco/x-components/queries-preview'
+import { defineComponent } from 'vue'
+import CustomSlidingPanel from '../../custom-sliding-panel.vue'
+import Result from '../../results/result.vue'
+import DisplayClickProvider from '../display-click-provider.vue'
+
+export default defineComponent({
+  name: 'CustomQueryPreview',
+  components: {
+    ArrowRightIcon,
+    CustomSlidingPanel,
+    DisplayClickProvider,
+    QueryPreviewButton,
+    QueryPreviewList,
+    Result,
+  },
+  props: {
+    queryFeature: {
+      type: String as PropType<QueryFeature>,
+      default: 'customer',
+    },
+    queriesPreviewInfo: {
+      type: Array as PropType<QueryPreviewInfo[]>,
+      default: () => [],
+    },
+  },
+})
+</script>
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index 2df5859d..af17ac3a 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -6,11 +6,10 @@
   >
     <PromotedsList>
       <BannersList>
-        <NextQueriesList
+        <RelatedPromptsList
           :offset="24"
-          :frequency="48"
-          :max-next-queries-per-group="maxNextQueriesPerGroup"
-          :show-only-after-offset="x.partialResults.length > 0"
+          :max-groups="1"
+          :show-only-after-offset="x.totalResults < 50"
         >
           <BaseVariableColumnGrid
             class="x-gap-x-16 x-gap-y-32"
@@ -31,24 +30,33 @@
                 <Promoted :promoted="promoted" />
               </MainScrollItem>
             </template>
-            <template #next-queries-group="{ item: { nextQueries } }">
-              <NextQueryPreview :next-query="nextQueries[0]" />
+            <template #related-prompts-group>
+              <RelatedPromptsTagList v-if="!isLowResult" class="x-my-24" />
+              <CustomQueryPreview
+                v-if="selectedPrompt !== -1"
+                :key="queriesPreviewInfo.length"
+                class="x-rounded-[12px] x-bg-neutral-10 x-px-8 desktop:x-px-16"
+                :queries-preview-info="queriesPreviewInfo"
+              ></CustomQueryPreview>
             </template>
           </BaseVariableColumnGrid>
-        </NextQueriesList>
+        </RelatedPromptsList>
       </BannersList>
     </PromotedsList>
   </ResultsList>
 </template>
 
 <script lang="ts">
+import type { SemanticQueriesConfig } from '@empathyco/x-components/semantic-queries'
+import type { ComputedRef } from 'vue'
 import {
   BaseVariableColumnGrid,
   infiniteScroll,
   StaggeredFadeAndSlide,
   use$x,
+  useState,
 } from '@empathyco/x-components'
-import { NextQueriesList } from '@empathyco/x-components/next-queries'
+import { RelatedPromptsList } from '@empathyco/x-components/related-prompts'
 import { MainScrollItem } from '@empathyco/x-components/scroll'
 import {
   Banner,
@@ -57,22 +65,24 @@ import {
   PromotedsList,
   ResultsList,
 } from '@empathyco/x-components/search'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useDevice } from '../../../composables/use-device.composable'
 import { useExperienceControls } from '../../../composables/use-experience-controls.composable'
+import RelatedPromptsTagList from '../../related-prompts/related-prompts-tag-list.vue'
 import Result from '../../results/result.vue'
-import NextQueryPreview from './custom-next-query-preview.vue'
+import CustomQueryPreview from './custom-query-preview.vue'
 
 export default defineComponent({
   components: {
     Banner,
     BannersList,
     BaseVariableColumnGrid,
+    CustomQueryPreview,
     MainScrollItem,
-    NextQueryPreview,
-    NextQueriesList,
     Promoted,
     PromotedsList,
+    RelatedPromptsList,
+    RelatedPromptsTagList,
     Result,
     ResultsList,
   },
@@ -80,14 +90,42 @@ export default defineComponent({
     'infinite-scroll': infiniteScroll,
   },
   setup() {
+    const x = use$x()
     const { isMobile } = useDevice()
     const { getControlFromPath } = useExperienceControls()
 
+    const semanticQueriesConfig = useState('semanticQueries', ['config'])
+      .config as ComputedRef<SemanticQueriesConfig>
+
+    const { relatedPrompts, selectedPrompt, selectedQuery } = useState('relatedPrompts', [
+      'relatedPrompts',
+      'selectedPrompt',
+      'selectedQuery',
+    ])
+
+    const columns = computed(() => (isMobile.value ? 2 : 4))
+
+    const isLowResult = computed(
+      () => x.totalResults > 0 && x.totalResults < semanticQueriesConfig.value.threshold,
+    )
+
+    const queriesPreviewInfo = computed(() => {
+      const queries = relatedPrompts.value[selectedPrompt.value]?.nextQueries as string[]
+      if (selectedQuery.value === -1) {
+        return queries.map(query => ({ query }))
+      } else {
+        return [{ query: queries[selectedQuery.value] }]
+      }
+    })
+
     return {
-      staggeredFadeAndSlide: StaggeredFadeAndSlide,
-      columns: isMobile.value ? 2 : 4,
+      columns,
+      isLowResult,
       maxNextQueriesPerGroup: getControlFromPath('nextQueries.maxItems', 1),
-      x: use$x(),
+      queriesPreviewInfo,
+      selectedPrompt,
+      staggeredFadeAndSlide: StaggeredFadeAndSlide,
+      x,
     }
   },
 })
diff --git a/src/i18n/messages.types.ts b/src/i18n/messages.types.ts
index 162cf38c..f03a1e15 100644
--- a/src/i18n/messages.types.ts
+++ b/src/i18n/messages.types.ts
@@ -128,4 +128,7 @@ export interface Messages {
     accept: string
     reject: string
   }
+  relatedPrompts: {
+    title: string
+  }
 }
diff --git a/src/i18n/messages/de.messages.json b/src/i18n/messages/de.messages.json
index 19b594a7..42ecdb59 100644
--- a/src/i18n/messages/de.messages.json
+++ b/src/i18n/messages/de.messages.json
@@ -126,6 +126,9 @@
       "title": "Ihre Suche entspricht einem besonderen Ort auf unserer Website. Um ihn zu besuchen, werden Sie umgeleitet",
       "accept": "Ja, leite mich um",
       "reject": "Nein, ich bleibe hier"
+    },
+    "relatedPrompts": {
+      "title": "Sind Sie an „{query}“ interessiert? Entdecken Sie diese Vorschläge:"
     }
   },
   "mobile": {
diff --git a/src/i18n/messages/en.messages.json b/src/i18n/messages/en.messages.json
index 00865878..8a566253 100644
--- a/src/i18n/messages/en.messages.json
+++ b/src/i18n/messages/en.messages.json
@@ -126,6 +126,9 @@
       "title": "Your search matches a special place in our website, to visit it, you are being redirected",
       "accept": "Yes, redirect me",
       "reject": "No, I'll stay here"
+    },
+    "relatedPrompts": {
+      "title": "Are you interested in \"{query}\"? Explore this suggestions:"
     }
   },
   "mobile": {
diff --git a/src/i18n/messages/es.messages.json b/src/i18n/messages/es.messages.json
index 07c12789..31bfb33f 100644
--- a/src/i18n/messages/es.messages.json
+++ b/src/i18n/messages/es.messages.json
@@ -126,6 +126,9 @@
       "title": "Tu búsqueda coincide con una página especial de nuestra web, vas a ser redirigido a:",
       "accept": "Sí, redirígeme",
       "reject": "No, me quedaré aquí"
+    },
+    "relatedPrompts": {
+      "title": "¿Estás interesado en \"{query}\"? Explora estas sugerencias:"
     }
   },
   "mobile": {
diff --git a/src/i18n/messages/fr.messages.json b/src/i18n/messages/fr.messages.json
index b9ce801c..e05bc591 100644
--- a/src/i18n/messages/fr.messages.json
+++ b/src/i18n/messages/fr.messages.json
@@ -126,6 +126,9 @@
       "title": "Votre recherche correspond à un endroit spécial de notre site, pour le visiter, vous êtes redirigé",
       "accept": "Oui, redirigez-moi",
       "reject": "Non, je reste ici"
+    },
+    "relatedPrompts": {
+      "title": "Êtes-vous intéressé par «{query}»? Explorez ces suggestions:"
     }
   },
   "mobile": {
diff --git a/src/i18n/messages/it.messages.json b/src/i18n/messages/it.messages.json
index fd4f46fa..81dec2a2 100644
--- a/src/i18n/messages/it.messages.json
+++ b/src/i18n/messages/it.messages.json
@@ -126,6 +126,9 @@
       "title": "La vostra ricerca corrisponde a un luogo speciale del nostro sito web, per visitare il quale siete stati reindirizzati",
       "accept": "Sì, reindirizzami",
       "reject": "No, rimango qui"
+    },
+    "relatedPrompts": {
+      "title": "Ti interessa \"{query}\"? Esplora questi suggerimenti:"
     }
   },
   "mobile": {
diff --git a/src/i18n/messages/pt.messages.json b/src/i18n/messages/pt.messages.json
index 1e7abe22..b7904282 100644
--- a/src/i18n/messages/pt.messages.json
+++ b/src/i18n/messages/pt.messages.json
@@ -126,6 +126,9 @@
       "title": "A sua pesquisa corresponde a um local especial no nosso sítio Web, para o visitar, está a ser redireccionado",
       "accept": "Sim, redirecionar-me",
       "reject": "Não, vou ficar aqui"
+    },
+    "relatedPrompts": {
+      "title": "Você está interessado em \"{query}\"? Explore estas sugestões:"
     }
   },
   "mobile": {
diff --git a/tests/e2e/cucumber/scroll.spec.ts b/tests/e2e/cucumber/scroll.spec.ts
index 8321f76f..9f8abdda 100644
--- a/tests/e2e/cucumber/scroll.spec.ts
+++ b/tests/e2e/cucumber/scroll.spec.ts
@@ -31,7 +31,7 @@ Then('scroll position is at top', () => {
  * the subheader. And then we can reach the bottom because we have the total height of the page.
  */
 When('scrolling down to the bottom', () => {
-  cy.getByDataTest('query-preview-item')
+  cy.getByDataTest('related-prompt-item')
     .should('have.length.at.least', 5)
     .then(() => {
       cy.getByDataTest('base-scroll').scrollTo('center', { duration: 1000 })