diff --git a/src/app/_services/pages.service.ts b/src/app/_services/pages.service.ts
index 7aa5192..60f47a8 100644
--- a/src/app/_services/pages.service.ts
+++ b/src/app/_services/pages.service.ts
@@ -36,6 +36,10 @@ export class PagesService {
     this.rootPagesSubject.next(val);
   }
 
+  get isRtl() {
+    return ['ar'].indexOf(this.rootPage?.slug) !== -1;
+  }
+
   get editMode() {
     return this.editModeSubject.value;
   }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6e7a429..5bff6a5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1 @@
-<grid></grid>
+<grid [class.rtl]="isRtl"></grid>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..068008a 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,3 @@
+.rtl {
+  direction: rtl;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0882277..38e326b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -18,6 +18,10 @@ export class AppComponent {
     });
   }
 
+  get isRtl() {
+    return this.pagesService.isRtl;
+  }
+
   ngOnInit() {
     this.pagesService.root({include:'children'}).subscribe(
       res => { this.pagesService.rootPages = res }