diff --git a/src/main/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactory.java b/src/main/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactory.java
index 8b2b28004be..3f89a2d2370 100644
--- a/src/main/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactory.java
+++ b/src/main/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactory.java
@@ -3,6 +3,8 @@
 import static tech.jhipster.lite.module.domain.JHipsterModule.*;
 import static tech.jhipster.lite.module.domain.npm.JHLiteNpmVersionSource.*;
 
+import java.util.Collection;
+import java.util.Set;
 import java.util.regex.Pattern;
 import tech.jhipster.lite.module.domain.JHipsterModule;
 import tech.jhipster.lite.module.domain.file.JHipsterDestination;
@@ -22,10 +24,18 @@ public class TikuiModuleFactory {
   private static final String ATOM_BUTTON = ATOM + "/button";
   private static final String ATOM_INPUT_TEXT = ATOM + "/input-text";
   private static final String ATOM_LABEL = ATOM + "/label";
+  private static final String ATOM_PAGE_TITLE = ATOM + "/page-title";
+  private static final String ATOM_PARAGRAPH = ATOM + "/paragraph";
   private static final String MOLECULE = "molecule";
   private static final String MOLECULE_FIELD = MOLECULE + "/field";
+  private static final String MOLECULE_TOAST = MOLECULE + "/toast";
   private static final String ORGANISM = "organism";
+  private static final String ORGANISM_COLUMNS = ORGANISM + "/columns";
   private static final String ORGANISM_LINES = ORGANISM + "/lines";
+  private static final String ORGANISM_TOASTS = ORGANISM + "/toasts";
+  private static final String TEMPLATE = "template";
+  private static final String TEMPLATE_TEMPLATE_PAGE = TEMPLATE + "/template-page";
+  private static final String TEMPLATE_TOASTING = TEMPLATE + "/toasting";
   private static final String QUARK = "quark";
 
   //@formatter:off
@@ -57,53 +67,57 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
           .addTemplate("atom.pug")
           .and()
         .batch(STYLE_SOURCE.append(ATOM_BUTTON), STYLE_DESTINATION.append(ATOM_BUTTON))
-          .addTemplate("_button.scss")
-          .addTemplate("button.code.pug")
-          .addTemplate("button.md")
-          .addTemplate("button.mixin.pug")
-          .addTemplate("button.render.pug")
+          .addTemplates(componentFiles("button"))
           .and()
         .batch(STYLE_SOURCE.append(ATOM_INPUT_TEXT), STYLE_DESTINATION.append(ATOM_INPUT_TEXT))
-          .addTemplate("_input-text.scss")
-          .addTemplate("input-text.code.pug")
-          .addTemplate("input-text.md")
-          .addTemplate("input-text.mixin.pug")
-          .addTemplate("input-text.render.pug")
+          .addTemplates(componentFiles("input-text"))
           .and()
         .batch(STYLE_SOURCE.append(ATOM_LABEL), STYLE_DESTINATION.append(ATOM_LABEL))
-          .addTemplate("_label.scss")
-          .addTemplate("label.code.pug")
-          .addTemplate("label.md")
-          .addTemplate("label.mixin.pug")
-          .addTemplate("label.render.pug")
+          .addTemplates(componentFiles("label"))
+          .and()
+        .batch(STYLE_SOURCE.append(ATOM_PAGE_TITLE), STYLE_DESTINATION.append(ATOM_PAGE_TITLE))
+          .addTemplates(componentFiles("page-title"))
+          .and()
+        .batch(STYLE_SOURCE.append(ATOM_PARAGRAPH), STYLE_DESTINATION.append(ATOM_PARAGRAPH))
+          .addTemplates(componentFiles("paragraph"))
           .and()
         .batch(STYLE_SOURCE.append(MOLECULE), STYLE_DESTINATION.append(MOLECULE))
           .addTemplate("_molecule.scss")
           .addTemplate("molecule.pug")
           .and()
         .batch(STYLE_SOURCE.append(MOLECULE_FIELD), STYLE_DESTINATION.append(MOLECULE_FIELD))
-          .addTemplate("_field.scss")
-          .addTemplate("field.code.pug")
-          .addTemplate("field.md")
-          .addTemplate("field.mixin.pug")
-          .addTemplate("field.render.pug")
+          .addTemplates(componentFiles("field"))
+          .and()
+        .batch(STYLE_SOURCE.append(MOLECULE_TOAST), STYLE_DESTINATION.append(MOLECULE_TOAST))
+          .addTemplates(componentFiles("toast"))
           .and()
         .batch(STYLE_SOURCE.append(ORGANISM), STYLE_DESTINATION.append(ORGANISM))
           .addTemplate("_organism.scss")
           .addTemplate("organism.pug")
           .and()
+        .batch(STYLE_SOURCE.append(ORGANISM_COLUMNS), STYLE_DESTINATION.append(ORGANISM_COLUMNS))
+          .addTemplates(componentFiles("columns"))
+          .and()
+        .batch(STYLE_SOURCE.append(ORGANISM_LINES), STYLE_DESTINATION.append(ORGANISM_LINES))
+          .addTemplates(componentFiles("lines"))
+          .and()
+        .batch(STYLE_SOURCE.append(ORGANISM_TOASTS), STYLE_DESTINATION.append(ORGANISM_TOASTS))
+          .addTemplates(componentFiles("toasts"))
+          .and()
         .batch(STYLE_SOURCE.append(QUARK), STYLE_DESTINATION.append(QUARK))
           .addTemplate("_placeholder.scss")
           .addTemplate("_spacing.scss")
           .and()
-        .batch(STYLE_SOURCE.append(ORGANISM_LINES), STYLE_DESTINATION.append(ORGANISM_LINES))
-          .addTemplate("_lines.scss")
-          .addTemplate("lines.code.pug")
-          .addTemplate("lines.md")
-          .addTemplate("lines.mixin.pug")
-          .addTemplate("lines.render.pug")
+        .batch(STYLE_SOURCE.append(TEMPLATE), STYLE_DESTINATION.append(TEMPLATE))
+          .addTemplate("_template.scss")
+          .addTemplate("template.pug")
+          .and()
+        .batch(STYLE_SOURCE.append(TEMPLATE_TEMPLATE_PAGE), STYLE_DESTINATION.append(TEMPLATE_TEMPLATE_PAGE))
+          .addTemplates(componentFiles("template-page"))
+          .and()
+        .batch(STYLE_SOURCE.append(TEMPLATE_TOASTING), STYLE_DESTINATION.append(TEMPLATE_TOASTING))
+          .addTemplates(componentFiles("toasting"))
           .and()
-        .add(STYLE_SOURCE.template("template/template.pug"), STYLE_DESTINATION.append("template/template.pug"))
         .batch(STYLE_SOURCE.append("token"), STYLE_DESTINATION.append("token"))
           .addTemplate("spacing/_spacings.scss")
           .addTemplate("spacing/_vars.scss")
@@ -115,6 +129,9 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
           .addTemplate("_size.scss")
           .addTemplate("_token.scss")
           .and()
+        .batch(STYLE_SOURCE.append("variables"), STYLE_DESTINATION.append("variables"))
+          .addTemplate("_breakpoint.scss")
+          .and()
         .and()
       .optionalReplacements()
         .in(path("vite.config.ts"))
@@ -138,6 +155,10 @@ public JHipsterModule buildModule(JHipsterModuleProperties properties) {
     //@formatter:on
   }
 
+  private static Collection<String> componentFiles(String name) {
+    return Set.of("_" + name + ".scss", name + ".code.pug", name + ".md", name + ".mixin.pug", name + ".render.pug");
+  }
+
   private static RegexNeedleAfterReplacer newProxyReplacer() {
     return new RegexNeedleAfterReplacer(ReplacementCondition.notContaining("proxy:"), Pattern.compile("port:\\s*9000,", Pattern.MULTILINE));
   }
diff --git a/src/main/java/tech/jhipster/lite/module/domain/file/JHipsterModuleFiles.java b/src/main/java/tech/jhipster/lite/module/domain/file/JHipsterModuleFiles.java
index b6bd3b0f4fe..1785fd03353 100644
--- a/src/main/java/tech/jhipster/lite/module/domain/file/JHipsterModuleFiles.java
+++ b/src/main/java/tech/jhipster/lite/module/domain/file/JHipsterModuleFiles.java
@@ -119,6 +119,13 @@ public JHipsterModuleFileBatchBuilder addTemplate(String file) {
       return add(source.template(file), destination.append(file));
     }
 
+    public JHipsterModuleFileBatchBuilder addTemplates(Collection<String> files) {
+      Assert.notNull("files", files);
+      files.forEach(this::addTemplate);
+
+      return this;
+    }
+
     public JHipsterModuleFileBatchBuilder addFile(String file) {
       return add(source.file(file), destination.append(file));
     }
diff --git a/src/main/resources/generator/client/tikui/style/atom/_atom.scss.mustache b/src/main/resources/generator/client/tikui/style/atom/_atom.scss.mustache
index 7e8a8704152..1001e7f89bf 100644
--- a/src/main/resources/generator/client/tikui/style/atom/_atom.scss.mustache
+++ b/src/main/resources/generator/client/tikui/style/atom/_atom.scss.mustache
@@ -1,3 +1,5 @@
 @use 'button/button';
 @use 'input-text/input-text';
 @use 'label/label';
+@use 'page-title/page-title';
+@use 'paragraph/paragraph';
diff --git a/src/main/resources/generator/client/tikui/style/atom/atom.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/atom.pug.mustache
index 27ccf774252..0cc1ce8906d 100644
--- a/src/main/resources/generator/client/tikui/style/atom/atom.pug.mustache
+++ b/src/main/resources/generator/client/tikui/style/atom/atom.pug.mustache
@@ -18,3 +18,7 @@ block content
       include:componentDoc(height=180) input-text/input-text.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=70) label/label.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=130) page-title/page-title.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=65) paragraph/paragraph.md
diff --git a/src/main/resources/generator/client/tikui/style/atom/page-title/_page-title.scss.mustache b/src/main/resources/generator/client/tikui/style/atom/page-title/_page-title.scss.mustache
new file mode 100644
index 00000000000..ee8973089ba
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/atom/page-title/_page-title.scss.mustache
@@ -0,0 +1,17 @@
+@use '../../quark/placeholder';
+
+.page-title {
+  margin: 0;
+  white-space: pre-line;
+  color: var(--color-text);
+  font-family: var(--font-family);
+  font-size: 3rem;
+  hyphens: auto;
+  overflow-wrap: anywhere;
+  font-weight: 700;
+
+  @include placeholder.placeholder-alternative {
+    max-width: 20rem;
+    min-height: 3rem;
+  }
+}
diff --git a/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.code.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.code.pug.mustache
new file mode 100644
index 00000000000..3ce37602cd4
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.code.pug.mustache
@@ -0,0 +1,4 @@
+include page-title.mixin.pug
+
++page-title Page title
++page-title({placeholder: true})
diff --git a/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.md.mustache b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.md.mustache
new file mode 100644
index 00000000000..142664a0c6a
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.md.mustache
@@ -0,0 +1 @@
+## Page title
diff --git a/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.mixin.pug.mustache
new file mode 100644
index 00000000000..febc25bd391
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.mixin.pug.mustache
@@ -0,0 +1,5 @@
+mixin page-title(options)
+  - const { placeholder } = options || {};
+  - const placeholderClass = placeholder ? '-placeholder' : null;
+  h1.page-title(class=placeholderClass)
+    block
diff --git a/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.render.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.render.pug.mustache
new file mode 100644
index 00000000000..e6f3231d5f8
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/atom/page-title/page-title.render.pug.mustache
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include page-title.code.pug
diff --git a/src/main/resources/generator/client/tikui/style/atom/paragraph/_paragraph.scss.mustache b/src/main/resources/generator/client/tikui/style/atom/paragraph/_paragraph.scss.mustache
new file mode 100644
index 00000000000..420848feb97
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/atom/paragraph/_paragraph.scss.mustache
@@ -0,0 +1,13 @@
+@use '../../quark/placeholder';
+
+.paragraph {
+  margin: 0;
+  padding: 0;
+  color: var(--color-text);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+
+  @include placeholder.placeholder-alternative {
+    min-height: var(--font-size);
+  }
+}
diff --git a/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.code.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.code.pug.mustache
new file mode 100644
index 00000000000..bc0f07da276
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.code.pug.mustache
@@ -0,0 +1,4 @@
+include paragraph.mixin.pug
+
++paragraph Paragraph
++paragraph({placeholder: true})
diff --git a/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.md.mustache b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.md.mustache
new file mode 100644
index 00000000000..ca713d44ada
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.md.mustache
@@ -0,0 +1 @@
+## Paragraph
diff --git a/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.mixin.pug.mustache
new file mode 100644
index 00000000000..811378b6a2f
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.mixin.pug.mustache
@@ -0,0 +1,5 @@
+mixin paragraph(options)
+  - const { placeholder } = options || {};
+  - const placeholderClass = placeholder ? '-placeholder' : null;
+  p.paragraph(class=placeholderClass)
+    block
diff --git a/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.render.pug.mustache b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.render.pug.mustache
new file mode 100644
index 00000000000..24c3735d784
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/atom/paragraph/paragraph.render.pug.mustache
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include paragraph.code.pug
diff --git a/src/main/resources/generator/client/tikui/style/molecule/_molecule.scss.mustache b/src/main/resources/generator/client/tikui/style/molecule/_molecule.scss.mustache
index bd3d746c237..504ab531fbb 100644
--- a/src/main/resources/generator/client/tikui/style/molecule/_molecule.scss.mustache
+++ b/src/main/resources/generator/client/tikui/style/molecule/_molecule.scss.mustache
@@ -1 +1,2 @@
 @use 'field/field';
+@use 'toast/toast';
diff --git a/src/main/resources/generator/client/tikui/style/molecule/molecule.pug.mustache b/src/main/resources/generator/client/tikui/style/molecule/molecule.pug.mustache
index 00328ab73de..2762b609224 100644
--- a/src/main/resources/generator/client/tikui/style/molecule/molecule.pug.mustache
+++ b/src/main/resources/generator/client/tikui/style/molecule/molecule.pug.mustache
@@ -14,3 +14,5 @@ block content
       include /documentation/atomic-design/quote/molecule
     .tikui-vertical-spacing--line
       include:componentDoc(height=80) field/field.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=80) toast/toast.md
diff --git a/src/main/resources/generator/client/tikui/style/molecule/toast/_toast.scss.mustache b/src/main/resources/generator/client/tikui/style/molecule/toast/_toast.scss.mustache
new file mode 100644
index 00000000000..8f5e6ca7327
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/molecule/toast/_toast.scss.mustache
@@ -0,0 +1,8 @@
+.toast {
+  border-radius: var(--radius-toast);
+  box-shadow: 0 0 10px var(--color-shadow);
+  background-color: var(--color-background);
+  padding: var(--spacing-m);
+  color: var(--color-text);
+  font-family: var(--font-family);
+}
diff --git a/src/main/resources/generator/client/tikui/style/molecule/toast/toast.code.pug.mustache b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.code.pug.mustache
new file mode 100644
index 00000000000..c718af85422
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.code.pug.mustache
@@ -0,0 +1,3 @@
+include toast.mixin.pug
+
++toast Toast message
diff --git a/src/main/resources/generator/client/tikui/style/molecule/toast/toast.md.mustache b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.md.mustache
new file mode 100644
index 00000000000..4ee1c687307
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.md.mustache
@@ -0,0 +1 @@
+## Toast
diff --git a/src/main/resources/generator/client/tikui/style/molecule/toast/toast.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.mixin.pug.mustache
new file mode 100644
index 00000000000..be04452c813
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.mixin.pug.mustache
@@ -0,0 +1,3 @@
+mixin toast
+  .toast
+    block
diff --git a/src/main/resources/generator/client/tikui/style/molecule/toast/toast.render.pug.mustache b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.render.pug.mustache
new file mode 100644
index 00000000000..1c36ccb3061
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/molecule/toast/toast.render.pug.mustache
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include toast.code.pug
diff --git a/src/main/resources/generator/client/tikui/style/organism/_organism.scss.mustache b/src/main/resources/generator/client/tikui/style/organism/_organism.scss.mustache
index 3ec902672f9..81e6c067d46 100644
--- a/src/main/resources/generator/client/tikui/style/organism/_organism.scss.mustache
+++ b/src/main/resources/generator/client/tikui/style/organism/_organism.scss.mustache
@@ -1 +1,3 @@
+@use 'columns/columns';
 @use 'lines/lines';
+@use 'toasts/toasts';
diff --git a/src/main/resources/generator/client/tikui/style/organism/columns/_columns.scss.mustache b/src/main/resources/generator/client/tikui/style/organism/columns/_columns.scss.mustache
new file mode 100644
index 00000000000..b05bd8d067d
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/organism/columns/_columns.scss.mustache
@@ -0,0 +1,19 @@
+@use '../../quark/spacing';
+
+.columns {
+  --columns-gap: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--columns-gap);
+
+  &.-justify-center {
+    justify-content: center;
+  }
+
+  &.-align-center {
+    align-items: center;
+  }
+
+  @include spacing.spacing-alternatives('gap-', '--columns-gap');
+}
diff --git a/src/main/resources/generator/client/tikui/style/organism/columns/columns.code.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/columns/columns.code.pug.mustache
new file mode 100644
index 00000000000..0da732554b7
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/organism/columns/columns.code.pug.mustache
@@ -0,0 +1,13 @@
+include columns.mixin.pug
+
++columns('title-and-text')
+  +columns--column First column
+  +columns--column Second column
+
++columns('paragraphs', {justify: 'center'})
+  +columns--column First #[br] column
+  +columns--column Second column
+
++columns('paragraphs', {align: 'center'})
+  +columns--column First #[br] column
+  +columns--column Second column
diff --git a/src/main/resources/generator/client/tikui/style/organism/columns/columns.md.mustache b/src/main/resources/generator/client/tikui/style/organism/columns/columns.md.mustache
new file mode 100644
index 00000000000..39c4ff5ddf6
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/organism/columns/columns.md.mustache
@@ -0,0 +1 @@
+## Columns
diff --git a/src/main/resources/generator/client/tikui/style/organism/columns/columns.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/columns/columns.mixin.pug.mustache
new file mode 100644
index 00000000000..70dfdbc4339
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/organism/columns/columns.mixin.pug.mustache
@@ -0,0 +1,10 @@
+mixin columns(gap, options)
+  - const { justify, align } = options || {};
+  - const justifyClass = justify ? `-justify-${justify}` : null;
+  - const alignClass = align ? `-align-${align}` : null;
+  .columns(class=[`-gap-${gap}`, justifyClass, alignClass, gapClass])
+    block
+
+mixin columns--column
+  .columns--column
+    block
diff --git a/src/main/resources/generator/client/tikui/style/organism/columns/columns.render.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/columns/columns.render.pug.mustache
new file mode 100644
index 00000000000..f814a96a4a3
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/organism/columns/columns.render.pug.mustache
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include columns.code.pug
diff --git a/src/main/resources/generator/client/tikui/style/organism/organism.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/organism.pug.mustache
index 21e555b272e..d34e9f29a9c 100644
--- a/src/main/resources/generator/client/tikui/style/organism/organism.pug.mustache
+++ b/src/main/resources/generator/client/tikui/style/organism/organism.pug.mustache
@@ -1,7 +1,7 @@
 extends /layout-documentation
 
 block append vars
-  -active='organism'
+  - active = 'organism';
 
 block title
   title Tikui - Organisms
@@ -9,8 +9,12 @@ block title
 block content
   .tikui-vertical-spacing.-s32
     .tikui-vertical-spacing--line
-      h1.tikui-title-main#organisms Organisms
+      h1#organisms.tikui-title-main Organisms
     .tikui-vertical-spacing--line
       include /documentation/atomic-design/quote/organism
+    .tikui-vertical-spacing--line
+      include:componentDoc columns/columns.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=210) lines/lines.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=210) toasts/toasts.md
diff --git a/src/main/resources/generator/client/tikui/style/organism/toasts/_toasts.scss.mustache b/src/main/resources/generator/client/tikui/style/organism/toasts/_toasts.scss.mustache
new file mode 100644
index 00000000000..7ca6c187e48
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/organism/toasts/_toasts.scss.mustache
@@ -0,0 +1,5 @@
+.toasts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
+}
diff --git a/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.code.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.code.pug.mustache
new file mode 100644
index 00000000000..7cfaa41e937
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.code.pug.mustache
@@ -0,0 +1,6 @@
+include toasts.mixin.pug
+
++toasts
+  +toasts--toast First toast message
+  +toasts--toast Second toast message
+  +toasts--toast Last toast message
diff --git a/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.md.mustache b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.md.mustache
new file mode 100644
index 00000000000..34a68808754
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.md.mustache
@@ -0,0 +1 @@
+## Toasts
diff --git a/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.mixin.pug.mustache
new file mode 100644
index 00000000000..d34c8215153
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.mixin.pug.mustache
@@ -0,0 +1,10 @@
+include /molecule/toast/toast.mixin.pug
+
+mixin toasts
+  .toasts
+    block
+
+mixin toasts--toast
+  .toasts--toast
+    +toast
+      block
diff --git a/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.render.pug.mustache b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.render.pug.mustache
new file mode 100644
index 00000000000..ad01b424880
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/organism/toasts/toasts.render.pug.mustache
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include toasts.code.pug
diff --git a/src/main/resources/generator/client/tikui/style/template/_template.scss.mustache b/src/main/resources/generator/client/tikui/style/template/_template.scss.mustache
new file mode 100644
index 00000000000..5819b5649ea
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/_template.scss.mustache
@@ -0,0 +1,2 @@
+@use 'template-page/template-page';
+@use 'toasting/toasting';
diff --git a/src/main/resources/generator/client/tikui/style/template/template-page/_template-page.scss.mustache b/src/main/resources/generator/client/tikui/style/template/template-page/_template-page.scss.mustache
new file mode 100644
index 00000000000..c8073110faa
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/template-page/_template-page.scss.mustache
@@ -0,0 +1,22 @@
+@use '../../variables/breakpoint';
+
+.template-page {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-background-page);
+  overflow: auto;
+
+  &--content {
+    box-sizing: border-box;
+    margin: 0 auto;
+    background-color: var(--color-background);
+    padding: var(--spacing-l);
+    width: 100%;
+    max-width: var(--content-width);
+    min-height: 100vh;
+
+    @media screen and (width >= #{breakpoint.$large}) {
+      padding: var(--spacing-l) 5rem;
+    }
+  }
+}
diff --git a/src/main/resources/generator/client/tikui/style/template/template-page/template-page.code.pug.mustache b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.code.pug.mustache
new file mode 100644
index 00000000000..eda40743182
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.code.pug.mustache
@@ -0,0 +1,41 @@
+include template-page.mixin.pug
+
+include /atom/button/button.mixin.pug
+include /atom/input-text/input-text.mixin.pug
+include /atom/page-title/page-title.mixin.pug
+include /atom/paragraph/paragraph.mixin.pug
+include /molecule/field/field.mixin.pug
+include /organism/columns/columns.mixin.pug
+include /organism/lines/lines.mixin.pug
+
++template-page
+  +lines('title-and-text')
+    +lines-line
+      +page-title Title
+    +lines-line
+      +paragraph
+        | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        | Etiam at massa a ipsum rhoncus posuere. Aenean id scelerisque tortor. Etiam vulputate finibus imperdiet.
+        | Phasellus ac tellus ac felis efficitur convallis. Vestibulum quis viverra libero, in accumsan neque.
+        | Donec pulvinar metus mollis, bibendum orci et, lobortis nulla.
+        | Proin dignissim euismod scelerisque. Ut eu ultrices ipsum.
+        | Quisque iaculis nibh ac nulla pretium ullamcorper. Aenean at magna risus.
+    +lines-line
+      +paragraph
+        | Suspendisse potenti. Donec euismod, ligula sit amet lobortis condimentum, ligula nulla aliquam quam,
+        | at egestas tortor risus sed est. Nulla sed dapibus nulla, ut bibendum dolor.
+        | Suspendisse potenti. Vivamus vehicula lacus vitae semper fermentum. Mauris aliquet mi et placerat mollis.
+        | Aenean nibh arcu, suscipit quis porta eget, auctor non lectus. Nullam aliquet suscipit mauris sit amet sagittis.
+    +lines-line
+      +columns('paragraphs', { justify: 'center' })
+        +columns--column
+          form
+            +lines('paragraphs')
+              +lines-line
+                +field('Firstname', { forId: 'firstname' })
+                  +input-text({ id: 'firstname', placeholder: 'Firstname' })
+              +lines-line
+                +field('Lastname', { forId: 'lastname' })
+                  +input-text({ id: 'lastname', placeholder: 'Lastname' })
+              +lines-line({ align: 'end' })
+                +button({ type: 'submit' }) Subscribe
diff --git a/src/main/resources/generator/client/tikui/style/template/template-page/template-page.md.mustache b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.md.mustache
new file mode 100644
index 00000000000..ae420af2d33
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.md.mustache
@@ -0,0 +1 @@
+## Template page
diff --git a/src/main/resources/generator/client/tikui/style/template/template-page/template-page.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.mixin.pug.mustache
new file mode 100644
index 00000000000..0ee781f56dd
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.mixin.pug.mustache
@@ -0,0 +1,4 @@
+mixin template-page
+  .template-page
+    .template-page--content
+      block
diff --git a/src/main/resources/generator/client/tikui/style/template/template-page/template-page.render.pug.mustache b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.render.pug.mustache
new file mode 100644
index 00000000000..720a17fb612
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/template-page/template-page.render.pug.mustache
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include template-page.code.pug
diff --git a/src/main/resources/generator/client/tikui/style/template/template.pug.mustache b/src/main/resources/generator/client/tikui/style/template/template.pug.mustache
index 8be7ca738b5..ca6e9df2417 100644
--- a/src/main/resources/generator/client/tikui/style/template/template.pug.mustache
+++ b/src/main/resources/generator/client/tikui/style/template/template.pug.mustache
@@ -1,7 +1,7 @@
 extends /layout-documentation
 
 block append vars
-  -active='template'
+  - active = 'template';
 
 block title
   title Tikui - Templates
@@ -9,6 +9,10 @@ block title
 block content
   .tikui-vertical-spacing.-s32
     .tikui-vertical-spacing--line
-      h1.tikui-title-main#templates Templates
+      h1#templates.tikui-title-main Templates
     .tikui-vertical-spacing--line
       include /documentation/atomic-design/quote/template
+    .tikui-vertical-spacing--line
+      include:templateDoc template-page/template-page.md
+    .tikui-vertical-spacing--line
+      include:templateDoc toasting/toasting.md
diff --git a/src/main/resources/generator/client/tikui/style/template/toasting/_toasting.scss.mustache b/src/main/resources/generator/client/tikui/style/template/toasting/_toasting.scss.mustache
new file mode 100644
index 00000000000..a2b94e7624f
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/toasting/_toasting.scss.mustache
@@ -0,0 +1,20 @@
+.toasting {
+  position: absolute;
+  z-index: 1;
+
+  &.-up {
+    top: var(--spacing-m);
+  }
+
+  &.-right {
+    right: var(--spacing-m);
+  }
+
+  &.-down {
+    bottom: var(--spacing-m);
+  }
+
+  &.-left {
+    left: var(--spacing-m);
+  }
+}
diff --git a/src/main/resources/generator/client/tikui/style/template/toasting/toasting.code.pug.mustache b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.code.pug.mustache
new file mode 100644
index 00000000000..660145a3f12
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.code.pug.mustache
@@ -0,0 +1,3 @@
+include toasting.mixin.pug
+
++toasting('up right')
diff --git a/src/main/resources/generator/client/tikui/style/template/toasting/toasting.md.mustache b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.md.mustache
new file mode 100644
index 00000000000..820a3d1f88d
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.md.mustache
@@ -0,0 +1 @@
+## Toasting
diff --git a/src/main/resources/generator/client/tikui/style/template/toasting/toasting.mixin.pug.mustache b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.mixin.pug.mustache
new file mode 100644
index 00000000000..2c6e5ce6e44
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.mixin.pug.mustache
@@ -0,0 +1,9 @@
+include /organism/toasts/toasts.mixin.pug
+
+mixin toasting(orientations)
+  - const orientationsClass = orientations.split(' ').map(orientation => `-${orientation}`).join(' ');
+  .toasting(class=orientationsClass)
+    +toasts
+      +toasts--toast First toast message
+      +toasts--toast Second toast message
+      +toasts--toast Last toast message
diff --git a/src/main/resources/generator/client/tikui/style/template/toasting/toasting.render.pug.mustache b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.render.pug.mustache
new file mode 100644
index 00000000000..4765d1cec1f
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/template/toasting/toasting.render.pug.mustache
@@ -0,0 +1,5 @@
+extends /layout
+
+block body
+  include /template/template-page/template-page.code.pug
+  include toasting.code.pug
diff --git a/src/main/resources/generator/client/tikui/style/tikui.scss.mustache b/src/main/resources/generator/client/tikui/style/tikui.scss.mustache
index 387b682ee42..79244986e4e 100644
--- a/src/main/resources/generator/client/tikui/style/tikui.scss.mustache
+++ b/src/main/resources/generator/client/tikui/style/tikui.scss.mustache
@@ -2,3 +2,4 @@
 @use 'atom/atom';
 @use 'molecule/molecule';
 @use 'organism/organism';
+@use 'template/template';
diff --git a/src/main/resources/generator/client/tikui/style/token/_color.scss.mustache b/src/main/resources/generator/client/tikui/style/token/_color.scss.mustache
index e91f4f6ec78..c4102d76a00 100644
--- a/src/main/resources/generator/client/tikui/style/token/_color.scss.mustache
+++ b/src/main/resources/generator/client/tikui/style/token/_color.scss.mustache
@@ -7,6 +7,7 @@
   --color-text-on-primary: #fff;
   --color-background-page: #f1f1f1;
   --color-background: #fff;
+  --color-shadow: rgb(0 0 0 / 80%);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -16,5 +17,6 @@
     --color-text: #fff;
     --color-background-page: #333;
     --color-background: #222;
+    --color-shadow: rgb(255 255 255 / 80%);
   }
 }
diff --git a/src/main/resources/generator/client/tikui/style/token/_radius.scss.mustache b/src/main/resources/generator/client/tikui/style/token/_radius.scss.mustache
index c7f24e3c16f..25fc4ee632d 100644
--- a/src/main/resources/generator/client/tikui/style/token/_radius.scss.mustache
+++ b/src/main/resources/generator/client/tikui/style/token/_radius.scss.mustache
@@ -1,3 +1,6 @@
 :root {
-  --radius-field: 0.5rem;
+  --radius-s: 0.25rem;
+  --radius-sm: 0.5rem;
+  --radius-field: var(--radius-sm);
+  --radius-toast: var(--radius-sm);
 }
diff --git a/src/main/resources/generator/client/tikui/style/variables/_breakpoint.scss.mustache b/src/main/resources/generator/client/tikui/style/variables/_breakpoint.scss.mustache
new file mode 100644
index 00000000000..286f33f8d53
--- /dev/null
+++ b/src/main/resources/generator/client/tikui/style/variables/_breakpoint.scss.mustache
@@ -0,0 +1 @@
+$large: 1200px;
diff --git a/src/test/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactoryTest.java b/src/test/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactoryTest.java
index 4098c579e9d..2fc46c938f4 100644
--- a/src/test/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactoryTest.java
+++ b/src/test/java/tech/jhipster/lite/generator/client/tikui/domain/TikuiModuleFactoryTest.java
@@ -3,6 +3,7 @@
 import static tech.jhipster.lite.module.domain.JHipsterModulesFixture.*;
 import static tech.jhipster.lite.module.infrastructure.secondary.JHipsterModulesAssertions.*;
 
+import java.util.Set;
 import org.junit.jupiter.api.Nested;
 import org.junit.jupiter.api.Test;
 import tech.jhipster.lite.TestFileUtils;
@@ -134,6 +135,10 @@ private String styleProxy() {
     }
   }
 
+  private static String[] componentFiles(String name) {
+    return Set.of("_" + name + ".scss", name + ".code.pug", name + ".md", name + ".mixin.pug", name + ".render.pug").toArray(String[]::new);
+  }
+
   private static JHipsterModuleAsserter assertThatTikuiModule(ModuleFile proxyFile, ModuleFile indexFile) {
     JHipsterModuleProperties properties = propertiesBuilder(TestFileUtils.tmpDirForTest()).build();
 
@@ -159,29 +164,22 @@ private static JHipsterModuleAsserter assertThatTikuiModule(ModuleFile proxyFile
       .and()
       .hasPrefixedFiles("src/main/style", "tikui.scss", "favicon.ico", "index.pug", "layout.pug", "layout-documentation.pug")
       .hasPrefixedFiles("src/main/style/atom", "_atom.scss", "atom.pug")
-      .hasPrefixedFiles(
-        "src/main/style/atom/button",
-        "_button.scss",
-        "button.code.pug",
-        "button.md",
-        "button.mixin.pug",
-        "button.render.pug"
-      )
-      .hasPrefixedFiles(
-        "src/main/style/atom/input-text",
-        "_input-text.scss",
-        "input-text.code.pug",
-        "input-text.md",
-        "input-text.mixin.pug",
-        "input-text.render.pug"
-      )
-      .hasPrefixedFiles("src/main/style/atom/label", "_label.scss", "label.code.pug", "label.md", "label.mixin.pug", "label.render.pug")
+      .hasPrefixedFiles("src/main/style/atom/button", componentFiles("button"))
+      .hasPrefixedFiles("src/main/style/atom/input-text", componentFiles("input-text"))
+      .hasPrefixedFiles("src/main/style/atom/label", componentFiles("label"))
+      .hasPrefixedFiles("src/main/style/atom/page-title", componentFiles("page-title"))
+      .hasPrefixedFiles("src/main/style/atom/paragraph", componentFiles("paragraph"))
       .hasPrefixedFiles("src/main/style/molecule", "_molecule.scss", "molecule.pug")
-      .hasPrefixedFiles("src/main/style/molecule/field", "_field.scss", "field.code.pug", "field.md", "field.mixin.pug", "field.render.pug")
+      .hasPrefixedFiles("src/main/style/molecule/field", componentFiles("field"))
+      .hasPrefixedFiles("src/main/style/molecule/toast", componentFiles("toast"))
       .hasPrefixedFiles("src/main/style/organism", "_organism.scss", "organism.pug")
-      .hasPrefixedFiles("src/main/style/organism/lines", "_lines.scss", "lines.code.pug", "lines.md", "lines.mixin.pug", "lines.render.pug")
+      .hasPrefixedFiles("src/main/style/organism/columns", componentFiles("columns"))
+      .hasPrefixedFiles("src/main/style/organism/lines", componentFiles("lines"))
+      .hasPrefixedFiles("src/main/style/organism/toasts", componentFiles("toasts"))
       .hasPrefixedFiles("src/main/style/quark", "_placeholder.scss", "_spacing.scss")
-      .hasPrefixedFiles("src/main/style/template", "template.pug")
+      .hasPrefixedFiles("src/main/style/template", "_template.scss", "template.pug")
+      .hasPrefixedFiles("src/main/style/template/template-page", componentFiles("template-page"))
+      .hasPrefixedFiles("src/main/style/template/toasting", componentFiles("toasting"))
       .hasPrefixedFiles(
         "src/main/style/token",
         "spacing/_spacings.scss",
@@ -193,6 +191,7 @@ private static JHipsterModuleAsserter assertThatTikuiModule(ModuleFile proxyFile
         "_radius.scss",
         "_size.scss",
         "_token.scss"
-      );
+      )
+      .hasPrefixedFiles("src/main/style/variables", "_breakpoint.scss");
   }
 }