diff --git a/index.html b/index.html
index 939caab..6151927 100644
--- a/index.html
+++ b/index.html
@@ -135,9 +135,6 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer</h1>
                         <i class="bi bi-share"></i> <span class="btn-text">Share</span>
                     </button>
                     
-                    <button id="direction-toggle" class="tool-button" title="Toggle RTL/LTR" aria-label="Toggle text direction">
-                        <i class="bi bi-text-right"></i>
-                    </button>
                     <button id="theme-toggle" class="tool-button" title="Toggle Dark Mode">
                         <i class="bi bi-moon"></i>
                     </button>
@@ -276,6 +273,7 @@ <h5>Menu</h5>
             <button type="button" class="markdown-tool-btn" data-md-action="align-left" title="Align left" aria-label="Align left"><i class="bi bi-text-left"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="align-center" title="Align center" aria-label="Align center"><i class="bi bi-text-center"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="align-right" title="Align right" aria-label="Align right"><i class="bi bi-text-right"></i></button>
+            <button type="button" id="direction-toggle" class="markdown-tool-btn text-tool" title="Switch to RTL" aria-label="Toggle text direction" aria-pressed="false">L</button>
           </div>
           <div class="markdown-toolbar-group heading-group">
             <button type="button" class="markdown-tool-btn text-tool" data-md-action="heading" data-md-level="1" title="Heading 1" aria-label="Heading 1">H1</button>
diff --git a/script.js b/script.js
index 2d8ca04..d0b82d1 100644
--- a/script.js
+++ b/script.js
@@ -215,9 +215,7 @@ document.addEventListener("DOMContentLoaded", function () {
     const isRtl = direction === "rtl";
     const toggleLabel = isRtl ? "Switch to LTR" : "Switch to RTL";
     if (directionToggle) {
-      directionToggle.innerHTML = isRtl
-        ? '<i class="bi bi-text-left"></i>'
-        : '<i class="bi bi-text-right"></i>';
+      directionToggle.textContent = isRtl ? "R" : "L";
       directionToggle.setAttribute("title", toggleLabel);
       directionToggle.setAttribute("aria-label", toggleLabel);
       directionToggle.setAttribute("aria-pressed", isRtl.toString());
@@ -232,7 +230,11 @@ document.addEventListener("DOMContentLoaded", function () {
 
   const savedDirection = loadGlobalState().direction;
   const initialDirection = savedDirection === "rtl" ? "rtl" : "ltr";
-  document.documentElement.setAttribute("dir", initialDirection);
+  function applyDirectionToContent(direction) {
+    if (markdownEditor) markdownEditor.setAttribute("dir", direction);
+    if (markdownPreview) markdownPreview.setAttribute("dir", direction);
+  }
+  applyDirectionToContent(initialDirection);
   updateDirectionToggleUI(initialDirection);
 
   const initMermaid = () => {
@@ -3588,9 +3590,9 @@ This is a fully client-side application. Your content never leaves your browser
       if (directionToggle) {
         directionToggle.click();
       } else {
-        const direction =
-          document.documentElement.getAttribute("dir") === "rtl" ? "ltr" : "rtl";
-        document.documentElement.setAttribute("dir", direction);
+        const currentDir = markdownEditor ? markdownEditor.getAttribute("dir") : "ltr";
+        const direction = currentDir === "rtl" ? "ltr" : "rtl";
+        applyDirectionToContent(direction);
         saveGlobalState({ direction });
         updateDirectionToggleUI(direction);
       }
@@ -3703,9 +3705,9 @@ This is a fully client-side application. Your content never leaves your browser
   toggleSyncButton.addEventListener("click", toggleSyncScrolling);
   if (directionToggle) {
     directionToggle.addEventListener("click", function () {
-      const direction =
-        document.documentElement.getAttribute("dir") === "rtl" ? "ltr" : "rtl";
-      document.documentElement.setAttribute("dir", direction);
+      const currentDir = markdownEditor ? markdownEditor.getAttribute("dir") : "ltr";
+      const direction = currentDir === "rtl" ? "ltr" : "rtl";
+      applyDirectionToContent(direction);
       saveGlobalState({ direction });
       updateDirectionToggleUI(direction);
     });