diff --git a/src/App.tsx b/src/App.tsx
index bee3a03..02e5811 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -41,19 +41,59 @@ function App() {
 
   return (
     <>
-      <div className="flex flex-col max-w-lg p-4 mx-auto">
+      <div lang="fa" dir="rtl" className="flex flex-col max-w-lg p-4 mx-auto">
         <span className="label-text p-2 text-md">
           یک مصراع را به فینگلیش وارد کنید.
+          <button tabIndex={2} className="badge badge-outline mx-2" onClick={() => (document.getElementById("help_modal") as HTMLDialogElement).showModal()}>چگونه؟</button>
+          <dialog tabIndex={-1} id="help_modal" className="modal modal-bottom sm:modal-middle">
+            <div className="modal-box">
+              <h3 className="text-lg -mt-2 mb-4">توضیحات</h3>
+              <p className="text-start my-2">صدا‌ها
+                <span className='badge badge-primary mx-1'>ــَـ a</span>
+                <span className='badge badge-primary mx-1'>ــِـ e</span>
+                <span className='badge badge-primary mx-1'>ــُـ o</span>
+                <span className='badge badge-primary mx-1'>آ aa</span>
+                <span className='badge badge-primary mx-1'>ای i</span>
+                <span className='badge badge-primary mx-1'>او oo</span>
+              </p>
+              <p className="text-start my-2">حروف ویژه
+                <span className='badge badge-primary mx-1'>چ ch</span>
+                <span className='badge badge-primary mx-1'>خ kh</span>
+                <span className='badge badge-primary mx-1'>ژ zh</span>
+                <span className='badge badge-primary mx-1'>ش sh</span>
+                <span className='badge badge-primary mx-1'>ق gh</span>
+                <span className='badge badge-primary mx-1'>ع '</span>
+                <span className='badge badge-primary mx-1'>ی y</span>
+              </p>
+              <p>کسره‌ای که تلفظش کشیده‌تر است به صورت ee نوشته می‌شود.</p>
+              <p>در کلماتی مانند "نو" و "درو" که حرف واو کشیده تلفظ می‌شود آن را به شکل ow می‌نویسیم.</p>
+              <p>در کلماتی مانند "مضحک" که دو حرف فینگلیش (در اینجا h و z) کنار هم می‌آیند و ناخواسته یک حرف ویژه (zh = ژ) می‌سازند آن را به صورت جداگانه <span className='inline-block'>(moz hek)</span> مینویسیم.</p>
+              <h3 className="text-lg mt-2">مثال‌ها</h3>
+              <ul className="flex flex-col gap-3 justify-center text-center ">
+                <li>بر کفی جام شریعت بر کفی سندان عشق <br />bar kafi jaamee shari'at bar kafi sendaane eshgh</li>
+                <li>هر که اقرار کرد و باده شناخت<br />har ke eghraar kard o baade shenaakht</li>
+                <li>سنبل سیه بر سمن مزن<br />sonbole siyah bar saman mazan</li>
+              </ul>
+              <div className="modal-action">
+                <form method="dialog">
+                  <button className="btn btn-md btn-circle btn-ghost absolute left-2 top-2 text-lg">✕</button>
+                </form>
+              </div>
+            </div>
+            <form method="dialog" className="modal-backdrop">
+              <button>close</button>
+            </form>
+          </dialog>
           <div className='inline float-left'>
             دقیق
-            <input type="checkbox" className="toggle align-middle mx-2" onClick={(event) => toggle_exact_fuzzy(event.currentTarget.checked)} />
+            <input tabIndex={3} type="checkbox" className="toggle align-middle mx-2" onClick={(event) => toggle_exact_fuzzy(event.currentTarget.checked)} />
             فازی
           </div>
         </span>
-        <textarea dir="ltr" rows={2} spellCheck="false" placeholder='…' className="textarea textarea-bordered resize-none text-lg" onChange={(event) => { setInput(event.target.value); vaznha(event.target.value).then((val) => setOutput(val)); }}></textarea>
+        <textarea tabIndex={1} dir="ltr" rows={2} spellCheck="false" autoCorrect='false' autoCapitalize='false' autoComplete='false' placeholder='…' className="textarea textarea-bordered resize-none text-lg" onChange={(event) => { const s = event.target.value.toLowerCase(); setInput(s); vaznha(s).then((val) => setOutput(val)); }}></textarea>
         <div dir="ltr" className="w-full p-2 justify-center font-mono text-4xl">{heja_to_unicode(heja(input))}</div>
         <p className="my-8">{display_vaznha(output)}</p>
-      </div>
+      </div >
     </>
   );
 }
diff --git a/src/vaznha.ts b/src/vaznha.ts
index a0ede4e..b944748 100644
--- a/src/vaznha.ts
+++ b/src/vaznha.ts
@@ -13,7 +13,7 @@ export function set_fuzzy_matcher(threshold: number) {
 }
 
 export async function vaznha(input: string): Promise<string[]> {
-  const input_heja = heja_special(input.toLowerCase().replace(/[^\s\w]/g, ""));
+  const input_heja = heja_special(input.toLowerCase().replace(/[^a-z' ]/g, ""));
   const vznha: string[] = [];
   for (let key_vazn in VAZNHA) {
     const vazn_variants = VAZNHA[key_vazn];