diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
index b2386ad3fb..37cd5df9b8 100644
--- a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
+++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
@@ -1,5 +1,7 @@
 import "./NoteContentSwitcher.css";
 
+import FNote from "../../entities/fnote";
+import server from "../../services/server";
 import { Badge } from "../react/Badge";
 
 export interface NoteContentTemplate {
@@ -8,16 +10,22 @@ export interface NoteContentTemplate {
 }
 
 interface NoteContentSwitcherProps {
+    note: FNote;
     templates: NoteContentTemplate[];
 }
 
-export default function NoteContentSwitcher({ templates }: NoteContentSwitcherProps) {
+export default function NoteContentSwitcher({ note, templates }: NoteContentSwitcherProps) {
     return (
         <div className="note-content-switcher">
             {templates.map(sample => (
                 <Badge
                     key={sample.name}
                     text={sample.name}
+                    onClick={async () => {
+                        await server.put(`notes/${note.noteId}/data`, {
+                            content: sample.content
+                        });
+                    }}
                 />
             ))}
         </div>
diff --git a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx
index 5d57c5b22f..2d3c312283 100644
--- a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx
+++ b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx
@@ -34,7 +34,7 @@ export default function Mermaid(props: TypeWidgetProps) {
             renderSvg={renderSvg}
             noteType="mermaid"
             extraContent={(
-                <NoteContentSwitcher templates={SAMPLE_DIAGRAMS} />
+                <NoteContentSwitcher note={props.note} templates={SAMPLE_DIAGRAMS} />
             )}
             {...props}
         />
diff --git a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts
index c6c036a104..3979baf122 100644
--- a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts
+++ b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts
@@ -10,7 +10,7 @@ flowchart TD
     C -->|One| D[Laptop]
     C -->|Two| E[iPhone]
     C -->|Three| F[fa:fa-car Car]
-        `
+`
     }
 ];