diff --git a/.gitignore b/.gitignore
index fdd96b5..173f51a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -105,3 +105,6 @@ assets
 
 # TernJS port file
 .tern-port
+
+# ide
+.idea
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index faf43b9..ef445f4 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -22,7 +22,8 @@ export const ButtonStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
     textDecoration: 'none',
     fontSize: '16px',
     margin: 8,
-    marginRight: 0,
+    marginRight: theme.rtl ? 8 : 0,
+    marginLeft: theme.rtl ? 0 : 8,
     verticalAlign: 'middle',
 
     'body.dark-mode-animate &': {
diff --git a/src/components/button/buttons.tsx b/src/components/button/buttons.tsx
index 4de3b20..0c0950a 100644
--- a/src/components/button/buttons.tsx
+++ b/src/components/button/buttons.tsx
@@ -1,6 +1,16 @@
 import { RendererLike } from '@connectv/html';
+import {ThemedComponentThis} from "@connectv/jss-theme";
 
+import {CodedocTheme} from "../../theme";
 
-export function Buttons(_: any, renderer: RendererLike<any, any>, content: any) {
-  return <div style="text-align: right">{content}</div>
+interface ButtonsOptions {}
+
+export function Buttons(
+  this: ThemedComponentThis<CodedocTheme>,
+  options: ButtonsOptions,
+  renderer: RendererLike<any, any>,
+  content: any
+) {
+  const { rtl } = this.theme.theme;
+  return <div style={`text-align: ${rtl ? 'left' : 'right'}`}>{content}</div>
 }
diff --git a/src/components/code/style.ts b/src/components/code/style.ts
index 0e17ff5..961ee20 100644
--- a/src/components/code/style.ts
+++ b/src/components/code/style.ts
@@ -5,6 +5,7 @@ import { CodedocTheme } from '../../theme';
 
 export const CodeStyle = themedStyle<CodedocTheme>(theme => ({
   code: {
+    direction: 'ltr',
     userSelect: 'none',
     WebkitUserSelect: 'none',
     background: theme.code.light.background,
diff --git a/src/components/collapse/index.tsx b/src/components/collapse/index.tsx
index 2b45f8e..171d48c 100644
--- a/src/components/collapse/index.tsx
+++ b/src/components/collapse/index.tsx
@@ -19,12 +19,13 @@ export function Collapse(
   content: any
 ) {
   const classes = this.theme.classes(CollapseStyle);
+  const { rtl } = this.theme.theme;
   return (
     <div class={`${classes.collapse} ${options.default === 'open' ? 'open' : ''}`}>
       <CollapseControl$/>
       <div class="label" onclick="this.parentElement.classList.toggle('open')">
         <span class="text">{options.label}</span>
-        <span class="icon-font closed">chevron_right</span>
+        <span class="icon-font closed">{`chevron_${rtl ? 'left' : 'right'}`}</span>
       </div>
       <div class="content">{content}</div>
     </div>
diff --git a/src/components/collapse/style.ts b/src/components/collapse/style.ts
index b1d54ca..b204e24 100644
--- a/src/components/collapse/style.ts
+++ b/src/components/collapse/style.ts
@@ -15,7 +15,8 @@ export const CollapseStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
 
       '& .text': {flexGrow: 1},
       '& .icon-font': {
-        marginRight: 32,
+        marginRight: theme.rtl ? 0 : 32,
+        marginLeft: theme.rtl ? 32 : 0,
         'body.dark-mode-animate &': { transition: 'transform .15s', },
       },
 
@@ -40,8 +41,10 @@ export const CollapseStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
       maxHeight: 0,
       visibility: 'hidden',
       transition: 'opacity .3s',
-      paddingLeft: 16,
-      borderLeft: `2px solid ${Color(theme.light.border).alpha(.5).toString()}`,
+      paddingLeft: theme.rtl ? 0 : 16,
+      paddingRight: theme.rtl ? 16 : 0,
+      borderLeft: theme.rtl ? 'none' : `2px solid ${Color(theme.light.border).alpha(.5).toString()}`,
+      borderRight: theme.rtl ? `2px solid ${Color(theme.light.border).alpha(.5).toString()}` : 'none',
 
       'body.dark-mode-animate &': {
         transition: 'transform .15s, opacity .15s, border-color .3s'
diff --git a/src/components/footnote/style.ts b/src/components/footnote/style.ts
index 10c813c..d88f2b6 100644
--- a/src/components/footnote/style.ts
+++ b/src/components/footnote/style.ts
@@ -7,7 +7,8 @@ export const FootnoteStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
     '&>div': {
       display: 'flex',
       '&>span': {
-        marginRight: 16,
+        marginRight: theme.rtl ? 0 : 16,
+        marginLeft: theme.rtl ? 16 : 0,
         fontWeight: 'bold',
       },
       '&>marker>p': {
diff --git a/src/components/formula/style.ts b/src/components/formula/style.ts
index 1f47098..fca29ce 100644
--- a/src/components/formula/style.ts
+++ b/src/components/formula/style.ts
@@ -61,7 +61,8 @@ export const FormulaStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
 
     '& .counter': {
       position: 'absolute',
-      left: 8,
+      left: theme.rtl ? 'unset' : 8,
+      tight: theme.rtl ? 8 : 'unset',
       top: 0,
       bottom: 0,
       display: 'flex',
diff --git a/src/components/heading/index.tsx b/src/components/heading/index.tsx
index 6dd6ca8..5f3159e 100644
--- a/src/components/heading/index.tsx
+++ b/src/components/heading/index.tsx
@@ -12,8 +12,10 @@ export const HeadingStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
   },
   anchor: {
     position: 'absolute',
-    left: '-32px',
-    paddingRight: '8px',
+    left: theme.rtl ? 'unset' : '-32px',
+    right: theme.rtl ? '-32px' : 'unset',
+    paddingRight: theme.rtl ? 0 : 8,
+    paddingLeft: theme.rtl ? 8 : 0,
     top: 0, bottom: 0,
     display: 'flex',
     alignItems: 'center',
diff --git a/src/components/misc/gitter/style.ts b/src/components/misc/gitter/style.ts
index b528fbe..69e6787 100644
--- a/src/components/misc/gitter/style.ts
+++ b/src/components/misc/gitter/style.ts
@@ -9,7 +9,11 @@ export const GitterStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
   },
   holder: {
     position: 'fixed',
-    right: 32,
+    ...(theme.rtl ? {
+      left: 32,
+    } : {
+      right: 32,
+    }),
     bottom: 32,
     width: 480,
     maxWidth: 'calc(100vw - 64px)',
diff --git a/src/components/page/contentnav/style.ts b/src/components/page/contentnav/style.ts
index 5b13bbd..c570056 100644
--- a/src/components/page/contentnav/style.ts
+++ b/src/components/page/contentnav/style.ts
@@ -6,14 +6,21 @@ import { CodedocTheme } from '../../../theme';
 export const ContentNavStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
   contentnav: {
     position: 'fixed',
-    right: 0,
+    ...(theme.rtl ? {
+      left: 0,
+      borderRight: `1px dashed ${theme.light.border}`,
+      paddingRight: 48,
+      marginRight: 64,
+    } : {
+      right: 0,
+      borderLeft: `1px dashed ${theme.light.border}`,
+      paddingLeft: 48,
+      marginLeft: 64,
+    }),
     bottom: 96,
     width: 'calc(50vw - 496px)',
     maxHeight: '45vh',
     overflow: 'auto',
-    borderLeft: `1px dashed ${theme.light.border}`,
-    paddingLeft: 48,
-    marginLeft: 64,
     fontSize: 12,
     scrollBehavior: 'initial',
 
@@ -36,11 +43,19 @@ export const ContentNavStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => (
         opacity: 1,
       },
 
-      '&.h2': { marginLeft: 12 },
-      '&.h3': { marginLeft: 24 },
-      '&.h4': { marginLeft: 36 },
-      '&.h5': { marginLeft: 48 },
-      '&.h6': { marginLeft: 60 },
+      ...(theme.rtl ? {
+        '&.h2': { marginRight: 12 },
+        '&.h3': { marginRight: 24 },
+        '&.h4': { marginRight: 36 },
+        '&.h5': { marginRight: 48 },
+        '&.h6': { marginRight: 60 },
+      } : {
+        '&.h2': { marginLeft: 12 },
+        '&.h3': { marginLeft: 24 },
+        '&.h4': { marginLeft: 36 },
+        '&.h5': { marginLeft: 48 },
+        '&.h6': { marginLeft: 60 },
+      })
     },
 
     '@media (prefers-color-scheme: dark)': {
diff --git a/src/components/page/footer/index.tsx b/src/components/page/footer/index.tsx
index 91a4919..24302a2 100644
--- a/src/components/page/footer/index.tsx
+++ b/src/components/page/footer/index.tsx
@@ -14,13 +14,13 @@ export function Footer(
   content: any
 ) {
   const classes = this.theme.classes(FooterStyle);
-
+  const { rtl } = this.theme.theme;
   return <div class={classes.footer}>
-    <div class="left"><ToCToggle$/></div>
+    <div class={rtl ? "right" : "left"}><ToCToggle$/></div>
     <div class="main">
       <div class="inside">{content}</div>
     </div>
-    <div class="right"><DarkModeSwitch$/></div>
+    <div class={rtl ? "left" : "right"}><DarkModeSwitch$/></div>
   </div>
 }
 
diff --git a/src/components/page/header/style.ts b/src/components/page/header/style.ts
index 8d7e8f0..fc6e637 100644
--- a/src/components/page/header/style.ts
+++ b/src/components/page/header/style.ts
@@ -6,7 +6,12 @@ import { CodedocTheme } from '../../../theme';
 export const HeaderStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
   header: {
     position: 'fixed',
-    top: 0, right: 0,
+    top: 0,
+    ...(theme.rtl ? {
+      left: 0,
+    } : {
+      right: 0,
+    }),
     zIndex: 100,
     padding: 32,
     textAlign: 'right',
diff --git a/src/components/page/style.ts b/src/components/page/style.ts
index 7505872..4a252fb 100644
--- a/src/components/page/style.ts
+++ b/src/components/page/style.ts
@@ -5,6 +5,9 @@ import { CodedocTheme } from '../../theme';
 
 export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
   '@global': {
+    html: {
+      direction: theme.rtl ? 'rtl' : 'ltr'
+    },
     '*': {
       scrollBehavior: 'smooth',
       touchAction: 'manipulation',
@@ -65,7 +68,7 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
       borderCollapse: 'collapse',
 
       '& th, & td': {
-        textAlign: 'left',
+        textAlign: 'right',
         padding: '8px 16px',
         'body.dark-mode-animate &': {
           transition: 'border-color .3s',
@@ -74,11 +77,11 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
 
       '& th': {
         borderBottom: `1px solid ${color(theme.light.border).mix(color(theme.light.text), .15).hex()}`,
-  
+
         'body.dark &': {
           borderColor: color(theme.dark.border).mix(color(theme.dark.text), .15).hex(),
         },
-  
+
         '@media (prefers-color-scheme: dark)': {
           'body:not(.dark-mode-animate) &': {
             borderColor: color(theme.dark.border).mix(color(theme.dark.text), .15).hex(),
@@ -88,11 +91,11 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
 
       '& td': {
         borderBottom: `1px solid ${theme.light.border}`,
-  
+
         'body.dark &': {
           borderColor: theme.dark.border,
         },
-  
+
         '@media (prefers-color-scheme: dark)': {
           'body:not(.dark-mode-animate) &': {
             borderColor: theme.dark.border,
@@ -106,7 +109,7 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
         'body.dark &': {
           background: theme.quote.dark.background,
         },
-  
+
         '@media (prefers-color-scheme: dark)': {
           'body:not(.dark-mode-animate) &': {
             background: theme.quote.dark.background,
@@ -169,7 +172,7 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
         bottom: '16px',
         width: '8px',
         display: 'block',
-        background: `radial-gradient(circle at center, ${theme.quote.light.border} 50%, transparent 52%),transparent`, 
+        background: `radial-gradient(circle at center, ${theme.quote.light.border} 50%, transparent 52%),transparent`,
         backgroundSize: '4px 4px',
 
         'body.dark-mode-animate &': {
@@ -186,7 +189,7 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
         '& blockquote': {
           background: theme.quote.dark.background,
           color: theme.quote.dark.text,
-  
+
           '&:after': {
             background: `radial-gradient(circle at center, ${theme.quote.dark.border} 50%, transparent 52%),transparent`,
             backgroundSize: '4px 4px',
@@ -219,7 +222,7 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
       borderRadius: 3,
       border: 'none',
       background: 'white',
-      
+
     },
 
     code: {
@@ -246,4 +249,4 @@ export const PageStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
       },
     }
   }
-}));
\ No newline at end of file
+}));
diff --git a/src/components/page/toc/prevnext/index.tsx b/src/components/page/toc/prevnext/index.tsx
index 6a50abf..9870155 100644
--- a/src/components/page/toc/prevnext/index.tsx
+++ b/src/components/page/toc/prevnext/index.tsx
@@ -23,7 +23,7 @@ export function ToCPrevNext(
 ) {
   const classes = this.theme.classes(ToCPrevNextStyle);
   const holder = ref<HTMLElement>();
-
+  const { rtl } = this.theme.theme;
   this.track({
     bind() {
       setTimeout(() => {
@@ -56,7 +56,7 @@ export function ToCPrevNext(
                 <span class={classes.label}>{options['next-label'] || 'Next'}</span>
                 <span class={classes.title}>{next$.textContent}</span>
               </div>
-              <span class="icon-font">{options["next-icon"] || 'arrow_forward_ios'}</span>
+              <span class="icon-font">{options["next-icon"] || rtl ? 'arrow_back_ios' : 'arrow_forward_ios'}</span>
             </a>).on(holder.$);
           }
         }
diff --git a/src/components/page/toc/style.ts b/src/components/page/toc/style.ts
index 60d71a2..bb765c9 100644
--- a/src/components/page/toc/style.ts
+++ b/src/components/page/toc/style.ts
@@ -10,13 +10,15 @@ export const TocStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
     display: 'flex',
     zIndex: 101,
     flexDirection: 'column',
-    left: 0,
+    left: theme.rtl ? 'unset' : 0,
+    right: theme.rtl ? 0 : 'unset',
     top: 0,
     bottom: 0,
     paddingBottom: 64,
     width: 'calc(50vw - 464px)',
-    transform: 'translateX(-50vw)',
-    borderRight: `1px solid ${theme.toc.light.border}`,
+    transform: theme.rtl ? 'translateX(50vw)' : 'translateX(-50vw)',
+    borderRight: theme.rtl ? 'none' : `1px solid ${theme.toc.light.border}`,
+    borderLeft: theme.rtl ? `1px solid ${theme.toc.light.border}` : 'none',
 
     background: theme.toc.light.background,
 
@@ -41,7 +43,7 @@ export const TocStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
 
     '@media screen and (max-width: 1200px)': {
       width: '100vw',
-      transform: 'translateX(-110vw)',
+      transform: theme.rtl ? 'translateX(110vw)' : 'translateX(-110vw)',
     },
 
     '&.animated': {
@@ -58,11 +60,15 @@ export const TocStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
       display: 'block',
       textDecoration: 'none',
       borderRadius: 3,
-      marginLeft: -8,
-      marginRight: 1,
+      marginLeft: theme.rtl ? 1 : -8,
+      marginRight: theme.rtl ? -8 : 1,
       padding: 8,
       border: `1px solid transparent`,
-      borderRight: 'none',
+      ...(theme.rtl ? {
+        borderLeft: 'none',
+      } : {
+        borderRight: 'none',
+      }),
 
       'body.dark-mode-animate &': { transition: 'border-color .3s, background .3s' },
 
@@ -79,9 +85,15 @@ export const TocStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
       },
 
       '&.current': {
-        marginRight: 0,
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
+        ...(theme.rtl ? {
+          marginLeft: 0,
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+        } : {
+          marginRight: 0,
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+        }),
         borderColor: theme.toc.light.border,
         background: theme.light.background,
 
@@ -98,9 +110,14 @@ export const TocStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
         },
 
         '@media screen and (max-width: 1200px)': {
-          marginRight: -8,
+          ...(theme.rtl ? {
+            marginLeft: -8,
+            borderLeft: '1px solid',
+          } : {
+            marginRight: -8,
+            borderRight: '1px solid',
+          }),
           borderRadius: 3,
-          borderRight: '1px solid',
         },
       },
     },
@@ -110,12 +127,22 @@ export const TocStyle = /*#__PURE__*/themedStyle<CodedocTheme>(theme => ({
     flexGrow: 1,
     overflow: 'auto',
     padding: 32,
-    paddingRight: 0,
-    marginRight: -1,
+    ...(theme.rtl ? {
+      paddingLeft: 0,
+      marginLeft: -1,
+    } : {
+      paddingRight: 0,
+      marginRight: -1,
+    }),
 
     '@media screen and (max-width: 1200px)': {
-      paddingRight: 32,
-      marginRight: 0,
+      ...(theme.rtl ? {
+        paddingLeft: 32,
+        marginLeft: 0,
+      } : {
+        paddingRight: 32,
+        marginRight: 0,
+      }),
     },
   },
   search: {
diff --git a/src/theme.ts b/src/theme.ts
index 62dae42..278fab2 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -77,6 +77,7 @@ export interface ContentTheme {
 export interface CodedocTheme {
   light: ContentTheme;
   dark: ContentTheme;
+  rtl: boolean;
   code: {
     wmbar: boolean;
     light: CodeTheme;
@@ -194,6 +195,7 @@ export const DefaultCodeThemeLight: CodeTheme = /*#__PURE__*/{
 
 
 export const DefaultTheme: CodedocTheme = /*#__PURE__*/{
+  rtl: true,
   light: {
     primary: '#4A90E2',
     primaryContrast: 'deduce',
@@ -215,8 +217,8 @@ export const DefaultTheme: CodedocTheme = /*#__PURE__*/{
   code: {
     wmbar: true,
     light: DefaultCodeTheme,
-    dark: { 
-      ... DefaultCodeTheme, 
+    dark: {
+      ... DefaultCodeTheme,
       background: '#000000',
       shadow: '0 6px 12px #121212',
       lineHover: '#1a1a1a',