diff --git a/src/App.vue b/src/App.vue
index 244e055..63e9a66 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,16 @@ import config from "./assets/config";
 export default {
   name: "App",
   mounted() {
-    if (window.location.protocol == "http" && !window.location.hostname.endsWith('.onion')) {
+    // Set RTL mode if flag given in config. TODO: this should be based on language, not a global setting.
+    //
+    if (config.rtl) {
+      this.$vuetify.rtl = true;
+      document.documentElement.setAttribute("dir", "rtl");
+    }
+    if (
+      window.location.protocol == "http" &&
+      !window.location.hostname.endsWith(".onion")
+    ) {
       // Redirect to HTTPS
       window.location.href = window.location.href.replace("http:", "https:");
       return;
diff --git a/src/assets/config.json b/src/assets/config.json
index 70a82c2..7cbcb80 100644
--- a/src/assets/config.json
+++ b/src/assets/config.json
@@ -4,6 +4,7 @@
     "productLink": "letsconvene.im",
     "defaultServer": "https://neo.keanu.im",
     "useShortCodeStickers": false,
+    "rtl": false,
     "analytics": {
         "enabled": true,
         "config": {
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index efe659d..bc9bff4 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -51,6 +51,7 @@ $admin-fg: white;
     position: absolute;
     top: 10px;
     left: 40px;
+    right: initial;
     color: white;
     background-color: black;
     font-size: 10px;
@@ -61,6 +62,10 @@ $admin-fg: white;
     text-align: center;
     padding-left: 4px;
     padding-right: 4px;
+    [dir="rtl"] & {
+        right: 40px;
+        left: initial;
+    }
 }
 
 .chat-root {
@@ -138,6 +143,9 @@ $admin-fg: white;
             overflow-x: hidden;
             overflow-y: auto;
             padding: 0 0 0px 20px;
+            [dir="rtl"] & {
+                padding: 0 20px 0px 0px;
+            }
             margin: 6px 0;
             font-family: "Inter", sans-serif;
             font-weight: 300;
@@ -181,10 +189,16 @@ $admin-fg: white;
 .messageIn {
     margin: 8px;
     text-align: left;
+    [dir="rtl"] & {
+        text-align: right;
+    }
     position: relative;
     .bubble {
         background-color: #eeeeee;
         border-radius: 0px 10px 10px 10px;
+        [dir="rtl"] & {
+            border-radius: 10px 0px 10px 0px;
+        }
         padding: 8px;
         border-width: 1px !important;
         border-style: solid !important;
@@ -220,6 +234,10 @@ $admin-fg: white;
         display: inline-block;
         vertical-align: top !important;
         margin-right: 10px;
+        [dir="rtl"] & {
+            margin-right: initial;
+            margin-left: 10px;
+        }
         top: 0;
         border: 2px solid white;
     }
@@ -234,6 +252,10 @@ $admin-fg: white;
         color: rgba(#000000, 0.6);
         margin-left: 40px;
         margin-right: 8px;
+        [dir="rtl"] & {
+            margin-left: 8px;
+            margin-right: 40px;
+        }
         display: inline-block;
     }
     .time {
@@ -252,10 +274,16 @@ $admin-fg: white;
 .messageOut {
     margin: 8px;
     text-align: right;
+    [dir="rtl"] & {
+        text-align: left;
+    }
     position: relative;
     .bubble {
         background-color: #e5e5e5;
         border-radius: 10px 10px 0 10px;
+        [dir="rtl"] & {
+            border-radius: 10px 10px 10px 0px;
+        }
         padding: 8px;
         display: inline-block;
         position: relative;
@@ -264,6 +292,9 @@ $admin-fg: white;
     .audio-bubble {
         background-color: #e5e5e5;
         border-radius: 10px 10px 0 10px;
+        [dir="rtl"] & {
+            border-radius: 10px 10px 10px 0px;
+        }
         padding: 8px;
         display: inline-block;
         position: relative;
@@ -274,6 +305,9 @@ $admin-fg: white;
     .video2-bubble {
         background-color: #e5e5e5;
         border-radius: 10px 10px 0 10px;
+        [dir="rtl"] & {
+            border-radius: 10px 10px 10px 0px;
+        }
     }
     .bubble.image-bubble {
         padding: 0px;
@@ -283,6 +317,9 @@ $admin-fg: white;
         .v-image,
         video {
             border-radius: 10px 10px 0 10px;
+            [dir="rtl"] & {
+                border-radius: 10px 10px 10px 0px;
+            }
         }
     }
     .bubble.sticker-bubble {
@@ -296,6 +333,10 @@ $admin-fg: white;
         display: inline-block;
         vertical-align: bottom !important;
         margin-left: 10px;
+        [dir="rtl"] & {
+            margin-left: initial;
+            margin-right: 10px;
+        }
         bottom: 0;
         border: 2px solid white;
     }
@@ -311,6 +352,10 @@ $admin-fg: white;
         display: inline-block;
         margin-left: 40px;
         margin-right: 8px;
+        [dir="rtl"] & {
+            margin-left: 8px;
+            margin-right: 40px;
+        }
     }
     .time {
         font-family: "Inter", sans-serif;
@@ -566,6 +611,9 @@ $admin-fg: white;
         top: -4px;
         background: white;
         transform: translate(-50%, 0);
+        [dir="rtl"] & {
+            transform: translate(50%, 0);
+        }
         padding-left: 4px;
         padding-right: 4px;
         content: attr(title);
@@ -595,6 +643,9 @@ $admin-fg: white;
         top: -8px;
         background: white;
         transform: translate(-50%, 0);
+        [dir="rtl"] & {
+            transform: translate(50%, 0);
+        }
         padding-left: 10px;
         padding-right: 10px;
         content: attr(title);
@@ -684,6 +735,11 @@ $admin-fg: white;
         font-size: 14 * $chat-text-size;
         font-weight: bold;
         margin-left: 10px;
+        [dir="rtl"] & {
+            margin-left: initial;
+            margin-right: 10px;
+        }
+
         text-decoration: underline;
     }
 }
@@ -695,12 +751,24 @@ $admin-fg: white;
     margin: 10px 0px;
     font-weight: bold;
     font-size: 12 * $chat-text-size;
+    [dir="rtl"] & {
+        right: 0px;
+        left: unset;
+        .v-icon {
+            // Mirror the icon
+            transform: scale(-1, 1);
+        }
+    }
 }
 
 .header-button-right {
     position: absolute;
     top: 0px;
     right: 0px;
+    [dir="rtl"] & {
+        left: 0px;
+        right: unset;
+    }
     margin: 10px 0px;
     font-weight: bold;
     font-size: 12 * $chat-text-size;
@@ -729,6 +797,10 @@ $admin-fg: white;
         font-size: 14 * $chat-text-size;
         font-weight: bold;
         margin-left: 10px;
+        [dir="rtl"] & {
+            margin-left: initial;
+            margin-right: 10px;
+        }
     }
 }
 
diff --git a/src/components/ActionRow.vue b/src/components/ActionRow.vue
index 47c5162..80f82ec 100644
--- a/src/components/ActionRow.vue
+++ b/src/components/ActionRow.vue
@@ -1,6 +1,11 @@
 <template>
-  <v-row class="action-row ma-0 pa-0" no-gutters align-content="center" v-on="$listeners">
-    <v-col cols="auto" class="mr-2">
+  <v-row
+    class="action-row ma-0 pa-0"
+    no-gutters
+    align-content="center"
+    v-on="$listeners"
+  >
+    <v-col cols="auto" class="me-2">
       <v-icon size="22">{{ icon }}</v-icon>
     </v-col>
     <v-col>{{ text }}</v-col>
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index c3ef29c..24e4908 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -2,58 +2,77 @@
   <v-container fluid v-if="room">
     <v-row class="chat-header-row flex-nowrap">
       <v-col
-      cols="auto"
+        cols="auto"
         class="chat-header-members text-start ma-0 pa-0"
-        style="overflow:hidden;cursor:pointer" @click.stop="onHeaderClicked"
+        style="overflow: hidden; cursor: pointer"
+        @click.stop="onHeaderClicked"
       >
-        <v-avatar size="40" class="mr-2">
+        <v-avatar size="40" class="me-2">
           <v-img :src="room.avatar" />
         </v-avatar>
       </v-col>
 
-      <v-col class="ma-0 pa-0 flex-shrink-1 flex-nowrap" style="overflow:hidden;cursor:pointer" @click.stop="onHeaderClicked">
-        <div class="d-flex flex-nowrap room-name-inline">{{ room.summary.info.title }} <!--<v-icon>expand_more</v-icon>--></div>
-        <div class="num-members">{{ $tc('room.members', memberCount) }}</div>
+      <v-col
+        class="ma-0 pa-0 flex-shrink-1 flex-nowrap"
+        style="overflow: hidden; cursor: pointer"
+        @click.stop="onHeaderClicked"
+      >
+        <div class="d-flex flex-nowrap room-name-inline">
+          {{ room.summary.info.title }}
+          <!--<v-icon>expand_more</v-icon>-->
+        </div>
+        <div class="num-members">{{ $tc("room.members", memberCount) }}</div>
       </v-col>
       <v-col cols="auto" class="text-end ma-0 pa-0">
-        <v-btn text class="leave-button" @click.stop="leaveRoom">{{$t('room.leave')}}</v-btn>
+        <v-btn text class="leave-button" @click.stop="leaveRoom">{{
+          $t("room.leave")
+        }}</v-btn>
       </v-col>
-      <v-col cols="auto" class="text-end ma-0 pa-0 ml-2">
-        <v-avatar class="avatar-32 clickable" size="32" color="#e0e0e0" @click.stop="showProfileInfo = true">
+      <v-col cols="auto" class="text-end ma-0 pa-0 ms-2">
+        <v-avatar
+          class="avatar-32 clickable"
+          size="32"
+          color="#e0e0e0"
+          @click.stop="showProfileInfo = true"
+        >
           <img v-if="userAvatar" :src="userAvatar" />
-            <span v-else class="white--text">{{
-              userAvatarLetter
-            }}</span>
-          </v-avatar>
+          <span v-else class="white--text">{{ userAvatarLetter }}</span>
+        </v-avatar>
       </v-col>
     </v-row>
 
     <!-- "REALLY LEAVE?" dialog -->
-    <LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
+    <LeaveRoomDialog
+      :show="showLeaveConfirmation"
+      :room="room"
+      @close="showLeaveConfirmation = false"
+    />
 
     <!-- PROFILE INFO POPUP -->
-    <ProfileInfoPopup :show="showProfileInfo" @close="showProfileInfo = false" />
-
+    <ProfileInfoPopup
+      :show="showProfileInfo"
+      @close="showProfileInfo = false"
+    />
   </v-container>
 </template>
 
 <script>
-import LeaveRoomDialog from '../components/LeaveRoomDialog';
-import ProfileInfoPopup from '../components/ProfileInfoPopup';
-import profileInfoMixin from '../components/profileInfoMixin';
+import LeaveRoomDialog from "../components/LeaveRoomDialog";
+import ProfileInfoPopup from "../components/ProfileInfoPopup";
+import profileInfoMixin from "../components/profileInfoMixin";
 
 export default {
   name: "ChatHeader",
   mixins: [profileInfoMixin],
   components: {
     LeaveRoomDialog,
-    ProfileInfoPopup
+    ProfileInfoPopup,
   },
   data() {
     return {
       memberCount: null,
       showLeaveConfirmation: false,
-      showProfileInfo: false
+      showProfileInfo: false,
     };
   },
   mounted() {
@@ -92,9 +111,9 @@ export default {
         this.updateMemberCount();
       }
     },
-    
+
     onHeaderClicked() {
-      this.$emit("header-click", {event: this.event});
+      this.$emit("header-click", { event: this.event });
     },
 
     updateMemberCount() {
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index 03bd20b..9e711fe 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -63,7 +63,7 @@
               <v-avatar size="32">
                 <v-img :src="data.item.image" />
               </v-avatar>
-              <div class="ml-2">{{ data.item.name }}</div>
+              <div class="ms-2">{{ data.item.name }}</div>
             </template>
           </v-select>
           <v-switch
@@ -103,20 +103,20 @@
             :disabled="step > steps.INITIAL"
           ></v-text-field>
           <v-btn
-              color="black"
-              depressed
-              class="filled-button"
-              @click.stop="next"
-              :disabled="roomName.length == 0"
-              >{{$t('new_room.create')}}</v-btn
-            >
+            color="black"
+            depressed
+            class="filled-button"
+            @click.stop="next"
+            :disabled="roomName.length == 0"
+            >{{ $t("new_room.create") }}</v-btn
+          >
         </v-col>
       </v-row>
     </v-container>
 
     <v-fade-transition>
       <!-- <div class="section ma-3" flat v-if="step > steps.INITIAL"> -->
-    <!--    <div class="h4 text-left">{{ $t("new_room.join_permissions") }}</div>
+      <!--    <div class="h4 text-left">{{ $t("new_room.join_permissions") }}</div>
         <div class="h2 text-left">
           {{ $t("new_room.set_join_permissions") }}
         </div>
@@ -171,7 +171,7 @@
           depressed
           class="outlined-button"
           @click.stop="getPublicLink"
-          ><v-icon class="mr-2">link</v-icon
+          ><v-icon class="me-2">link</v-icon
           >{{ $t("new_room.get_link") }}</v-btn
         >
         <v-btn
@@ -180,7 +180,7 @@
           depressed
           class="outlined-button"
           @click.stop="addPeople"
-          ><v-icon class="mr-2">person_add</v-icon
+          ><v-icon class="me-2">person_add</v-icon
           >{{ $t("new_room.add_people") }}</v-btn
         >
 
@@ -188,7 +188,7 @@
           {{ $t("new_room.link_copied") }}
         </div>
 -->
-        <div v-if="status">{{ status }}</div>
+      <div v-if="status">{{ status }}</div>
       <!-- </div> -->
     </v-fade-transition>
     <input
@@ -292,8 +292,8 @@ export default {
       if (this.step == steps.CREATED) {
         this.openRoom();
       } else if (this.step == steps.INITIAL) {
-      //  this.step = steps.NAME_SET;
-      //} else if (this.step == steps.NAME_SET) {
+        //  this.step = steps.NAME_SET;
+        //} else if (this.step == steps.NAME_SET) {
         // Create room with deafult setting
         this.createRoom().then((roomId) => {
           this.roomId = roomId;
diff --git a/src/components/Join.vue b/src/components/Join.vue
index 5c1696f..b49d2ca 100644
--- a/src/components/Join.vue
+++ b/src/components/Join.vue
@@ -8,7 +8,7 @@
         @click.stop="handleLogin"
         :loading="loading"
         v-if="!currentUser"
-        >{{$t('menu.login')}}</v-btn
+        >{{ $t("menu.login") }}</v-btn
       >
 
       <v-avatar class="join-avatar">
@@ -17,7 +17,9 @@
           roomName.substring(0, 1).toUpperCase()
         }}</span>
       </v-avatar>
-      <div class="join-title">{{$t('join.title', {roomName: roomName})}}</div>
+      <div class="join-title">
+        {{ $t("join.title", { roomName: roomName }) }}
+      </div>
       <div class="join-message">
         <!-- Join the group chat in a web browser or with the Keanu app. -->
       </div>
@@ -57,15 +59,18 @@
                 <v-avatar size="32">
                   <v-img :src="data.item.image" />
                 </v-avatar>
-                <div class="ml-2">{{ data.item.name }}</div>
+                <div class="ms-2">{{ data.item.name }}</div>
               </template>
             </v-select>
-            <v-switch v-model="sharedComputer" :label="$t('join.shared_computer')" />
+            <v-switch
+              v-model="sharedComputer"
+              :label="$t('join.shared_computer')"
+            />
           </v-col>
         </v-row>
         <v-row v-else>
           <v-col>
-            {{$t('join.joining_as')}}
+            {{ $t("join.joining_as") }}
             <div style="display: inline-block">
               <v-avatar color="#e0e0e0" style="">
                 <v-img v-if="userAvatar" :src="userAvatar" />
@@ -97,7 +102,7 @@
         @click.stop="handleJoin"
         :loading="loading"
         v-if="!currentUser"
-        >{{$t('join.join_guest')}}</v-btn
+        >{{ $t("join.join_guest") }}</v-btn
       >
       <v-btn
         class="btn-dark"
@@ -106,7 +111,7 @@
         @click.stop="handleJoin"
         :loading="loading"
         v-else
-        >{{$t('join.join')}}</v-btn
+        >{{ $t("join.join") }}</v-btn
       >
 
       <!-- <div class="join-privacy">
@@ -138,9 +143,11 @@ export default {
   mounted() {
     this.$matrix.on("Room.myMembership", this.onMyMembership);
     this.availableAvatars = util.getDefaultAvatars();
-    this.selectAvatar(this.availableAvatars[
-      Math.floor(Math.random() * this.availableAvatars.length)
-    ]);
+    this.selectAvatar(
+      this.availableAvatars[
+        Math.floor(Math.random() * this.availableAvatars.length)
+      ]
+    );
   },
   destroyed() {
     this.$matrix.off("Room.myMembership", this.onMyMembership);
@@ -194,7 +201,9 @@ export default {
       if (!this.currentUser || !this.currentUser.userId) {
         return null;
       }
-      return (this.currentUserDisplayName || this.currentUser.userId.substring(1))
+      return (
+        this.currentUserDisplayName || this.currentUser.userId.substring(1)
+      )
         .substring(0, 1)
         .toUpperCase();
     },
@@ -203,9 +212,9 @@ export default {
         return !this.$store.state.useLocalStorage;
       },
       set: function (sharedComputer) {
-        this.$store.commit('setUseLocalStorage', !sharedComputer);
+        this.$store.commit("setUseLocalStorage", !sharedComputer);
       },
-    }
+    },
   },
   watch: {
     roomId: {
@@ -221,41 +230,42 @@ export default {
 
         this.waitingForInfo = true;
         const self = this;
-          this.waitingForMembership = true;
+        this.waitingForMembership = true;
         if (this.currentUser) {
-          this.$matrix.getLoginPromise()
-          .then(() => {
-            self.$matrix.setCurrentRoomId(self.roomAliasOrId); // Go to this room, now or when joined.
-            const room = self.$matrix.getRoom(self.roomAliasOrId);
+          this.$matrix
+            .getLoginPromise()
+            .then(() => {
+              self.$matrix.setCurrentRoomId(self.roomAliasOrId); // Go to this room, now or when joined.
+              const room = self.$matrix.getRoom(self.roomAliasOrId);
 
-            // Already joined?
-            if (
-              room &&
-              room.hasMembershipState(self.currentUser.user_id, "join")
-            ) {
-              // Yes, go to room
-              self.$navigation.push(
-                {
-                  name: "Chat",
-                  params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
-                },
-                -1
-              );
-              return;
-            }
-          })
-          .catch(err => {
-            console.log("Error logging in: ", err)
-          })
-          .finally(() => {
-            this.waitingForMembership = false;
-            this.getRoomInfo();
-          });
+              // Already joined?
+              if (
+                room &&
+                room.hasMembershipState(self.currentUser.user_id, "join")
+              ) {
+                // Yes, go to room
+                self.$navigation.push(
+                  {
+                    name: "Chat",
+                    params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
+                  },
+                  -1
+                );
+                return;
+              }
+            })
+            .catch((err) => {
+              console.log("Error logging in: ", err);
+            })
+            .finally(() => {
+              this.waitingForMembership = false;
+              this.getRoomInfo();
+            });
         } else {
           this.waitingForMembership = false;
           this.getRoomInfo();
         }
-      }
+      },
     },
   },
 
@@ -300,7 +310,7 @@ export default {
     },
 
     handleLogin() {
-      this.$navigation.push({path: "/login"}, 1);
+      this.$navigation.push({ path: "/login" }, 1);
     },
 
     handleOpenApp() {
@@ -309,10 +319,11 @@ export default {
 
     handleJoin() {
       this.loading = true;
-      this.loadingMessage = this.$t('join.status_logging_in');
+      this.loadingMessage = this.$t("join.status_logging_in");
       const hasUser = this.currentUser ? true : false;
       var setProfileData = false;
-      return this.$matrix.getLoginPromise()
+      return this.$matrix
+        .getLoginPromise()
         .then(
           function (user) {
             if (user.is_guest && !hasUser) {
@@ -322,15 +333,24 @@ export default {
               setProfileData = true;
 
               // Set display name and avatar directly on the matrix object.
-              if (this.selectedProfile.name && this.selectedProfile.name.length > 0) {
+              if (
+                this.selectedProfile.name &&
+                this.selectedProfile.name.length > 0
+              ) {
                 this.$matrix.userDisplayName = this.selectedProfile.name;
               }
             }
 
-            if (!setProfileData || !this.selectedProfile.name || this.selectedProfile.name.length == 0) {
+            if (
+              !setProfileData ||
+              !this.selectedProfile.name ||
+              this.selectedProfile.name.length == 0
+            ) {
               return Promise.resolve(user);
             } else {
-              console.log("Join: Set display name to: " + this.selectedProfile.name);
+              console.log(
+                "Join: Set display name to: " + this.selectedProfile.name
+              );
               return this.$matrix.matrixClient.setDisplayName(
                 this.selectedProfile.name,
                 undefined
@@ -358,7 +378,7 @@ export default {
         .then(
           function (ignoreduser) {
             console.log("Join: joining room");
-            this.loadingMessage = this.$t('join.status_joining');
+            this.loadingMessage = this.$t("join.status_joining");
             return this.$matrix.matrixClient.joinRoom(this.roomId);
           }.bind(this)
         )
diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index 21e6999..681bd06 100644
--- a/src/components/ProfileInfoPopup.vue
+++ b/src/components/ProfileInfoPopup.vue
@@ -41,20 +41,36 @@
         </v-container>
 
         <v-container class="mt-4 pa-0">
-          <ActionRow @click="viewProfile" :icon="'account_circle'" :text="$t('profile_info_popup.edit_profile')" />
-          <ActionRow @click="logout" :icon="'logout'" :text="$t('profile_info_popup.logout')" />
+          <ActionRow
+            @click="viewProfile"
+            :icon="'account_circle'"
+            :text="$t('profile_info_popup.edit_profile')"
+          />
+          <ActionRow
+            @click="logout"
+            :icon="'logout'"
+            :text="$t('profile_info_popup.logout')"
+          />
         </v-container>
 
         <div class="more-container">
-          <div class="want_more">🙌 {{$t('profile_info_popup.want_more')}}</div>
+          <div class="want_more">
+            🙌 {{ $t("profile_info_popup.want_more") }}
+          </div>
           <i18n path="profile_info_popup.powered_by" tag="div">
             <template v-slot:product>{{ product }}</template>
             <template v-slot:productLink>
               <a :href="productLink">{{ productLink }}</a>
             </template>
           </i18n>
-          <div style="position:relative;width:100%;height: 40px">
-            <v-btn class="new_room" right absolute text @click="createRoom">{{ $t('profile_info_popup.new_room') }}</v-btn></div>
+          <div
+            style="position: relative; width: 100%; height: 40px"
+            class="text-end"
+          >
+            <v-btn class="new_room" text @click="createRoom">{{
+              $t("profile_info_popup.new_room")
+            }}</v-btn>
+          </div>
         </div>
       </v-card-text>
     </v-card>
@@ -69,7 +85,7 @@ export default {
   name: "ProfileInfoPopup",
   mixins: [profileInfoMixin],
   components: {
-    ActionRow
+    ActionRow,
   },
   props: {
     show: {
@@ -90,7 +106,7 @@ export default {
     },
     productLink() {
       return config.productLink;
-    }
+    },
   },
   watch: {
     show: {
@@ -113,7 +129,7 @@ export default {
     createRoom() {
       this.showDialog = false;
       this.$navigation.push({ name: "CreateRoom" });
-    }
+    },
   },
 };
 </script>
@@ -121,42 +137,50 @@ export default {
 <style lang="scss">
 @import "@/assets/css/chat.scss";
 .profile-info-popup {
-    font-family: "Inter", sans-serif !important;
-    font-size: 16px;
+  font-family: "Inter", sans-serif !important;
+  font-size: 16px;
+  position: fixed;
+  margin: 0px;
+  top: 70px;
+  right: 10px;
+  [dir="rtl"] & {
+    right: inherit;
+    left: 10px;
+  }
+  border-radius: 40px;
+  &::before {
+    content: "▲";
     position: fixed;
-    margin: 0px;
-    top: 70px;
-    right: 10px;
-    border-radius: 40px;
-    &::before {
-        content: '▲';
-        position: fixed;
-        top: 57px;
-        right: 22px;
-        color: white;
+    top: 57px;
+    right: 22px;
+    [dir="rtl"] & {
+      left: 22px;
+      right: inherit;
     }
-    .you-are {
-        padding-top: 20px;
-        font-size: 12px;
+    color: white;
+  }
+  .you-are {
+    padding-top: 20px;
+    font-size: 12px;
+  }
+  .username {
+    border-radius: 4px;
+    background-color: #f5f5f5;
+  }
+  .more-container {
+    border-radius: 10px;
+    background-color: #f5f5f5;
+    padding: 20px;
+    .want_more {
+      font-family: "Poppins", sans-serif;
+      font-weight: 700;
+      font-size: 13 * $chat-text-size;
     }
-    .username {
-        border-radius: 4px;
-        background-color: #f5f5f5;
-    }
-    .more-container {
-        border-radius: 10px;
-        background-color: #f5f5f5;
-        padding: 20px;
-        .want_more {
-            font-family: "Poppins", sans-serif;
-            font-weight: 700;
-            font-size: 13 * $chat-text-size;        
-        }
-        .new_room .v-btn__content {
-          font-family: "Poppins", sans-serif !important;
-            font-weight: 700 !important;
-            font-size: 13 * $chat-text-size !important;  
-        }
+    .new_room .v-btn__content {
+      font-family: "Poppins", sans-serif !important;
+      font-weight: 700 !important;
+      font-size: 13 * $chat-text-size !important;
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index a74ee0d..5f4b335 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -15,7 +15,7 @@
         <v-btn
           color="black"
           depressed
-          class="header-button-right filled-button mr-3"
+          class="header-button-right filled-button me-3"
           @click.stop="showLeaveConfirmation = true"
           >👋 {{ $t("room_info.leave_room") }}</v-btn
         >
@@ -83,7 +83,7 @@
           item-value="id"
         >
           <template v-slot:selection="{ item }">
-            <v-icon color="black" class="mr-2">{{ item.icon }}</v-icon>
+            <v-icon color="black" class="me-2">{{ item.icon }}</v-icon>
             {{ item.text }}
           </template>
           <template v-slot:item="{ item, attrs, on }">
diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue
index f09064c..4db9152 100644
--- a/src/components/RoomList.vue
+++ b/src/components/RoomList.vue
@@ -49,6 +49,7 @@
         v-for="room in $matrix.joinedRooms"
         :key="room.roomId"
         :value="room.roomId"
+        style="position: relative"
       >
         <v-list-item-avatar size="40" color="#e0e0e0">
           <v-img :src="room.avatar" />