diff --git a/themes/vue/layout/partials/header.ejs b/themes/vue/layout/partials/header.ejs
index 0816e99d41..a916a038f7 100644
--- a/themes/vue/layout/partials/header.ejs
+++ b/themes/vue/layout/partials/header.ejs
@@ -1,9 +1,9 @@
 <div id="header">
+  <ul id="nav">
+    <%- partial('partials/main_menu', { context: 'nav' }) %>
+  </ul>
   <a id="logo" href="<%- url_for("/") %>">
     <img src="<%- url_for("/images/logo.png") %>" alt="vue logo">
     <span>Vue.js</span>
   </a>
-  <ul id="nav">
-    <%- partial('partials/main_menu', { context: 'nav' }) %>
-  </ul>
 </div>
diff --git a/themes/vue/layout/partials/main_menu.ejs b/themes/vue/layout/partials/main_menu.ejs
index 7474e22f56..f0cb3d32b2 100644
--- a/themes/vue/layout/partials/main_menu.ejs
+++ b/themes/vue/layout/partials/main_menu.ejs
@@ -1,8 +1,4 @@
-<li>
-  <form id="search-form">
-    <input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
-  </form>
-</li>
+
 <%- partial('partials/learn_dropdown') %>
 <%- partial('partials/ecosystem_dropdown') %>
 <li>
@@ -10,3 +6,9 @@
 </li>
 <%- partial('partials/support_vue_dropdown') %>
 <%- partial('partials/language_dropdown') %>
+
+<li>
+  <form id="search-form">
+    <input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
+  </form>
+</li>
\ No newline at end of file
diff --git a/themes/vue/source/css/_ad.styl b/themes/vue/source/css/_ad.styl
index 253b7cd19e..aa048c40cb 100644
--- a/themes/vue/source/css/_ad.styl
+++ b/themes/vue/source/css/_ad.styl
@@ -5,7 +5,7 @@
   position: fixed
   z-index: 99
   bottom: 10px
-  right: 10px
+  left: 10px
   padding: 10px
   background-color: #fff
   border-radius: 3px
diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
index 7c84f711a1..023a7ca0ae 100644
--- a/themes/vue/source/css/_common.styl
+++ b/themes/vue/source/css/_common.styl
@@ -41,6 +41,8 @@ code
   margin: 0 2px
   border-radius: 2px
   white-space: nowrap
+  text-align: left
+  direction: ltr
 
 em
   color: $light
@@ -63,7 +65,7 @@ input.button
     text-indent: 1.4em;
     > svg
       position: absolute
-      left: 0.4em
+      right: 0.4em
       top: 0.4em
       width: 2em
   &.white
@@ -79,7 +81,9 @@ input.button
   z-index: 1
   padding: 0 60px 30px
   overflow-x: hidden
-
+  text-align: right
+  direction: rtl
+  
 #nav
   .nav-link
     cursor: pointer
@@ -101,7 +105,7 @@ input.button
     overflow-y: auto
     position: absolute
     top: 100%
-    right: -15px
+    left: -20px
     background-color: #fff
     padding: 10px 0
     border: 1px solid #ddd
diff --git a/themes/vue/source/css/_demo.styl b/themes/vue/source/css/_demo.styl
index d83b11062b..1477797835 100644
--- a/themes/vue/source/css/_demo.styl
+++ b/themes/vue/source/css/_demo.styl
@@ -9,6 +9,9 @@
   -ms-user-select: none
   user-select: none
   overflow-x: auto
+  &.ltr
+    text-align: left
+    direction: ltr
   h1
     margin: 0 0 .5em
     font-size: 1.8em
diff --git a/themes/vue/source/css/_header.styl b/themes/vue/source/css/_header.styl
index b63e8c62c9..0b0aff5eb5 100644
--- a/themes/vue/source/css/_header.styl
+++ b/themes/vue/source/css/_header.styl
@@ -30,7 +30,7 @@ body.docs
   margin: 0
   padding: 0
   position: absolute
-  right: 30px
+  left: 80px
   top: $heading-padding-vertical
   height: $header-height
   line-height: $header-height
@@ -42,6 +42,7 @@ body.docs
     margin: 0 .6em
 
   .nav-dropdown
+    text-align: right
     .nav-link
       &:hover, &.current
         border-bottom: none
@@ -93,7 +94,7 @@ body.docs
   color: $dark
   outline: none
   border-radius: 15px
-  margin-right: 10px
+  margin-left: 10%
   transition: border-color .2s ease
   background: #fff url(../images/search.png) 8px 5px no-repeat
   background-size: 20px
@@ -108,9 +109,11 @@ body.docs
   color: $dark
   font-family: $logo-font
   font-weight: 500
+  position: absolute
+  left: 89%
   img
     vertical-align: middle
-    margin-right: 6px
+    margin-left: 6px
     width: $header-height
     height: $header-height
 
diff --git a/themes/vue/source/css/_scrimba.styl b/themes/vue/source/css/_scrimba.styl
index be2cd296a5..d754b20fc8 100644
--- a/themes/vue/source/css/_scrimba.styl
+++ b/themes/vue/source/css/_scrimba.styl
@@ -7,7 +7,10 @@
   a
     color #486491 !important
     position relative
-    padding-left 36px
+    padding-right 36px
+    display block
+    font-weight normal !important
+    line-height 25px
     &:before
       content ''
       position absolute
@@ -15,7 +18,7 @@
       width 30px
       height 30px
       top -5px
-      left -4px
+      right -4px
       border-radius 50%
       background-color #73abfe
     &:after
@@ -25,7 +28,7 @@
       width 0
       height 0
       top 5px
-      left 8px
+      right 6px
       border-top 5px solid transparent
       border-bottom 5px solid transparent
       border-left 8px solid #fff
diff --git a/themes/vue/source/css/_sidebar.styl b/themes/vue/source/css/_sidebar.styl
index 7389f74556..7eed122a78 100644
--- a/themes/vue/source/css/_sidebar.styl
+++ b/themes/vue/source/css/_sidebar.styl
@@ -2,9 +2,11 @@
 
 .sidebar
   position: absolute
+  direction: ltr
+  border-left: solid 1px #eee
   z-index: 10
   top: $header-height
-  left: 0
+  right: 0
   bottom: 0
   overflow-x: hidden
   overflow-y: auto
@@ -20,13 +22,15 @@
   li
     margin-top: .5em
   .sidebar-inner
+    direction rtl
     width: 260px
-    padding: $content-padding-top + 40px 0px 60px 20px
+    padding: $content-padding-top + 40px 20px 60px 0px
   .version-select
     vertical-align: middle
     margin-left: 5px
   .menu-root
     padding-left: 0
+    padding-inline-start: 0
   .sidebar-link
     color: $light
     &.current
@@ -63,19 +67,21 @@
       margin: 0
 
 @media screen and (max-width: 900px)
+  #ad
+    display: none
   .sidebar
     position: fixed
     z-index: 10
     background-color: #f9f9f9
     height: 100%
     top: 0
-    left: 0
+    right: 0
     box-shadow: 0 0 10px rgba(0,0,0,.2)
     transition: all .4s cubic-bezier(0.4, 0, 0, 1)
-    -webkit-transform: translate(-280px, 0)
-    transform: translate(-280px, 0)
+    -webkit-transform: translate(280px, 0)
+    transform: translate(280px, 0)
     .sidebar-inner
-      padding: 50px 10px 10px 20px
+      padding: 10px 10px 10px 20px
       box-sizing: border-box
     .sidebar-inner-index
       padding: 10px 10px 10px 20px
@@ -87,6 +93,11 @@
     &.open
       -webkit-transform: translate(0, 0)
       transform: translate(0, 0)
+      padding-inline-start: 10px
+    ul
+      padding-inline-start: 10px
+    div.list
+      display: none
 
 @media print
   .sidebar
diff --git a/themes/vue/source/css/_sponsors-index.styl b/themes/vue/source/css/_sponsors-index.styl
index 3290e2bcda..1d542e2859 100644
--- a/themes/vue/source/css/_sponsors-index.styl
+++ b/themes/vue/source/css/_sponsors-index.styl
@@ -1,4 +1,5 @@
 #sponsors
+  direction: rtl
   text-align: center
   padding: 35px 40px 45px
   background-color: #f6f6f6
diff --git a/themes/vue/source/css/_sponsors-sidebar.styl b/themes/vue/source/css/_sponsors-sidebar.styl
index 1cada3a13d..b5e35a9774 100644
--- a/themes/vue/source/css/_sponsors-sidebar.styl
+++ b/themes/vue/source/css/_sponsors-sidebar.styl
@@ -36,7 +36,7 @@
   position fixed
   z-index 99
   top 90px
-  right 20px
+  left 20px
 
 @media screen and (min-width: 1300px)
   #sidebar-sponsors-platinum-left
diff --git a/themes/vue/source/css/_syntax.styl b/themes/vue/source/css/_syntax.styl
index ea683ac95a..56424af1d8 100644
--- a/themes/vue/source/css/_syntax.styl
+++ b/themes/vue/source/css/_syntax.styl
@@ -12,6 +12,10 @@ pre code
   display: block
 
   .hljs
+    &-comment
+      display inline-block
+      direction rtl
+
     &-tag,
     &-tag &-title,
     &-change,
diff --git a/themes/vue/source/css/_vue-mastery.styl b/themes/vue/source/css/_vue-mastery.styl
index 57ed75d303..d7bedab018 100644
--- a/themes/vue/source/css/_vue-mastery.styl
+++ b/themes/vue/source/css/_vue-mastery.styl
@@ -8,7 +8,10 @@
   a
     color #486491 !important
     position relative
-    padding-left 36px
+    padding-right 36px
+    display block
+    font-weight normal !important
+    line-height 25px
     &:before
       content ''
       position absolute
@@ -16,7 +19,7 @@
       width 30px
       height 30px
       top -5px
-      left -4px
+      right -4px
       border-radius 50%
       background-color #73abfe
     &:after
@@ -26,7 +29,7 @@
       width 0
       height 0
       top 5px
-      left 8px
+      right 6px
       border-top 5px solid transparent
       border-bottom 5px solid transparent
-      border-left 8px solid #fff
\ No newline at end of file
+      border-left 8px solid #fff
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index 3795a04679..fa4fc3fc9a 100644
--- a/themes/vue/source/css/index.styl
+++ b/themes/vue/source/css/index.styl
@@ -29,6 +29,7 @@ body
 
 #hero,
 #news
+  direction: rtl
   padding: $space 40px 30px
   background-color: #fff
   .inner
@@ -44,12 +45,13 @@ body
   .hero-logo
     width: 215px
     height: 215px
-    float: right
-    margin-right: 60px
+    float: left
+    margin-left: 60px
   h1
-    font-weight: 300
+    font-weight: 200
     margin: 0
-    font-size: 3.2em
+    font-size: 2.5em
+    line-height: 2em
   h2
     font-family: $logo-font
     font-weight: 500
@@ -88,7 +90,7 @@ body
   .newsletter-input
     width: 100%
     box-sizing: border-box
-    padding: 10px 80px 10px 20px
+    padding: 10px 20px 10px 80px
     height: 50px
     border-radius: 50px
     border: 1px solid #ccc
@@ -101,7 +103,7 @@ body
     padding: 4px 20px
     margin: 0
     height: calc(100% - 8px)
-    right: 4px
+    left: 4px
     top: 4px
 
 #special-sponsor
@@ -121,6 +123,7 @@ body
 #highlights
   background-color: #fff
   padding-bottom: 70px
+  direction: rtl
   .inner
     max-width: $width
     margin: 0 auto
@@ -144,6 +147,7 @@ body
   padding: $space 0
   color: #fff
   text-align: center
+  direction: rtl
   .social-icon
     margin 0 5px
     svg
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
index c229717971..6f3474b629 100644
--- a/themes/vue/source/css/page.styl
+++ b/themes/vue/source/css/page.styl
@@ -54,7 +54,7 @@
     display: inline-block
     vertical-align: middle
     width: 280px
-    margin-left: 20px
+    margin-right: 20px
   h1
     margin: 0 0 1em
   h2, h3
@@ -80,9 +80,9 @@
       content: "#"
       color: $green
       position: absolute
-      left: -0.7em
+      right: -0.7em
       margin-top: -0.05em
-      padding-right: 0.5em
+      padding-left: 0.5em
       font-size: 1.2em
       line-height: 1
       font-weight: bold
@@ -138,12 +138,14 @@
       background-color: #f8f8f8
       code
         background-color: #efefef
+        text-align: left
+        direction: ltr
   p
     &.tip, &.success
       padding: 12px 24px 12px 30px
       margin: 2em 0
-      border-left-width: 4px
-      border-left-style: solid
+      border-right-width: 4px
+      border-right-style: solid
       background-color: $codebg
       position: relative
       border-bottom-right-radius: $radius
@@ -151,7 +153,7 @@
       &:before
         position: absolute
         top: 14px
-        left: -12px
+        right: -12px
         color: #fff
         width: 20px
         height: 20px
@@ -166,12 +168,12 @@
       em
         color: $medium
     &.tip
-      border-left-color: $red
+      border-right-color: $red
       &:before
         content: "!"
         background-color: $red
     &.success
-      border-left-color: $green
+      border-right-color: $green
       &:before
         content: "\f00c"
         font-family: FontAwesome
@@ -181,6 +183,10 @@
   margin-top: 2em
   height: 1em
 
+/* just for display the table in ltr  */
+.installation-guide
+  table
+    direction: ltr;
 .footer
   color: $light
   margin-top: 2em
@@ -204,8 +210,8 @@
     position: relative
     padding: 0
     bottom: 0
-    right: 0
-    float: right
+    left: 0
+    float: left
     padding: 0 0 20px 30px
 
 @media screen and (max-width: 900px)