diff --git a/templates/index.html b/templates/index.html
index b12466d..7d8106a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -271,7 +271,7 @@
             max-width: 100%; /* Ограничение ширины изображений */
             height: auto;
         }
-        #note-modal { 
+        #add-modal, #note-modal { 
             display: none; 
             position: fixed; 
             top: 50%; 
@@ -284,33 +284,33 @@
             z-index: 1000; 
             width: 500px; 
         }
-        #note-modal.dark-theme {
+        #add-modal.dark-theme, #note-modal.dark-theme {
             background: #2a2a2a;
             border-color: #444;
             box-shadow: 0 0 10px rgba(0,0,0,0.5);
         }
-        #note-modal .markdown-buttons { margin-bottom: 10px; }
-        #note-modal .markdown-buttons button { margin-right: 5px; padding: 5px 10px; }
-        #note-modal textarea { width: 100%; height: 200px; margin-bottom: 10px; }
-        #note-modal.dark-theme textarea {
+        #add-modal .markdown-buttons, #note-modal .markdown-buttons { margin-bottom: 10px; }
+        #add-modal .markdown-buttons button, #note-modal .markdown-buttons button { margin-right: 5px; padding: 5px 10px; }
+        #add-modal textarea, #note-modal textarea { width: 100%; height: 200px; margin-bottom: 10px; }
+        #add-modal.dark-theme textarea, #note-modal.dark-theme textarea {
             background: #333;
             color: #e0e0e0;
             border: 1px solid #555;
         }
-        #note-modal .image-upload {
+        #add-modal .image-upload, #note-modal .image-upload {
             margin-bottom: 10px;
         }
-        #note-modal .image-upload input {
+        #add-modal .image-upload input, #note-modal .image-upload input {
             margin-right: 10px;
         }
-        #note-modal button { margin-right: 10px; }
-        #note-modal.dark-theme button {
+        #add-modal button, #note-modal button { margin-right: 10px; }
+        #add-modal.dark-theme button, #note-modal.dark-theme button {
             background: #007bff;
             color: white;
             border-color: #007bff;
         }
-        #note-modal button:hover { background: #0056b3; }
-        #note-modal.dark-theme button:hover { background: #004d99; }
+        #add-modal button:hover, #note-modal button:hover { background: #0056b3; }
+        #add-modal.dark-theme button:hover, #note-modal.dark-theme button:hover { background: #004d99; }
         #modal-overlay { 
             display: none; 
             position: fixed; 
@@ -379,23 +379,7 @@
                 <option value="">Все папки</option>
             </select>
         </div>
-        <div class="form-container">
-            <h2>Добавить запись</h2>
-            <input type="text" id="rustId" placeholder="ID подключения" required>
-            <input type="text" id="computerName" placeholder="Имя компьютера" required>
-            <input type="text" id="installTime" placeholder="Время (опционально, формат: ГГГГ-ММ-ДД ЧЧ:ММ:СС)">
-            <select id="protocol">
-                <option value="rustdesk" selected>RustDesk</option>
-                <option value="anydesk">AnyDesk</option>
-                <option value="ammyy">Ammyy Admin</option>
-                <option value="teamviewer">TeamViewer</option>
-                <option value="vnc">VNC</option>
-                <option value="rdp">RDP</option>
-            </select>
-            <textarea id="note" placeholder="Заметка (Markdown поддерживается)"></textarea>
-            <button onclick="addInstall()">Добавить</button>
-            <div class="time-hint">Пример: 2025-03-05 14:30:00</div>
-        </div>
+        <button onclick="openAddModal()">Добавить запись</button>
         <div class="header">
             <div onclick="sortInstalls('computer_name')">Имя компьютера<span class="sort-arrow"></span></div>
             <div onclick="sortInstalls('rust_id')">ID подключения<span class="sort-arrow"></span></div>
@@ -410,6 +394,24 @@
     </div>
 
     <div id="modal-overlay"></div>
+    <div id="add-modal">
+        <h3>Добавить запись</h3>
+        <input type="text" id="add-rustId" placeholder="ID подключения" required>
+        <input type="text" id="add-computerName" placeholder="Имя компьютера" required>
+        <input type="text" id="add-installTime" placeholder="Время (опционально, формат: ГГГГ-ММ-ДД ЧЧ:ММ:СС)">
+        <select id="add-protocol">
+            <option value="rustdesk" selected>RustDesk</option>
+            <option value="anydesk">AnyDesk</option>
+            <option value="ammyy">Ammyy Admin</option>
+            <option value="teamviewer">TeamViewer</option>
+            <option value="vnc">VNC</option>
+            <option value="rdp">RDP</option>
+        </select>
+        <textarea id="add-note" placeholder="Заметка (Markdown поддерживается)"></textarea>
+        <button onclick="addInstall()">Добавить</button>
+        <button onclick="closeAddModal()">Закрыть</button>
+        <div class="time-hint">Пример: 2025-03-05 14:30:00</div>
+    </div>
     <div id="note-modal">
         <h3>Редактировать заметку</h3>
         <div class="markdown-buttons">
@@ -460,6 +462,7 @@
                 document.getElementById('installs-container').classList.add('dark-theme');
                 document.getElementById('tree-container').classList.add('dark-theme');
                 document.getElementById('notes-panel').classList.add('dark-theme');
+                document.getElementById('add-modal').classList.add('dark-theme');
                 document.getElementById('note-modal').classList.add('dark-theme');
                 document.getElementById('search-container').classList.add('dark-theme');
                 document.getElementById('import-label').classList.add('dark-theme');
@@ -507,6 +510,29 @@
                 isResizing = false;
                 document.body.style.cursor = 'default';
             });
+
+            // Обработка клавиш для навигации
+            document.addEventListener('keydown', (e) => {
+                if (!selectedFolderId || !allInstalls.length) return;
+
+                const items = $('#installs-list .install-item');
+                let currentIndex = items.index($('.install-item.selected'));
+
+                if (e.key === 'ArrowUp' && currentIndex > 0) {
+                    e.preventDefault();
+                    currentIndex--;
+                } else if (e.key === 'ArrowDown' && currentIndex < items.length - 1) {
+                    e.preventDefault();
+                    currentIndex++;
+                } else {
+                    return;
+                }
+
+                selectedInstallId = $(items[currentIndex]).data('id');
+                $('.install-item').removeClass('selected');
+                $(items[currentIndex]).addClass('selected');
+                updateNotesPanel();
+            });
         });
 
         function toggleTheme() {
@@ -514,6 +540,7 @@
             const installsContainer = document.getElementById('installs-container');
             const treeContainer = document.getElementById('tree-container');
             const notesPanel = document.getElementById('notes-panel');
+            const addModal = document.getElementById('add-modal');
             const noteModal = document.getElementById('note-modal');
             const searchContainer = document.getElementById('search-container');
             const importLabel = document.getElementById('import-label');
@@ -528,6 +555,7 @@
                 installsContainer.classList.remove('dark-theme');
                 treeContainer.classList.remove('dark-theme');
                 notesPanel.classList.remove('dark-theme');
+                addModal.classList.remove('dark-theme');
                 noteModal.classList.remove('dark-theme');
                 searchContainer.classList.remove('dark-theme');
                 importLabel.classList.remove('dark-theme');
@@ -543,6 +571,7 @@
                 installsContainer.classList.add('dark-theme');
                 treeContainer.classList.add('dark-theme');
                 notesPanel.classList.add('dark-theme');
+                addModal.classList.add('dark-theme');
                 noteModal.classList.add('dark-theme');
                 searchContainer.classList.add('dark-theme');
                 importLabel.classList.add('dark-theme');
@@ -827,12 +856,27 @@
             }
         }
 
+        function openAddModal() {
+            $('#add-rustId').val('');
+            $('#add-computerName').val('');
+            $('#add-installTime').val('');
+            $('#add-protocol').val('rustdesk');
+            $('#add-note').val('');
+            $('#add-modal').show();
+            $('#modal-overlay').show();
+        }
+
+        function closeAddModal() {
+            $('#add-modal').hide();
+            $('#modal-overlay').hide();
+        }
+
         function addInstall() {
-            const rustId = $('#rustId').val();
-            const computerName = $('#computerName').val();
-            const installTime = $('#installTime').val() || '';
-            const protocol = $('#protocol').val();
-            const note = $('#note').val() || '';
+            const rustId = $('#add-rustId').val();
+            const computerName = $('#add-computerName').val();
+            const installTime = $('#add-installTime').val() || '';
+            const protocol = $('#add-protocol').val();
+            const note = $('#add-note').val() || '';
 
             if (installTime && !/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/.test(installTime)) {
                 alert("Неверный формат времени. Используйте ГГГГ-ММ-ДД ЧЧ:ММ:СС (например, 2025-03-05 14:30:00)");
@@ -846,6 +890,7 @@
                 data: JSON.stringify({ rust_id: rustId, computer_name: computerName, install_time: installTime, folder_id: selectedFolderId, protocol: protocol, note: note }),
                 success: function () {
                     loadInstalls(selectedFolderId);
+                    closeAddModal();
                 },
                 error: function (xhr, status, error) {
                     if (xhr.status === 400) {
@@ -979,11 +1024,11 @@
 
         function openNoteModal(installId, currentNote) {
             console.log('Opening note modal for installId:', installId, 'with note:', currentNote);
-            selectedInstallId = installId; // Устанавливаем выбранный ID
-            $('#note-textarea').val(currentNote || ''); // Устанавливаем текущую заметку или пустую строку
+            selectedInstallId = installId; // Сохраняем выделение
+            $('#note-textarea').val(currentNote || '');
             $('#note-modal').show();
             $('#modal-overlay').show();
-            document.getElementById('image-upload-input').value = ''; // Сбрасываем поле загрузки
+            document.getElementById('image-upload-input').value = '';
         }
 
         function uploadImage() {
@@ -995,8 +1040,8 @@
             }
 
             const formData = new FormData();
-            formData.append('install_id', selectedInstallId); // Отправляем как часть формы
-            formData.append('file', file); // Отправляем файл
+            formData.append('install_id', selectedInstallId);
+            formData.append('file', file);
 
             $.ajax({
                 url: `${API_URL}/upload-image`,
@@ -1006,7 +1051,7 @@
                 contentType: false,
                 success: function (response) {
                     console.log('Image uploaded:', response);
-                    const imageUrl = response.url; // Предполагаем, что сервер возвращает { url: "path/to/image" }
+                    const imageUrl = response.url;
                     const textarea = $('#note-textarea');
                     const cursorPos = textarea[0].selectionStart;
                     const text = textarea.val();
@@ -1048,7 +1093,7 @@
                     }),
                     success: function () {
                         console.log('Note saved successfully');
-                        loadInstalls(selectedFolderId); // Обновляем список установок
+                        loadInstalls(selectedFolderId);
                         closeNoteModal();
                     },
                     error: function (xhr, status, error) {
@@ -1062,16 +1107,26 @@
         function closeNoteModal() {
             $('#note-modal').hide();
             $('#modal-overlay').hide();
-            $('#note-textarea').val(''); // Очищаем текстовое поле
-            selectedInstallId = null; // Сбрасываем выбранный ID
-            document.getElementById('image-upload-input').value = ''; // Сбрасываем поле загрузки
+            $('#note-textarea').val('');
+            document.getElementById('image-upload-input').value = '';
+            // Фокус остаётся на текущей записи
+            if (selectedInstallId) {
+                const items = $('#installs-list .install-item');
+                $(`#installs-list .install-item[data-id="${selectedInstallId}"]`).addClass('selected');
+                updateNotesPanel();
+            }
+        }
+
+        function closeAddModal() {
+            $('#add-modal').hide();
+            $('#modal-overlay').hide();
         }
 
         function updateNotesPanel() {
             if (selectedInstallId) {
                 const install = allInstalls.find(i => i.id === selectedInstallId);
                 if (install && install.note) {
-                    $('#notes-content').html(marked.parse(install.note)); // Рендеринг Markdown с изображениями
+                    $('#notes-content').html(marked.parse(install.note));
                 } else {
                     $('#notes-content').html('<p>Нет заметок</p>');
                 }