diff --git a/packages/cli/src/services/insight/templates/scripts/components/App.js b/packages/cli/src/services/insight/templates/scripts/components/App.js
index 722198e64..2960c270b 100644
--- a/packages/cli/src/services/insight/templates/scripts/components/App.js
+++ b/packages/cli/src/services/insight/templates/scripts/components/App.js
@@ -36,8 +36,6 @@ function InsightApp({ data }) {
 
       <StatsRow data={data} />
 
-      <DashboardCards insights={data} />
-
       {data.qualitative && (
         <>
           <ProjectAreas
@@ -48,11 +46,9 @@ function InsightApp({ data }) {
         </>
       )}
 
-      <HeatmapSection heatmap={data.heatmap} />
-
       {data.qualitative && (
         <>
-          <InteractionStyle qualitative={data.qualitative} />
+          <InteractionStyle qualitative={data.qualitative} insights={data} />
         </>
       )}
 
diff --git a/packages/cli/src/services/insight/templates/scripts/components/Qualitative.js b/packages/cli/src/services/insight/templates/scripts/components/Qualitative.js
index ef3d61112..de2a44b2a 100644
--- a/packages/cli/src/services/insight/templates/scripts/components/Qualitative.js
+++ b/packages/cli/src/services/insight/templates/scripts/components/Qualitative.js
@@ -124,7 +124,7 @@ function ProjectAreas({ qualitative, topGoals, topTools }) {
   );
 }
 
-function InteractionStyle({ qualitative }) {
+function InteractionStyle({ qualitative, insights }) {
   const { interactionStyle } = qualitative;
   if (!interactionStyle) return null;
 
@@ -147,6 +147,9 @@ function InteractionStyle({ qualitative }) {
           </div>
         )}
       </div>
+
+      <DashboardCards insights={insights} />
+      <HeatmapSection heatmap={insights.heatmap} />
     </>
   );
 }