diff --git a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
index ecc58c3..673e697 100644
--- a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
+++ b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
@@ -2187,4 +2187,14 @@ textarea{
 
 .about_us-title {
   font-weight: 700;
+}
+
+.modal__aside {
+    width: 20vw;
+    right: -20vw;
+    transition: right 0.3s ease;
+}
+
+.modal__aside.active {
+    right: 0;
 }
\ No newline at end of file
diff --git a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
index 2617242..eb7c6e0 100644
--- a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
+++ b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
@@ -492,8 +492,8 @@ jQuery(document).ready(function($) {
   $('.close-btn').on('click', function(e) {
       $('.modalProfile').removeClass('active');
   });
-});
 
+});
 
 // Находим все элементы с классом login-open
 document.addEventListener('DOMContentLoaded', function() {
@@ -539,6 +539,6 @@ document.addEventListener('DOMContentLoaded', function() {
       
       // Reset styles
       modalAside.style.width = '';
-      modalAside.style.right = '0';
+      modalAside.style.right = '-30vw';
     }
 });
\ No newline at end of file
diff --git a/wp-content/themes/cosmopet/static/front-page/css/style.css b/wp-content/themes/cosmopet/static/front-page/css/style.css
index da5d648..12bdf8b 100644
--- a/wp-content/themes/cosmopet/static/front-page/css/style.css
+++ b/wp-content/themes/cosmopet/static/front-page/css/style.css
@@ -4552,6 +4552,7 @@ color: #f4f1f0;
 .modal__aside {
     position: fixed;
     transition: right 0.3s ease-in-out;
+    right: -400px;
 }
 
 .modal__aside.active {
diff --git a/wp-content/themes/cosmopet/static/front-page/js/main.js b/wp-content/themes/cosmopet/static/front-page/js/main.js
index a855796..ed0a66b 100644
--- a/wp-content/themes/cosmopet/static/front-page/js/main.js
+++ b/wp-content/themes/cosmopet/static/front-page/js/main.js
@@ -471,6 +471,54 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
+// Находим все элементы с классом login-open
+document.addEventListener('DOMContentLoaded', function() {
+    const loginButtons = document.querySelectorAll('.login-open');
+    
+    loginButtons.forEach(button => {
+      button.addEventListener('click', function(event) {
+        event.preventDefault();
+        
+        const modal = document.querySelector('.modal');
+        const modalAside = document.querySelector('.modal__aside');
+        const modalLogin = document.querySelector('.modal__login');
+        
+        modal.classList.add('active');
+        modalLogin.classList.add('active');
+        
+        // Set width and slide in from right
+        modalAside.style.width = '20vw';
+        modalAside.style.right = '0';
+      });
+    });
+    
+    const closeButtons = document.querySelectorAll('.modal-close');
+    const modal = document.querySelector('.modal');
+    
+    closeButtons.forEach(button => {
+      button.addEventListener('click', closeModal);
+    });
+    
+    modal.addEventListener('click', function(event) {
+      if (event.target === modal) {
+        closeModal();
+      }
+    });
+    
+    function closeModal() {
+      const modal = document.querySelector('.modal');
+      const modalAside = document.querySelector('.modal__aside');
+      const modalLogin = document.querySelector('.modal__login');
+      
+      modal.classList.remove('active');
+      modalLogin.classList.remove('active');
+      
+      // Reset styles
+      modalAside.style.width = '';
+      modalAside.style.right = '-30vw';
+    }
+});
+
 
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize Swiper