diff --git a/resources/lang/en/home.php b/resources/lang/en/home.php
index 8ca677f5..d8e6a554 100644
--- a/resources/lang/en/home.php
+++ b/resources/lang/en/home.php
@@ -8,5 +8,11 @@
         'prefix' => 'You can create a secret note with ',
         'link'   => 'additional settings',
     ],
-    'create_btn'  => 'Create note',
+    'create_btn' => 'Create note',
+    'cases'      => [
+        'title'        => 'How can I use SecretNotes?',
+        'card_1_title' => 'Share passwords securely at work',
+        'card_2_title' => 'Give out one-time promo codes',
+        'card_3_title' => 'Share secrets with friends',
+    ],
 ];
diff --git a/resources/lang/ru/home.php b/resources/lang/ru/home.php
index 7b8d5e1b..0e7fcd57 100644
--- a/resources/lang/ru/home.php
+++ b/resources/lang/ru/home.php
@@ -9,4 +9,10 @@
         'link'   => 'дополнительными настройками',
     ],
     'create_btn' => 'Создать заметку',
+    'cases'      => [
+        'title'        => 'Как использовать SecretNotes?',
+        'card_1_title' => 'Безопасно передавайте пароли на работе',
+        'card_2_title' => 'Раздавайте одноразовые промокоды',
+        'card_3_title' => 'Делитесь секретами с друзьями',
+    ],
 ];
diff --git a/resources/views/home/layout/cases.blade.php b/resources/views/home/layout/cases.blade.php
index 96a81aa2..95f9234b 100644
--- a/resources/views/home/layout/cases.blade.php
+++ b/resources/views/home/layout/cases.blade.php
@@ -1,83 +1,79 @@
-<div class="container px-4 py-5" id="custom-cards">
-    <h2 class="pb-2 border-bottom">Как мне пригодится SecretNotes?</h2>
-
-    <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
-        <div class="col">
+<div class="container py-5 d-none d-md-block" id="custom-cards">
+    <div class="row py-2 py-md-4 justify-content-center">
+        <div class="col-8">
+            <h2>{{ __('home.cases.title') }}</h2>
+        </div>
+    </div>
+    <div class="row py-2 py-md-4 justify-content-center">
+        <div class="col-4">
             <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg"
                  style="background: url('{{ asset('assets/unsplash-photo-1.jpg') }}') center;">
                 <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
-                    <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
+                    <h3 class="pt-1 mt-3 mb-4 lh-1 fw-bold">
+                        {{ __('home.cases.card_1_title') }}
+                    </h3>
                     <ul class="d-flex list-unstyled mt-auto">
-                        <li class="me-auto">
-                            <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32"
-                                 class="rounded-circle border border-white">
-                        </li>
-                        <li class="d-flex align-items-center me-3">
+                        <li class="d-flex align-items-center ms-auto">
                             <svg class="bi me-2" width="1em" height="1em">
                                 <use xlink:href="#geo-fill"/>
                             </svg>
-                            <small>Earth</small>
+                            <small>Business</small>
                         </li>
                         <li class="d-flex align-items-center">
                             <svg class="bi me-2" width="1em" height="1em">
                                 <use xlink:href="#calendar3"/>
                             </svg>
-                            <small>3d</small>
+                            <small>42 likes</small>
                         </li>
                     </ul>
                 </div>
             </div>
         </div>
 
-        <div class="col">
+        <div class="col-4">
             <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg"
                  style="background: url('{{ asset('assets/unsplash-photo-2.jpg') }}') center;">
                 <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
-                    <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple
-                        lines</h2>
+                    <h3 class="pt-1 mt-3 mb-4 lh-1 fw-bold">
+                        {{ __('home.cases.card_2_title') }}
+                    </h3>
                     <ul class="d-flex list-unstyled mt-auto">
-                        <li class="me-auto">
-                            <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32"
-                                 class="rounded-circle border border-white">
-                        </li>
-                        <li class="d-flex align-items-center me-3">
+                        <li class="d-flex align-items-center ms-auto">
                             <svg class="bi me-2" width="1em" height="1em">
                                 <use xlink:href="#geo-fill"/>
                             </svg>
-                            <small>Pakistan</small>
+                            <small>Social</small>
                         </li>
                         <li class="d-flex align-items-center">
                             <svg class="bi me-2" width="1em" height="1em">
                                 <use xlink:href="#calendar3"/>
                             </svg>
-                            <small>4d</small>
+                            <small>27 likes</small>
                         </li>
                     </ul>
                 </div>
             </div>
         </div>
 
-        <div class="col">
+        <div class="col-4">
             <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg"
                  style="background: url('{{ asset('assets/unsplash-photo-3.jpg') }}') center;">
                 <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
-                    <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
+                    <h3 class="pt-1 mt-3 mb-4 lh-1 fw-bold">
+                        {{ __('home.cases.card_3_title') }}
+                    </h3>
                     <ul class="d-flex list-unstyled mt-auto">
-                        <li class="me-auto">
-                            <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32"
-                                 class="rounded-circle border border-white">
-                        </li>
-                        <li class="d-flex align-items-center me-3">
+                        <li class="d-flex align-items-center ms-auto">
                             <svg class="bi me-2" width="1em" height="1em">
                                 <use xlink:href="#geo-fill"/>
                             </svg>
-                            <small>California</small>
+                            <small>Personal</small>
                         </li>
                         <li class="d-flex align-items-center">
                             <svg class="bi me-2" width="1em" height="1em">
                                 <use xlink:href="#calendar3"/>
                             </svg>
-                            <small>5d</small>
+                            <small>13 likes</small>
                         </li>
                     </ul>
                 </div>
diff --git a/resources/views/note/layout/row-textarea.blade.php b/resources/views/note/layout/row-textarea.blade.php
index 42564cce..bd78f9c8 100644
--- a/resources/views/note/layout/row-textarea.blade.php
+++ b/resources/views/note/layout/row-textarea.blade.php
@@ -1,7 +1,7 @@
 <div class="row mt-4 mt-lg-5">
     <div class="col-md-8 mx-auto">
 
-        <label for="text" class="form-label h3 mb-3">{{ __('home.title') }}</label>
+        <label for="text" class="form-label h3 mb-4">{{ __('home.title') }}</label>
         <textarea class="form-control"
                   name="text"
                   id="text"