diff --git a/src/app.css b/src/app.css
index 597c45b..6748daa 100644
--- a/src/app.css
+++ b/src/app.css
@@ -109,17 +109,28 @@
 }
 html {
   background: var(--canvas);
+  direction: rtl;
+  height: 100%;
+  overflow: hidden;
 }
 body {
   margin: 0;
   min-width: 320px;
-  min-height: 100vh;
+  height: 100%;
+  overflow: hidden;
+  direction: rtl;
   background: var(--canvas);
   color: var(--text);
   font-family: 'IRANYekanX', Tahoma, sans-serif;
   font-size: 15px;
   line-height: 1.8;
 }
+#app-scroll-root {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  direction: rtl;
+}
 button,
 input,
 select {
diff --git a/src/app.html b/src/app.html
index fb472a3..f8468a4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -18,6 +18,6 @@
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
+    <div id="app-scroll-root">%sveltekit.body%</div>
   </body>
 </html>