diff --git a/css/index.cases.css b/css/index.cases.css
index 0f2ee06..54ae27b 100644
--- a/css/index.cases.css
+++ b/css/index.cases.css
@@ -1,3 +1,31 @@
 #cases {
     padding: 18px;
-}
\ No newline at end of file
+}
+
+.cases-content{
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 10px;
+    background-color: inherit;
+    padding: 10px;
+}
+
+.cases-item-big {
+    /*grid-column: 1 / 3;*/
+    grid-row: 1 / span 2;
+}
+
+.cases-item .cases-paragraph-hidden {
+    display: none;
+}
+
+.cases-item-big .cases-paragraph-hidden {
+    display: block;
+}
+
+/*@media (min-width: 774px) {
+    .cases-item-big {
+        grid-column: 1 / 1;
+        grid-row: 1 / span 2;
+    }
+}*/
\ No newline at end of file
diff --git a/css/index.nav.css b/css/index.nav.css
index b4e855c..8d419d7 100644
--- a/css/index.nav.css
+++ b/css/index.nav.css
@@ -21,7 +21,7 @@
     display: flex;
     flex-direction: column;
     max-width: 100%;
-    margin: 30px auto;
+    margin: 50px auto;
 }
 
 .navigation_content a,
diff --git a/css/index.services.css b/css/index.services.css
index 3692789..27f29dc 100644
--- a/css/index.services.css
+++ b/css/index.services.css
@@ -16,7 +16,7 @@
   }
   
   .services-carousel-item {
-    flex: 0 0 100%;
+    flex: 0 0 calc(100% - 10px);
     margin-right: 10px; 
     text-align: center;
     /*display: flex;
@@ -50,13 +50,4 @@
   .next-button:hover {
     background-color: #555; 
   }
-  
-  
-  .prev-button {
-    float: left;
-  }
-  
-  .next-button {
-    float: right;
-  }
   
\ No newline at end of file
diff --git a/html/index.cases.partial.html b/html/index.cases.partial.html
index 04142c6..f7107a2 100644
--- a/html/index.cases.partial.html
+++ b/html/index.cases.partial.html
@@ -1,32 +1,28 @@
 <section id="cases" class="container">
     <h2>Best Cases</h2>
-    <div>
-        <div>
-            <img src="#" alt="">
-            <div>
+    <div class="cases-content">
+            <div class="cases-item cases-item-big">
                 <p>In favor of the plaintiff, $ 13,500 was recovered from the respondent 
                     surgeon for improperly performing cosmetic surgery for correcting the shape of the plaintiff’s nose. </p>
-                <p>The plaintiff claimed that she, as a patient, had entered into a contract with the surgeon, 
+                <p class="cases-paragraph-hidden">The plaintiff claimed that she, as a patient, had entered into a contract with the surgeon, 
                     and he agreed to perform plastic surgery of her nose in order to increase her aesthetic appeal. 
                     The appearance of the plaintiff didn't improve, actually, 
                     her face was disfigured. I helped the woman to receive her pain and suffering money.</p>
             </div>
-            <div>
+            <div class="cases-item">
                 <p>On 04.03.2017, the Family Court of the State of New York satisfied the claims of attorney William Rhoades. 
                     in the interests of the Client about deprivation of parental rights.</p>
-                <p>The court recognized that the father must be deprived of parental rights, 
+                <p class="cases-paragraph-hidden">The court recognized that the father must be deprived of parental rights, 
                     as he does not fulfill his obligations to the child in accordance with the norms of the Family Law. 
                     It was a difficult case, but I have proven that the presence of the father negatively affects the child, 
                     causes aggression in him immediately and destroys the psyche.</p>
             </div>
-            <div>
+            <div class="cases-item">
                 <p>In June 2019, the inheritance division case was considered at the Surrogate’s Court of the State of New York. 
                     The plaintiff insisted that his father died without leaving a will, and the plaintiff is the primary heir. </p>
-                <p>I helped the plaintiff to prove to the court that he is the successor, and can count on 80% of the 
+                <p class="cases-paragraph-hidden">I helped the plaintiff to prove to the court that he is the successor, and can count on 80% of the 
                     entire inheritance, which included significant amounts in accounts in banks of America, 
                     as well as 3 mansions in Hampton, a yacht fleet and 500 square meters of commercial real estate in NY.</p>
             </div>
-        </div>
-
     </div>
 </section>
\ No newline at end of file
diff --git a/js/cases.js b/js/cases.js
new file mode 100644
index 0000000..6c2cfa1
--- /dev/null
+++ b/js/cases.js
@@ -0,0 +1,12 @@
+const casesItem = document.querySelectorAll('.cases-item');
+let previousCaseItem = null;
+
+casesItem.forEach((caseItem) => {
+    caseItem.addEventListener('mouseover', (_) => {
+        if (previousCaseItem !== null) {
+            previousCaseItem.classList.remove('cases-item-big');
+        }
+        caseItem.classList.add('cases-item-big');
+        previousCaseItem = caseItem;
+    });
+});
diff --git a/js/index.js b/js/index.js
index c0e46bd..1d8b1cb 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,4 +1,5 @@
 document.addEventListener('partialsLoaded', async () => {
     await import('./nav.js');
     await import('./services.js');
+    await import('./cases.js');
 });
diff --git a/js/services.js b/js/services.js
index d2357a4..1599ced 100644
--- a/js/services.js
+++ b/js/services.js
@@ -34,39 +34,31 @@
     prevButton.addEventListener('click', moveToPrev);
     nextButton.addEventListener('click', moveToNext);
 });*/
-const carousel = document.querySelector('.services-carousel');
-  const prevButton = document.querySelector('.prev-button');
-  const nextButton = document.querySelector('.next-button');
-
-  
-  const itemWidth = carousel.querySelector('.services-carousel-item').offsetWidth;
-
- 
-  let currentPosition = 0;
+const servicesCarousel = document.querySelector('.services-carousel');
+    const prevButton = document.querySelector('.prev-button');
+    const nextButton = document.querySelector('.next-button');
+    const slideWidth = servicesCarousel.querySelector('.services-carousel-item').offsetWidth;
+    let currentPosition = 0;
 
-  
-  function moveToNext() {
-    currentPosition += itemWidth;
-    if (currentPosition > 0) {
-      currentPosition = -(itemWidth * (carousel.children.length - 1));
+    function moveToNext() {
+        currentPosition += slideWidth;
+        if (currentPosition > 0) {
+            currentPosition = -(slideWidth * (servicesCarousel.children.length - 1));
+        }
+        updateCarouselPosition();
     }
-    updateCarouselPosition();
-  }
 
-  
-  function moveToPrev() {
-    currentPosition -= itemWidth;
-    if (currentPosition < -(itemWidth * (carousel.children.length - 1))) {
-      currentPosition = 0;
+    function moveToPrev() {
+        currentPosition -= slideWidth;
+        if (currentPosition < -(slideWidth * (servicesCarousel.children.length - 1))) {
+            currentPosition = 0;
+        }
+        updateCarouselPosition();
     }
-    updateCarouselPosition();
-  }
 
- 
-  function updateCarouselPosition() {
-    carousel.style.transform = `translateX(${currentPosition}px)`;
-  }
+    function updateCarouselPosition() {
+        servicesCarousel.style.transform = `translateX(${currentPosition}px)`;
+    }
 
- 
-  prevButton.addEventListener('click', moveToPrev);
-  nextButton.addEventListener('click', moveToNext);
+    prevButton.addEventListener('click', moveToPrev);
+    nextButton.addEventListener('click', moveToNext);
\ No newline at end of file