diff --git a/src/popup/App.vue b/src/popup/App.vue
index 2bc4a0d..9ce3e4c 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -28,10 +28,10 @@
                class=""
           >
             <small>Select site to control:</small>
-            <div class="site-list overflow-y-auto scrollbar-darker">
+            <div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
               <div v-for="site of activeSites"
                   :key="site.host"
-                  class="tabitem"
+                  class="tabitem ltr"
                   :class="{
                     'tabitem-selected': site.host === selectedSite,
                     'tabitem-disabled': !settings.canStartExtension(site.host)
@@ -54,9 +54,9 @@
                class=""
           >
             <small>Select embedded frame to control:</small>
-            <div class="site-list overflow-y-auto scrollbar-darker">
+            <div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
               <div v-for="frame of activeFrames"
-                   class="tabitem"
+                   class="tabitem ltr"
                    :class="{
                      'tabitem-selected': selectedFrame === frame.id,
                      'disabled': !isDefaultFrame(frame.id) && !settings.canStartExtension(frame.label)
@@ -81,10 +81,10 @@
                class=""
           >
             <small>Select site to control:</small>
-            <div class="site-list overflow-y-auto scrollbar-darker">
+            <div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
               <div v-for="site of activeSites"
                   :key="site.host"
-                  class="tabitem"
+                  class="tabitem ltr"
                   :class="{'tabitem-selected': site.host === selectedSite}"
                   @click="selectSite(site.host)"
               >
diff --git a/src/popup/popup.html b/src/popup/popup.html
index 431eeb1..fdde695 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -9,7 +9,7 @@
   <!-- Load some resources only in development environment -->
   <% } %>
 </head>
-<body style="width: 800px; height: 600px; overflow-x: hidden">
+<body style="width: 800px; height: 600px; overflow: hidden !important">
   <div id="app">
 
   </div>
diff --git a/src/res/css/common.scss b/src/res/css/common.scss
index 664f37a..984c2a6 100644
--- a/src/res/css/common.scss
+++ b/src/res/css/common.scss
@@ -74,6 +74,10 @@ body {
   overflow: hidden;
 }
 
+.no-overflow-x {
+  overflow-x: hidden;
+}
+
 .no-overflow-y {
   overflow-y: hidden;
 }
@@ -362,3 +366,11 @@ small {
   bottom: 0px;
   background-color: rgba($background-primary, 0.7);
 }
+
+.rtl {
+  direction: rtl;
+}
+
+.ltr {
+  direction: ltr;
+}
