diff --git a/public/blabla-example1.png b/public/blabla-example1.png
index 1938ffb..f9d70d4 100644
Binary files a/public/blabla-example1.png and b/public/blabla-example1.png differ
diff --git a/public/dialogue-example1.png b/public/dialogue-example1.png
index 03c7260..6200f34 100644
Binary files a/public/dialogue-example1.png and b/public/dialogue-example1.png differ
diff --git a/public/dialogue-example2.png b/public/dialogue-example2.png
index b9c8b8f..6aad60b 100644
Binary files a/public/dialogue-example2.png and b/public/dialogue-example2.png differ
diff --git a/public/images/blabla/bot2.png b/public/images/blabla/bot2.png
new file mode 100644
index 0000000..cf8a952
Binary files /dev/null and b/public/images/blabla/bot2.png differ
diff --git a/public/images/blabla/s_systembubble.png b/public/images/blabla/s_systembubble.png
new file mode 100644
index 0000000..ea2acaf
Binary files /dev/null and b/public/images/blabla/s_systembubble.png differ
diff --git a/public/images/blabla/systembubble.png b/public/images/blabla/systembubble.png
new file mode 100644
index 0000000..e3c44dc
Binary files /dev/null and b/public/images/blabla/systembubble.png differ
diff --git a/public/images/dialogue/controls/autocancel.png b/public/images/dialogue/controls/autocancel.png
new file mode 100644
index 0000000..265b025
Binary files /dev/null and b/public/images/dialogue/controls/autocancel.png differ
diff --git a/public/images/dialogue/controls/hidecancel.png b/public/images/dialogue/controls/hidecancel.png
new file mode 100644
index 0000000..bdbb862
Binary files /dev/null and b/public/images/dialogue/controls/hidecancel.png differ
diff --git a/public/logo-example1.png b/public/logo-example1.png
index 0bd869c..85357f4 100644
Binary files a/public/logo-example1.png and b/public/logo-example1.png differ
diff --git a/src/components/BlablaInput.astro b/src/components/BlablaInput.astro
index 23efca9..d0271fb 100644
--- a/src/components/BlablaInput.astro
+++ b/src/components/BlablaInput.astro
@@ -140,21 +140,22 @@
             </td>
         </tr>
         <tr style="display: none;" id="chats-page-tabs">
-            <td style="vertical-align: top; padding-top: 4px; padding-bottom: 5px;" colspan="3">
+            <td style="vertical-align: top; padding-top: 5px; padding-bottom: 5px;" colspan="3">
                 <button id="mission-page" class="button-bs" style="width: calc(33.33% - 8px); margin-left: 4px; margin-right: 3px; font-weight: normal;">
                     <img src="/nikke-font-generator/images/blabla/logo_mission.png" class="logo-img" alt=""> Mission
                 </button>
                 <button id="nikke-page" class="button-bs" style="width: calc(33.33% - 8px); font-weight: bold;">
                     <img src="/nikke-font-generator/images/blabla/logo_nikke.png" class="logo-img" alt=""> Nikke
                 </button>
-                <button id="group-page" class="button-bs" style="width: calc(33.33% - 8px); font-weight: normal; top: 1px; position: relative;">
+                <button id="group-page" class="button-bs" style="width: calc(33.33% - 8px); font-weight: normal; position: relative;">
                     <img src="/nikke-font-generator/images/blabla/logo_group.png" class="logo-img" alt=""> Group
                 </button>
             </td>
         </tr>
         <tr>
             <td colspan="1">
-                <input type="number" id="ypos" step="10" value="0" style="width: 256px; margin: 0; margin-left: 4px; margin-bottom: 4px;" placeholder="Global Y-Position Offset/Scroll" />
+                <input type="number" id="ypos" step="10" style="width: 157px; margin: 0; margin-left: 4px; margin-right: 4px; margin-bottom: 4px;" placeholder="Scroll Offset" />
+                <button id="drag-toggle" class="button-bs" style="width: 90px; display: inline-block;">Drag: OFF</button>
             </td>
             <td colspan="1">
                 <!-- <input
@@ -182,6 +183,41 @@
                 <button id="set-convo" style="width: calc(50% - 8px); display: inline-block; font-weight: bold;">Conversation screen</button>
             </td>
         </tr>
+        <tr>
+            <td colspan="3" class="wholerow">
+                <label class="whole-row" id="grid-toggle" style="margin-top: 4px; user-select: none;">
+                    Grid Background: OFF
+                </label>
+            </td>
+        </tr>
+
+        <th>
+            Choices
+        </th>
+        <tr>
+            <td colspan="3" class="wholerow">
+                <textarea
+                    id="choices"
+                    autocomplete="off"
+                    placeholder='1 line = 1 choice...'
+                    style="min-width: calc(100% - 20px); text-align:center;"
+                    class="whole-row"
+                />
+            </td>
+        </tr>
+
+        <th>Other</th>
+        <tr>
+            <td style="vertical-align: top;" colspan="3">
+                <label id="import" class="button-bs" style="width: calc(50% - 8px); line-height: 40px; display: inline-block; margin-left: 4px; margin-right: 3px;">
+                    Import JSON
+                    <input type="file" id="chat-json-up" accept=".json">
+                </label>
+                <label id="export" class="button-bs" style="width: calc(50% - 8px); line-height: 40px; display: inline-block;">
+                    Export JSON
+                </label>
+            </td>
+        </tr>
 
 
         <th>
diff --git a/src/components/DialogueInput.astro b/src/components/DialogueInput.astro
index fecab6b..eab745f 100644
--- a/src/components/DialogueInput.astro
+++ b/src/components/DialogueInput.astro
@@ -114,8 +114,10 @@ import { eyeOn } from "../scripts/util.js";
                 <select id="cotype" name="Control Type" style="position: inherit; margin-left: 4px; width: calc(100% - 8px);">
                     <option value="autoskip">Auto-Log-Skip (Default)</option>
                     <option value="autofast">Auto-Log-Fast</option>
+                    <option value="autocancel">Auto-Log-Cancel</option>
                     <option value="hideskip">Hide-Auto-Log-Skip</option>
                     <option value="hidefast">Hide-Auto-Log-Fast</option>
+                    <option value="hidecancel">Hide-Auto-Log-Cancel</option>
                 </select>
             </td>
             <td>
diff --git a/src/pages/blabla.astro b/src/pages/blabla.astro
index d5bc58e..087dcba 100644
--- a/src/pages/blabla.astro
+++ b/src/pages/blabla.astro
@@ -28,6 +28,13 @@ import Anise from '../components/Anise.astro';
 		<BlablaDisplay />
 		<p><i>Generated output you see may be barely accurate to inaccurate to official media.<br>Click the image for a fast download!</i></p>
 		<BlablaInput />
+		<p>
+			<i>
+				creations in Safari may have the text look offset.<br>
+				this is unfortunately a <b>browser issue</b>, nothing much I can do about it.<br>
+				use a different browser, if possible. sorry!
+			</i>
+		</p>
 		<Credits />
 		<Anise />
 
diff --git a/src/pages/credits.md b/src/pages/credits.md
index 3af1081..fbcbbac 100644
--- a/src/pages/credits.md
+++ b/src/pages/credits.md
@@ -13,6 +13,7 @@ embeddesc: The site's credits!
 | [**NIKKE-DB**](https://nikke-db.pages.dev) | This site uses some assets from NIKKE-DB.<br>Their work has been really helpful for the dialogue generator!<br>This site also uses their GitHub Database for character profile pictures for the BlaBla generator!!! |
 | [**NIKKE.GG**](https://nikke.gg) | This site gets NIKKE data from NIKKE.GG! |
 | [**GitHub Pages**](https://pages.github.com) | Site hosting. Where else can I tend to? |
+| [**Boxicons**](https://boxicons.com) | Some good web icons for everyone to use. No freemium bullshit. |
 | [**Astro**](https://astro.build) | For being dope to work with. |
 
 <br>
@@ -23,7 +24,7 @@ embeddesc: The site's credits!
 | [**Pretendard**](https://cactus.tistory.com/306) | Made by [Kil Hyung-jin (orioncactus)](https://github.com/orioncactus). Used throughout the site and Dialogue Generator. Found through research. |
 | [**Docteur Atomic**](https://www.dafont.com/docteur-atomic.font) | Made by Jonathan Paquette. Used on Logo Generator. Found through a lousy "font-surfing" session one night. |
 | [**Butch and Sundance**](https://www.dafont.com/butch-sundance.font) | Made by [Dan Zadorozny (Iconian Fonts)](https://www.iconian.com). Used on Logo Generator. Found through research. |
-| [**SUIT**](https://sun.fo/suit/) | Made by the folks at [sun.fo](https://sun.fo/suit/). Used on the Blabla Generator. |
+| [**SUIT**](https://sun.fo/suit/) | Made by the folks at [sun.fo](https://sun.fo/). Used on the Blabla Generator. |
 
 <br>
 
diff --git a/src/pages/update-log.md b/src/pages/update-log.md
index 3f85d6e..429c86e 100644
--- a/src/pages/update-log.md
+++ b/src/pages/update-log.md
@@ -9,6 +9,43 @@ embeddesc: the update log
 ---
 <br>
 
+## rewrite, indicators, choices, and more `Dec 18, 2023`
+
+**blabla gen**
+- **BREAKING** rewrote how blabla's are drawn
+    - this may or may not be good
+- **BREAKING** added choices
+    - they will always be on the end of the conversation and will not affect your chat's messages
+    - they will always be on the side of the Commander
+    - they will always take the color of the Commander's color
+- added in those "end" indicators -- type in "Indicator" as the character's name, and type in anything you want in place of the "END"
+- added in system messages -- type in "System" as the character's name, and type in anything you want in place of the "Syuen left the room." kinda text you see.
+- added in the Grid Background. it's unnoticeable in fullscreen (all of my refs did not have a grid background), but it subtle in other screens
+- made the scroll field more easy to know/use
+- added the ability to drag to scroll
+- added the ability to export as a json file and import as a json file
+    - this was meant to be dev only but i do not tend on removing it now
+    - you can open them on notepad to see what they contain; it's the conversation/chat you've been making.
+- added a cheeky warning below about Safari
+    - Apple, why.
+- the name you typed before switching to Commander will now be persistent when you switch back
+- fixed inconsistencies
+    - Commander's font is now always the Bold variant of Pretendard
+    - removed the weird letter spacing
+
+**dialogue gen**
+- added control type `Hide-Auto-Log-Cancel`
+- added control type `Auto-Log-Cancel`
+
+i unfortunately could not find a good fix for the Safari issue (text is offset vertically), but if i were to implement a fix, it would include manual user intervention; if yall want that, let me know.
+
+it seems that Reddit has been using this as well! i posted some feature previews in there and it gained some attention. to the folks at the Official Reddit -- thank you. the shitposting has been indeed awesome.
+
+<br>
+
+---
+<br>
+
 ## banger! `Dec 15, 2023`
 
 **blabla gen**
diff --git a/src/scripts/blabla.js b/src/scripts/blabla.js
index b257a11..4fd5958 100644
--- a/src/scripts/blabla.js
+++ b/src/scripts/blabla.js
@@ -113,7 +113,7 @@ response.json().then((e) => {
     nikkepfps['boss: nihilister'] = 'si_mba002_00_s';
     nikkepfps['boss: gatekeeper red'] = 'si_eba003_hsta_00_s';
     nikkepfps['boss: gatekeeper green'] = 'si_eba003_green_00_s';
-    nikkepfps['boss: gatekeeper blue'] = 'si_eba003_00_s.png';
+    nikkepfps['boss: gatekeeper blue'] = 'si_eba003_00_s';
 });
 
 let top = new Image();
@@ -132,6 +132,10 @@ let bot = new Image();
 bot.crossOrigin = "anonymous"
 bot.src = `/nikke-font-generator/images/blabla/bot.png`;
 
+let bot2 = new Image();
+bot2.crossOrigin = "anonymous"
+bot2.src = `/nikke-font-generator/images/blabla/bot2.png`;
+
 let arr = new Image();
 arr.crossOrigin = "anonymous"
 arr.src = `/nikke-font-generator/images/blabla/arrow.png`;
@@ -152,6 +156,14 @@ let r_sbub = new Image();
 r_sbub.crossOrigin = "anonymous"
 r_sbub.src = `/nikke-font-generator/images/blabla/r_bubbleshadow.png`;
 
+let sybub = new Image();
+sybub.crossOrigin = "anonymous"
+sybub.src = `/nikke-font-generator/images/blabla/systembubble.png`;
+
+let s_sybub = new Image();
+s_sybub.crossOrigin = "anonymous"
+s_sybub.src = `/nikke-font-generator/images/blabla/s_systembubble.png`;
+
 let mission_logo = new Image();
 mission_logo.crossOrigin = "anonymous"
 mission_logo.src = `/nikke-font-generator/images/blabla/logo_mission.png`;
@@ -222,127 +234,247 @@ setTimeout(() => {
     generateBlabla();
 }, 1000);
 
+// no names and no pfps
+let noname = [
+    'commander',
+    'system',
+    'indicator'
+]
+
+// loaded pfps
+let loaded = {};
+
 function generateBlabla() {
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     canvas.width = 540;
     canvas.height = 900;
 
-    ctx.drawImage(bot, 0, top.height);
+    ctx.drawImage(gridOn ? bot2 : bot, 0, top.height);
 
     if (!chatmode) {
         let curx = 107;
-        let cury = 174 + parseFloat(document.getElementById("ypos").value);
+        let cury = 174 + ypos;
 
-        let curSpeaker = ''
+        let curSpeaker = '';
 
         for (let i = 0; i < chats.length; i++) {
             let item = chats[i];
 
-            var nextSpeakerAdd = 0
             let switchedSpeakers = false;
-            if (curSpeaker != item.name) {
-                curSpeaker = item.name;
-
-                if (curSpeaker.toLowerCase() != 'commander') {
-                    curx = 107;
-
-                    ctx.font = "16px PEB";
-                    ctx.fillStyle = "#404040";
-                    ctx.textBaseline = "bottom";
-                    ctx.textAlign = "left";
-
-                    ctx.fillText(curSpeaker, curx + 9, cury - 5);
-                    switchedSpeakers = true
-                } else {
-                    curx = canvas.width - 24;
-                    // cury += 5;
-                    nextSpeakerAdd = -8;
-                }
+            let gap = 7;
+
+            if (curSpeaker != item.name.toLowerCase()) {
+                curSpeaker = item.name.toLowerCase();
+                switchedSpeakers = true;
             }
+
             if (chats[i + 1] != null) {
-                if (chats[i + 1].name.toLowerCase() != 'commander') {
-                    if (curSpeaker.toLowerCase() != chats[i + 1].name.toLowerCase()) {
-                        nextSpeakerAdd = 38;
+                if (curSpeaker != chats[i + 1].name.toLowerCase()) {
+                    switch (chats[i + 1].name.toLowerCase()) {
+                        case 'commander':
+                            gap = 12;
+                            break;
+                        case 'system':
+                            gap = 12;
+                            break;
+                        case 'indicator':
+                            gap = 58;
+                            break;
+                        default:
+                            gap = 50;
+                            break;
                     }
-                } else if (curSpeaker.toLowerCase() != 'commander') {
-                    nextSpeakerAdd = 8;
-                } else {
-                    nextSpeakerAdd = 0;
                 }
             }
 
-            ctx.font = "21px PEB";
+            ctx.font = "20px " + (curSpeaker.toLowerCase() == 'commander' ? 'PB' : 'PEB');
             ctx.fillStyle = "#333333";
             ctx.textBaseline = "top";
             ctx.textAlign = "left";
-            ctx.letterSpacing = '-0.8px'; // ?
 
             let width = ctx.measureText(item.message).width;
-            let actualWidth = width + 22 * 2 > 418 ? 418 : width + 22 * 2;
-            let textWidth = actualWidth - 22 * 2;
+
+            let innerBubbleWidth = width + 22 * 2 > 420 ? 420 : width + 22 * 2; // the bubble w/o shadow
+            let textWidth = innerBubbleWidth - 22 * 2; // could either be 418 - 22 * 2 or width - 22 * 2
             let lines = getLinesForParagraphs(ctx, item.message, textWidth);
-            let height = lines.length > 1 ? 19 + ((31) * (lines.length + 1)) : 81;
 
-            let ass = curSpeaker.toLowerCase() != 'commander' ? 37 : 34;
+            let height = lines.length * 31 + 24 + 13 * 2;
 
-            if (curSpeaker.toLowerCase() != 'commander') {
-                ctx.fillStyle = "#333333";
-                ctx.globalAlpha = 0.35;
-                draw9slice(ctx, sbub, [ass, 36, 1, 1], curx - 22, cury - 13, actualWidth + 29, lines.length == 1 ? 81 : height, item.color)
-                ctx.globalAlpha = 1;
-                draw9slice(ctx, bub, [ass, 36, 1, 1], curx - 22, cury - 13, actualWidth + 29, lines.length == 1 ? 81 : height, item.color)
+            let slicex = curSpeaker.toLowerCase() == 'commander' ? 33 : 37;
+
+            switch (curSpeaker.toLowerCase()) {
+                case 'commander':
+                    ctx.fillStyle = "#ffffff"
+                    ctx.globalAlpha = 0.35;
+                    draw9slice(ctx, r_sbub, [slicex, 35, 2, 2], canvas.width - 39 - innerBubbleWidth, cury - 13, innerBubbleWidth + 28, height)
+                    ctx.globalAlpha = 1;
+                    draw9slice(ctx, r_bub, [slicex, 35, 2, 2], canvas.width - 39 - innerBubbleWidth, cury - 13, innerBubbleWidth + 28, height, item.color)
 
-                if (lines.length > 1) {
                     for (let j = 0; j < lines.length; j++) {
-                        ctx.fillText(lines[j].trim(), curx - 6 + 21, cury + 19 + ((31) * j), textWidth);
+                        ctx.fillText(lines[j].trim(), canvas.width - 20 - innerBubbleWidth + 14, cury + 20 + ((31) * j), textWidth);
+
+                        // ctx.fillStyle = "#ff0000";
+                        // ctx.fillRect(canvas.width - 20 - innerBubbleWidth + 14, cury + 20 + ((31) * j), textWidth, 10);
                     }
-                } else {
-                    ctx.fillText(item.message.trim(), curx - 6 + 21, cury + 19, textWidth);
-                }
 
-                if (switchedSpeakers) {
-                    let pfpImg = new Image();
-                    pfpImg.crossOrigin = "anonymous";
-                    pfpImg.src = item.image;
-                    let pfpy = cury + (lines.length == 1 ? 81 : height) - 81;
-                    pfpImg.onload = function() {
-                        pfpCtx.drawImage(pfpMask, 0, 0);
-                        pfpCtx.globalCompositeOperation = 'source-in';
-                        
-                        pfpCtx2.fillStyle = '#ffffff';
-                        pfpCtx2.fillRect(0, 0, 74, 74);
-                        pfpCtx2.drawImage(pfpImg, 0, 0, 74, 74);
-
-                        pfpCtx.drawImage(pfpCanvas2, 0, 0);
-
-                        let diff = top.height - pfpy + 19;
-                        let cond = (diff > 0 ? diff : 0);
-
-                        ctx.drawImage(pfpCanvas, 0, diff > 0 ? diff : 0, 74, 74 - cond, 107 - 74 - 19, pfpy - 19 + cond, 74, 74 - cond)
+                    break;
+
+                case 'system':
+                    ctx.fillStyle = "#dcdcdc"
+                    ctx.textAlign = 'center';
+                    ctx.globalAlpha = 1;
+
+                    let shitwidth = width + 32 * 2 > 500 ? 500 : width + 32 * 2;
+                    draw9slice(ctx, sybub, [20, 22, 2, 2], (canvas.width - shitwidth) / 2, cury, shitwidth, lines.length == 1 ? 55 : 28 + ((29) * (lines.length)), ' #989898')
+
+                    for (let j = 0; j < lines.length; j++) {
+                        ctx.fillText(lines[j].trim(), canvas.width / 2, cury + 19 + ((29) * j), canvas.width);
                     }
-                    pfpImg.onerror = function() {
-                        pfpImg.src = '/nikke-font-generator/images/blabla/blabla_icon_chat.png';
+
+                    ctx.textAlign = 'left';
+
+                    break;
+                case 'indicator':
+                    ctx.fillStyle = "#b7b7b7"
+                    ctx.textAlign = 'center';
+                    ctx.globalAlpha = 1;
+
+                    ctx.font = "13px PB";
+
+                    let longest = 0;
+                    for (let j = 0; j < lines.length; j++) {
+                        ctx.fillText(lines[j].trim(), canvas.width / 2, cury + ((20) * j));
+
+                        let long = ctx.measureText(lines[j].trim()).width;
+                        if (long > longest) {
+                            longest = long;
+                        }
                     }
-                }
-            } else {
-                ctx.fillStyle = "#ffffff"
-                ctx.globalAlpha = 0.35;
-                draw9slice(ctx, r_sbub, [ass, 36, 1, 1], curx - actualWidth - 16, cury - 18, actualWidth + 29, lines.length == 1 ? 81 : height, item.color)
-                ctx.globalAlpha = 1;
-                draw9slice(ctx, r_bub, [ass, 36, 1, 1], curx - actualWidth - 16, cury - 18, actualWidth + 29, lines.length == 1 ? 81 : height, item.color)
 
-                if (lines.length > 1) {
+                    let lineWidth = Math.abs(13 - (canvas.width - longest) / 2) - 11;
+
+                    ctx.fillRect(13, cury - 5 + ((20 * lines.length) - 1) / 2, lineWidth, 1);
+                    ctx.fillRect(canvas.width - lineWidth - 13, cury - 5 + (((20) * lines.length) - 1) / 2, lineWidth, 1);
+
+
+                    break;
+
+                default:
+                    ctx.globalAlpha = 0.35;
+                    draw9slice(ctx, sbub, [slicex, 35, 2, 2], curx - 23, cury - 13, innerBubbleWidth + 30, height)
+                    ctx.globalAlpha = 1;
+                    draw9slice(ctx, bub, [slicex, 35, 2, 2], curx - 23, cury - 13, innerBubbleWidth + 30, height)
+
                     for (let j = 0; j < lines.length; j++) {
-                        ctx.fillText(lines[j].trim(), curx - actualWidth + 17, cury + 14 + ((31) * j), textWidth);
+                        ctx.fillText(lines[j].trim(), curx + 16, cury + 20 + ((31) * j), textWidth);
+
+                        // ctx.fillStyle = "#ff0000";
+                        // ctx.fillRect(curx + 16, cury + 20 + ((31) * j), textWidth, 10);
+                    }
+
+                    if (switchedSpeakers) {
+                        ctx.font = "16px PEB";
+                        ctx.fillStyle = "#404040";
+                        ctx.textBaseline = "bottom";
+                        ctx.textAlign = "left";
+
+                        ctx.fillText(item.name, curx + 9, cury - 5);
+
+                        if (loaded[item.name] != null) {
+                            let pfpImg = loaded[item.name];
+                            let pfpy = cury + height - 7 - 74;
+                            pfpCtx.drawImage(pfpMask, 0, 0);
+                            pfpCtx.globalCompositeOperation = 'source-in';
+                            
+                            pfpCtx2.fillStyle = '#ffffff';
+                            pfpCtx2.fillRect(0, 0, 74, 74);
+                            pfpCtx2.drawImage(pfpImg, 0, 0, 74, 74);
+
+                            pfpCtx.drawImage(pfpCanvas2, 0, 0);
+
+                            let diff = top.height - pfpy + 19;
+                            let cond = (diff > 0 ? diff : 0);
+
+                            ctx.drawImage(pfpCanvas, 0, diff > 0 ? diff : 0, 74, 74 - cond, 107 - 74 - 19, pfpy - 19 + cond, 74, 74 - cond)
+                        } else {
+                            let pfpImg = new Image();
+                            pfpImg.crossOrigin = "anonymous";
+                            pfpImg.src = item.image;
+                            pfpImg.onload = function() {
+                                if (loaded[item.name] == null) {
+                                    loaded[item.name] = pfpImg;
+                                    generateBlabla();
+                                }
+                            }
+                            pfpImg.onerror = function() {
+                                pfpImg.src = '/nikke-font-generator/images/blabla/blabla_icon_chat.png';
+                            }
+                        }
                     }
-                } else {
-                    ctx.fillText(item.message.trim(), curx - actualWidth + 17, cury + 14, textWidth);
+
+                    break;
+            }
+
+            cury += height - 26 + gap;
+        }
+
+        // draw choices
+        // someone please help me im fucking dying
+
+        if (document.getElementById("choices").value.trim().length > 0) {
+            let shit = document.getElementById("choices").value.trim().split('\n');
+            let maxWidth = 0;
+            let bubbleHeight = 0;
+            let innerbubcury = cury - 18;
+            let choices = [];
+
+            ctx.fillStyle = "#323232";
+            ctx.font = "20px PEB";
+            ctx.textBaseline = "top";
+            ctx.textAlign = "left";
+
+            for (let i = 0; i < shit.length; i++) {
+                let width = ctx.measureText(shit[i]).width;
+                let actualWidth = width + 41 * 2 > 447 ? 447 : width + 41 * 2;
+                let lines = getLinesForParagraphs(ctx, shit[i], actualWidth - 41 * 2);
+
+                if (actualWidth > maxWidth) {
+                    maxWidth = actualWidth;
                 }
+
+                choices.push({
+                    "boxwidth": actualWidth,
+                    "boxheight": lines.length * 31 + 22,
+                    "lines": lines
+                });
+
+                bubbleHeight += lines.length * 31 + 22;
             }
 
-            cury += height - 9 + nextSpeakerAdd - 10;
+            const bx = canvas.width - 24 - (maxWidth + 30 + 22 * 2) + 13;
+            const by = cury - 13;
+
+            ctx.globalAlpha = 0.35;
+            draw9slice(ctx, r_sbub, [37, 35, 2, 2], bx, by, maxWidth + 30 + 22 * 2, bubbleHeight + 7 * (choices.length - 1) + 13 * 4)
+            ctx.globalAlpha = 1;
+            draw9slice(ctx, r_bub, [37, 35, 2, 2], bx, by, maxWidth + 30 + 22 * 2, bubbleHeight + 7 * (choices.length - 1) + 13 * 4, document.getElementById("com-color").value)
+
+            for (let i = 0; i < choices.length; i++) {
+                let fuck = choices[i];
+                let ibx = bx + ((maxWidth + 30 + 22 * 2) - fuck.boxwidth) / 2;
+                let iby = innerbubcury + 26;
+
+                ctx.globalAlpha = 0.5;
+                draw9slice(ctx, s_sybub, [26, 28, 2, 2], ibx - 6, iby - 2, fuck.boxwidth + 12, fuck.boxheight + 12);
+                ctx.globalAlpha = 1;
+                draw9slice(ctx, sybub, [20, 22, 2, 2], ibx, iby + 4, fuck.boxwidth, fuck.boxheight, ' #ffffff');
+
+                for (let j = 0; j < fuck.lines.length; j++) {
+                    ctx.fillText(fuck.lines[j].trim(), ibx + (fuck.boxwidth - ctx.measureText(fuck.lines[j].trim()).width) / 2, iby + 24 + (j * 31), fuck.boxwidth - 41 * 2);
+                }
 
-            ctx.letterSpacing = '0px';
+                innerbubcury += fuck.boxheight + 7;
+            }
         }
 
         ctx.drawImage(top, 0, 0);
@@ -366,9 +498,10 @@ function generateBlabla() {
         ctx.fillStyle = "#ffffff";
         ctx.globalAlpha = 1.0;
         ctx.fillText(chatname, 60, 70);
+    
     } else {
         let curx = 18;
-        let cury = 233 + parseFloat(document.getElementById("ypos").value);
+        let cury = 233 + ypos;
 
         ctx.font = "16px PEB";
         ctx.textBaseline = "top";
@@ -465,6 +598,7 @@ function generateBlabla() {
     ctx.fillText(document.getElementById('chattime').value, 42, 14);
 }
 
+
 let currentImage = '';
 
 document.getElementById("char-img-up").onchange = (e) => {
@@ -479,10 +613,12 @@ document.getElementById("char-img-up").onchange = (e) => {
     }
 }
 
-document.getElementById("add").onclick = (e) => {
+document.getElementById("add").onclick = addChat;
+
+function addChat(e) {
     chats.push({
         'name': document.getElementById("charname").value,
-        'image': currentImage,
+        'image': noname.includes(document.getElementById("charname").value.toLowerCase()) ? '' : currentImage,
         'message': document.getElementById("chatter").value,
         'color': document.getElementById("color").value,
     });
@@ -513,11 +649,16 @@ document.getElementById("arrow-toggle").onclick = (e) => {
 }
 
 document.getElementById("set-oth").onclick = (e) => {
-    document.getElementById("charname").value = '';
+    document.getElementById("charname").value = prevChat;
     document.getElementById("color").value = '#ffffff';
 }
 
+let prevChat = ''
 document.getElementById("set-com").onclick = (e) => {
+    if (document.getElementById("charname").value.toLowerCase() != 'commander') {
+        prevChat = document.getElementById("charname").value;
+    }
+    
     document.getElementById("charname").value = 'Commander';
     document.getElementById("color").value = document.getElementById("com-color").value;
 }
@@ -553,6 +694,10 @@ document.getElementById("chattime").oninput = (e) => {
     generateBlabla();
 }
 
+document.getElementById("choices").oninput = (e) => {
+    generateBlabla();
+}
+
 let wifiOn = true;
 document.getElementById("wifi-toggle").onclick = (e) => {
     wifiOn = !wifiOn;
@@ -599,11 +744,62 @@ document.getElementById("char-pres-edit").oninput = (e) => {
     }
 }
 
+let ypos = 0;
+document.getElementById("ypos").oninput = (e) => {
+    ypos = parseFloat(document.getElementById("ypos").value);
+    generateBlabla();
+}
+
 document.getElementById("color-edit").onchange = (e) => {
     chats[parseInt(document.getElementById("message-index-edit").value)].color = document.getElementById("color-edit").value
     generateBlabla();
 }
 
+let dragOn = false;
+document.getElementById("drag-toggle").onclick = (e) => {
+    dragOn = !dragOn;
+    document.getElementById("drag-toggle").innerHTML = "Drag: " + (dragOn ? "ON" : "OFF");
+    generateBlabla();
+}
+
+let mousecapture = [0, 0];
+let previous = [0, 0];
+let dragging = false;
+
+document.querySelectorAll('canvas#blabla-canvas')[0].addEventListener('pointerdown', (e) => {
+    if (dragging) return;
+    dragging = true;
+
+    if (dragOn) {
+        previous[0] = 0;
+        previous[1] = ypos;
+    }
+
+    mousecapture[0] = e.clientX;
+    mousecapture[1] = e.clientY;
+
+    if (dragOn) {
+        disableScroll();
+    }
+});
+
+document.querySelectorAll('canvas#blabla-canvas')[0].addEventListener('pointermove', (e) => {
+    if (!dragging) return;
+
+    if (dragOn) {
+        ypos = e.clientY + (previous[1] - mousecapture[1]);
+        document.getElementById("ypos").value = ypos;
+    }
+
+    generateBlabla();
+});
+
+document.querySelectorAll('canvas#blabla-canvas')[0].addEventListener('pointerup', (e) => {
+    if (!dragging) return;
+    dragging = false;
+
+    enableScroll();
+});
 
 document.getElementById("char-img-edit").onchange = (e) => {
     const fileList = document.querySelectorAll('#char-img-edit')[0].files;
@@ -619,6 +815,8 @@ document.getElementById("char-img-edit").onchange = (e) => {
 }
 
 document.getElementById("blabla-canvas").onclick = () => {
+    if (dragOn) return;
+
     var link = document.createElement('a');
     var canvas = document.getElementById('blabla-canvas')
     link.download = 'nikke-blabla.png';
@@ -694,6 +892,96 @@ document.getElementById("group-page").onclick = () => {
     generateBlabla();
 }
 
+let gridOn = false;
+document.getElementById("grid-toggle").onclick = () => {
+    gridOn = !gridOn;
+
+    document.getElementById("grid-toggle").innerHTML = "Grid Background: " + (gridOn ? "ON" : "OFF");
+
+    generateBlabla();
+}
+
+document.getElementById("chat-json-up").onchange = (e) => {
+    const fileList = document.getElementById("chat-json-up").files;
+    const filer = new FileReader();
+    filer.onload = (e) => {
+        const json = JSON.parse(e.target.result.toString());
+
+        chats = json.chats;
+        chatname = json.chatname;
+        ypos = 0;
+        document.getElementById("ypos").value = ypos;
+        document.getElementById('chattime').value = json.chattime;
+
+        generateBlabla();
+    };
+    if (fileList.length > 0) {
+        filer.readAsText(fileList[0]);
+    }
+};
+document.getElementById("export").onclick = exportChat;
+
+document.getElementById("com-color").onchange = () => {
+    generateBlabla();
+}
+
+document.onkeydown = function (e) {
+    if (e.ctrlKey) {
+        switch (e.key.toLowerCase()) {
+            case 'e':
+                e.preventDefault();
+                exportChat();
+                break;
+            case 'enter':
+                e.preventDefault();
+                addChat();
+                break;
+            default:
+                break;
+        }
+    }
+};
+
+function disableScroll() {
+    if (!dragOn) return;
+    let scrollTop = window.scrollY || document.documentElement.scrollTop;
+    let scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+
+    window.onscroll = function (e) {
+        window.scrollTo(scrollLeft, scrollTop, "instant");
+    };
+    
+    window.onwheel = (e) => {
+        ypos += (e.deltaY / -10) * 5;
+        document.getElementById("ypos").value = ypos;
+        generateBlabla();
+    }
+}
+
+function enableScroll() {
+    if (!dragOn) return;
+    window.onscroll = function () { };
+    window.onwheel = (e) => { }
+}
+
+canvas.onpointerenter = disableScroll;
+canvas.onpointerleave = enableScroll;
+
+function exportChat() {
+    let item = {
+        "chats": chats,
+        "chatname": chatname,
+        "chattime": document.getElementById('chattime').value
+    }
+    const link = document.createElement("a");
+    const file = new Blob([JSON.stringify(item, null, "\t")], { type: 'application/json' });
+    link.href = URL.createObjectURL(file);
+    link.download = "chats.json";
+    link.click();
+
+    URL.revokeObjectURL(link.href);
+}
+
 function getLinesForParagraphs(ctx, text, maxWidth) {
     let ass = text.split("\n").map(para => getLines(ctx, para, maxWidth))
     let res = []
@@ -708,15 +996,20 @@ function getLinesForParagraphs(ctx, text, maxWidth) {
 }
 
 function getLines(ctx, text, maxWidth) {
-    var words = text.split(" ");
+    const sep = text.includes(" ") ? " " : "";
+    var words = text.split(sep);
     var lines = [];
     var currentLine = words[0];
 
+    if (text.length <= 0) {
+        return [''];
+    }
+
     for (var i = 1; i < words.length; i++) {
         var word = words[i];
-        var width = ctx.measureText(currentLine + " " + word).width;
+        var width = ctx.measureText(currentLine + sep + word).width;
         if (width <= maxWidth) {
-            currentLine += " " + word;
+            currentLine += sep + word;
         } else {
             lines.push(currentLine);
             currentLine = word;
diff --git a/src/scripts/dialogue.js b/src/scripts/dialogue.js
index 558f166..3c0c74c 100644
--- a/src/scripts/dialogue.js
+++ b/src/scripts/dialogue.js
@@ -199,10 +199,11 @@ document.querySelectorAll('#cotype')[0].addEventListener('change', () => {
 
     let prev = [coposoffset[0], coposoffset[1]];
 
+    let add = n.endsWith("cancel") ? -33 : 0;
     if (n.startsWith('auto')) {
-        coposoffset = [-6, -6];
+        coposoffset = [-6 + add, -6];
     } else if (n.startsWith('hide')) {
-        coposoffset = [-102, -11];
+        coposoffset = [-102 + add, -11];
     }
 
     copos[0] += (coposoffset[0] - prev[0]) * scaledc / 100;