diff --git a/frontend/package.json b/frontend/package.json
index 944bab1..eeee9ad 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,13 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/extension-placeholder": "^3.29.2",
+    "@tiptap/markdown": "^3.29.2",
+    "@tiptap/pm": "^3.29.2",
+    "@tiptap/starter-kit": "^3.29.2",
+    "@tiptap/vue-3": "^3.29.2",
+    "dompurify": "^3.4.13",
     "konsta": "~5.2.0",
     "lucide-vue-next": "^0.525.0",
     "pinia": "^3.0.3",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 3620d6d..99bf2de 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,6 +8,27 @@ importers:
 
   .:
     dependencies:
+      '@tiptap/core':
+        specifier: ^3.29.2
+        version: 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/extension-placeholder':
+        specifier: ^3.29.2
+        version: 3.29.2(@tiptap/extensions@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))
+      '@tiptap/markdown':
+        specifier: ^3.29.2
+        version: 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+      '@tiptap/pm':
+        specifier: ^3.29.2
+        version: 3.29.2
+      '@tiptap/starter-kit':
+        specifier: ^3.29.2
+        version: 3.29.2
+      '@tiptap/vue-3':
+        specifier: ^3.29.2
+        version: 3.29.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)(vue@3.5.40(typescript@5.8.3))
+      dompurify:
+        specifier: ^3.4.13
+        version: 3.4.13
       konsta:
         specifier: ~5.2.0
         version: 5.2.0
@@ -292,6 +313,15 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
   '@humanfs/core@0.19.2':
     resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
     engines: {node: '>=18.18.0'}
@@ -333,6 +363,7 @@ packages:
     engines: {node: ^22.20 || ^24.12 || >=25}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -387,66 +418,79 @@ packages:
     resolution: {integrity: sha512-81wiiX3v7aqy+T+bT61TJ78yJjRquqFFTTbAPt08imfQQzkPIW8t6aJbkTagtCCrXMNc9D66+geqlK7ydLPNqA==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.62.4':
     resolution: {integrity: sha512-9kmDIvNZqdoHOBZgNtpTBeLWYO/LVipM3H/j62P8848/l/VPEQL6N3uxU9pvP1oZAsXyC2MEnFP3ovRjo7WYNQ==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.62.4':
     resolution: {integrity: sha512-CcnXHWnXg69g+DX5VWL3FHts3qMRN2uVEHX+BZvGLdd07/gXkn3ePjYtO1LDJvxkGKVHMclKBRa1QUTH+6toYQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.62.4':
     resolution: {integrity: sha512-iFOibiHnTRuhrWLlRsOQFdZJJIa7S8OwkneJr4ocALP16u5yk6lWLINFwhHaEqBFMsKDUZofLkGos7+CPzGB3g==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.62.4':
     resolution: {integrity: sha512-XnWYMI7euHlb5a871xPja+Gm7DRCFU+FGRrtS2sMq9N8FvqtpagUy6gD4YOemC5MRk9xbh8+jYMEJbigFQwsgA==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.62.4':
     resolution: {integrity: sha512-qGDAlO0U8xedCcsdRm9oaoQY8DAx/QT7uIxJWhCdx0ceIWX783UC9QSYkdpzAe29wNiVfp24+bZdQmn49o45SQ==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.62.4':
     resolution: {integrity: sha512-ru4H6ezD7ysA5EiEK6qkkaEb4modH8CTej6kUy/gQi20u3kB3G7Zn8snXXkeJSCOFKG/rbPPtM/+9Wgas1961w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.62.4':
     resolution: {integrity: sha512-2W4MO5WQVJnbJaZdvDb9rhBDuFU1nKIepPFpJUBsTh2k1YY2g+ODViaWuyOAjQ5cOP7NvrvLzt3wvHOoiAvc7w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.62.4':
     resolution: {integrity: sha512-+fxjfuoAmVMCYV5QyjoIpu0cp5DOiOTeqYFk1AVaxGr+/ravWLX89XfQmptsoWcaVy/TGf2hexzbUOrCQIL1CQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.62.4':
     resolution: {integrity: sha512-jTn8JfHGL4djjFxPuM06LmNUJDsst2jeVlsd9OmIH6zc5sC9K6rIuO4YajXatLUpBmBKl6b35ro1QZocLi+tcA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.62.4':
     resolution: {integrity: sha512-oCJCJL4pXsoDcP2QZ+JVlPTIRc6266zsIaeJJsWImmF7HO0W8nb6HuSgZlMWxJwaPf8ehbSw8yo0EUw925hKsA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.62.4':
     resolution: {integrity: sha512-W69hukhZ3KKNRCaMIEzKvcFye42hh0FE1+YoYaf5+Ikacuftoco6yO/xouz0hc5d5W/s3yBro5jRiuEE/Q5vUw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.62.4':
     resolution: {integrity: sha512-qiXbGG2jkjXhzXpsFZSR2Xpb8DN/UaxYsbb/STbuR/6fpaDgRmmaq1B/LmtF2wQFOFOSsK2jdE0RZ3a0zHn4QA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.62.4':
     resolution: {integrity: sha512-nWeM//hxv8mIo6jD7Hu4o48DVmV9pbV6gsKaWU+4NFyqHoPKwrkRiZGLKUhOBk8qNmDmpwFtPKg80Bo/Tn4xiQ==}
@@ -516,24 +560,28 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.3.3':
     resolution: {integrity: sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.3.3':
     resolution: {integrity: sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.3.3':
     resolution: {integrity: sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.3.3':
     resolution: {integrity: sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==}
@@ -568,6 +616,165 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7 || ^8
 
+  '@tiptap/core@3.29.2':
+    resolution: {integrity: sha512-oKUkiPUB7noilVYxI9lNzUD4rX17sHub+PYjMfHMWHG9A3nvIy+FdePIVIIhThKWF7ijhr3eIqHY51Bn+GAFtw==}
+    peerDependencies:
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-blockquote@3.29.2':
+    resolution: {integrity: sha512-ca4OzKDh0yaxg2+Z56bC2QnWsNsFp2YMRfVig1PDXyMVFMNJpLcnhxgq/9btn+xYAlYrj8RymOeCTYREOR6Zjg==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-bold@3.29.2':
+    resolution: {integrity: sha512-elYbGxJsYnBb4leqrcjdIJuiG380BcOgN+UUzvOv+qEjfGVzHodFOMBl3qnmD6urYHNu5/qQK2S0qSSRXKCLNQ==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-bubble-menu@3.29.2':
+    resolution: {integrity: sha512-kzcWarcpr031rZu+R3Hzut5uxb3Qj/xxMDEYZIQ3uiq1yb5vEMXj8/SIyWautk6Nu8Rr1leV3rGdR4NzhzyFAA==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-bullet-list@3.29.2':
+    resolution: {integrity: sha512-3bWcCUPbCHv0XttlMdnAtXLNYWx2pblByMgxmGsaP9FU0QnslGXty6A6gHCqI33ygRg1vrA6U5Wtpwbi5aKu5g==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.29.2
+
+  '@tiptap/extension-code-block@3.29.2':
+    resolution: {integrity: sha512-w153ct8g6dLiPTdXQ6SOIMxX4SEo5Q50AmjdEEEcJ7ZcYUcde/ScSskLHfOYmyt5ZFAiyEwr121+pux+p3/oAQ==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-code@3.29.2':
+    resolution: {integrity: sha512-c6W5UGuB7WNLpYocsgRzpO2OOTI4QjaI9jjHRMuty9z+s9DtaYM/HrRLNwVh6MopkHb+i/89Wkv8gCS34fftig==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-document@3.29.2':
+    resolution: {integrity: sha512-YUamvefLnsqu6124GavVTI7nqcFlQJ12ROB0oSwG69eSBZYNjg1tIs05LFrBxkwf4Xgqd6YzfJ9+FeG428RvzQ==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-dropcursor@3.29.2':
+    resolution: {integrity: sha512-KKno7cU9r1HdR48CRrsDu69/1UjZdoslq/UcE+Kx+tdhAv/aljXMkRSNzGMrBNOBDmHRgS1+58zm21WQWdQzwA==}
+    peerDependencies:
+      '@tiptap/extensions': 3.29.2
+
+  '@tiptap/extension-floating-menu@3.29.2':
+    resolution: {integrity: sha512-CBTq4Xs5aGWr65uFCIkKBms796OhmirWf/ax//iJ4fl9IfwqjwFuc2vQs9PmuwpKn9ctDHo2sMTtvyeCvIt5LQ==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-gapcursor@3.29.2':
+    resolution: {integrity: sha512-8Q39UR4/Tit759IeW9xZIe3NMwN11GsuA3FLheDyyGn7RrW02HD3HhUDlazE54Ki4HoosjFmChPlN4Ik2ubdRQ==}
+    peerDependencies:
+      '@tiptap/extensions': 3.29.2
+
+  '@tiptap/extension-hard-break@3.29.2':
+    resolution: {integrity: sha512-eUW3LN3fq8rXnjEUeI3D2QONYdLsU3yYQm4jxlErs2h4cfwrFjgf19VSUFVmm6LrFbbQ0OnDVPeVLL6iOwDw2w==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-heading@3.29.2':
+    resolution: {integrity: sha512-6W4aIy70Mh7BNlbG9zZ5FBLhJhU2UUEzgZJ/jwYSCcB30o8McLxJSEjhtoHiX8R78Ah2/JzBGvIe5olZlbeE4A==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-horizontal-rule@3.29.2':
+    resolution: {integrity: sha512-8/ZPzbB9X85Mc9/7xVLZupQKBr2UVcQTGr512xtqMW+XkCQRHCph46tRo828YE13IMWI5fWn/FaNCqXG9cULSw==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-italic@3.29.2':
+    resolution: {integrity: sha512-iH63V/5wsaMnY4Jz0+meaAGhaec4AiOzOduzl6ZZr5IyGhZ1kthyW84ELt0dyLI3hNceAUhaNWc+I7+vX0aoXA==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-link@3.29.2':
+    resolution: {integrity: sha512-DcVer5SqrexKCEP6Ip1UPxJUMvcRCCItSv0wxoGytanrimBh2smvcg6X0DWnjlsi5H0updhyl+atYCmmQXUIXA==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-list-item@3.29.2':
+    resolution: {integrity: sha512-s8vBVHHFT0Qpu7CzAZ7S1kYmSiVaDvUNvMNcZUWnxj6VPfiwmx0eXd9FsjePrRCMoM5tFmPnhFTHDxY3D/eZeQ==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.29.2
+
+  '@tiptap/extension-list-keymap@3.29.2':
+    resolution: {integrity: sha512-R+3k8OLnxdCH7Xy9ieOwUt5m2Je74u8mikothGmsYVO2Zyq48fIbmZ+X6RBPCu7DBOI2FIUhHEFbKQeDWvDNmA==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.29.2
+
+  '@tiptap/extension-list@3.29.2':
+    resolution: {integrity: sha512-WPZ9BHAPT6QeIm1vdVkuoOWvy9a8/EZeJwV2VhU8LXyTAttvzyj4rsbbHyJWvYWlUSTt/QF2AZ2zhKo7u1w3/A==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-ordered-list@3.29.2':
+    resolution: {integrity: sha512-ndCunC+UsYOpkOtL7vGnDz21UNa45WUlcO9wMT1fbuYow2QnRhsuMlCWENXI52YPPARWuQ0RDgN7q6TaxPERBg==}
+    peerDependencies:
+      '@tiptap/extension-list': 3.29.2
+
+  '@tiptap/extension-paragraph@3.29.2':
+    resolution: {integrity: sha512-7qJj5YTr11vvjNgjDN1ypOfwTovc0QOCYcit/rskeuVgnmQZOZQzC/BbyKLLG7UGnpRLemU/mEGbW9pAqjAXkQ==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-placeholder@3.29.2':
+    resolution: {integrity: sha512-/BlpPIq2JZk6zLaeYVOXazi6dmd0iRriTymNEnFn1doManN1y5HED9LsMeb/AhNhauL5AgmcHgpvAjbsN9k4SA==}
+    peerDependencies:
+      '@tiptap/extensions': 3.29.2
+
+  '@tiptap/extension-strike@3.29.2':
+    resolution: {integrity: sha512-aEvLAbddUQZ+FukCreV3q4G2HfNI+odE7E9U+wbq6XsSWKyo8/pDu1muz+TFKNre4blSMOQ3JQmw5UeHDKy+fg==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-text@3.29.2':
+    resolution: {integrity: sha512-Ubko45JWWHe8glBt2PiGNF8hcbys/JNalFhiR7Y1X4iOOtAxAKJJxh3+eq+//NTlGuBPdWGp7zw8EEUp7anjKA==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extension-underline@3.29.2':
+    resolution: {integrity: sha512-K7XwH/xS/5AIREWQ00VTEf/W5U0olp7j6wwit7cdd/8nHv6h6AGr1+iEApHKoLXWQZLfGQKzJlT9W61LAl+fHA==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+
+  '@tiptap/extensions@3.29.2':
+    resolution: {integrity: sha512-BCz+FCAChSYtUe4BFj97HEO+nSK+J7GxbJgZG4Hg7DT/gI+hRyeNndU8efiQAx3WGdzsFi3UxRpcF1tTQM7iMQ==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/markdown@3.29.2':
+    resolution: {integrity: sha512-Knf9YqG3fxOyFuS3pe3eapDz0ya9eqPGzmyMSd5PuHNmR9/Ir6i5qk5+Md6bCPgDNjYskztNm7DoBXPfbXbO/w==}
+    peerDependencies:
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/pm@3.29.2':
+    resolution: {integrity: sha512-GCOme7xHaS+DSoaA4CDcAD3l6JyBlvZhvCyfsy2Vp6j8tEoBkZWio7soYVosmlyn7zq8/64VeFZP5s47yfG7fQ==}
+
+  '@tiptap/starter-kit@3.29.2':
+    resolution: {integrity: sha512-oTu0tysiqk4zgjEtxRHjAQgxUKaAevZwueOWwSWubHdokqp7SpcbE5n9USJv89HKuTUDm3GjnQH6q8HNn/2DsA==}
+
+  '@tiptap/vue-3@3.29.2':
+    resolution: {integrity: sha512-rLX+V+HXbsVlk+My8mslvbnbVXZiQZHYtbOiRgxugsqZ9SK1mr1FpgZ/ZNcotJAjecT8FJmPa45ccDnVu66eGA==}
+    peerDependencies:
+      '@floating-ui/dom': ^1.0.0
+      '@tiptap/core': 3.29.2
+      '@tiptap/pm': 3.29.2
+      vue: ^3.0.0
+
   '@tsconfig/node22@22.0.5':
     resolution: {integrity: sha512-hLf2ld+sYN/BtOJjHUWOk568dvjFQkHnLNa6zce25GIH+vxKfvTgm3qpaH6ToF5tu/NN0IH66s+Bb5wElHrLcw==}
 
@@ -589,6 +796,9 @@ packages:
   '@types/node@22.20.1':
     resolution: {integrity: sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@typescript-eslint/eslint-plugin@8.65.0':
     resolution: {integrity: sha512-IEgob78X12rHpUmtcwFsXhZdVGJtwTVP8FiCLZkR6GlYVrl2PcuB+KhCE5BlVC/eQpQnu8WXRtkHZuPar+gCRA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -956,6 +1166,9 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  dompurify@3.4.13:
+    resolution: {integrity: sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ==}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -1348,24 +1561,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
@@ -1383,6 +1600,9 @@ packages:
     resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
     engines: {node: '>= 12.0.0'}
 
+  linkifyjs@4.3.3:
+    resolution: {integrity: sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg==}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -1402,6 +1622,11 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  marked@17.0.6:
+    resolution: {integrity: sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -1484,6 +1709,9 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
+  orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -1565,6 +1793,45 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  prosemirror-changeset@2.4.1:
+    resolution: {integrity: sha512-96WBLhOaYhJ+kPhLg3uW359Tz6I/MfcrQfL4EGv4SrcqKEMC1gmoGrXHecPE8eOwTVCJ4IwgfzM8fFad25wNfw==}
+
+  prosemirror-commands@1.7.2:
+    resolution: {integrity: sha512-q6Q6szxqdu9Xd6EcdKsqXghu5nQdZTpB4Q9yd04WRc7/jt763e/rT60Owh0L1GYY+T46o5rD+9lEN36dZS43tw==}
+
+  prosemirror-dropcursor@1.8.3:
+    resolution: {integrity: sha512-FoYbsJR8gK+DGlqhNoE29Loa38eIZPzQRIb1VMaDNBoo4OLP6vVof/jR8qFY/6XvUd6Dhug8MDCHl2a/h8RTfQ==}
+
+  prosemirror-gapcursor@1.4.1:
+    resolution: {integrity: sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==}
+
+  prosemirror-history@1.5.0:
+    resolution: {integrity: sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==}
+
+  prosemirror-inputrules@1.5.1:
+    resolution: {integrity: sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==}
+
+  prosemirror-keymap@1.2.3:
+    resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==}
+
+  prosemirror-model@1.25.11:
+    resolution: {integrity: sha512-QWg9RhnpLlogAmp3p96uEFrE5txQpFynd4vhBAELkwgOCWQs/X0yCzB3/hrHqiPwf91RG5KyWq6553zs9JqIOQ==}
+
+  prosemirror-schema-list@1.5.1:
+    resolution: {integrity: sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==}
+
+  prosemirror-state@1.4.4:
+    resolution: {integrity: sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==}
+
+  prosemirror-tables@1.8.5:
+    resolution: {integrity: sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==}
+
+  prosemirror-transform@1.12.0:
+    resolution: {integrity: sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==}
+
+  prosemirror-view@1.42.2:
+    resolution: {integrity: sha512-Pdg0l5kXm8aLDquFAnQFTCITg0q44sLqBlHlpsVLD9segdOao8TOfQdAhCrCXyVgPSRr6UDDROOIWA3bIrN9YQ==}
+
   proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -1608,6 +1875,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+
   router@2.2.0:
     resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
     engines: {node: '>= 18'}
@@ -1908,6 +2178,9 @@ packages:
       typescript:
         optional: true
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -2088,6 +2361,17 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/utils@0.2.12': {}
+
   '@humanfs/core@0.19.2':
     dependencies:
       '@humanfs/types': 0.15.0
@@ -2285,6 +2569,182 @@ snapshots:
       tailwindcss: 4.3.3
       vite: 7.3.6(@types/node@22.20.1)(jiti@2.7.0)(lightningcss@1.32.0)
 
+  '@tiptap/core@3.29.2(@tiptap/pm@3.29.2)':
+    dependencies:
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-blockquote@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-bold@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-bubble-menu@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+    optional: true
+
+  '@tiptap/extension-bullet-list@3.29.2(@tiptap/extension-list@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/extension-list': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-code-block@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-code@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-document@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-dropcursor@3.29.2(@tiptap/extensions@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/extensions': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-floating-menu@3.29.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+    optional: true
+
+  '@tiptap/extension-gapcursor@3.29.2(@tiptap/extensions@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/extensions': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-hard-break@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-heading@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-horizontal-rule@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-italic@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-link@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+      linkifyjs: 4.3.3
+
+  '@tiptap/extension-list-item@3.29.2(@tiptap/extension-list@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/extension-list': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-list-keymap@3.29.2(@tiptap/extension-list@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/extension-list': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-list@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/extension-ordered-list@3.29.2(@tiptap/extension-list@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/extension-list': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-paragraph@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-placeholder@3.29.2(@tiptap/extensions@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/extensions': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-strike@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-text@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+
+  '@tiptap/extension-underline@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+
+  '@tiptap/extensions@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/markdown@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+      marked: 17.0.6
+
+  '@tiptap/pm@3.29.2':
+    dependencies:
+      prosemirror-changeset: 2.4.1
+      prosemirror-commands: 1.7.2
+      prosemirror-dropcursor: 1.8.3
+      prosemirror-gapcursor: 1.4.1
+      prosemirror-history: 1.5.0
+      prosemirror-inputrules: 1.5.1
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.11
+      prosemirror-schema-list: 1.5.1
+      prosemirror-state: 1.4.4
+      prosemirror-tables: 1.8.5
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.42.2
+
+  '@tiptap/starter-kit@3.29.2':
+    dependencies:
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/extension-blockquote': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+      '@tiptap/extension-bold': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))
+      '@tiptap/extension-bullet-list': 3.29.2(@tiptap/extension-list@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))
+      '@tiptap/extension-code': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))
+      '@tiptap/extension-code-block': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+      '@tiptap/extension-document': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))
+      '@tiptap/extension-dropcursor': 3.29.2(@tiptap/extensions@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))
+      '@tiptap/extension-gapcursor': 3.29.2(@tiptap/extensions@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))
+      '@tiptap/extension-hard-break': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))
+      '@tiptap/extension-heading': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))
+      '@tiptap/extension-horizontal-rule': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+      '@tiptap/extension-italic': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))
+      '@tiptap/extension-link': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+      '@tiptap/extension-list': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+      '@tiptap/extension-list-item': 3.29.2(@tiptap/extension-list@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))
+      '@tiptap/extension-list-keymap': 3.29.2(@tiptap/extension-list@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))
+      '@tiptap/extension-ordered-list': 3.29.2(@tiptap/extension-list@3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2))
+      '@tiptap/extension-paragraph': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))
+      '@tiptap/extension-strike': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))
+      '@tiptap/extension-text': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))
+      '@tiptap/extension-underline': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))
+      '@tiptap/extensions': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+
+  '@tiptap/vue-3@3.29.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)(vue@3.5.40(typescript@5.8.3))':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      '@tiptap/core': 3.29.2(@tiptap/pm@3.29.2)
+      '@tiptap/pm': 3.29.2
+      vue: 3.5.40(typescript@5.8.3)
+    optionalDependencies:
+      '@tiptap/extension-bubble-menu': 3.29.2(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+      '@tiptap/extension-floating-menu': 3.29.2(@floating-ui/dom@1.8.0)(@tiptap/core@3.29.2(@tiptap/pm@3.29.2))(@tiptap/pm@3.29.2)
+
   '@tsconfig/node22@22.0.5': {}
 
   '@types/chai@5.2.3':
@@ -2304,6 +2764,9 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@typescript-eslint/eslint-plugin@8.65.0(@typescript-eslint/parser@8.65.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.8.3))(eslint@9.39.5(jiti@2.7.0))(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -2740,6 +3203,10 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
+  dompurify@3.4.13:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -3183,6 +3650,8 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.32.0
       lightningcss-win32-x64-msvc: 1.32.0
 
+  linkifyjs@4.3.3: {}
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -3199,6 +3668,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  marked@17.0.6: {}
+
   math-intrinsics@1.1.0: {}
 
   media-typer@1.1.1: {}
@@ -3267,6 +3738,8 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
+  orderedmap@2.1.1: {}
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -3327,6 +3800,80 @@ snapshots:
 
   prettier@3.5.3: {}
 
+  prosemirror-changeset@2.4.1:
+    dependencies:
+      prosemirror-transform: 1.12.0
+
+  prosemirror-commands@1.7.2:
+    dependencies:
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-dropcursor@1.8.3:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.42.2
+
+  prosemirror-gapcursor@1.4.1:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.42.2
+
+  prosemirror-history@1.5.0:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.42.2
+      rope-sequence: 1.3.4
+
+  prosemirror-inputrules@1.5.1:
+    dependencies:
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-keymap@1.2.3:
+    dependencies:
+      prosemirror-state: 1.4.4
+      w3c-keyname: 2.2.8
+
+  prosemirror-model@1.25.11:
+    dependencies:
+      orderedmap: 2.1.1
+
+  prosemirror-schema-list@1.5.1:
+    dependencies:
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
+  prosemirror-state@1.4.4:
+    dependencies:
+      prosemirror-model: 1.25.11
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.42.2
+
+  prosemirror-tables@1.8.5:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+      prosemirror-view: 1.42.2
+
+  prosemirror-transform@1.12.0:
+    dependencies:
+      prosemirror-model: 1.25.11
+
+  prosemirror-view@1.42.2:
+    dependencies:
+      prosemirror-model: 1.25.11
+      prosemirror-state: 1.4.4
+      prosemirror-transform: 1.12.0
+
   proxy-addr@2.0.7:
     dependencies:
       forwarded: 0.2.0
@@ -3390,6 +3937,8 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.62.4
       fsevents: 2.3.3
 
+  rope-sequence@1.3.4: {}
+
   router@2.2.0:
     dependencies:
       debug: 4.4.3
@@ -3700,6 +4249,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
+  w3c-keyname@2.2.8: {}
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
diff --git a/frontend/src/components/MailMarkdownEditor.vue b/frontend/src/components/MailMarkdownEditor.vue
new file mode 100644
index 0000000..3e3cb33
--- /dev/null
+++ b/frontend/src/components/MailMarkdownEditor.vue
@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import Placeholder from '@tiptap/extension-placeholder'
+import { Markdown } from '@tiptap/markdown'
+import StarterKit from '@tiptap/starter-kit'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+import DOMPurify from 'dompurify'
+import {
+  Bold,
+  Italic,
+  List,
+  ListOrdered,
+  Quote,
+  Redo2,
+  Undo2,
+} from 'lucide-vue-next'
+import { onBeforeUnmount, watch } from 'vue'
+
+export type MailEditorLabels = {
+  bold: string
+  bulletList: string
+  italic: string
+  numberedList: string
+  quote: string
+  redo: string
+  undo: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    editable?: boolean
+    labels?: MailEditorLabels
+    modelValue: string
+    placeholder?: string
+  }>(),
+  {
+    editable: true,
+    labels: () => ({
+      bold: 'Bold',
+      bulletList: 'Bullet list',
+      italic: 'Italic',
+      numberedList: 'Numbered list',
+      quote: 'Quote',
+      redo: 'Redo',
+      undo: 'Undo',
+    }),
+    placeholder: '',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+function safeMarkdown(value: string): string {
+  return String(
+    DOMPurify.sanitize(value.replace(/\r\n?/g, '\n'), {
+      ALLOWED_ATTR: [],
+      ALLOWED_TAGS: [],
+      KEEP_CONTENT: true,
+    }),
+  )
+}
+
+const editor = useEditor({
+  content: safeMarkdown(props.modelValue),
+  contentType: 'markdown',
+  editable: props.editable,
+  extensions: [
+    StarterKit.configure({
+      codeBlock: false,
+      heading: { levels: [2, 3] },
+      horizontalRule: false,
+      link: {
+        autolink: true,
+        linkOnPaste: true,
+        openOnClick: false,
+        protocols: ['http', 'https'],
+      },
+      strike: false,
+      underline: false,
+    }),
+    Markdown.configure({ markedOptions: { breaks: true, gfm: true } }),
+    Placeholder.configure({ placeholder: props.placeholder }),
+  ],
+  injectCSS: false,
+  onUpdate: ({ editor: currentEditor }) => {
+    emit('update:modelValue', currentEditor.getMarkdown())
+  },
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!editor.value) return
+    const safeValue = safeMarkdown(value)
+    if (editor.value.getMarkdown() === safeValue) return
+    editor.value.commands.setContent(safeValue, {
+      contentType: 'markdown',
+      emitUpdate: false,
+    })
+  },
+)
+
+watch(
+  () => props.editable,
+  (value) => editor.value?.setEditable(value),
+)
+
+onBeforeUnmount(() => editor.value?.destroy())
+</script>
+
+<template>
+  <div class="mail-editor" :class="{ 'mail-editor--readonly': !editable }">
+    <div v-if="editable && editor" class="mail-editor__toolbar">
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('bold') }"
+        :aria-label="labels.bold"
+        :title="labels.bold"
+        @click="editor.chain().focus().toggleBold().run()"
+      >
+        <Bold :size="17" />
+      </button>
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('italic') }"
+        :aria-label="labels.italic"
+        :title="labels.italic"
+        @click="editor.chain().focus().toggleItalic().run()"
+      >
+        <Italic :size="17" />
+      </button>
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('bulletList') }"
+        :aria-label="labels.bulletList"
+        :title="labels.bulletList"
+        @click="editor.chain().focus().toggleBulletList().run()"
+      >
+        <List :size="17" />
+      </button>
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('orderedList') }"
+        :aria-label="labels.numberedList"
+        :title="labels.numberedList"
+        @click="editor.chain().focus().toggleOrderedList().run()"
+      >
+        <ListOrdered :size="17" />
+      </button>
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('blockquote') }"
+        :aria-label="labels.quote"
+        :title="labels.quote"
+        @click="editor.chain().focus().toggleBlockquote().run()"
+      >
+        <Quote :size="17" />
+      </button>
+      <span class="mail-editor__toolbar-spacer" />
+      <button
+        type="button"
+        :disabled="!editor.can().chain().focus().undo().run()"
+        :aria-label="labels.undo"
+        :title="labels.undo"
+        @click="editor.chain().focus().undo().run()"
+      >
+        <Undo2 :size="17" />
+      </button>
+      <button
+        type="button"
+        :disabled="!editor.can().chain().focus().redo().run()"
+        :aria-label="labels.redo"
+        :title="labels.redo"
+        @click="editor.chain().focus().redo().run()"
+      >
+        <Redo2 :size="17" />
+      </button>
+    </div>
+    <EditorContent v-if="editor" :editor="editor" />
+  </div>
+</template>
+
+<style scoped>
+.mail-editor {
+  min-height: 210px;
+  color: #f5f5f7;
+}
+
+.mail-editor__toolbar {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  min-height: 43px;
+  padding: 5px 7px;
+  border-bottom: 1px solid #ffffff14;
+  background: #1c1c1ee8;
+  backdrop-filter: blur(18px) saturate(160%);
+  -webkit-backdrop-filter: blur(18px) saturate(160%);
+}
+
+.mail-editor__toolbar button {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: #f5f5f7;
+  cursor: pointer;
+}
+
+.mail-editor__toolbar button.is-active {
+  background: #0a84ff;
+  color: #fff;
+}
+
+.mail-editor__toolbar button:disabled {
+  opacity: 0.28;
+  cursor: default;
+}
+
+.mail-editor__toolbar-spacer {
+  flex: 1;
+}
+
+:deep(.tiptap) {
+  min-height: 210px;
+  padding: 15px 16px 92px;
+  outline: none;
+  font-size: 15px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.mail-editor--readonly {
+  min-height: 0;
+}
+
+.mail-editor--readonly :deep(.tiptap) {
+  min-height: 0;
+  padding: 0;
+  user-select: text;
+}
+
+:deep(.tiptap p) {
+  margin: 0 0 0.8em;
+}
+
+:deep(.tiptap p:last-child) {
+  margin-bottom: 0;
+}
+
+:deep(.tiptap h2),
+:deep(.tiptap h3) {
+  margin: 1em 0 0.4em;
+  line-height: 1.2;
+}
+
+:deep(.tiptap ul),
+:deep(.tiptap ol) {
+  margin: 0.55em 0 0.85em;
+  padding-left: 1.45em;
+}
+
+:deep(.tiptap blockquote) {
+  margin: 0.85em 0;
+  padding-left: 0.9em;
+  border-left: 3px solid #5e5e63;
+  color: #a1a1a6;
+}
+
+:deep(.tiptap a) {
+  color: #0a84ff;
+  text-decoration: none;
+}
+
+:deep(.tiptap p.is-editor-empty:first-child::before) {
+  float: left;
+  height: 0;
+  color: #8e8e93;
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+</style>
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 0d0f8b5..0ea66e3 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -281,6 +281,9 @@ const defaultLocales: LocaleTree = {
       email: 'Email',
       password: 'Password',
       confirmPassword: 'Confirm password',
+      accountEyebrow: 'Your iFruit account',
+      emailPlaceholder: 'name@ifruit.com',
+      passwordPlaceholder: 'Enter password',
       passwordWarning:
         'Use an in-character password. Do not reuse a real-world password.',
       mailboxes: 'Mailboxes',
@@ -291,9 +294,14 @@ const defaultLocales: LocaleTree = {
       compose: 'New Message',
       recipients: 'To',
       recipientHint: 'Separate up to 10 addresses with commas.',
+      recipientPlaceholder: 'name@ifruit.com',
       subject: 'Subject',
+      subjectPlaceholder: "What's this about?",
       body: 'Message',
+      messagePlaceholder: 'Write a message...',
       search: 'Search mail',
+      messages: 'messages',
+      noMessageContent: 'No message content',
       noMail: 'No Mail',
       noMailBody: 'Messages in this mailbox will appear here.',
       noResults: 'No Results',
@@ -306,7 +314,16 @@ const defaultLocales: LocaleTree = {
       reply: 'Reply',
       replyAll: 'Reply All',
       forward: 'Forward',
+      formatBold: 'Bold',
+      formatItalic: 'Italic',
+      formatBulletList: 'Bullet list',
+      formatNumberedList: 'Numbered list',
+      formatQuote: 'Quote',
+      undo: 'Undo',
+      redo: 'Redo',
+      markRead: 'Read',
       markUnread: 'Mark as Unread',
+      delete: 'Delete',
       moveToTrash: 'Move to Trash',
       restore: 'Restore',
       deleteForever: 'Delete Forever',
diff --git a/frontend/src/utils/mail.test.ts b/frontend/src/utils/mail.test.ts
index 33745bf..11acb1e 100644
--- a/frontend/src/utils/mail.test.ts
+++ b/frontend/src/utils/mail.test.ts
@@ -4,6 +4,9 @@ import type { MailMessage } from '@/types/mail'
 import {
   buildForwardDraft,
   buildReplyDraft,
+  filterMailAddressInput,
+  filterMailRecipientInput,
+  mailPlainText,
   normalizeMailAddress,
   parseMailRecipients,
 } from '@/utils/mail'
@@ -22,6 +25,23 @@ const message: MailMessage = {
 }
 
 describe('mail addresses', () => {
+  it('filters account fields to the supported email character set', () => {
+    expect(filterMailAddressInput('Al+ex! ä@ifruit.com<script>')).toBe(
+      'Alex@ifruit.comscript',
+    )
+    expect(filterMailAddressInput('sky.user_name-2@ifruit.com')).toBe(
+      'sky.user_name-2@ifruit.com',
+    )
+  })
+
+  it('keeps separators but filters recipient-list special characters', () => {
+    expect(
+      filterMailRecipientInput(
+        'alex@ifruit.com, jamie+tag@ifruit.com; müller@ifruit.com',
+      ),
+    ).toBe('alex@ifruit.com, jamietag@ifruit.com; mller@ifruit.com')
+  })
+
   it('normalizes local parts and the iFruit domain', () => {
     expect(normalizeMailAddress(' Sky.User ')).toBe('sky.user@ifruit.com')
     expect(normalizeMailAddress('sky.user@ifruit.com')).toBe(
@@ -48,12 +68,24 @@ describe('mail compose helpers', () => {
     expect(
       buildReplyDraft(message, 'alex@ifruit.com', true).recipients,
     ).toEqual(['morgan@ifruit.com', 'jamie@ifruit.com'])
+    expect(buildReplyDraft(message, 'alex@ifruit.com').body).toContain(
+      '> Meet at Legion Square.',
+    )
   })
 
   it('builds forward content and avoids duplicate subject prefixes', () => {
     const forwarded = buildForwardDraft(message)
     expect(forwarded.recipients).toEqual([])
     expect(forwarded.subject).toBe('Fwd: Plans')
-    expect(forwarded.body).toContain('From: morgan@ifruit.com')
+    expect(forwarded.body).toContain('**From:** morgan@ifruit.com')
+  })
+
+  it('turns formatted markdown into a compact mailbox preview', () => {
+    expect(
+      mailPlainText('## Update\n\n**Ready** [details](https://ifruit.com).'),
+    ).toBe('Update Ready details.')
+    expect(mailPlainText('<script>alert(1)</script> Hello')).toBe(
+      'alert(1) Hello',
+    )
   })
 })
diff --git a/frontend/src/utils/mail.ts b/frontend/src/utils/mail.ts
index fb044de..c68d4e9 100644
--- a/frontend/src/utils/mail.ts
+++ b/frontend/src/utils/mail.ts
@@ -2,6 +2,21 @@ import type { MailComposeDraft, MailMessage } from '@/types/mail'
 
 export const MAIL_DOMAIN = 'ifruit.com'
 export const MAIL_MAX_RECIPIENTS = 10
+export const MAIL_ADDRESS_INPUT_MAX_LENGTH = 64
+export const MAIL_RECIPIENT_INPUT_MAX_LENGTH =
+  MAIL_MAX_RECIPIENTS * (MAIL_ADDRESS_INPUT_MAX_LENGTH + 2)
+
+export function filterMailAddressInput(value: string): string {
+  return value
+    .replace(/[^a-z0-9@._-]/gi, '')
+    .slice(0, MAIL_ADDRESS_INPUT_MAX_LENGTH)
+}
+
+export function filterMailRecipientInput(value: string): string {
+  return value
+    .replace(/[^a-z0-9@._,; -]/gi, '')
+    .slice(0, MAIL_RECIPIENT_INPUT_MAX_LENGTH)
+}
 
 export function normalizeMailAddress(value: string): string | null {
   const normalized = value.trim().toLocaleLowerCase('en-US')
@@ -43,6 +58,25 @@ export function parseMailRecipients(value: string): string[] | null {
   return recipients
 }
 
+export function mailPlainText(value: string): string {
+  return value
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+    .replace(/^\s{0,3}(?:#{1,6}|>|[-+*]|\d+\.)\s+/gm, '')
+    .replace(/[*_~`]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function quoteMarkdown(value: string): string {
+  return value
+    .trim()
+    .split('\n')
+    .map((line) => `> ${line}`)
+    .join('\n')
+}
+
 function prefixedSubject(prefix: 'Re' | 'Fwd', subject: string): string {
   const clean = subject.trim()
   if (new RegExp(`^${prefix}:`, 'i').test(clean)) return clean
@@ -62,7 +96,7 @@ export function buildReplyDraft(
   )
 
   return {
-    body: `\n--- ${message.sender} ---\n${message.body}`,
+    body: `\n\n> **${message.sender}**\n>\n${quoteMarkdown(message.body)}`,
     recipients,
     subject: prefixedSubject('Re', message.subject),
   }
@@ -70,7 +104,7 @@ export function buildReplyDraft(
 
 export function buildForwardDraft(message: MailMessage): MailComposeDraft {
   return {
-    body: `\n--- Forwarded message ---\nFrom: ${message.sender}\nTo: ${message.recipients.join(', ')}\n\n${message.body}`,
+    body: `\n\n---\n\n**Forwarded message**\n\n**From:** ${message.sender}\n\n**To:** ${message.recipients.join(', ')}\n\n${message.body}`,
     recipients: [],
     subject: prefixedSubject('Fwd', message.subject),
   }
diff --git a/frontend/src/utils/mailSwipe.test.ts b/frontend/src/utils/mailSwipe.test.ts
new file mode 100644
index 0000000..76172be
--- /dev/null
+++ b/frontend/src/utils/mailSwipe.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  clampMailSwipeOffset,
+  MAIL_SWIPE_ACTION_WIDTH,
+  resolveMailSwipeAction,
+  resolveMailSwipeAxis,
+} from '@/utils/mailSwipe'
+
+describe('mail swipe gestures', () => {
+  it('waits for a clear horizontal or vertical direction', () => {
+    expect(resolveMailSwipeAxis(5, 2)).toBeNull()
+    expect(resolveMailSwipeAxis(24, 5)).toBe('horizontal')
+    expect(resolveMailSwipeAxis(10, 18)).toBe('vertical')
+  })
+
+  it('limits horizontal movement and blocks unavailable directions', () => {
+    expect(clampMailSwipeOffset(70, true, true)).toBe(70)
+    expect(clampMailSwipeOffset(70, false, true)).toBe(0)
+    expect(clampMailSwipeOffset(-70, true, false)).toBe(0)
+    expect(clampMailSwipeOffset(-240, true, true)).toBeGreaterThan(
+      -MAIL_SWIPE_ACTION_WIDTH - 19,
+    )
+  })
+
+  it('only commits an action after crossing its threshold', () => {
+    expect(resolveMailSwipeAction(63, true, true)).toBeNull()
+    expect(resolveMailSwipeAction(64, true, true)).toBe('read')
+    expect(resolveMailSwipeAction(-64, true, true)).toBe('delete')
+    expect(resolveMailSwipeAction(80, false, true)).toBeNull()
+  })
+})
diff --git a/frontend/src/utils/mailSwipe.ts b/frontend/src/utils/mailSwipe.ts
new file mode 100644
index 0000000..789c0c0
--- /dev/null
+++ b/frontend/src/utils/mailSwipe.ts
@@ -0,0 +1,48 @@
+export type MailSwipeAction = 'delete' | 'read'
+export type MailSwipeAxis = 'horizontal' | 'vertical'
+
+export const MAIL_SWIPE_ACTION_WIDTH = 84
+export const MAIL_SWIPE_AXIS_LOCK = 8
+export const MAIL_SWIPE_TRIGGER = 64
+
+export function resolveMailSwipeAxis(
+  deltaX: number,
+  deltaY: number,
+): MailSwipeAxis | null {
+  const horizontalDistance = Math.abs(deltaX)
+  const verticalDistance = Math.abs(deltaY)
+  if (Math.max(horizontalDistance, verticalDistance) < MAIL_SWIPE_AXIS_LOCK) {
+    return null
+  }
+
+  return horizontalDistance > verticalDistance * 1.15
+    ? 'horizontal'
+    : 'vertical'
+}
+
+export function clampMailSwipeOffset(
+  deltaX: number,
+  canRead: boolean,
+  canDelete: boolean,
+): number {
+  if ((deltaX > 0 && !canRead) || (deltaX < 0 && !canDelete)) return 0
+
+  const direction = Math.sign(deltaX)
+  const distance = Math.abs(deltaX)
+  const resistedDistance =
+    distance <= MAIL_SWIPE_ACTION_WIDTH
+      ? distance
+      : MAIL_SWIPE_ACTION_WIDTH + (distance - MAIL_SWIPE_ACTION_WIDTH) * 0.18
+
+  return direction * Math.min(resistedDistance, MAIL_SWIPE_ACTION_WIDTH + 18)
+}
+
+export function resolveMailSwipeAction(
+  offset: number,
+  canRead: boolean,
+  canDelete: boolean,
+): MailSwipeAction | null {
+  if (canRead && offset >= MAIL_SWIPE_TRIGGER) return 'read'
+  if (canDelete && offset <= -MAIL_SWIPE_TRIGGER) return 'delete'
+  return null
+}
diff --git a/frontend/src/views/apps/MailApp.vue b/frontend/src/views/apps/MailApp.vue
index ac825d9..e716764 100644
--- a/frontend/src/views/apps/MailApp.vue
+++ b/frontend/src/views/apps/MailApp.vue
@@ -1,35 +1,30 @@
 <script setup lang="ts">
+import { kDialog, kDialogButton, kPage, kPreloader, kToast } from 'konsta/vue'
 import {
-  kBadge,
-  kBlock,
-  kBlockTitle,
-  kButton,
-  kDialog,
-  kDialogButton,
-  kLink,
-  kList,
-  kListButton,
-  kListInput,
-  kListItem,
-  kNavbar,
-  kNavbarBackLink,
-  kPage,
-  kPreloader,
-  kSearchbar,
-  kToast,
-} from 'konsta/vue'
-import {
+  ArrowLeft,
+  ChevronRight,
   FileText,
+  Forward,
   Inbox,
-  KeyRound,
   Mail,
+  MailCheck,
+  MailOpen,
+  Reply,
+  ReplyAll,
+  RotateCcw,
+  Search,
   Send,
+  ShieldCheck,
   SquarePen,
   Trash2,
+  X,
 } from 'lucide-vue-next'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import { IFRUIT_AUTH_INPUT_COLORS } from '@/config/ifruit'
+import mailIcon from '@/assets/img/app-icons/mail.webp'
+import MailMarkdownEditor, {
+  type MailEditorLabels,
+} from '@/components/MailMarkdownEditor.vue'
 import { useMailStore } from '@/stores/mail'
 import { usePhoneStore } from '@/stores/phone'
 import type {
@@ -42,8 +37,20 @@ import type {
 import {
   buildForwardDraft,
   buildReplyDraft,
+  filterMailAddressInput,
+  filterMailRecipientInput,
+  MAIL_ADDRESS_INPUT_MAX_LENGTH,
+  MAIL_RECIPIENT_INPUT_MAX_LENGTH,
+  mailPlainText,
   parseMailRecipients,
 } from '@/utils/mail'
+import {
+  clampMailSwipeOffset,
+  resolveMailSwipeAction,
+  resolveMailSwipeAxis,
+  type MailSwipeAction,
+  type MailSwipeAxis,
+} from '@/utils/mailSwipe'
 
 type AuthMode = 'login' | 'register'
 type MailScreen = 'folders' | 'list' | 'message' | 'compose'
@@ -53,6 +60,17 @@ type MailEvent = {
   }
   type?: 'mail:changed'
 }
+type MailSwipeState = {
+  axis: MailSwipeAxis | null
+  committing: MailSwipeAction | null
+  itemKey: string
+  offset: number
+  pointerId: number
+  startX: number
+  startY: number
+}
+
+const MAIL_SWIPE_COMMIT_ANIMATION_MS = 180
 
 const phone = usePhoneStore()
 const mail = useMailStore()
@@ -72,12 +90,31 @@ const composeTouched = ref(false)
 const toastOpened = ref(false)
 const toastText = ref('')
 const emptyTrashOpened = ref(false)
+const swipeState = ref<MailSwipeState | null>(null)
+const ignoredRowClick = ref<string | null>(null)
 let draftTimer: ReturnType<typeof setTimeout> | undefined
+let ignoredRowClickTimer: ReturnType<typeof setTimeout> | undefined
 let searchTimer: ReturnType<typeof setTimeout> | undefined
 let toastTimer: ReturnType<typeof setTimeout> | undefined
 
 const authenticated = computed(() => Boolean(mail.accountEmail))
 const folderTitle = computed(() => phone.t(`Apps.mail.${mail.folder}`))
+const canSend = computed(
+  () =>
+    Boolean(parseMailRecipients(recipientText.value)) &&
+    Boolean(subject.value.trim() || mailPlainText(body.value)) &&
+    body.value.length <= 20000 &&
+    !submitting.value,
+)
+const editorLabels = computed<MailEditorLabels>(() => ({
+  bold: phone.t('Apps.mail.formatBold'),
+  bulletList: phone.t('Apps.mail.formatBulletList'),
+  italic: phone.t('Apps.mail.formatItalic'),
+  numberedList: phone.t('Apps.mail.formatNumberedList'),
+  quote: phone.t('Apps.mail.formatQuote'),
+  redo: phone.t('Apps.mail.redo'),
+  undo: phone.t('Apps.mail.undo'),
+}))
 
 function showToast(message: string): void {
   if (toastTimer) clearTimeout(toastTimer)
@@ -111,9 +148,40 @@ function eventValue(event: Event): string {
   return (event.target as HTMLInputElement).value
 }
 
-function formatDate(value: string): string {
+function filteredEventValue(
+  event: Event,
+  filter: (value: string) => string,
+): string {
+  const input = event.target as HTMLInputElement
+  const original = input.value
+  const selectionStart = input.selectionStart ?? original.length
+  const filtered = filter(original)
+
+  if (filtered !== original) {
+    const nextSelection = filter(original.slice(0, selectionStart)).length
+    input.value = filtered
+    input.setSelectionRange(nextSelection, nextSelection)
+  }
+
+  return filtered
+}
+
+function updateAuthEmail(event: Event): void {
+  authEmail.value = filteredEventValue(event, filterMailAddressInput)
+}
+
+function updateRecipientText(event: Event): void {
+  recipientText.value = filteredEventValue(event, filterMailRecipientInput)
+}
+
+function parseDate(value: string): Date | null {
   const date = new Date(value.replace(' ', 'T'))
-  if (Number.isNaN(date.getTime())) return value
+  return Number.isNaN(date.getTime()) ? null : date
+}
+
+function formatDate(value: string): string {
+  const date = parseDate(value)
+  if (!date) return value
   return new Intl.DateTimeFormat(phone.lang, {
     day: 'numeric',
     hour: '2-digit',
@@ -122,6 +190,22 @@ function formatDate(value: string): string {
   }).format(date)
 }
 
+function formatListDate(value: string): string {
+  const date = parseDate(value)
+  if (!date) return value
+  const today = new Date()
+  if (date.toDateString() === today.toDateString()) {
+    return new Intl.DateTimeFormat(phone.lang, {
+      hour: '2-digit',
+      minute: '2-digit',
+    }).format(date)
+  }
+  return new Intl.DateTimeFormat(phone.lang, {
+    day: 'numeric',
+    month: 'short',
+  }).format(date)
+}
+
 function itemTitle(item: MailListItem): string {
   if (mail.folder === 'drafts') {
     return item.recipients.join(', ') || phone.t('Apps.mail.compose')
@@ -130,9 +214,192 @@ function itemTitle(item: MailListItem): string {
   return item.sender ?? ''
 }
 
-function itemSubtitle(item: MailListItem): string {
-  const title = item.subject || phone.t('Apps.mail.untitled')
-  return `${formatDate(item.created_at)} · ${title} · ${item.preview || ''}`
+function itemPreview(item: MailListItem): string {
+  return mailPlainText(item.preview) || phone.t('Apps.mail.noMessageContent')
+}
+
+function mailItemKey(item: MailListItem): string {
+  return `${mail.folder}:${item.id}`
+}
+
+function canSwipeRead(item: MailListItem): boolean {
+  return mail.folder === 'inbox' && !item.is_read
+}
+
+function mailRowStyle(
+  item: MailListItem,
+  index: number,
+): Record<string, string> {
+  const state = swipeState.value
+  const offset = state?.itemKey === mailItemKey(item) ? state.offset : 0
+  return {
+    '--mail-row-index': String(Math.min(index, 8)),
+    '--mail-row-offset': `${offset}px`,
+    '--mail-swipe-progress': String(Math.min(Math.abs(offset) / 64, 1)),
+  }
+}
+
+function mailRowClasses(item: MailListItem): Record<string, boolean> {
+  const state = swipeState.value
+  const active = state?.itemKey === mailItemKey(item)
+  return {
+    'is-committing-delete': active && state.committing === 'delete',
+    'is-committing-read': active && state.committing === 'read',
+    'is-dragging': active && state.axis === 'horizontal' && !state.committing,
+  }
+}
+
+function beginMailSwipe(item: MailListItem, event: PointerEvent): void {
+  if (!event.isPrimary || event.button !== 0 || swipeState.value?.committing) {
+    return
+  }
+
+  swipeState.value = {
+    axis: null,
+    committing: null,
+    itemKey: mailItemKey(item),
+    offset: 0,
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    startY: event.clientY,
+  }
+}
+
+function moveMailSwipe(item: MailListItem, event: PointerEvent): void {
+  const state = swipeState.value
+  if (
+    !state ||
+    state.committing ||
+    state.pointerId !== event.pointerId ||
+    state.itemKey !== mailItemKey(item)
+  ) {
+    return
+  }
+
+  const deltaX = event.clientX - state.startX
+  const deltaY = event.clientY - state.startY
+  if (!state.axis) {
+    state.axis = resolveMailSwipeAxis(deltaX, deltaY)
+    if (state.axis === 'horizontal') {
+      const target = event.currentTarget as HTMLElement
+      target.setPointerCapture(event.pointerId)
+    }
+  }
+  if (state.axis !== 'horizontal') return
+
+  if (event.cancelable) event.preventDefault()
+  state.offset = clampMailSwipeOffset(deltaX, canSwipeRead(item), true)
+}
+
+function suppressNextRowClick(itemKey: string): void {
+  if (ignoredRowClickTimer) clearTimeout(ignoredRowClickTimer)
+  ignoredRowClick.value = itemKey
+  ignoredRowClickTimer = setTimeout(() => {
+    if (ignoredRowClick.value === itemKey) ignoredRowClick.value = null
+  }, 300)
+}
+
+async function executeSwipeAction(
+  item: MailListItem,
+  action: MailSwipeAction,
+): Promise<boolean> {
+  if (action === 'read') {
+    return mail.mutateEntry('mail:set-read', Number(item.id), { isRead: true })
+  }
+
+  if (mail.folder === 'drafts') {
+    const deleted = await mail.deleteDraft(String(item.id))
+    if (deleted) await mail.loadFolder('drafts', mail.search)
+    return deleted
+  }
+
+  return mail.mutateEntry(
+    mail.folder === 'trash' ? 'mail:delete-forever' : 'mail:trash',
+    Number(item.id),
+  )
+}
+
+async function commitMailSwipe(
+  item: MailListItem,
+  action: MailSwipeAction,
+): Promise<void> {
+  const state = swipeState.value
+  if (!state || state.itemKey !== mailItemKey(item)) return
+
+  state.committing = action
+  await new Promise<void>((resolve) => {
+    setTimeout(resolve, MAIL_SWIPE_COMMIT_ANIMATION_MS)
+  })
+  const success = await executeSwipeAction(item, action)
+  if (!success) showToast(errorText())
+  if (swipeState.value?.itemKey === state.itemKey) swipeState.value = null
+}
+
+function endMailSwipe(item: MailListItem, event: PointerEvent): void {
+  const state = swipeState.value
+  if (
+    !state ||
+    state.committing ||
+    state.pointerId !== event.pointerId ||
+    state.itemKey !== mailItemKey(item)
+  ) {
+    return
+  }
+
+  const target = event.currentTarget as HTMLElement
+  if (target.hasPointerCapture(event.pointerId)) {
+    target.releasePointerCapture(event.pointerId)
+  }
+
+  if (state.axis === 'horizontal') {
+    suppressNextRowClick(state.itemKey)
+  }
+
+  const action = resolveMailSwipeAction(state.offset, canSwipeRead(item), true)
+  if (action) {
+    void commitMailSwipe(item, action)
+    return
+  }
+
+  swipeState.value = null
+}
+
+function cancelMailSwipe(item: MailListItem, event: PointerEvent): void {
+  const state = swipeState.value
+  if (
+    state?.pointerId === event.pointerId &&
+    state.itemKey === mailItemKey(item) &&
+    !state.committing
+  ) {
+    swipeState.value = null
+  }
+}
+
+function handleMailRowClick(item: MailListItem): void {
+  const itemKey = mailItemKey(item)
+  if (ignoredRowClick.value === itemKey) {
+    ignoredRowClick.value = null
+    return
+  }
+  void openItem(item)
+}
+
+function senderInitials(value: string): string {
+  const localPart = value.split('@')[0] ?? value
+  const parts = localPart.split(/[._-]+/).filter(Boolean)
+  const initials = parts
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? '')
+    .join('')
+  return initials || 'M'
+}
+
+function senderStyle(value: string): Record<string, string> {
+  let hash = 0
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash * 31 + value.charCodeAt(index)) | 0
+  }
+  return { '--mail-avatar-hue': String(Math.abs(hash) % 360) }
 }
 
 function folderCount(folder: MailFolder): number {
@@ -216,7 +483,7 @@ async function saveDraftNow(): Promise<void> {
   if (
     !recipientText.value.trim() &&
     !subject.value.trim() &&
-    !body.value.trim()
+    !mailPlainText(body.value)
   ) {
     return
   }
@@ -258,7 +525,7 @@ async function deleteCurrentDraft(): Promise<void> {
 
 async function sendMessage(): Promise<void> {
   const recipients = parseMailRecipients(recipientText.value)
-  if (!recipients) {
+  if (!recipients || !canSend.value) {
     showToast(errorText('invalid_message'))
     return
   }
@@ -307,9 +574,8 @@ async function mutateSelected(
 }
 
 function updateSearch(event: Event): void {
-  const value = (event.target as HTMLInputElement).value
+  const value = eventValue(event)
   if (searchTimer) clearTimeout(searchTimer)
-  if (toastTimer) clearTimeout(toastTimer)
   searchTimer = setTimeout(() => {
     void mail.loadFolder(mail.folder, value)
   }, 300)
@@ -344,354 +610,524 @@ onMounted(() => window.addEventListener('message', onMailEvent))
 onBeforeUnmount(() => {
   window.removeEventListener('message', onMailEvent)
   if (draftTimer) clearTimeout(draftTimer)
+  if (ignoredRowClickTimer) clearTimeout(ignoredRowClickTimer)
   if (searchTimer) clearTimeout(searchTimer)
-  if (screen.value === 'compose') {
-    void saveDraftNow()
-  }
+  if (screen.value === 'compose') void saveDraftNow()
 })
 </script>
 
 <template>
   <k-page
     v-if="!authenticated"
-    class="!pt-[44px] !pb-[25px]"
+    class="mail-page mail-page--auth"
     :aria-label="phone.t('Apps.mail.loginTitle')"
   >
-    <k-navbar large transparent :title="phone.t('Apps.mail.name')">
-      <template #right>
-        <k-link
-          component="button"
-          @click="authMode = authMode === 'login' ? 'register' : 'login'"
-        >
+    <div class="mail-auth">
+      <header class="mail-auth__hero">
+        <img :src="mailIcon" alt="" class="mail-auth__icon" />
+        <span>{{ phone.t('Apps.mail.accountEyebrow') }}</span>
+        <h1>{{ phone.t('Apps.mail.loginTitle') }}</h1>
+        <p>
           {{
             phone.t(
               authMode === 'login'
-                ? 'Apps.mail.registerLink'
-                : 'Apps.mail.login',
+                ? 'Apps.mail.loginBody'
+                : 'Apps.mail.registerBody',
             )
           }}
-        </k-link>
-      </template>
-    </k-navbar>
-    <k-block-title>
-      {{
-        phone.t(
-          authMode === 'login'
-            ? 'Apps.mail.loginBody'
-            : 'Apps.mail.passwordWarning',
-        )
-      }}
-    </k-block-title>
-    <k-list class="bg-black">
-      <k-list-input
-        class="relative"
-        :colors="IFRUIT_AUTH_INPUT_COLORS"
-        :value="authEmail"
-        :label="
-          phone.t(
-            authMode === 'login' ? 'Apps.mail.email' : 'Apps.mail.localPart',
-          )
-        "
-        outline
-        floating-label
-        :input-class="authMode === 'register' ? 'pr-20' : undefined"
-        autocomplete="username"
-        autocapitalize="none"
-        spellcheck="false"
-        :clear-button="authMode === 'login'"
-        @input="authEmail = eventValue($event)"
-        @clear="authEmail = ''"
-      >
-        <span
-          v-if="authMode === 'register'"
-          class="pointer-events-none absolute right-8 top-1/2 -translate-y-1/2 text-sm opacity-50"
+        </p>
+      </header>
+
+      <div class="mail-auth__segment" role="tablist">
+        <button
+          type="button"
+          role="tab"
+          :aria-selected="authMode === 'login'"
+          :class="{ 'is-active': authMode === 'login' }"
+          @click="authMode = 'login'"
         >
-          @ifruit.com
-        </span>
-      </k-list-input>
-      <k-list-input
-        type="password"
-        :colors="IFRUIT_AUTH_INPUT_COLORS"
-        :value="authPassword"
-        :label="phone.t('Apps.mail.password')"
-        outline
-        floating-label
-        autocomplete="current-password"
-        @input="authPassword = eventValue($event)"
-      >
-        <template #media><KeyRound :size="20" /></template>
-      </k-list-input>
-      <k-list-input
-        v-if="authMode === 'register'"
-        type="password"
-        :colors="IFRUIT_AUTH_INPUT_COLORS"
-        :value="authConfirm"
-        :label="phone.t('Apps.mail.confirmPassword')"
-        outline
-        floating-label
-        autocomplete="new-password"
-        @input="authConfirm = eventValue($event)"
-      >
-        <template #media><KeyRound :size="20" /></template>
-      </k-list-input>
-    </k-list>
-    <k-block>
-      <k-button large rounded :disabled="submitting" @click="submitAuth">
-        <k-preloader v-if="submitting" />
-        <template v-else>
-          {{
+          {{ phone.t('Apps.mail.login') }}
+        </button>
+        <button
+          type="button"
+          role="tab"
+          :aria-selected="authMode === 'register'"
+          :class="{ 'is-active': authMode === 'register' }"
+          @click="authMode = 'register'"
+        >
+          {{ phone.t('Apps.mail.registerLink') }}
+        </button>
+      </div>
+
+      <form class="mail-auth__form" @submit.prevent="submitAuth">
+        <label class="mail-auth__field">
+          <span>{{
             phone.t(
-              authMode === 'login' ? 'Apps.mail.login' : 'Apps.mail.register',
+              authMode === 'login' ? 'Apps.mail.email' : 'Apps.mail.localPart',
             )
-          }}
-        </template>
-      </k-button>
-    </k-block>
+          }}</span>
+          <div>
+            <Mail :size="18" />
+            <input
+              :value="authEmail"
+              autocomplete="username"
+              autocapitalize="none"
+              autocorrect="off"
+              inputmode="email"
+              :maxlength="MAIL_ADDRESS_INPUT_MAX_LENGTH"
+              pattern="[A-Za-z0-9@._-]*"
+              spellcheck="false"
+              :placeholder="phone.t('Apps.mail.emailPlaceholder')"
+              @input="updateAuthEmail"
+            />
+            <small v-if="authMode === 'register'">@ifruit.com</small>
+          </div>
+        </label>
+        <label class="mail-auth__field">
+          <span>{{ phone.t('Apps.mail.password') }}</span>
+          <div>
+            <ShieldCheck :size="18" />
+            <input
+              type="password"
+              :value="authPassword"
+              :autocomplete="
+                authMode === 'login' ? 'current-password' : 'new-password'
+              "
+              :placeholder="phone.t('Apps.mail.passwordPlaceholder')"
+              @input="authPassword = eventValue($event)"
+            />
+          </div>
+        </label>
+        <label v-if="authMode === 'register'" class="mail-auth__field">
+          <span>{{ phone.t('Apps.mail.confirmPassword') }}</span>
+          <div>
+            <ShieldCheck :size="18" />
+            <input
+              type="password"
+              :value="authConfirm"
+              autocomplete="new-password"
+              :placeholder="phone.t('Apps.mail.passwordPlaceholder')"
+              @input="authConfirm = eventValue($event)"
+            />
+          </div>
+        </label>
+
+        <button class="mail-auth__submit" type="submit" :disabled="submitting">
+          <k-preloader v-if="submitting" />
+          <template v-else>
+            {{
+              phone.t(
+                authMode === 'login' ? 'Apps.mail.login' : 'Apps.mail.register',
+              )
+            }}
+          </template>
+        </button>
+        <p v-if="authMode === 'register'" class="mail-auth__warning">
+          <ShieldCheck :size="14" />
+          {{ phone.t('Apps.mail.passwordWarning') }}
+        </p>
+      </form>
+    </div>
   </k-page>
 
   <k-page
     v-else-if="screen === 'folders'"
-    class="!pt-[44px] !pb-[25px]"
+    class="mail-page"
     :aria-label="phone.t('Apps.mail.mailboxes')"
   >
-    <k-navbar large transparent :title="phone.t('Apps.mail.mailboxes')">
-      <template #left>
-        <k-link component="button" @click="signOut">
+    <div class="mail-screen">
+      <header class="mail-header mail-header--large">
+        <span aria-hidden="true" />
+        <button class="mail-header__text" type="button" @click="signOut">
           {{ phone.t('Apps.mail.logout') }}
-        </k-link>
-      </template>
-      <template #right>
-        <k-link
-          component="button"
-          icon-only
-          :aria-label="phone.t('Apps.mail.compose')"
-          @click="beginCompose()"
-        >
-          <SquarePen :size="21" />
-        </k-link>
-      </template>
-    </k-navbar>
-    <k-block-title>{{ mail.accountEmail }}</k-block-title>
-    <k-list strong inset>
-      <k-list-item
-        link
-        :title="phone.t('Apps.mail.inbox')"
-        @click="openFolder('inbox')"
+        </button>
+        <div class="mail-header__title">
+          <small>{{ mail.accountEmail }}</small>
+          <h1>{{ phone.t('Apps.mail.mailboxes') }}</h1>
+        </div>
+      </header>
+
+      <main class="mail-folders">
+        <div class="mail-folders__card">
+          <button
+            class="mail-folder-row"
+            type="button"
+            @click="openFolder('inbox')"
+          >
+            <span class="mail-folder-row__icon"><Inbox :size="22" /></span>
+            <strong>{{ phone.t('Apps.mail.inbox') }}</strong>
+            <span>{{ mail.counts.unread || '' }}</span>
+            <ChevronRight :size="19" />
+          </button>
+          <button
+            class="mail-folder-row"
+            type="button"
+            @click="openFolder('sent')"
+          >
+            <span class="mail-folder-row__icon"><Send :size="21" /></span>
+            <strong>{{ phone.t('Apps.mail.sent') }}</strong>
+            <span>{{ folderCount('sent') }}</span>
+            <ChevronRight :size="19" />
+          </button>
+          <button
+            class="mail-folder-row"
+            type="button"
+            @click="openFolder('drafts')"
+          >
+            <span class="mail-folder-row__icon"><FileText :size="21" /></span>
+            <strong>{{ phone.t('Apps.mail.drafts') }}</strong>
+            <span>{{ folderCount('drafts') }}</span>
+            <ChevronRight :size="19" />
+          </button>
+          <button
+            class="mail-folder-row"
+            type="button"
+            @click="openFolder('trash')"
+          >
+            <span class="mail-folder-row__icon"><Trash2 :size="21" /></span>
+            <strong>{{ phone.t('Apps.mail.trash') }}</strong>
+            <span>{{ folderCount('trash') }}</span>
+            <ChevronRight :size="19" />
+          </button>
+        </div>
+      </main>
+
+      <button
+        class="mail-compose-fab"
+        type="button"
+        :aria-label="phone.t('Apps.mail.compose')"
+        @click="beginCompose()"
       >
-        <template #media><Inbox :size="20" /></template>
-        <template #after>
-          <k-badge v-if="mail.counts.unread">{{ mail.counts.unread }}</k-badge>
-          <template v-else>{{ folderCount('inbox') }}</template>
-        </template>
-      </k-list-item>
-      <k-list-item
-        link
-        :title="phone.t('Apps.mail.sent')"
-        @click="openFolder('sent')"
-      >
-        <template #media><Send :size="20" /></template>
-        <template #after>{{ folderCount('sent') }}</template>
-      </k-list-item>
-      <k-list-item
-        link
-        :title="phone.t('Apps.mail.drafts')"
-        @click="openFolder('drafts')"
-      >
-        <template #media><FileText :size="20" /></template>
-        <template #after>{{ folderCount('drafts') }}</template>
-      </k-list-item>
-      <k-list-item
-        link
-        :title="phone.t('Apps.mail.trash')"
-        @click="openFolder('trash')"
-      >
-        <template #media><Trash2 :size="20" /></template>
-        <template #after>{{ folderCount('trash') }}</template>
-      </k-list-item>
-    </k-list>
+        <SquarePen :size="24" />
+      </button>
+    </div>
   </k-page>
 
   <k-page
     v-else-if="screen === 'list'"
-    class="!pt-[44px] !pb-[25px]"
+    class="mail-page"
     :aria-label="folderTitle"
   >
-    <k-navbar :title="folderTitle">
-      <template #left>
-        <k-navbar-back-link
-          component="button"
-          :text="phone.t('Apps.mail.mailboxes')"
+    <div class="mail-screen">
+      <header class="mail-header mail-header--list">
+        <button
+          class="mail-icon-button"
+          type="button"
           :aria-label="phone.t('Apps.mail.mailboxes')"
           @click="goBack"
-        />
-      </template>
-      <template #right>
-        <k-link
+        >
+          <ArrowLeft :size="21" />
+        </button>
+        <button
           v-if="mail.folder === 'trash' && mail.items.length"
-          component="button"
-          icon-only
-          :aria-label="phone.t('Apps.mail.emptyTrash')"
+          class="mail-header__text"
+          type="button"
           @click="emptyTrashOpened = true"
         >
-          <Trash2 :size="20" />
-        </k-link>
-        <k-link
-          v-else
-          component="button"
-          icon-only
-          :aria-label="phone.t('Apps.mail.compose')"
-          @click="beginCompose()"
-        >
-          <SquarePen :size="21" />
-        </k-link>
-      </template>
-      <template #subnavbar>
-        <k-searchbar
-          :value="mail.search"
-          :placeholder="phone.t('Apps.mail.search')"
-          @input="updateSearch"
-          @clear="mail.loadFolder(mail.folder, '')"
-        />
-      </template>
-    </k-navbar>
+          {{ phone.t('Apps.mail.emptyTrash') }}
+        </button>
+        <span v-else />
+        <div class="mail-header__title">
+          <small
+            >{{ mail.items.length }} {{ phone.t('Apps.mail.messages') }}</small
+          >
+          <h1>{{ folderTitle }}</h1>
+        </div>
+        <label class="mail-search">
+          <Search :size="17" />
+          <input
+            :value="mail.search"
+            :placeholder="phone.t('Apps.mail.search')"
+            @input="updateSearch"
+          />
+          <button
+            v-if="mail.search"
+            type="button"
+            :aria-label="phone.t('Common.close')"
+            @click="mail.loadFolder(mail.folder, '')"
+          >
+            <X :size="14" />
+          </button>
+        </label>
+      </header>
 
-    <k-block v-if="mail.loading"><k-preloader /></k-block>
-    <k-list v-else-if="mail.items.length" strong>
-      <k-list-item
-        v-for="item in mail.items"
-        :key="`${mail.folder}-${item.id}`"
-        link
-        :title="itemTitle(item)"
-        :subtitle="itemSubtitle(item)"
-        :strong-title="mail.folder === 'inbox' && !item.is_read"
-        @click="openItem(item)"
+      <main class="mail-list">
+        <div v-if="mail.loading" class="mail-loading"><k-preloader /></div>
+        <template v-else-if="mail.items.length">
+          <div
+            v-for="(item, index) in mail.items"
+            :key="`${mail.folder}-${item.id}`"
+            class="mail-row-shell"
+            :class="mailRowClasses(item)"
+            :style="mailRowStyle(item, index)"
+            @pointercancel="cancelMailSwipe(item, $event)"
+            @pointerdown="beginMailSwipe(item, $event)"
+            @pointermove="moveMailSwipe(item, $event)"
+            @pointerup="endMailSwipe(item, $event)"
+          >
+            <span class="mail-row-action mail-row-action--read">
+              <MailCheck :size="22" />
+              <small>{{ phone.t('Apps.mail.markRead') }}</small>
+            </span>
+            <span class="mail-row-action mail-row-action--delete">
+              <Trash2 :size="21" />
+              <small>{{ phone.t('Apps.mail.delete') }}</small>
+            </span>
+            <button
+              class="mail-row"
+              :class="{
+                'mail-row--unread': mail.folder === 'inbox' && !item.is_read,
+              }"
+              type="button"
+              @click="handleMailRowClick(item)"
+            >
+              <span
+                v-if="mail.folder === 'inbox' && !item.is_read"
+                class="mail-row__unread"
+              />
+              <span
+                class="mail-avatar"
+                :class="{ 'mail-avatar--draft': mail.folder === 'drafts' }"
+                :style="senderStyle(itemTitle(item))"
+              >
+                <FileText v-if="mail.folder === 'drafts'" :size="20" />
+                <template v-else>{{
+                  senderInitials(itemTitle(item))
+                }}</template>
+              </span>
+              <span class="mail-row__copy">
+                <span class="mail-row__topline">
+                  <strong>{{ itemTitle(item) }}</strong>
+                  <time>{{ formatListDate(item.created_at) }}</time>
+                </span>
+                <span class="mail-row__subject">
+                  {{ item.subject || phone.t('Apps.mail.untitled') }}
+                </span>
+                <span class="mail-row__preview">{{ itemPreview(item) }}</span>
+              </span>
+              <ChevronRight :size="17" class="mail-row__chevron" />
+            </button>
+          </div>
+          <button
+            v-if="mail.hasMore"
+            class="mail-load-more"
+            type="button"
+            @click="mail.loadFolder(mail.folder, mail.search, true)"
+          >
+            {{ phone.t('Apps.mail.loadMore') }}
+          </button>
+        </template>
+        <div v-else class="mail-empty">
+          <Mail :size="38" />
+          <h2>
+            {{
+              phone.t(mail.search ? 'Apps.mail.noResults' : 'Apps.mail.noMail')
+            }}
+          </h2>
+          <p>
+            {{
+              phone.t(
+                mail.search
+                  ? 'Apps.mail.noResultsBody'
+                  : 'Apps.mail.noMailBody',
+              )
+            }}
+          </p>
+        </div>
+      </main>
+
+      <button
+        class="mail-compose-fab"
+        type="button"
+        :aria-label="phone.t('Apps.mail.compose')"
+        @click="beginCompose()"
       >
-      </k-list-item>
-    </k-list>
-    <template v-else>
-      <k-block-title large>
-        {{ phone.t(mail.search ? 'Apps.mail.noResults' : 'Apps.mail.noMail') }}
-      </k-block-title>
-      <k-block strong inset>
-        {{
-          phone.t(
-            mail.search ? 'Apps.mail.noResultsBody' : 'Apps.mail.noMailBody',
-          )
-        }}
-      </k-block>
-    </template>
-    <k-list v-if="mail.hasMore" inset>
-      <k-list-button @click="mail.loadFolder(mail.folder, mail.search, true)">
-        {{ phone.t('Apps.mail.loadMore') }}
-      </k-list-button>
-    </k-list>
+        <SquarePen :size="21" />
+      </button>
+    </div>
   </k-page>
 
   <k-page
     v-else-if="screen === 'message' && selectedMessage"
-    class="!pt-[44px] !pb-[25px]"
+    class="mail-page"
+    :aria-label="selectedMessage.subject"
   >
-    <k-navbar :title="phone.t('Apps.mail.name')">
-      <template #left>
-        <k-navbar-back-link
-          component="button"
-          :text="folderTitle"
+    <div class="mail-screen">
+      <header class="mail-header mail-header--compact">
+        <button
+          class="mail-icon-button"
+          type="button"
           :aria-label="folderTitle"
           @click="goBack"
-        />
-      </template>
-    </k-navbar>
-    <k-list strong>
-      <k-list-item
-        :title="selectedMessage.sender"
-        :subtitle="`${formatDate(selectedMessage.created_at)} · ${phone.t('Apps.mail.to')}: ${selectedMessage.recipients.join(', ')}`"
-      >
-        <template #media><Mail :size="20" /></template>
-      </k-list-item>
-    </k-list>
-    <k-block-title>
-      {{ selectedMessage.subject || phone.t('Apps.mail.untitled') }}
-    </k-block-title>
-    <k-block strong inset>
-      <span class="whitespace-pre-wrap">{{ selectedMessage.body }}</span>
-    </k-block>
-    <k-list strong inset>
-      <k-list-button @click="composeReply(false)">{{
-        phone.t('Apps.mail.reply')
-      }}</k-list-button>
-      <k-list-button @click="composeReply(true)">{{
-        phone.t('Apps.mail.replyAll')
-      }}</k-list-button>
-      <k-list-button @click="composeForward">{{
-        phone.t('Apps.mail.forward')
-      }}</k-list-button>
-      <k-list-button
-        v-if="!selectedMessage.trashed_at"
-        @click="mutateSelected('mail:set-read', { read: false })"
-      >
-        {{ phone.t('Apps.mail.markUnread') }}
-      </k-list-button>
-      <k-list-button
-        v-if="selectedMessage.trashed_at"
-        @click="mutateSelected('mail:restore')"
-      >
-        {{ phone.t('Apps.mail.restore') }}
-      </k-list-button>
-      <k-list-button
-        v-if="selectedMessage.trashed_at"
-        @click="mutateSelected('mail:delete-forever')"
-      >
-        {{ phone.t('Apps.mail.deleteForever') }}
-      </k-list-button>
-      <k-list-button v-else @click="mutateSelected('mail:trash')">
-        {{ phone.t('Apps.mail.moveToTrash') }}
-      </k-list-button>
-    </k-list>
+        >
+          <ArrowLeft :size="21" />
+        </button>
+        <span class="mail-header__compact-title">{{ folderTitle }}</span>
+        <button
+          class="mail-icon-button"
+          type="button"
+          :aria-label="phone.t('Apps.mail.compose')"
+          @click="beginCompose()"
+        >
+          <SquarePen :size="19" />
+        </button>
+      </header>
+
+      <article class="mail-message">
+        <div class="mail-message__sender">
+          <span
+            class="mail-avatar mail-avatar--large"
+            :style="senderStyle(selectedMessage.sender)"
+          >
+            {{ senderInitials(selectedMessage.sender) }}
+          </span>
+          <div>
+            <strong>{{ selectedMessage.sender }}</strong>
+            <span
+              >{{ phone.t('Apps.mail.to') }}:
+              {{ selectedMessage.recipients.join(', ') }}</span
+            >
+          </div>
+          <time>{{ formatDate(selectedMessage.created_at) }}</time>
+        </div>
+        <h1>{{ selectedMessage.subject || phone.t('Apps.mail.untitled') }}</h1>
+        <div class="mail-message__body">
+          <MailMarkdownEditor
+            :model-value="selectedMessage.body"
+            :editable="false"
+          />
+        </div>
+      </article>
+
+      <footer class="mail-action-bar">
+        <button
+          type="button"
+          :aria-label="phone.t('Apps.mail.reply')"
+          @click="composeReply(false)"
+        >
+          <Reply :size="20" />
+        </button>
+        <button
+          type="button"
+          :aria-label="phone.t('Apps.mail.replyAll')"
+          @click="composeReply(true)"
+        >
+          <ReplyAll :size="20" />
+        </button>
+        <button
+          type="button"
+          :aria-label="phone.t('Apps.mail.forward')"
+          @click="composeForward"
+        >
+          <Forward :size="20" />
+        </button>
+        <button
+          v-if="selectedMessage.trashed_at"
+          type="button"
+          :aria-label="phone.t('Apps.mail.restore')"
+          @click="mutateSelected('mail:restore')"
+        >
+          <RotateCcw :size="20" />
+        </button>
+        <button
+          v-else
+          class="mail-action-bar__danger"
+          type="button"
+          :aria-label="phone.t('Apps.mail.moveToTrash')"
+          @click="mutateSelected('mail:trash')"
+        >
+          <Trash2 :size="20" />
+        </button>
+        <button
+          v-if="selectedMessage.trashed_at"
+          class="mail-action-bar__danger"
+          type="button"
+          :aria-label="phone.t('Apps.mail.deleteForever')"
+          @click="mutateSelected('mail:delete-forever')"
+        >
+          <Trash2 :size="20" />
+        </button>
+        <button
+          v-else
+          type="button"
+          :aria-label="phone.t('Apps.mail.markUnread')"
+          @click="mutateSelected('mail:set-read', { isRead: false })"
+        >
+          <MailOpen :size="20" />
+        </button>
+      </footer>
+    </div>
   </k-page>
 
-  <k-page v-else-if="screen === 'compose'" class="!pt-[44px] !pb-[25px]">
-    <k-navbar>
-      <template #left>
-        <k-link component="button" @click="closeCompose">
-          {{ phone.t('Common.cancel') }}
-        </k-link>
-      </template>
-      <template #right>
-        <k-link component="button" :disabled="submitting" @click="sendMessage">
-          {{ phone.t('Common.send') }}
-        </k-link>
-      </template>
-    </k-navbar>
-    <k-block-title large>{{ phone.t('Apps.mail.compose') }}</k-block-title>
-    <k-list strong>
-      <k-list-input
-        :value="recipientText"
-        :label="phone.t('Apps.mail.recipients')"
-        :info="phone.t('Apps.mail.recipientHint')"
-        autocapitalize="none"
-        spellcheck="false"
-        @input="recipientText = eventValue($event)"
-      />
-      <k-list-input
-        :value="subject"
-        :label="phone.t('Apps.mail.subject')"
-        maxlength="120"
-        @input="subject = eventValue($event)"
-      />
-      <k-list-input
-        type="textarea"
-        :value="body"
-        :label="phone.t('Apps.mail.body')"
-        maxlength="20000"
-        @input="body = eventValue($event)"
-      />
-    </k-list>
-    <k-list v-if="draftId" strong inset>
-      <k-list-button @click="deleteCurrentDraft">
-        {{ phone.t('Apps.mail.deleteDraft') }}
-      </k-list-button>
-    </k-list>
-    <k-block v-if="submitting"><k-preloader /></k-block>
+  <k-page v-else-if="screen === 'compose'" class="mail-page">
+    <div class="mail-screen mail-compose">
+      <header class="mail-header mail-header--compose">
+        <button
+          class="mail-icon-button mail-icon-button--large"
+          type="button"
+          :aria-label="phone.t('Common.cancel')"
+          @click="closeCompose"
+        >
+          <X :size="22" />
+        </button>
+        <h1>{{ phone.t('Apps.mail.compose') }}</h1>
+        <button
+          class="mail-icon-button mail-icon-button--large mail-icon-button--send"
+          type="button"
+          :disabled="!canSend"
+          :aria-label="phone.t('Common.send')"
+          @click="sendMessage"
+        >
+          <Send :size="20" />
+        </button>
+      </header>
+
+      <div class="mail-compose__fields">
+        <label>
+          <span>{{ phone.t('Apps.mail.recipients') }}</span>
+          <input
+            :value="recipientText"
+            autocapitalize="none"
+            autocorrect="off"
+            inputmode="email"
+            :maxlength="MAIL_RECIPIENT_INPUT_MAX_LENGTH"
+            pattern="[A-Za-z0-9@._,; -]*"
+            spellcheck="false"
+            :placeholder="phone.t('Apps.mail.recipientPlaceholder')"
+            @input="updateRecipientText"
+          />
+        </label>
+        <div class="mail-compose__from">
+          <span>{{ phone.t('Apps.mail.from') }}</span>
+          <strong>{{ mail.accountEmail }}</strong>
+        </div>
+        <label>
+          <span>{{ phone.t('Apps.mail.subject') }}</span>
+          <input
+            :value="subject"
+            maxlength="120"
+            :placeholder="phone.t('Apps.mail.subjectPlaceholder')"
+            @input="subject = eventValue($event)"
+          />
+        </label>
+      </div>
+
+      <div class="mail-compose__editor">
+        <MailMarkdownEditor
+          v-model="body"
+          :labels="editorLabels"
+          :placeholder="phone.t('Apps.mail.messagePlaceholder')"
+        />
+      </div>
+      <div class="mail-compose__meta">
+        <button v-if="draftId" type="button" @click="deleteCurrentDraft">
+          <Trash2 :size="15" /> {{ phone.t('Apps.mail.deleteDraft') }}
+        </button>
+        <span :class="{ 'is-over-limit': body.length > 20000 }">
+          {{ body.length.toLocaleString(phone.lang) }} / 20,000
+        </span>
+      </div>
+    </div>
   </k-page>
 
   <k-dialog
@@ -714,3 +1150,978 @@ onBeforeUnmount(() => {
     {{ toastText }}
   </k-toast>
 </template>
+
+<style scoped>
+.mail-page {
+  --mail-blue: #0a84ff;
+  --mail-border: #ffffff1a;
+  --mail-muted: #8e8e93;
+  --mail-surface: #1c1c1e;
+  min-height: 0 !important;
+  padding: 0 !important;
+  overflow: hidden;
+  background: #000 !important;
+  color: #f5f5f7;
+}
+
+.mail-screen {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: #000;
+  animation: mail-screen-enter 240ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  color: inherit;
+}
+
+.mail-header {
+  position: relative;
+  z-index: 5;
+  display: grid;
+  grid-template-columns: 54px 1fr 54px;
+  align-items: center;
+  padding: 51px 15px 10px;
+  background: #000e;
+  backdrop-filter: blur(18px) saturate(150%);
+  -webkit-backdrop-filter: blur(18px) saturate(150%);
+}
+
+.mail-header > :first-child {
+  justify-self: start;
+}
+
+.mail-header > :nth-child(2) {
+  justify-self: center;
+}
+
+.mail-header > :nth-child(3) {
+  justify-self: end;
+}
+
+.mail-header--large,
+.mail-header--list {
+  grid-template-rows: 40px auto;
+  padding-bottom: 12px;
+}
+
+.mail-header--large {
+  grid-template-columns: 54px 1fr 86px;
+}
+
+.mail-header--large > :nth-child(2) {
+  grid-column: 3;
+  justify-self: end;
+  white-space: nowrap;
+}
+
+.mail-header--large .mail-header__title,
+.mail-header--list .mail-header__title {
+  grid-column: 1 / -1;
+  justify-self: stretch;
+  padding-top: 8px;
+}
+
+.mail-header__title h1 {
+  margin: 0;
+  font-size: 32px;
+  font-weight: 760;
+  line-height: 1.08;
+  letter-spacing: -1.2px;
+}
+
+.mail-header__title small {
+  display: block;
+  margin-bottom: 3px;
+  overflow: hidden;
+  color: var(--mail-muted);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail-header__text {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 0;
+  padding: 5px 0;
+  background: none;
+  color: var(--mail-blue);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.mail-icon-button {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border: 1px solid #ffffff20;
+  border-radius: 50%;
+  background: #242426e8;
+  color: #f5f5f7;
+  box-shadow: inset 0 1px #ffffff18;
+  cursor: pointer;
+  transition:
+    transform 160ms cubic-bezier(0.22, 0.8, 0.3, 1),
+    border-color 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.mail-icon-button:disabled {
+  color: #68686d;
+  cursor: default;
+}
+
+.mail-icon-button--large {
+  width: 44px;
+  height: 44px;
+}
+
+.mail-icon-button--send:not(:disabled) {
+  border-color: #0a84ff55;
+  background: var(--mail-blue);
+}
+
+.mail-folders {
+  padding: 8px 15px 90px;
+}
+
+.mail-folders__card {
+  overflow: hidden;
+  border: 1px solid #ffffff08;
+  border-radius: 22px;
+  background: var(--mail-surface);
+}
+
+.mail-folder-row {
+  position: relative;
+  width: 100%;
+  min-height: 61px;
+  display: grid;
+  grid-template-columns: 36px 1fr auto 18px;
+  align-items: center;
+  gap: 9px;
+  border: 0;
+  padding: 0 13px 0 14px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 160ms ease;
+}
+
+.mail-folder-row:not(:last-child)::after {
+  position: absolute;
+  right: 13px;
+  bottom: 0;
+  left: 59px;
+  height: 1px;
+  background: var(--mail-border);
+  content: '';
+}
+
+.mail-folder-row strong {
+  font-size: 16px;
+  font-weight: 560;
+}
+
+.mail-folder-row > span:nth-of-type(2),
+.mail-folder-row > svg {
+  color: var(--mail-muted);
+  font-size: 13px;
+}
+
+.mail-folder-row__icon {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  color: var(--mail-blue);
+}
+
+.mail-header--list {
+  grid-template-columns: 1fr 1fr;
+}
+
+.mail-header--list .mail-header__text {
+  justify-self: end;
+}
+
+.mail-search {
+  grid-column: 1 / -1;
+  display: flex;
+  height: 34px;
+  align-items: center;
+  gap: 7px;
+  margin-top: 11px;
+  padding: 0 10px;
+  border-radius: 10px;
+  background: #1c1c1e;
+  color: var(--mail-muted);
+}
+
+.mail-search input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #f5f5f7;
+  font-size: 14px;
+}
+
+.mail-search button {
+  display: grid;
+  width: 20px;
+  height: 20px;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  padding: 0;
+  background: #636366;
+  color: #1c1c1e;
+}
+
+.mail-list {
+  height: calc(100% - 188px);
+  overflow-y: auto;
+  padding: 0 0 82px;
+}
+
+.mail-row-shell {
+  --mail-row-index: 0;
+  --mail-row-offset: 0px;
+  --mail-swipe-progress: 0;
+  position: relative;
+  min-height: 82px;
+  overflow: hidden;
+  touch-action: pan-y;
+  animation: mail-row-enter 280ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
+  animation-delay: calc(var(--mail-row-index) * 24ms);
+}
+
+.mail-row-action {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 108px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #fff;
+  opacity: var(--mail-swipe-progress);
+  pointer-events: none;
+  transition:
+    opacity 120ms ease,
+    transform 180ms ease;
+}
+
+.mail-row-action small {
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.mail-row-action--read {
+  left: 0;
+  justify-content: flex-start;
+  padding-left: 18px;
+  background: linear-gradient(90deg, #0a84ff, #0874df);
+  transform: translateX(-10px);
+}
+
+.mail-row-action--delete {
+  right: 0;
+  justify-content: flex-end;
+  padding-right: 18px;
+  background: linear-gradient(90deg, #d73229, #ff453a);
+  transform: translateX(10px);
+}
+
+.mail-row-shell.is-dragging .mail-row-action,
+.mail-row-shell.is-committing-delete .mail-row-action--delete,
+.mail-row-shell.is-committing-read .mail-row-action--read {
+  transform: translateX(0);
+}
+
+.mail-row {
+  position: relative;
+  width: 100%;
+  min-height: 82px;
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr) 15px;
+  align-items: center;
+  gap: 10px;
+  border: 0;
+  padding: 8px 13px 8px 19px;
+  background: #000;
+  text-align: left;
+  cursor: pointer;
+  transform: translate3d(var(--mail-row-offset), 0, 0);
+  transition:
+    transform 260ms cubic-bezier(0.22, 0.8, 0.3, 1),
+    background-color 160ms ease;
+  will-change: transform;
+}
+
+.mail-row-shell.is-dragging .mail-row {
+  transition: none;
+}
+
+.mail-row-shell.is-committing-delete .mail-row {
+  transform: translate3d(-110%, 0, 0);
+}
+
+.mail-row-shell.is-committing-read .mail-row {
+  transform: translate3d(110%, 0, 0);
+}
+
+.mail-row::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 76px;
+  height: 1px;
+  background: var(--mail-border);
+  content: '';
+}
+
+.mail-row__unread {
+  position: absolute;
+  left: 7px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--mail-blue);
+}
+
+.mail-avatar {
+  --mail-avatar-hue: 210;
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  flex: 0 0 auto;
+  border-radius: 12px;
+  background: linear-gradient(
+    145deg,
+    hsl(var(--mail-avatar-hue) 76% 62%),
+    hsl(var(--mail-avatar-hue) 72% 42%)
+  );
+  color: #fff;
+  font-size: 16px;
+  font-weight: 720;
+  box-shadow: inset 0 1px #ffffff40;
+}
+
+.mail-avatar--draft {
+  background: linear-gradient(145deg, #ff9f0a, #c56c00);
+}
+
+.mail-avatar--large {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+
+.mail-row__copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.mail-row__topline {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.mail-row__topline strong,
+.mail-row__subject,
+.mail-row__preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail-row__topline strong {
+  flex: 1;
+  font-size: 15px;
+  font-weight: 510;
+}
+
+.mail-row--unread .mail-row__topline strong,
+.mail-row--unread .mail-row__subject {
+  font-weight: 720;
+}
+
+.mail-row__topline time {
+  color: var(--mail-muted);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.mail-row__subject {
+  color: #f5f5f7;
+  font-size: 13px;
+}
+
+.mail-row__preview {
+  color: var(--mail-muted);
+  font-size: 12px;
+}
+
+.mail-row__chevron {
+  color: #48484a;
+}
+
+.mail-compose-fab {
+  position: absolute;
+  z-index: 8;
+  right: 17px;
+  bottom: 32px;
+  display: grid;
+  width: 52px;
+  height: 52px;
+  place-items: center;
+  border: 1px solid #ffffff24;
+  border-radius: 50%;
+  background: #2c2c2ef0;
+  color: var(--mail-blue);
+  box-shadow:
+    0 8px 24px #000a,
+    inset 0 1px #ffffff24;
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  cursor: pointer;
+  transition:
+    transform 180ms cubic-bezier(0.22, 0.8, 0.3, 1),
+    border-color 180ms ease,
+    background-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.mail-loading,
+.mail-empty {
+  display: flex;
+  min-height: 270px;
+  align-items: center;
+  justify-content: center;
+}
+
+.mail-empty {
+  flex-direction: column;
+  padding: 30px;
+  color: var(--mail-muted);
+  text-align: center;
+}
+
+.mail-empty h2 {
+  margin: 13px 0 4px;
+  color: #f5f5f7;
+  font-size: 20px;
+}
+
+.mail-empty p {
+  max-width: 240px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.mail-load-more {
+  width: 100%;
+  border: 0;
+  padding: 18px;
+  background: none;
+  color: var(--mail-blue);
+}
+
+.mail-header--compact {
+  grid-template-columns: 44px 1fr 44px;
+  border-bottom: 1px solid var(--mail-border);
+}
+
+.mail-header__compact-title {
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail-message {
+  height: calc(100% - 102px);
+  overflow-y: auto;
+  padding: 18px 18px 104px;
+  user-select: text;
+}
+
+.mail-message__sender {
+  display: grid;
+  grid-template-columns: 50px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 11px;
+}
+
+.mail-message__sender > div {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mail-message__sender strong,
+.mail-message__sender span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail-message__sender strong {
+  font-size: 14px;
+}
+.mail-message__sender span,
+.mail-message__sender time {
+  color: var(--mail-muted);
+  font-size: 10px;
+}
+
+.mail-message > h1 {
+  margin: 22px 0 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid var(--mail-border);
+  font-size: 25px;
+  line-height: 1.18;
+  letter-spacing: -0.5px;
+}
+
+.mail-message__body {
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.mail-action-bar {
+  position: absolute;
+  z-index: 7;
+  right: 12px;
+  bottom: 25px;
+  left: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 8px;
+  border: 1px solid #ffffff24;
+  border-radius: 24px;
+  background: #242426e8;
+  box-shadow:
+    0 9px 28px #000b,
+    inset 0 1px #ffffff1f;
+  backdrop-filter: blur(22px) saturate(160%);
+  -webkit-backdrop-filter: blur(22px) saturate(160%);
+  animation: mail-action-bar-enter 320ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
+}
+
+.mail-action-bar button {
+  position: relative;
+  display: grid;
+  width: 42px;
+  height: 36px;
+  place-items: center;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: #f5f5f7;
+  cursor: pointer;
+  transition:
+    transform 160ms cubic-bezier(0.22, 0.8, 0.3, 1),
+    color 160ms ease,
+    background-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.mail-action-bar button::after {
+  position: absolute;
+  bottom: calc(100% + 9px);
+  left: 50%;
+  padding: 5px 8px;
+  border: 1px solid #ffffff1c;
+  border-radius: 7px;
+  background: #2c2c2ef5;
+  box-shadow: 0 6px 18px #0009;
+  color: #fff;
+  content: attr(aria-label);
+  font-size: 9px;
+  font-weight: 600;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, 5px) scale(0.96);
+  transition:
+    opacity 140ms ease,
+    transform 140ms ease;
+  white-space: nowrap;
+}
+
+.mail-action-bar button:active,
+.mail-compose-fab:active,
+.mail-icon-button:active {
+  transform: scale(0.9);
+}
+
+.mail-action-bar button:focus-visible,
+.mail-compose-fab:focus-visible,
+.mail-icon-button:focus-visible {
+  outline: 2px solid var(--mail-blue);
+  outline-offset: 2px;
+}
+
+.mail-action-bar button:focus-visible::after {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+@media (hover: hover) {
+  .mail-folder-row:hover,
+  .mail-row-shell:not(.is-dragging) .mail-row:hover {
+    background: #ffffff0b;
+  }
+
+  .mail-icon-button:not(:disabled):hover {
+    border-color: #0a84ff66;
+    background: #343438f2;
+    color: #fff;
+    box-shadow:
+      0 5px 16px #0007,
+      inset 0 1px #ffffff2b;
+    transform: translateY(-1px) scale(1.04);
+  }
+
+  .mail-compose-fab:hover {
+    border-color: #0a84ff70;
+    background: #343438fa;
+    box-shadow:
+      0 11px 28px #000b,
+      0 0 0 4px #0a84ff18,
+      inset 0 1px #ffffff30;
+    transform: translateY(-2px) scale(1.05);
+  }
+
+  .mail-action-bar button:hover {
+    background: #0a84ff26;
+    color: #64b5ff;
+    box-shadow: inset 0 0 0 1px #0a84ff35;
+    transform: translateY(-2px) scale(1.06);
+  }
+
+  .mail-action-bar button.mail-action-bar__danger:hover {
+    background: #ff453a24;
+    color: #ff6961;
+    box-shadow: inset 0 0 0 1px #ff453a35;
+  }
+
+  .mail-action-bar button:hover::after {
+    opacity: 1;
+    transform: translate(-50%, 0) scale(1);
+  }
+}
+
+.mail-header--compose {
+  grid-template-columns: 52px 1fr 52px;
+  padding-bottom: 12px;
+}
+
+.mail-header--compose h1 {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 700;
+}
+
+.mail-compose__fields {
+  border-top: 1px solid var(--mail-border);
+}
+
+.mail-compose__fields label,
+.mail-compose__from {
+  min-height: 45px;
+  display: grid;
+  grid-template-columns: 66px minmax(0, 1fr);
+  align-items: center;
+  margin-left: 17px;
+  border-bottom: 1px solid var(--mail-border);
+}
+
+.mail-compose__fields span {
+  color: var(--mail-muted);
+  font-size: 13px;
+}
+
+.mail-compose__fields input,
+.mail-compose__from strong {
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  padding: 0 16px 0 0;
+  background: transparent;
+  color: #f5f5f7;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.mail-compose__from strong {
+  overflow: hidden;
+  color: var(--mail-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail-compose__editor {
+  height: calc(100% - 278px);
+  min-height: 250px;
+  overflow-y: auto;
+}
+
+.mail-compose__meta {
+  position: absolute;
+  right: 17px;
+  bottom: 28px;
+  left: 17px;
+  z-index: 4;
+  display: flex;
+  justify-content: space-between;
+  color: var(--mail-muted);
+  font-size: 10px;
+  pointer-events: none;
+}
+
+.mail-compose__meta button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: #ff453a;
+  pointer-events: auto;
+}
+
+.mail-compose__meta .is-over-limit {
+  color: #ff453a;
+}
+
+.mail-auth {
+  position: relative;
+  height: 100%;
+  overflow-y: auto;
+  padding: 70px 22px 40px;
+  background:
+    radial-gradient(circle at 50% 11%, #0a84ff2e, transparent 31%), #000;
+}
+
+.mail-auth__hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.mail-auth__icon {
+  width: 72px;
+  height: 72px;
+  margin-bottom: 13px;
+  border-radius: 17px;
+  box-shadow: 0 12px 35px #0a84ff4a;
+}
+
+.mail-auth__hero span {
+  color: var(--mail-blue);
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.mail-auth__hero h1 {
+  margin: 5px 0 7px;
+  font-size: 30px;
+  line-height: 1;
+  letter-spacing: -1px;
+}
+
+.mail-auth__hero p {
+  max-width: 280px;
+  min-height: 36px;
+  margin: 0;
+  color: var(--mail-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.mail-auth__segment {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3px;
+  margin: 24px 0 14px;
+  padding: 3px;
+  border-radius: 11px;
+  background: #1c1c1e;
+}
+
+.mail-auth__segment button {
+  height: 30px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--mail-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.mail-auth__segment button.is-active {
+  background: #3a3a3c;
+  color: #fff;
+  box-shadow: 0 1px 4px #0008;
+}
+
+.mail-auth__form {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+}
+
+.mail-auth__field > span {
+  display: block;
+  margin: 0 0 5px 3px;
+  color: var(--mail-muted);
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.45px;
+  text-transform: uppercase;
+}
+
+.mail-auth__field > div {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 13px;
+  border: 1px solid #ffffff18;
+  border-radius: 13px;
+  background: #1c1c1e;
+  color: #8e8e93;
+}
+
+.mail-auth__field:focus-within > div {
+  border-color: #0a84ff88;
+  box-shadow: 0 0 0 3px #0a84ff1f;
+}
+
+.mail-auth__field input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #f5f5f7;
+  font-size: 14px;
+}
+
+.mail-auth__field small {
+  color: var(--mail-muted);
+  font-size: 11px;
+}
+
+.mail-auth__submit {
+  height: 48px;
+  display: grid;
+  place-items: center;
+  margin-top: 5px;
+  border: 0;
+  border-radius: 14px;
+  background: var(--mail-blue);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  box-shadow: 0 9px 24px #0a84ff3f;
+}
+
+.mail-auth__submit:disabled {
+  opacity: 0.55;
+}
+
+.mail-auth__warning {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  margin: 2px 3px 0;
+  color: var(--mail-muted);
+  font-size: 10px;
+  line-height: 1.35;
+}
+
+.mail-auth__warning svg {
+  flex: 0 0 auto;
+}
+
+@keyframes mail-screen-enter {
+  from {
+    opacity: 0;
+    transform: translate3d(10px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes mail-row-enter {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 7px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes mail-action-bar-enter {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 12px, 0) scale(0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mail-screen,
+  .mail-row-shell,
+  .mail-action-bar {
+    animation: none;
+  }
+
+  .mail-row,
+  .mail-row-action,
+  .mail-action-bar button,
+  .mail-compose-fab,
+  .mail-icon-button,
+  .mail-folder-row {
+    transition-duration: 0.01ms;
+  }
+}
+</style>
diff --git a/frontend/src/views/apps/SettingsApp.vue b/frontend/src/views/apps/SettingsApp.vue
index ec4ea41..6ece15c 100644
--- a/frontend/src/views/apps/SettingsApp.vue
+++ b/frontend/src/views/apps/SettingsApp.vue
@@ -48,6 +48,10 @@ import { IFRUIT_AUTH_INPUT_COLORS } from '@/config/ifruit'
 import { usePhoneStore } from '@/stores/phone'
 import { useAccountStore } from '@/stores/account'
 import type { PhoneAppDefinition, PhoneAppId } from '@/types/apps'
+import {
+  filterMailAddressInput,
+  MAIL_ADDRESS_INPUT_MAX_LENGTH,
+} from '@/utils/mail'
 import { nuiCall } from '@/utils/nui'
 import { formatPhoneNumber } from '@/utils/phone'
 import {
@@ -320,6 +324,23 @@ function eventValue(event: Event): string {
   return (event.target as HTMLInputElement).value
 }
 
+function updateAccountEmail(event: Event): void {
+  const input = event.target as HTMLInputElement
+  const original = input.value
+  const selectionStart = input.selectionStart ?? original.length
+  const filtered = filterMailAddressInput(original)
+
+  if (filtered !== original) {
+    const nextSelection = filterMailAddressInput(
+      original.slice(0, selectionStart),
+    ).length
+    input.value = filtered
+    input.setSelectionRange(nextSelection, nextSelection)
+  }
+
+  accountEmail.value = filtered
+}
+
 function accountError(error?: string): string {
   const known = [
     'invalid_email',
@@ -587,9 +608,13 @@ onBeforeUnmount(() => {
               :input-class="accountMode === 'register' ? 'pr-20' : undefined"
               autocomplete="username"
               autocapitalize="none"
+              autocorrect="off"
+              inputmode="email"
+              :maxlength="MAIL_ADDRESS_INPUT_MAX_LENGTH"
+              pattern="[A-Za-z0-9@._-]*"
               spellcheck="false"
               :clear-button="accountMode === 'login'"
-              @input="accountEmail = eventValue($event)"
+              @input="updateAccountEmail"
               @clear="accountEmail = ''"
             >
               <span
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index e237df0..2f17537 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -23,13 +23,14 @@ const accountDevices = [
 ]
 const messages = [
   {
-    body: 'Welcome to iFruit Mail. Your shared mailbox is ready to use.',
+    body: '## Welcome to iFruit Mail\n\nYour shared mailbox is **ready to use**.\n\n- Send formatted messages\n- Keep drafts on every linked device\n- Reply without losing the conversation\n\n> Tip: use the small formatting bar while composing.',
     created_at: '2026-08-04 11:30:00',
     folder: 'inbox',
     id: 1,
     is_read: false,
     message_id: 'b73f3872-54cc-4d74-a058-6caa24f0dfff',
-    preview: 'Welcome to iFruit Mail. Your shared mailbox is ready to use.',
+    preview:
+      'Your shared mailbox is **ready to use**. Send formatted messages and keep drafts on every linked device.',
     recipients: ['demo@ifruit.com'],
     sender: 'support@ifruit.com',
     subject: 'Welcome to iFruit Mail',
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 55f86e2..748f4cb 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -89,14 +89,19 @@ Locales["en"] = {
                 name = "Mail", login = "Sign In", register = "Create Account", registerLink = "Register", loginTitle = "iFruit Mail",
                 loginBody = "Sign in to use your shared iFruit mailbox.", registerBody = "Choose your new @ifruit.com address.",
                 localPart = "Email address", email = "Email", password = "Password", confirmPassword = "Confirm password",
+                accountEyebrow = "Your iFruit account", emailPlaceholder = "name@ifruit.com", passwordPlaceholder = "Enter password",
                 passwordWarning = "Use an in-character password. Do not reuse a real-world password.",
                 mailboxes = "Mailboxes", inbox = "Inbox", sent = "Sent", drafts = "Drafts", trash = "Trash",
                 compose = "New Message", recipients = "To", recipientHint = "Separate up to 10 addresses with commas.",
-                subject = "Subject", body = "Message", search = "Search mail", noMail = "No Mail",
+                recipientPlaceholder = "name@ifruit.com", subject = "Subject", subjectPlaceholder = "What's this about?",
+                body = "Message", messagePlaceholder = "Write a message...", search = "Search mail", messages = "messages",
+                noMessageContent = "No message content", noMail = "No Mail",
                 noMailBody = "Messages in this mailbox will appear here.", noResults = "No Results",
                 noResultsBody = "Try a different search.", untitled = "(no subject)", loadMore = "Load More",
                 logout = "Sign Out", from = "From", to = "To", reply = "Reply", replyAll = "Reply All", forward = "Forward",
-                markUnread = "Mark as Unread", moveToTrash = "Move to Trash", restore = "Restore",
+                formatBold = "Bold", formatItalic = "Italic", formatBulletList = "Bullet list",
+                formatNumberedList = "Numbered list", formatQuote = "Quote", undo = "Undo", redo = "Redo",
+                markRead = "Read", markUnread = "Mark as Unread", delete = "Delete", moveToTrash = "Move to Trash", restore = "Restore",
                 deleteForever = "Delete Forever", emptyTrash = "Empty Trash", emptyTrashTitle = "Empty Trash?",
                 emptyTrashBody = "Every message in Trash will be permanently deleted.", deleteDraft = "Delete Draft",
                 sentSuccess = "Message sent.", newMessage = "New mail from {sender}", passwordsMismatch = "Passwords do not match.",
diff --git a/sky_phone/source/html/index.html b/sky_phone/source/html/index.html
index 2d66aff..40ad1f5 100644
--- a/sky_phone/source/html/index.html
+++ b/sky_phone/source/html/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sky Phone</title>
-    <script type="module" crossorigin src="./assets/sky-index-D2k1S7R7.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/sky-index-G8JTwQWl.css">
+    <script type="module" crossorigin src="./assets/sky-index-Bb3pn2fx.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/sky-index-0tsbAWVw.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/sky_phone/source/server/mail.lua b/sky_phone/source/server/mail.lua
index 8fa959d..f68a9e6 100644
--- a/sky_phone/source/server/mail.lua
+++ b/sky_phone/source/server/mail.lua
@@ -373,7 +373,6 @@ Bridge.Callbacks.Register("sky_phone:mail:delete-draft", function(source, data)
     broadcast_mailbox_changed(session.id)
     return { success = true }
 end)
-end)
 
 Bridge.Callbacks.Register("sky_phone:mail:send", function(source, data)
     local session, error_response = require_session(source)
@@ -581,3 +580,4 @@ Bridge.Callbacks.Register("sky_phone:mail:empty-trash", function(source)
     broadcast_mailbox_changed(session.id)
     return { success = true }
 end)
+end)