diff --git a/common/presets/templates.ts b/common/presets/templates.ts
index b637b1c20..e27b939f7 100644
--- a/common/presets/templates.ts
+++ b/common/presets/templates.ts
@@ -99,14 +99,18 @@ export const templates = {
   {{#if user_embed}}Relevant information to the conversation
   {{user_embed}}
   {{/if}}
-  {{#if scenario}}The scenario of the conversation: {{scenario}}
+  {{#if scenario}}The scenario of the conversation:
+  {{scenario}}
   {{/if}}
   {{#if chat_embed}}Relevant past conversation history
   {{chat_embed}}
   {{/if}}
-  {{#if example_dialogue}}This is how {{char}} should talk: {{example_dialogue}}
+  {{#if example_dialogue}}This is how {{char}} should talk:
+  {{example_dialogue}}
   {{/if}}
-  ***  
+  
+  Then the roleplay chat between {{char}} and {{user}} begins.
+
   {{#each msg}}{{#if .isbot}}<bot>{{.name}}: {{.msg}}</bot>{{/if}}{{#if .isuser}}<user>{{.name}}: {{.msg}}</user>{{/if}}
   {{/each}}
   {{#if ujb}}<bot>
@@ -163,7 +167,7 @@ export const templates = {
   {{#if example_dialogue}}This is how {{char}} should talk:
   {{example_dialogue}}
   {{/if}}
-  ***
+  
   {{#each msg}}{{#if .isbot}}ASSISTANT:\n{{.name}}: {{.msg}}{{/if}}{{#if .isuser}}USER:\n{{.name}}: {{.msg}}{{/if}}
   {{/each}}
   {{#if ujb}}SYSTEM:{{ujb}}
@@ -221,7 +225,7 @@ export const templates = {
   {{#if example_dialogue}}This is how {{char}} should talk:
   {{example_dialogue}}
   {{/if}}
-  ***
+  
   {{#each msg}}{{#if .isbot}}<|model|>{{/if}}{{#if .isuser}}<|user|>{{/if}}{{.name}}: {{.msg}}
   {{/each}}
   {{#if ujb}}<|system|>{{ujb}}
diff --git a/web/shared/PromptEditor/index.tsx b/web/shared/PromptEditor/index.tsx
index 622501fab..22eb9a3a6 100644
--- a/web/shared/PromptEditor/index.tsx
+++ b/web/shared/PromptEditor/index.tsx
@@ -23,7 +23,7 @@ import { toBotMsg, toChar, toChat, toPersona, toProfile, toUser, toUserMsg } fro
 import { ensureValidTemplate, buildPromptParts } from '/common/prompt'
 import { AppSchema } from '/common/types/schema'
 import { v4 } from 'uuid'
-import { isDefaultTemplate } from '../../../common/presets/templates'
+import { isDefaultTemplate, replaceTags } from '../../../common/presets/templates'
 import Select from '../Select'
 import TextInput from '../TextInput'
 import { presetStore } from '/web/store'
@@ -185,12 +185,30 @@ const PromptEditor: Component<
     return template?.name || ''
   })
 
-  createEffect(async () => {
+  const togglePreview = async () => {
     const opts = await getExampleOpts(props.inherit)
     const template = props.noDummyPreview ? input() : ensureValidTemplate(input(), opts.parts)
-    const { parsed } = await parseTemplate(template, opts)
+    let { parsed } = await parseTemplate(template, opts)
+
+    if (props.inherit?.modelFormat) {
+      parsed = replaceTags(parsed, props.inherit.modelFormat)
+    }
+
     setRendered(parsed)
-  })
+    setPreview(!preview())
+  }
+
+  // createEffect(async () => {
+  //   const opts = await getExampleOpts(props.inherit)
+  //   const template = props.noDummyPreview ? input() : ensureValidTemplate(input(), opts.parts)
+  //   let { parsed } = await parseTemplate(template, opts)
+
+  //   if (props.inherit?.modelFormat) {
+  //     parsed = replaceTags(parsed, props.inherit.modelFormat)
+  //   }
+
+  //   setRendered(parsed)
+  // })
 
   const onChange = (ev: Event & { currentTarget: HTMLTextAreaElement }) => {
     setInput(ev.currentTarget.value)
@@ -274,7 +292,7 @@ const PromptEditor: Component<
                 </div>
               </div>
               <div class="flex gap-2">
-                <Button size="sm" onClick={() => setPreview(!preview())}>
+                <Button size="sm" onClick={togglePreview}>
                   Toggle Preview
                 </Button>
                 <Show when={props.showTemplates}>