diff --git a/apps/docs/docs/guides/rtl.md b/apps/docs/docs/guides/rtl.md
new file mode 100644
index 0000000000..424b57c3ce
--- /dev/null
+++ b/apps/docs/docs/guides/rtl.md
@@ -0,0 +1,28 @@
+# Enable RTL
+
+- Head over to the "Theme" tab
+- Paste the following Custom CSS:
+
+```css
+body {
+  direction: rtl;
+}
+
+.typebot-avatar-container {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+
+.typebot-guest-bubble {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+
+.bubble1,
+.bubble2 {
+  margin-right: 0;
+  margin-left: 0.25rem;
+}
+```
+
+If there is any visual flaw, [contact me](mailto:support@typebot.freshdesk.com) so that I can adjust the CSS rules
diff --git a/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx b/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx
index 0d15bbdb69..6926513491 100644
--- a/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx
+++ b/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx
@@ -43,7 +43,7 @@ export const AvatarSideContainer = forwardRef(
 
     return (
       <div
-        className="flex w-6 xs:w-10 mr-2 mb-2 flex-shrink-0 items-center relative "
+        className="flex w-6 xs:w-10 mr-2 mb-2 flex-shrink-0 items-center relative typebot-avatar-container "
         ref={scrollingSideBlockRef}
       >
         <CSSTransition