diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts
index 6a961710a..59f4fed32 100644
--- a/frontend/src/app/components/app/app.component.ts
+++ b/frontend/src/app/components/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, Inject, LOCALE_ID, HostBinding } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { WebsocketService } from '../../services/websocket.service';
 import { StateService } from 'src/app/services/state.service';
@@ -15,7 +15,14 @@ export class AppComponent implements OnInit {
     public router: Router,
     private websocketService: WebsocketService,
     private stateService: StateService,
-  ) { }
+    @Inject(LOCALE_ID) private locale: string,
+  ) {
+    if (this.locale.startsWith('ar') || this.locale.startsWith('fa')) {
+      this.dir = 'rtl';
+    }
+  }
+
+  @HostBinding('attr.dir') dir = 'ltr';
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvents(event: KeyboardEvent) {