diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index c1a1dff..03c4e47 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -1747,6 +1747,8 @@ main{
 .cabinet-card-order__block-detail{
   height: 0;
   overflow: hidden;
+
+  transition: height .2s ease-out;
 }
 .cabinet-card-order__detail{
   padding-top: 24px;
@@ -1878,6 +1880,8 @@ main{
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
+
+  transition: transform .2s;
   /* transform: rotate(180deg); */
 }
 .cabinet-card-order__detail-short{
@@ -1887,6 +1891,8 @@ main{
 
   display: flex;
   align-items: center;
+
+  transition: opacity .2s .1s ease-out;
 }
 .cabinet-card-order-detail-short__item{
   border-radius: 16px;
diff --git a/assets/css/gp-style-mobile.css b/assets/css/gp-style-mobile.css
index fd0b53f..9016ab5 100644
--- a/assets/css/gp-style-mobile.css
+++ b/assets/css/gp-style-mobile.css
@@ -213,5 +213,9 @@
     left: auto;
     right: 0;
 }
+.cabinet-card-order__detail-short{
+    transition-delay: 0;
+    transition-duration: 0;
+}
 /* cabinet */
 }
\ No newline at end of file
diff --git a/assets/js/_gp-function.js b/assets/js/_gp-function.js
new file mode 100644
index 0000000..71b5d86
--- /dev/null
+++ b/assets/js/_gp-function.js
@@ -0,0 +1,124 @@
+'use strict';
+
+// function
+export function modalOpen(buttonElement, contentElement){
+    let modal = document.querySelector('.modal'),
+        aside = document.querySelector('.modal__aside'),
+        elements = document.querySelectorAll(buttonElement),
+        device = window.screen.width;
+
+    elements.forEach(e => {
+        let thisContentElement = document.querySelector(contentElement);
+
+        e.onclick = function () {
+            modal.classList.add('active');
+            thisContentElement.classList.add('active');
+            
+            let width = thisContentElement.clientWidth;
+
+            setTimeout(() => {
+                if (device <= 720) {
+                    aside.style.width = `${device}px`;
+                    thisContentElement.style.opacity = 1;
+                    thisContentElement.style.filter = 'blur(0px)';
+                }else{
+                    aside.style.width = `${width}px`;
+                    thisContentElement.style.opacity = 1;
+                    thisContentElement.style.filter = 'blur(0px)';
+                }
+            }, 10);
+        }
+    })
+}
+
+export function modalClose(buttonElement) {
+    let modal = document.querySelector('.modal'),
+        aside = document.querySelector('.modal__aside'),
+        asideItems = document.querySelectorAll('.modal__item'),
+        elements = document.querySelectorAll(buttonElement);
+
+    elements.forEach(e => {
+        e.onclick = function () {            
+            aside.style.width = '0px';
+            
+            asideItems.forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.style.filter  = 'blur(10px)';
+                }
+            });
+
+            setTimeout(() => {
+                asideItems.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                    }
+                });
+
+                modal.classList.remove('active');
+            }, 300);
+        }
+    })
+}
+
+export function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
+    let elements = document.querySelectorAll(mainElement);
+
+    elements.forEach(e => {
+        let thisMainElement = e,
+            thisButtonElement = e.querySelector(buttonElement),
+            thisHeightElement = e.querySelector(heightElement),
+            thisContentElement = e.querySelector(contentElement);        
+
+        thisButtonElement.onclick = function (e) {
+            let height = thisHeightElement.clientHeight;
+
+            if (close == true && !thisMainElement.classList.contains('active')) {
+                elements.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                        e.querySelector(contentElement).style.height = null
+                    }                    
+                })
+            }
+
+            if (!thisMainElement.classList.contains('active')) {
+                thisContentElement.style.height = `${height}px`;
+                thisMainElement.classList.add('active');
+            }else{
+                thisContentElement.style.height = null;
+                thisMainElement.classList.remove('active');
+            }
+        }
+        
+    });
+}
+
+export function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
+    let thisButton = document.querySelector(button), 
+        thisContent = document.querySelector(content),
+        thisRemoveBlock = document.querySelector(removeBlock) || '',
+        thisBlockheight = document.querySelector(blockheight);
+
+    thisButton.onclick = function () {
+        let height = thisBlockheight.clientHeight;
+
+        if (!thisContent.classList .contains('open')) {
+            thisContent.style.height = `${height}px`;
+            thisContent.classList .add('open');
+
+            if (removeBlock) {
+                thisRemoveBlock.classList.remove(removeClass);
+            }
+        }else{
+            thisContent.style.height = null;
+            thisContent.classList .remove('open');
+
+            if (removeBlock) {
+                if (window.scrollY <= 25) {
+                    thisRemoveBlock.classList.add(removeClass);
+                }
+            }
+        }
+    }
+}
+// function
\ No newline at end of file
diff --git a/assets/js/gp-cabinet.js b/assets/js/gp-cabinet.js
new file mode 100644
index 0000000..87c28d7
--- /dev/null
+++ b/assets/js/gp-cabinet.js
@@ -0,0 +1,5 @@
+'use strict';
+
+import * as fun from './_gp-function.js';
+
+fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');
\ No newline at end of file
diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js
index 06dc385..5e05cd3 100644
--- a/assets/js/gp-main.js
+++ b/assets/js/gp-main.js
@@ -296,7 +296,7 @@ function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
         }
     }
 }
-
+// function
 
 // resize
 window.addEventListener('resize', (e) => {
diff --git a/registration.html b/registration.html
index 778cd40..6ea5717 100644
--- a/registration.html
+++ b/registration.html
@@ -463,7 +463,7 @@
 
                     <div class="cabinet-card cabinet-card--grey">
                         <div class="cabinet-card__content">
-                            <div class="cabinet-card__order active">
+                            <div class="cabinet-card__order">
                                 <div class="cabinet-card-order__header">
                                     <div class="cabinet-card-order__main">
                                         <p class="cabinet-card-order-main__date">Заказ от 06.09.2024</p>
@@ -481,7 +481,7 @@
                                         <p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
                                     </div>
 
-                                    <div class="cabinet-card-order__block-detail" style="height: 457px;">
+                                    <div class="cabinet-card-order__block-detail">
                                         <div class="cabinet-card-order__detail">
                                             <div class="cabinet-card-order-detail__address">
                                                 <p class="cabinet-card-order-detail-address__title">Адрес доставки: </p>
@@ -658,6 +658,6 @@
         </footer>
 
 
-        <!-- <script src="assets/js/gp-main.js"></script> -->
+        <script type="module" src="assets/js/gp-cabinet.js"></script>
     </body>
 </html>
\ No newline at end of file