diff --git a/src/App.vue b/src/App.vue
index 28f33e6..b034314 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -240,11 +240,11 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start; /* Выравниваем элементы по верхнему краю */
   text-decoration: none;
   color: #6c757d;
   transition: all 0.2s ease;
-  padding: 4px 0;
+  padding: 8px 0 0; /* Увеличиваем отступ сверху */
   position: relative;
   /* Не растягиваем сами иконки/текст, а только добавляем нижний отступ */
   padding-bottom: calc(env(safe-area-inset-bottom, 0px) / 3);
@@ -254,16 +254,28 @@ body {
 :root {
   --nav-height: 60px;
   --header-height: 56px;
+  --safe-area-bottom: 0px; /* Базовое значение */
 }
 
-/* Учет Safe Area на устройствах с вырезами (iPhone X и новее) */
-@supports (padding-bottom: env(safe-area-inset-bottom)) {
+/* Специальная поддержка для устройств с вырезом (iPhone X и новее) */
+@supports (padding: env(safe-area-inset-bottom)) {
+  :root {
+    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  }
+  
   .mobile-nav {
-    height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
+    height: calc(var(--nav-height) + var(--safe-area-bottom));
+    padding-bottom: var(--safe-area-bottom);
+    /* Перемещаем содержимое вверх, чтобы оно не перекрывалось home indicator */
+    padding-top: 5px;
   }
   
   .app-content {
-    height: calc(100% - var(--nav-height) - env(safe-area-inset-bottom, 0px));
+    height: calc(100% - var(--nav-height) - var(--safe-area-bottom));
+  }
+  
+  .nav-item {
+    padding-bottom: var(--safe-area-bottom);
   }
 }