diff --git a/.gitignore b/.gitignore
index 8b7ec505e3..835b6798a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+
 .DS_Store
 Thumbs.db
 db.json
@@ -7,3 +8,5 @@ public/
 .deploy*/
 src/_drafts
 package-lock.json
+.idea
+.cache
diff --git a/README.md b/README.md
index 34710306eb..233f6deb53 100644
--- a/README.md
+++ b/README.md
@@ -21,12 +21,9 @@ Translations for this documentation project are currently maintained in separate
 
 ### Arabic
 
-Arabic translation is maintained by [Interstellar Club](https://github.com/InterstellarClub)
+Arabic translation is maintained by [Vue.js AR](https://github.com/vuejs-ar)
 
-* Translation Repo - [/interstellarClub/ar.vuejs.org](https://github.com/interstellarClub/ar.vuejs.org)
-* Primary Maintainers :
-    * [Ilyes Chouia](https://github.com/celyes)
-    * [Ahmed Aissaoui](https://github.com/Aissaoui-Ahmed)
+* Translation Repo - [/vuejs-ar/ar.vuejs.org](https://github.com/vuejs-ar/ar.vuejs.org)
 
 ### French
 
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
index 10eed9f2ca..8e3d0192dd 100644
--- a/themes/vue/layout/index.ejs
+++ b/themes/vue/layout/index.ejs
@@ -13,13 +13,13 @@
     </div><div class="right">
       <h2 class="vue">Vue.js</h2>
       <h1>
-        The Progressive<br>JavaScript Framework
+         إطار جافاسكريبت <br/> مـتـكـامـل
       </h1>
       <p>
         <a id="modal-player" class="button has-icon" href="javascript:;">
           <%- partial('icons/play') %>
-          WHY VUE.JS?</a>
-        <a class="button white" href="<%- url_for("/v2/guide/") %>">GET STARTED</a>
+          لماذا VUE.JS ؟</a>
+        <a class="button white" href="<%- url_for("/v2/guide/") %>">إبدأ</a>
         <a class="button gray has-icon" href="https://github.com/vuejs/vue" target="_blank">
           <%- partial('icons/github-dark') %>
           GITHUB</a>
@@ -29,33 +29,34 @@
 </div>
 
 <div id="special-sponsor">
-  <h3>Special Sponsor</h3>
+  <h3>كفيلنا المميز</h3>
   <% var specialSponsor = theme.special_sponsors[0]; %>
   <a href="<%- specialSponsor.url %>" target="_blank">
     <img src="<%- url_for(`/images/${specialSponsor.img}`) %>" style="width:160px" alt="Code.xyz Logo">
     <br>
-    <span><%- specialSponsor.description %></span>
+    <!-- <%- specialSponsor.description %> -->
+    <span>بناء واجهات برمجة التطبيقات التي تحتاجها في دقائق بدلا من أيام ، مجانا.</span>
   </a>
 </div>
 
 <div id="highlights">
   <div class="inner">
     <div class="point">
-      <h2>Approachable</h2>
-      <p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
+      <h2>إعتيادي</h2>
+      <p>هل تعرف بالفعل HTML و CSS و JavaScript؟ إقرأ الدليل وإبدء في بناء مشاريعك في أي وقت من الأوقات!</p>
     </div>
 
     <div class="point">
-      <h2>Versatile</h2>
-      <p>An incrementally adoptable ecosystem that scales between a library and a full-featured framework.</p>
+      <h2>متعدد الاستعمالات</h2>
+      <p>نظام شامل يخول لك الإستعمال سواء كمكتبة او كإطار عمل متكامل.</p>
     </div>
 
     <div class="point">
-      <h2>Performant</h2>
+      <h2>ذو أداء عالي</h2>
       <p>
-        20KB min+gzip Runtime<br>
-        Blazing Fast Virtual DOM<br>
-        Minimal Optimization Efforts
+        الحجم في وقت التنفيذ 20 كيلوبايت<br>
+        نظام Virtual DOM سريع جدا<br>
+        الحد الأدنى من الجهد الأمثل
       </p>
     </div>
   </div>
@@ -69,7 +70,7 @@
 
 <div id="news">
   <div class="inner">
-    <h3><label for="member_email">Subscribe to our Weekly Newsletter</label></h3>
+    <h3><label for="member_email">إشترك في نشرتنا الإخبارية الأسبوعية</label></h3>
     <form
       class="newsletter-form"
       id="revue-form"
@@ -85,18 +86,18 @@
         name="member[email]"
         id="member_email"
         required
-        placeholder="Email address"
+        placeholder="عنوان البريد الإلكتروني"
       >
       <input
         class="button newsletter-button"
         type="submit"
-        value="Subscribe"
+        value="إشترك"
         name="member[subscribe]"
         id="member_submit"
       >
     </form>
     <p>
-      You can read the previous issues and listen to our podcast at <a href="https://news.vuejs.org" target="_blank">news.vuejs.org</a>.
+      يمكنك قراءة الإصدارات السابقة والاستماع إلى البودكاست الخاص بنا على <a href="https://news.vuejs.org" target="_blank">news.vuejs.org</a>.
     </p>
   </div>
 </div>
@@ -113,8 +114,8 @@
       <%- partial('icons/medium') %>
     </a>
   </p>
-  <p>Released under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a><br>
-  Copyright &copy; 2014-<%- new Date().getFullYear() %> Evan You</p>
+  <p>صدر تحت <a href="https://opensource.org/licenses/MIT" target="_blank">رخصة MIT</a><br>
+  حقوق النشر &copy; 2014-<%- new Date().getFullYear() %> Evan You</p>
 </div>
 
 <div id="video-modal" class="modal">
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/layout/partials/sponsors.ejs b/themes/vue/layout/partials/sponsors.ejs
index 086397112f..d149eb0019 100644
--- a/themes/vue/layout/partials/sponsors.ejs
+++ b/themes/vue/layout/partials/sponsors.ejs
@@ -1,4 +1,4 @@
-<h3>Patreon Sponsors</h3>
+<h3>كفيل باتريون (Patreon)</h3>
 
 <%_ for (const sponsor of theme.platinum_sponsors) {_%>
 <a href="<%- sponsor.url %>" target="_blank" style="width: 160px;">
@@ -14,17 +14,17 @@
 <%_ } _%>
 <br>
 
-<a class="become-sponsor button white" href="<%- url_for("/support-vuejs/") %>">Become a Sponsor!</a>
+<a class="become-sponsor button white" href="<%- url_for("/support-vuejs/") %>">   كن كفيل!   </a>
 
 <div class="open-collective-sponsors">
-  <h3>OpenCollective Sponsors</h3>
-  <h4>Platinum</h4>
+  <h3>الكفلاء المنفتحون</h3>
+  <h4>بلاتين</h4>
   <%_ for (let i = 0; i < 2; i++) {_%>
   <a href="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/website" target="_blank">
     <img src="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/avatar.svg">
   </a>
   <%_ } _%>
-  <h4>Gold</h4>
+  <h4>ذهب</h4>
   <%_ for (let i = 0; i < 8; i++) {_%>
   <a href="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/website" target="_blank">
     <img src="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/avatar.svg">
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..3d5eca6a8d 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: 80%
   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)