diff --git a/index.html b/index.html
index 3582f49..3f397b3 100644
--- a/index.html
+++ b/index.html
@@ -7,43 +7,16 @@
   </head>
 
   <body>
-    <div class="container">
-      <ul class="comments">
-        <li class="comment">
-          <div class="comment-header">
-            <div>Глеб Фокин</div>
-            <div>12.02.22 12:18</div>
-          </div>
-          <div class="comment-body">
-            <div class="comment-text">
-              Это будет первый комментарий на этой странице
-            </div>
-          </div>
-          <div class="comment-footer">
-            <div class="likes">
-              <span class="likes-counter">3</span>
-              <button class="like-button"></button>
-            </div>
-          </div>
-        </li>
-        <li class="comment">
-          <div class="comment-header">
-            <div>Варвара Н.</div>
-            <div>13.02.22 19:22</div>
-          </div>
-          <div class="comment-body">
-            <div class="comment-text">
-              Мне нравится как оформлена эта страница! ❤
-            </div>
-          </div>
-          <div class="comment-footer">
-            <div class="likes">
-              <span class="likes-counter">75</span>
-              <button class="like-button -active-like"></button>
-            </div>
-          </div>
-        </li>
-      </ul>
+     <div class="container">
+      <div class="comments-container">
+        <div id="loading" class="loading">Загрузка комментариев...</div>
+        <ul class="comments" style="display: none;">
+        </ul>
+        <div id="error-message" class="error-message" style="display: none;">
+          Не удалось загрузить комментарии. 
+          <button id="retry-button">Попробовать снова</button>
+        </div>
+      </div>
       <div class="add-form">
         <input
           type="text"
@@ -53,7 +26,7 @@
         <textarea
           type="textarea"
           class="add-form-text"
-          placeholder="Введите ваш коментарий"
+          placeholder="Введите ваш комментарий"
           rows="4"
         ></textarea>
         <div class="add-form-row">
@@ -64,221 +37,354 @@
   </body>
 
   <script>
+    const host = "https://wedev-api.sky.pro/api/v1/dmitriy-skachkov";
 
-const host = "https://wedev-api.sky.pro/api/v1/dmitriy-skachkov"
+    function delay(interval = 300) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, interval);
+      });
+    }
 
-const fetchComments = () => {
-  return fetch(host + "/comments").then(res => {
-    if (!res.ok) {
-      throw new Error('Ошибка загрузки комментариев');
+    function loadComments() {
+      return fetch(host + "/comments")
+        .then((response) => {
+          if (!response.ok) {
+            if (response.status >= 500) {
+              throw new Error('SERVER_ERROR');
+            }
+            throw new Error('Ошибка загрузки комментариев');
+          }
+          return response.json();
+        })
+        .then((data) => {
+          return data.comments.map(comment => {
+            return {
+              id: comment.id,
+              name: comment.author.name,
+              date: new Date(comment.date),
+              text: comment.text,
+              likes: comment.likes,
+              isLiked: false,
+              isLikeLoading: false
+            };
+          });
+        })
+        .catch((error) => {
+          if (error.message === 'Failed to fetch') {
+            throw new Error('NETWORK_ERROR');
+          }
+          throw error;
+        });
     }
-    return res.json()
-  })
-  .then((responseData) => {
-    const appComments = responseData.comments.map(comment => {
-      return {
-        id: comment.id,
-        name: comment.author.name,
-        date: new Date(comment.date),
-        text: comment.text,
-        likes: comment.likes,
-        isLiked: false,
-      }
-    })
-    return appComments
-  })
-}
 
-fetchComments().then(data => {
-  updateComments(data);
-  renderComments()
-}).catch(error => {
-  console.error('Ошибка загрузки комментариев:', error);
-  alert('Не удалось загрузить комментарии');
-})
+    const postComment = (name, text, forceError = false, retryCount = 0) => {
+      const bodyData = forceError 
+        ? JSON.stringify({
+            text: text,
+            name: name,
+            forceError: true
+          })
+        : JSON.stringify({
+            text: text,
+            name: name
+          });
 
-const updateComments = (newComments) => {
-  comments = newComments
-}
+      return fetch(host + "/comments", {
+        method: "POST",
+        body: bodyData,
+      })
+        .then((response) => {
+          if (!response.ok) {
+            if (response.status === 400) {
+              return response.json().then(errorData => {
+                throw new Error(`VALIDATION_ERROR:${errorData.error || 'Неверные данные'}`);
+              });
+            } else if (response.status >= 500) {
+              if (retryCount < 3) {
+                return delay(1000 * (retryCount + 1)).then(() => {
+                  return postComment(name, text, forceError, retryCount + 1);
+                });
+              }
+              throw new Error('SERVER_ERROR');
+            }
+            return response.text().then(errorText => {
+              throw new Error(`Ошибка сервера: ${response.status} ${errorText}`);
+            });
+          }
+          return response.json();
+        })
+        .catch((error) => {
+          if (error.message === 'Failed to fetch') {
+            throw new Error('NETWORK_ERROR');
+          }
+          throw error;
+        });
+    };
 
-let comments = [];
+    let comments = [];
+    let replyingToCommentId = null;
+    let currentFormData = { name: '', text: '' };
 
-const postComment = (name, text) => {
-  return fetch(host + "/comments", {
-    method: "POST",
-    body: JSON.stringify({
-      text: text,
-      name: name,
-    }),
-  })
-  .then((response) => {
-    if (!response.ok) {
-      return response.text().then(text => {
-        throw new Error(`Ошибка сервера: ${response.status} ${text}`);
-      });
-    }
-    return response.json();
-  })
-}
+    const nameInput = document.querySelector('.add-form-name');
+    const textInput = document.querySelector('.add-form-text');
+    const addButton = document.querySelector('.add-form-button');
+    const commentsList = document.querySelector('.comments');
+    const loadingElement = document.getElementById('loading');
+    const errorMessageElement = document.getElementById('error-message');
+    const retryButton = document.getElementById('retry-button');
 
-const nameInput = document.querySelector('.add-form-name');
-const textInput = document.querySelector('.add-form-text');
-const addButton = document.querySelector('.add-form-button');
-const commentsList = document.querySelector('.comments');
+    function escapeHtml(unsafe) {
+      if (!unsafe) return '';
+      return unsafe
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#039;');
+    }
 
-let replyingToCommentId = null;
+    function updateComments(newComments) {
+      comments = newComments;
+    }
 
-function escapeHtml(unsafe) {
-  if (!unsafe) return '';
-  return unsafe
-    .replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#039;');
-}
+    function renderComments() {
+      let commentsHTML = '';
+      
+      comments.forEach((comment) => {
+        const formattedDate = comment.date instanceof Date 
+          ? comment.date.toLocaleDateString('ru-RU', {
+              day: '2-digit',
+              month: '2-digit',
+              year: '2-digit',
+              hour: '2-digit',
+              minute: '2-digit'
+            })
+          : comment.date;
+        
+        const likeButtonClass = comment.isLiked ? '-active-like' : '';
+        const loadingClass = comment.isLikeLoading ? '-loading-like' : '';
+        
+        commentsHTML += `
+          <li class="comment" data-id="${comment.id}">
+            <div class="comment-header">
+              <div>${escapeHtml(comment.name)}</div>
+              <div>${formattedDate}</div>
+            </div>
+            <div class="comment-body">
+              <div class="comment-text">
+                ${escapeHtml(comment.text)}
+              </div>
+            </div>
+            <div class="comment-footer">
+              <div class="likes">
+                <span class="likes-counter">${comment.likes}</span>
+                <button class="like-button ${likeButtonClass} ${loadingClass}" 
+                        data-id="${comment.id}"
+                        ${comment.isLikeLoading ? 'disabled' : ''}>
+                </button>
+              </div>
+            </div>
+          </li>
+        `;
+      });
+      
+      commentsList.innerHTML = commentsHTML;
+      
+      document.querySelectorAll('.like-button').forEach((button) => {
+        button.addEventListener('click', (event) => {
+          event.stopPropagation();
+          const commentId = parseInt(event.target.dataset.id);
+          toggleLike(commentId);
+        });
+      });
+      
+      document.querySelectorAll('.comment').forEach((commentElement) => {
+        commentElement.addEventListener('click', (event) => {
+          if (!event.target.closest('.like-button')) {
+            const commentId = parseInt(commentElement.dataset.id);
+            replyToComment(commentId);
+          }
+        });
+      });
+    }
 
-function renderComments() {
-  let commentsHTML = '';
-  
-  comments.forEach((comment) => {
-    const formattedDate = comment.date instanceof Date 
-      ? comment.date.toLocaleDateString('ru-RU', {
-          day: '2-digit',
-          month: '2-digit',
-          year: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit'
-        })
-      : comment.date;
-    
-    commentsHTML += `
-      <li class="comment" data-id="${comment.id}">
-        <div class="comment-header">
-          <div>${escapeHtml(comment.name)}</div>
-          <div>${formattedDate}</div>
-        </div>
-        <div class="comment-body">
-          <div class="comment-text">
-            ${escapeHtml(comment.text)}
-          </div>
-        </div>
-        <div class="comment-footer">
-          <div class="likes">
-            <span class="likes-counter">${comment.likes}</span>
-            <button class="like-button ${comment.isLiked ? '-active-like' : ''}" data-id="${comment.id}"></button>
-          </div>
-        </div>
-      </li>
-    `;
-  });
-  
-  commentsList.innerHTML = commentsHTML;
-  
-  document.querySelectorAll('.like-button').forEach((button) => {
-    button.addEventListener('click', (event) => {
-      event.stopPropagation();
-      const commentId = parseInt(event.target.dataset.id);
-      toggleLike(commentId);
-    });
-  });
-  
-  document.querySelectorAll('.comment').forEach((commentElement) => {
-    commentElement.addEventListener('click', (event) => {
-      if (!event.target.closest('.like-button')) {
-        const commentId = parseInt(commentElement.dataset.id);
-        replyToComment(commentId);
+    function toggleLike(commentId) {
+      const comment = comments.find(c => c.id === commentId);
+      
+      if (comment && !comment.isLikeLoading) {
+        comment.isLikeLoading = true;
+        renderComments();
+        
+        delay(2000)
+          .then(() => {
+            comment.likes = comment.isLiked ? comment.likes - 1 : comment.likes + 1;
+            comment.isLiked = !comment.isLiked;
+            comment.isLikeLoading = false;
+            return comment;
+          })
+          .then(() => {
+            renderComments();
+          })
+          .catch((error) => {
+            console.error('Ошибка при установке лайка:', error);
+            comment.isLikeLoading = false;
+            renderComments();
+          });
       }
-    });
-  });
-}
-
-function toggleLike(commentId) {
-  const comment = comments.find(c => c.id === commentId);
-  
-  if (comment) {
-    if (comment.isLiked) {
-      comment.likes--;
-      comment.isLiked = false;
-    } else {
-      comment.likes++;
-      comment.isLiked = true;
     }
-    
-    renderComments();
-  }
-}
 
-function replyToComment(commentId) {
-  const comment = comments.find(c => c.id === commentId);
-  
-  if (comment) {
-    replyingToCommentId = commentId;
-    
-    const replyText = `> ${comment.name}:\n> ${comment.text}\n\n`;
-    
-    nameInput.value = comment.name;
-    textInput.value = replyText;
-    
-    textInput.focus();
-  }
-}
+    function replyToComment(commentId) {
+      const comment = comments.find(c => c.id === commentId);
+      
+      if (comment) {
+        replyingToCommentId = commentId;
+        
+        const replyText = `> ${comment.name}:\n> ${comment.text}\n\n`;
+        
+        nameInput.value = comment.name;
+        textInput.value = replyText;
+        
+        currentFormData.name = comment.name;
+        currentFormData.text = replyText;
+        
+        textInput.focus();
+      }
+    }
 
-async function addNewComment() {
-  const name = nameInput.value.trim();
-  let text = textInput.value.trim();
-  
-  if (!name || !text) {
-    alert('Пожалуйста, заполните все поля');
-    return;
-  }
-  
-  const originalText = addButton.textContent;
-  addButton.disabled = true;
-  addButton.textContent = 'Добавляем...';
-  
-  try {
-    await postComment(name, text);
-    
-    const updatedComments = await fetchComments();
-    updateComments(updatedComments);
-    renderComments();
-    
-    nameInput.value = '';
-    textInput.value = '';
-    replyingToCommentId = null;
-    
-  } catch (error) {
-    console.error('Ошибка при добавлении комментария:', error);
-    alert(`Не удалось отправить комментарий: ${error.message}`);
-  } finally {
-    addButton.disabled = false;
-    addButton.textContent = originalText;
-  }
-}
+    function addNewComment() {
+      const name = nameInput.value.trim();
+      let text = textInput.value.trim();
+      
+      if (name.length < 3) {
+        alert('Имя должно содержать не менее 3 символов');
+        return;
+      }
+      
+      if (text.length < 3) {
+        alert('Комментарий должен содержать не менее 3 символов');
+        return;
+      }
+      
+      const originalText = addButton.textContent;
+      addButton.disabled = true;
+      addButton.textContent = 'Добавляем...';
+      
+      currentFormData = { name, text };
+      
+      postComment(name, text)
+        .then(() => {
+          return loadComments();
+        })
+        .then((updatedComments) => {
+          updateComments(updatedComments);
+          renderComments();
+          
+          nameInput.value = '';
+          textInput.value = '';
+          currentFormData = { name: '', text: '' };
+          replyingToCommentId = null;
+        })
+        .catch((error) => {
+          console.error('Ошибка при добавлении комментария:', error);
+          
+          nameInput.value = currentFormData.name;
+          textInput.value = currentFormData.text;
+          
+          if (error.message === 'NETWORK_ERROR') {
+            alert('Нет соединения с интернетом. Пожалуйста, проверьте подключение и попробуйте позже.');
+          } else if (error.message.startsWith('VALIDATION_ERROR:')) {
+            const errorMsg = error.message.split(':')[1];
+            alert(`Ошибка валидации: ${errorMsg}`);
+          } else if (error.message === 'SERVER_ERROR') {
+            alert('Ошибка сервера. Пожалуйста, попробуйте позже.');
+          } else {
+            alert(`Не удалось отправить комментарий: ${error.message}`);
+          }
+        })
+        .finally(() => {
+          addButton.disabled = false;
+          addButton.textContent = originalText;
+        });
+    }
 
-function initApp() {
-  renderComments();
-  
-  addButton.addEventListener('click', addNewComment);
-  
-  nameInput.addEventListener('input', function() {
-    console.log('Имя изменено:', this.value);
-  });
-  
-  textInput.addEventListener('input', function() {
-    console.log('Комментарий изменен:', this.value);
-  });
-  
-  textInput.addEventListener('keydown', function(e) {
-    if (e.key === 'Enter' && e.ctrlKey) {
-      e.preventDefault();
-      addNewComment();
+    function initApp() {
+      loadingElement.style.display = 'block';
+      commentsList.style.display = 'none';
+      errorMessageElement.style.display = 'none';
+      
+      loadComments()
+        .then((commentsData) => {
+          updateComments(commentsData);
+          return commentsData;
+        })
+        .then(() => {
+          renderComments();
+          loadingElement.style.display = 'none';
+          commentsList.style.display = 'block';
+        })
+        .catch((error) => {
+          console.error('Ошибка загрузки комментариев:', error);
+          loadingElement.style.display = 'none';
+          
+          if (error.message === 'NETWORK_ERROR') {
+            errorMessageElement.textContent = 'Нет соединения с интернетом. Пожалуйста, проверьте подключение.';
+          } else if (error.message === 'SERVER_ERROR') {
+            errorMessageElement.textContent = 'Ошибка сервера. Пожалуйста, попробуйте позже.';
+          } else {
+            errorMessageElement.textContent = 'Не удалось загрузить комментарии: ' + error.message;
+          }
+          
+          errorMessageElement.style.display = 'block';
+        });
+      
+      retryButton.addEventListener('click', () => {
+        errorMessageElement.style.display = 'none';
+        loadingElement.style.display = 'block';
+        
+        loadComments()
+          .then((commentsData) => {
+            updateComments(commentsData);
+            renderComments();
+            loadingElement.style.display = 'none';
+            commentsList.style.display = 'block';
+          })
+          .catch((error) => {
+            console.error('Ошибка при повторной загрузке:', error);
+            loadingElement.style.display = 'none';
+            
+            if (error.message === 'NETWORK_ERROR') {
+              errorMessageElement.textContent = 'Нет соединения с интернетом. Пожалуйста, проверьте подключение.';
+            } else {
+              errorMessageElement.textContent = 'Не удалось загрузить комментарии: ' + error.message;
+            }
+            
+            errorMessageElement.style.display = 'block';
+          });
+      });
+      
+      addButton.addEventListener('click', addNewComment);
+      
+      nameInput.addEventListener('input', function() {
+        currentFormData.name = this.value;
+        console.log('Имя изменено:', this.value);
+      });
+      
+      textInput.addEventListener('input', function() {
+        currentFormData.text = this.value;
+        console.log('Комментарий изменен:', this.value);
+      });
+      
+      textInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' && e.ctrlKey) {
+          e.preventDefault();
+          addNewComment();
+        }
+      });
     }
-  });
-}
 
-document.addEventListener('DOMContentLoaded', initApp);
+    document.addEventListener('DOMContentLoaded', initApp);
 
   </script>
 </html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index edc120f..2e9eb8c 100644
--- a/styles.css
+++ b/styles.css
@@ -42,6 +42,7 @@ body {
 
   .comment {
     padding: 48px;
+    margin: 24px;
   }
 
   .comment-header {
@@ -134,4 +135,40 @@ body {
 
   .add-form-button:hover {
     opacity: 0.9;
-  }
\ No newline at end of file
+  }
+
+  @keyframes rotating {
+        from {
+          transform: rotate(0deg);
+        }
+        25% {
+          transform: rotate(30deg);
+        }
+        75% {
+          transform: rotate(-30deg);
+        }
+        to {
+          transform: rotate(0deg);
+        }
+      }
+
+      .-loading-like {
+        animation: rotating 2s linear infinite;
+      }
+
+      .loading {
+        text-align: center;
+        padding: 20px;
+        color: #666;
+        font-size: 18px;
+      }
+
+      .add-form-button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .comments-container {
+        position: relative;
+        min-height: 200px;
+      }
\ No newline at end of file
