diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.html b/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
index 41b01cb9cc..ccad63c9be 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.html
@@ -5,9 +5,9 @@
 >
   <div class="text-bubble" [attr.data-position]="params.speakerPosition">
     @if (_row.value) {
-      <p class="text">
-        {{ _row.value }}
-      </p>
+      <plh-tmpl-text
+        [row]="{ _nested_name: '', name: '', type: 'text', value: value() }"
+      ></plh-tmpl-text>
     }
     @for (childRow of _row.rows | filterDisplayComponent; track trackByRow($index, childRow)) {
       <plh-template-component
diff --git a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
index 6c80055a6e..ce2838f3c7 100644
--- a/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
+++ b/src/app/shared/components/template/components/text-bubble/text-bubble.component.scss
@@ -49,11 +49,11 @@ $imageSize: 64px;
 
 .text-bubble {
   padding: var(--large-padding);
-  p {
-    line-height: inherit;
-    margin: 0;
-    font-size: var(--font-size-text-large);
-    color: var(--ion-color-primary);
+
+  // Override default margins of child text component:
+  // handle with padding on this parent element instead
+  plh-tmpl-text {
+    --margin-text: 0;
   }
 }
 
diff --git a/src/app/shared/components/template/components/text/text.component.html b/src/app/shared/components/template/components/text/text.component.html
index fc5752791f..688686f45f 100644
--- a/src/app/shared/components/template/components/text/text.component.html
+++ b/src/app/shared/components/template/components/text/text.component.html
@@ -1,6 +1,6 @@
 @if (this._row.value) {
   <div
-    class="large standard normal margin-t-large"
+    class="large standard normal"
     [class]="params.style"
     [ngStyle]="!hasTextValue ? { display: 'none' } : { display: 'block' }"
     [innerHTML]="
diff --git a/src/app/shared/components/template/components/text/text.component.scss b/src/app/shared/components/template/components/text/text.component.scss
new file mode 100644
index 0000000000..54016aa9d7
--- /dev/null
+++ b/src/app/shared/components/template/components/text/text.component.scss
@@ -0,0 +1,5 @@
+:host {
+  // Default value for top and bottom margins. Can be overridden in parent component
+  // styles if calling the text component as a child of another component
+  --margin-text: 0.75em;
+}
diff --git a/src/app/shared/components/template/components/text/text.component.ts b/src/app/shared/components/template/components/text/text.component.ts
index 55e1ab51b6..91830ad40e 100644
--- a/src/app/shared/components/template/components/text/text.component.ts
+++ b/src/app/shared/components/template/components/text/text.component.ts
@@ -11,7 +11,7 @@ interface ITextParams {
 @Component({
   selector: "plh-tmpl-text",
   templateUrl: "./text.component.html",
-  styleUrls: ["../tmpl-components-common.scss"],
+  styleUrls: ["../tmpl-components-common.scss", "./text.component.scss"],
 })
 export class TmplTextComponent extends TemplateBaseComponent implements OnInit {
   params: Partial<ITextParams> = {};
diff --git a/src/theme/_typography.scss b/src/theme/_typography.scss
index 4ff308ecd5..ec3891fd1b 100644
--- a/src/theme/_typography.scss
+++ b/src/theme/_typography.scss
@@ -8,7 +8,7 @@ h3 {
 }
 
 p {
-  margin: 0.75em 0;
+  margin: var(--margin-text, 0.75em) 0;
 }
 
 .standard {