diff --git a/static/aerbimCSS.css b/static/aerbimCSS.css
index 8b43891..288a039 100644
--- a/static/aerbimCSS.css
+++ b/static/aerbimCSS.css
@@ -1695,6 +1695,7 @@ body.n_scroll{
     border: 1px solid #CCCED1FF;
     border-radius: 2px;
     margin-left: 16px;
+    position: relative;
 }
 
 .first_line_documentation_version_switcher{
@@ -1706,6 +1707,11 @@ body.n_scroll{
 
 .documentation_switcher_content_part{
     width: 100%;
+    position: absolute;
+    bottom: -31px;
+    border: 1px solid #CCCED1FF;
+    border-top: 0;
+    left: -1px;
 }
 
 .documentation_switcher_content_part.hidden{
@@ -1713,12 +1719,15 @@ body.n_scroll{
 }
 
 .one_item_documentation_switcher_content_part{
-   background: none;
+    background: none;
     font-size: 16px;
     font-weight: 400;
     color: #0C54A0FF;
-    padding: 6px 26px;
     transition: 200ms;
+    padding: 6px 10px 6px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .one_item_documentation_switcher_content_part:hover{
diff --git a/static/aerbimJS.js b/static/aerbimJS.js
index 443f893..cc05a64 100644
--- a/static/aerbimJS.js
+++ b/static/aerbimJS.js
@@ -511,13 +511,17 @@ function openVersionSwitcher(el){
     let $parent = el.closest(".documentation_version_switcher")
     let $content_part = $parent.querySelector(".documentation_switcher_content_part")
     let $arrow = $parent.querySelector(".documentation_switcher_arrow_picture")
+    $content_part.classList.toggle("hidden")
     if ($arrow.style.rotate === '0deg' || $arrow.style.rotate === '') {
         $($arrow).animate({rotate: '180deg'},200)
+        let height = $content_part.offsetHeight
+        $content_part.style.bottom = '-' + height + "px"
+        $parent.style.borderBottom = '1px solid #fff'
     } else {
         $($arrow).animate({rotate: '0deg'},200)
+        $parent.style.borderBottom = '1px solid #CCCED1FF'
     }
 
-    $content_part.classList.toggle("hidden")
     $("body")[0].setAttribute("onclick",'closeVersionSwitcherOnBody()')
 }
 
@@ -526,7 +530,8 @@ function closeVersionSwitcherOnBody () {
         let $version_switcher_container_content = $(".documentation_switcher_content_part")
         let $arrow = document.querySelector(".documentation_switcher_arrow_picture")
         $version_switcher_container_content.addClass("hidden")
-        $($arrow).animate({rotate: '0deg'},200)
+        $(".documentation_version_switcher").css({borderBottom: '1px solid #CCCED1FF'})
+        $($arrow).animate({rotate: '180deg'},200)
     }
 }
 
@@ -598,4 +603,13 @@ $(window).scroll(function (){
             }
         }
     }
-})
\ No newline at end of file
+})
+
+function chooseVersionComplete (el) {
+    let url = el.dataset['url']
+    let title = el.dataset['title']
+    let $parent = el.closest(".documentation_version")
+    let $cur_selected = $parent.querySelector(".documentation_version_txt")
+    $cur_selected.innerHTML = title
+    window.location.href = window.location.origin + url
+}
\ No newline at end of file
diff --git a/templates/pages/p_documentation.html b/templates/pages/p_documentation.html
index 08e91e8..4984373 100644
--- a/templates/pages/p_documentation.html
+++ b/templates/pages/p_documentation.html
@@ -45,9 +45,13 @@
                             </picture>
                         </div>
                         <div class="documentation_switcher_content_part hidden">
-                            <div class="one_item_documentation_switcher_content_part">
-                                2
-                            </div>
+                            {% for item in allow_versions %}
+                            
+                                <div class="one_item_documentation_switcher_content_part" data-url="{% url 'docs_version_page' item.url %}" data-title="{{ item.name }}" onclick="chooseVersionComplete(this)">
+                                    {{ item.name }}
+                                </div>
+                                
+                            {% endfor %}
                         </div>
                     </div>
                 </div>
@@ -61,12 +65,12 @@
                                         <img class="tree_documentation_arrow_img" src="{% static "images/arrow_for_documentation_switcher.svg" %}" alt="">
                                     </picture>
                                 {% endif %}
-                                <div class="tree_documentation_container_first_level_txt {% if not obj.children %}margin{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
+                                <div class="tree_documentation_container_first_level_txt {% if not obj.children %}margin {% endif %}{% if cur_article.url == obj.url %}chose{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
                                     {{ name }}
                                 </div>
                             </div>
                             {% if obj.children %}
-                                <div class="content_part_tree_documentation_container hidden">
+                                <div class="content_part_tree_documentation_container {% if not obj.active %}hidden{% endif %}">
                                     {% for name, obj in obj.children.items %}
                                         
                                         <div class="tree_documentation_container_second_level">
@@ -77,7 +81,7 @@
                                                         <img class="tree_documentation_arrow_img" src="{% static "images/arrow_for_documentation_switcher.svg" %}" alt="">
                                                     </picture>
                                                 {% endif %} 
-                                                <div class="tree_documentation_container_second_level_txt {% if not obj.children %}margin{% endif %}" data-url="{% url 'docs_art_page' cur_version.url obj.url %}" onclick="choseItemTreeDocumentation(this)">
+                                                <div class="tree_documentation_container_second_level_txt {% if not obj.children %}margin {% endif %}{% if cur_article.url == obj.url %}chose{% endif %}" data-url="{% url 'docs_art_page' cur_version.url obj.url %}" onclick="choseItemTreeDocumentation(this)">
                                                     {{ name }}
                                                 </div>
                                             </div>
@@ -85,16 +89,16 @@
                                                 {% for name,obj in obj.children.items %}
                                                     <div class="content_part_tree_documentation_container min_padding hidden">
                                                         <div class="elements_third_level_content_part_tree">
-                                                            <div class="element_third_level_content_part_tree" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
+                                                            <div class="element_third_level_content_part_tree {% if cur_article.url == obj.url %}chose{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
                                                                 {{ name }}
                                                             </div>
-                                                            <div class="element_third_level_content_part_tree" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
+                                                            <div class="element_third_level_content_part_tree {% if cur_article.url == obj.url %}chose{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
                                                                 {{ name }}
                                                             </div>
-                                                            <div class="element_third_level_content_part_tree" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
+                                                            <div class="element_third_level_content_part_tree {% if cur_article.url == obj.url %}chose{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
                                                                 {{ name }}
                                                             </div>
-                                                            <div class="element_third_level_content_part_tree chose" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
+                                                            <div class="element_third_level_content_part_tree {% if cur_article.url == obj.url %}chose{% endif %}" onclick="choseItemTreeDocumentation(this)" data-url="{% url 'docs_art_page' cur_version.url obj.url %}">
                                                                 {{ name }}
                                                             </div>
                                                         </div>