diff --git a/kit/src/app.css b/kit/src/app.css
index ee27fbe42..4bf8c7f0c 100644
--- a/kit/src/app.css
+++ b/kit/src/app.css
@@ -264,21 +264,25 @@
 
 .prose code {
 	@apply font-normal;
+	direction: ltr;
 }
 
 .prose code,
 .prose strong {
 	@apply text-gray-800;
+	direction: ltr;
 }
 
 .prose .course-tip code,
 .prose .course-tip a {
 	@apply text-green-800 dark:text-green-600;
+	direction: ltr;
 }
 
 .prose .course-tip.course-tip-orange code,
 .prose .course-tip.course-tip-orange a {
 	@apply text-orange-800 dark:text-orange-600;
+	direction: ltr;
 }
 
 .prose .course-tip ul {
@@ -303,10 +307,12 @@
 
 .prose.prose-doc .code-block {
 	@apply -mx-3 text-smd md:mx-0 md:text-base;
+	direction: ltr;
 }
 
 .prose.prose-doc .code-block pre {
 	@apply border border-gray-100;
+	direction: ltr;
 }
 
 .prose.prose-doc > p > em {
@@ -406,3 +412,7 @@
 .prose.prose-course p {
 	@apply md:mb-8;
 }
+
+.direction-rtl {
+	direction: rtl;
+}
\ No newline at end of file
diff --git a/kit/src/routes/+layout.svelte b/kit/src/routes/+layout.svelte
index 9e9949928..534fe3c46 100644
--- a/kit/src/routes/+layout.svelte
+++ b/kit/src/routes/+layout.svelte
@@ -3,13 +3,16 @@
 	import { base } from "$app/paths";
 	import type { RawChapter } from "./endpoints/toc/+server";
 	import "../app.css";
-
+	export const DOCS_LANGUAGE = "${process.env.DOCS_LANGUAGE}";
 	export let data;
 	export let toc: RawChapter[] = data.toc ?? [];
+	export const DOCS_DIRECTION =  (DOCS_LANGUAGE == "ar") ? "rtl" : "ltr" ;
 </script>
 
 {#if !import.meta.env.DEV}
-	<slot />
+	<div class="direction-{DOCS_DIRECTION}">
+ 		<slot />
+    </div>
 {:else}
 	<style>
 		body,
@@ -19,7 +22,7 @@
 		}
 	</style>
 	<div
-		class="flex"
+		class="flex direction-{DOCS_DIRECTION}"
 	>
 		<div class="w-[270px] 2xl:w-[300px] hidden md:block border-r-2 shrink-0">
 			<ul class="pt-2 flex flex-col pl-3 w-full">
diff --git a/kit/tailwind.config.cjs b/kit/tailwind.config.cjs
index 835de535a..a745def8d 100644
--- a/kit/tailwind.config.cjs
+++ b/kit/tailwind.config.cjs
@@ -154,6 +154,9 @@ module.exports = {
 				1: "1",
 				"-1": "-1",
 			},
+			direction: {
+				rtl: "rtl",
+ 			},
 		},
 	},
 	plugins: [