diff --git a/front_vue/public/config.js b/front_vue/public/config.js
index 4391527..31be1f6 100644
--- a/front_vue/public/config.js
+++ b/front_vue/public/config.js
@@ -6,6 +6,6 @@ window.APP_CONFIG = {
   IDLE_REFRESH_SECONDS: 1,
   
   // Брейкпоинт для мобильной версии (px)
-  MOBILE_BREAKPOINT: 768
+  MOBILE_BREAKPOINT: 1400
 }
 
diff --git a/front_vue/src/components/ArchiveCard.vue b/front_vue/src/components/ArchiveCard.vue
index fe4ae8a..dfcad16 100644
--- a/front_vue/src/components/ArchiveCard.vue
+++ b/front_vue/src/components/ArchiveCard.vue
@@ -38,8 +38,12 @@
         >
           {{ cardDepartment.name_departments }}
         </span>
-        <span v-if="card.files && card.files.length" class="files-badge" :title="card.files.length + ' файлов'">
-          <i data-lucide="image"></i>
+        <span v-if="card.comments_count" class="comments-indicator" :title="card.comments_count + ' комментариев'">
+          <i data-lucide="message-circle"></i>
+          <span class="indicator-count">{{ card.comments_count }}</span>
+        </span>
+        <span v-if="card.files && card.files.length" class="files-indicator" :title="card.files.length + ' файлов'">
+          <i data-lucide="image-plus"></i>
         </span>
       </div>
 
@@ -96,6 +100,10 @@
           >
             <i data-lucide="trash-2"></i>
           </button>
+          <span v-if="card.comments_count" class="comments-indicator" :title="card.comments_count + ' комментариев'">
+            <i data-lucide="message-circle"></i>
+            <span class="indicator-count">{{ card.comments_count }}</span>
+          </span>
           <span v-if="card.files && card.files.length" class="files-indicator">
             <i data-lucide="image-plus"></i>
           </span>
@@ -299,7 +307,8 @@ const closedDateText = computed(() => {
   letter-spacing: 0.4px;
 }
 
-.files-badge {
+.comments-indicator,
+.files-indicator {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -307,11 +316,18 @@ const closedDateText = computed(() => {
   color: var(--text-muted);
 }
 
-.files-badge i {
+.comments-indicator i,
+.comments-indicator svg,
+.files-indicator i,
+.files-indicator svg {
   width: 14px;
   height: 14px;
 }
 
+.indicator-count {
+  font-size: 11px;
+}
+
 /* Аватарка */
 .card-assignee {
   flex-shrink: 0;
@@ -373,19 +389,20 @@ const closedDateText = computed(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: rgba(255, 255, 255, 0.08);
+  width: 24px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.1);
   border: none;
-  border-radius: 8px;
-  color: var(--text-secondary);
+  border-radius: 6px;
+  color: var(--text-muted);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
-.btn-action i {
-  width: 16px;
-  height: 16px;
+.btn-action i,
+.btn-action svg {
+  width: 18px;
+  height: 18px;
 }
 
 .btn-restore:hover {
@@ -445,22 +462,32 @@ const closedDateText = computed(() => {
   height: 24px;
 }
 
-.archive-card.mobile .btn-action i {
+.archive-card.mobile .btn-action i,
+.archive-card.mobile .btn-action svg {
   width: 14px;
   height: 14px;
 }
 
+.archive-card.mobile .comments-indicator,
 .archive-card.mobile .files-indicator {
   display: flex;
   align-items: center;
+  gap: 3px;
   color: var(--text-muted);
 }
 
-.archive-card.mobile .files-indicator i {
+.archive-card.mobile .comments-indicator i,
+.archive-card.mobile .comments-indicator svg,
+.archive-card.mobile .files-indicator i,
+.archive-card.mobile .files-indicator svg {
   width: 14px;
   height: 14px;
 }
 
+.archive-card.mobile .indicator-count {
+  font-size: 11px;
+}
+
 .archive-card.mobile .assignee {
   width: 24px;
   height: 24px;
diff --git a/front_vue/src/components/Card.vue b/front_vue/src/components/Card.vue
index 3c94dea..8ae1479 100644
--- a/front_vue/src/components/Card.vue
+++ b/front_vue/src/components/Card.vue
@@ -35,6 +35,10 @@
         >
           <i data-lucide="archive"></i>
         </button>
+        <span v-if="card.comments_count" class="comments-indicator" :title="card.comments_count + ' комментариев'">
+          <i data-lucide="message-circle"></i>
+          <span class="indicator-count">{{ card.comments_count }}</span>
+        </span>
         <span v-if="card.files && card.files.length" class="files-indicator" :title="card.files.length + ' изображений'">
           <i data-lucide="image-plus"></i>
         </span>
@@ -405,17 +409,27 @@ const handleArchive = () => {
   gap: 8px;
 }
 
+.comments-indicator,
 .files-indicator {
   display: flex;
   align-items: center;
+  gap: 3px;
   color: var(--text-muted);
 }
 
-.files-indicator i {
+.comments-indicator i,
+.comments-indicator svg,
+.files-indicator i,
+.files-indicator svg {
   width: 14px;
   height: 14px;
 }
 
+.indicator-count {
+  font-size: 11px;
+  font-weight: 500;
+}
+
 .due-date {
   font-size: 11px;
   color: var(--text-muted);
diff --git a/front_vue/src/components/TaskPanel/CommentItem.vue b/front_vue/src/components/TaskPanel/CommentItem.vue
index 44d2a02..6aefc95 100644
--- a/front_vue/src/components/TaskPanel/CommentItem.vue
+++ b/front_vue/src/components/TaskPanel/CommentItem.vue
@@ -3,7 +3,8 @@
     class="comment"
     :class="{ 
       'comment--own': isOwn, 
-      'comment--reply': level > 0
+      'comment--reply': level > 0,
+      'is-mobile': isMobile
     }"
     :style="{ marginLeft: level * 24 + 'px' }"
   >
@@ -14,8 +15,10 @@
     
     <div class="comment-body">
       <div class="comment-header">
-        <span class="comment-author">{{ comment.author_name }}</span>
-        <span class="comment-date">{{ formattedDate }}</span>
+        <div class="comment-meta" :class="{ 'is-mobile': isMobile }">
+          <span class="comment-author">{{ comment.author_name }}</span>
+          <span class="comment-date">{{ formattedDate }}</span>
+        </div>
         
         <div class="comment-actions">
           <IconButton 
@@ -82,6 +85,9 @@
 import { computed, onMounted, onUpdated } from 'vue'
 import IconButton from '../ui/IconButton.vue'
 import { serverSettings } from '../../api'
+import { useMobile } from '../../composables/useMobile'
+
+const { isMobile } = useMobile()
 
 const props = defineProps({
   comment: {
@@ -225,13 +231,17 @@ onUpdated(refreshIcons)
 
 .comment-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
   margin-bottom: 6px;
 }
 
-.comment-header .comment-date {
-  margin-right: auto;
+.comment-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
 }
 
 .comment-author {
@@ -245,6 +255,13 @@ onUpdated(refreshIcons)
   color: var(--text-muted);
 }
 
+/* Mobile: дата под ником (MOBILE_BREAKPOINT из config.js) */
+.comment-meta.is-mobile {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
 .comment-text {
   font-size: 14px;
   color: var(--text-secondary);
@@ -261,17 +278,6 @@ onUpdated(refreshIcons)
 .comment-actions {
   display: flex;
   gap: 4px;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.comment:hover .comment-actions {
-  opacity: 1;
-}
-
-/* Mobile: иконки видны всегда */
-:global(body.is-mobile) .comment-actions {
-  opacity: 1;
 }
 
 .comment-btn-delete:hover {
@@ -364,4 +370,9 @@ onUpdated(refreshIcons)
   width: 12px;
   height: 12px;
 }
+
+/* Mobile: скрыть кнопку скачивания на миниатюре */
+.comment.is-mobile .comment-file-download {
+  display: none;
+}
 </style>
diff --git a/front_vue/src/components/TaskPanel/TaskCommentsTab.vue b/front_vue/src/components/TaskPanel/TaskCommentsTab.vue
index 6dffc78..0fdff6c 100644
--- a/front_vue/src/components/TaskPanel/TaskCommentsTab.vue
+++ b/front_vue/src/components/TaskPanel/TaskCommentsTab.vue
@@ -2,10 +2,7 @@
   <div class="comments-tab">
     <!-- Список комментариев -->
     <div class="comments-list" ref="commentsListRef">
-      <div v-if="loading" class="comments-loading">
-        <span class="loader"></span>
-        Загрузка комментариев...
-      </div>
+      <Loader v-if="loading" text="Загрузка комментариев..." :inline="true" />
       
       <div v-else-if="flatCommentsWithLevel.length === 0" class="comments-empty">
         <i data-lucide="message-circle"></i>
@@ -207,6 +204,7 @@ import CommentForm from './CommentForm.vue'
 import ConfirmDialog from '../ConfirmDialog.vue'
 import SlidePanel from '../ui/SlidePanel.vue'
 import RichTextEditor from '../ui/RichTextEditor.vue'
+import Loader from '../ui/Loader.vue'
 import { commentsApi, commentImageApi, getFullUrl } from '../../api'
 import { useMobile } from '../../composables/useMobile'
 
@@ -316,14 +314,26 @@ const loadComments = async (silent = false) => {
       if (hasChanges) {
         comments.value = newData
         emit('comments-loaded', newData.length)
-        await nextTick()
-        refreshIcons()
+        
+        // Для первичной загрузки: убираем loading, ждём рендер, прокручиваем мгновенно
+        if (!silent) {
+          loading.value = false
+          await nextTick()
+          refreshIcons()
+          // Мгновенная прокрутка к последнему комментарию
+          if (commentsListRef.value) {
+            commentsListRef.value.scrollTop = commentsListRef.value.scrollHeight
+          }
+        } else {
+          await nextTick()
+          refreshIcons()
+        }
       }
     }
   } catch (e) {
     console.error('Ошибка загрузки комментариев:', e)
   } finally {
-    if (!silent) {
+    if (!silent && loading.value) {
       loading.value = false
     }
   }
@@ -618,9 +628,11 @@ const previewFile = (file, comment) => {
 
 // Хелперы
 const scrollToBottom = () => {
-  if (commentsListRef.value) {
-    commentsListRef.value.scrollTop = commentsListRef.value.scrollHeight
-  }
+  setTimeout(() => {
+    if (commentsListRef.value) {
+      commentsListRef.value.scrollTop = commentsListRef.value.scrollHeight
+    }
+  }, 100)
 }
 
 const refreshIcons = () => {
@@ -683,10 +695,11 @@ defineExpose({
 
 <style scoped>
 .comments-tab {
-  height: 100%;
   display: flex;
   flex-direction: column;
-  min-height: 0; /* Важно для flex overflow */
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .comments-list {
@@ -695,21 +708,29 @@ defineExpose({
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 2px;  /* Для outline при редактировании */
-  padding-right: 6px;
-  margin-bottom: 16px;
-  min-height: 100px;
-  max-height: calc(100vh - 400px);
+  padding: 0 6px 16px 2px;
+  min-height: 0;
 }
 
-/* Mobile: убираем max-height, используем flex */
-:global(body.is-mobile) .comments-list {
-  max-height: none;
-  min-height: 50px;
-  margin-bottom: 12px;
+/* Стилизация скроллбара */
+.comments-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.comments-list::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 3px;
+}
+
+.comments-list::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 170, 0.3);
+  border-radius: 3px;
+}
+
+.comments-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 212, 170, 0.5);
 }
 
-.comments-loading,
 .comments-empty {
   display: flex;
   flex-direction: column;
@@ -727,21 +748,6 @@ defineExpose({
   opacity: 0.5;
 }
 
-.loader {
-  width: 24px;
-  height: 24px;
-  border: 2px solid rgba(255, 255, 255, 0.1);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 /* ========== Edit Panel Styles ========== */
 .edit-panel-header {
   display: flex;
diff --git a/front_vue/src/components/ui/Loader.vue b/front_vue/src/components/ui/Loader.vue
new file mode 100644
index 0000000..92a562c
--- /dev/null
+++ b/front_vue/src/components/ui/Loader.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="loader-container" :class="{ 'loader--inline': inline }">
+    <div class="loader-spinner"></div>
+    <span v-if="text" class="loader-text">{{ text }}</span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: 'Загрузка...'
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style scoped>
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 80px;
+  color: var(--text-secondary);
+}
+
+.loader-container.loader--inline {
+  flex-direction: row;
+  padding: 40px;
+  gap: 12px;
+}
+
+.loader-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loader--inline .loader-spinner {
+  width: 24px;
+  height: 24px;
+  border-width: 2px;
+}
+
+.loader-text {
+  font-size: 14px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/front_vue/src/components/ui/SlidePanel.vue b/front_vue/src/components/ui/SlidePanel.vue
index d1e980c..f82df57 100644
--- a/front_vue/src/components/ui/SlidePanel.vue
+++ b/front_vue/src/components/ui/SlidePanel.vue
@@ -354,8 +354,9 @@ onUnmounted(() => {
 .panel.mobile .panel-body {
   padding: 16px;
   padding-bottom: calc(16px + var(--safe-area-bottom, 0px));
-  min-height: 0; /* Важно для flex overflow */
-  gap: 16px;
+  min-height: 0;
+  gap: 0; /* Убираем gap — он создаёт пустое место */
+  overflow-y: auto;
 }
 
 .panel.mobile .panel-footer {
diff --git a/front_vue/src/views/ArchivePage.vue b/front_vue/src/views/ArchivePage.vue
index eb0337e..c9eed7c 100644
--- a/front_vue/src/views/ArchivePage.vue
+++ b/front_vue/src/views/ArchivePage.vue
@@ -88,10 +88,7 @@
           </div>
           
           <!-- Загрузка -->
-          <div v-if="loading" class="loading-state">
-            <i data-lucide="loader-2" class="spin"></i>
-            <span>Загрузка...</span>
-          </div>
+          <Loader v-if="loading" />
         </div>
       </main>
     </div>
@@ -137,6 +134,7 @@ import TaskPanel from '../components/TaskPanel'
 import ConfirmDialog from '../components/ConfirmDialog.vue'
 import ProjectSelector from '../components/ProjectSelector.vue'
 import MobileSelect from '../components/ui/MobileSelect.vue'
+import Loader from '../components/ui/Loader.vue'
 import { useProjectsStore } from '../stores/projects'
 import { cardsApi } from '../api'
 import { useMobile } from '../composables/useMobile'
@@ -469,30 +467,6 @@ onMounted(async () => {
   font-size: 13px;
 }
 
-/* Загрузка */
-.loading-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 60px 20px;
-  color: var(--text-muted);
-}
-
-.loading-state i {
-  width: 20px;
-  height: 20px;
-}
-
-.spin {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
 /* ========== MOBILE ========== */
 .app.mobile {
   flex-direction: column;
diff --git a/front_vue/src/views/LoginPage.vue b/front_vue/src/views/LoginPage.vue
index 7d8e02d..1e495bb 100644
--- a/front_vue/src/views/LoginPage.vue
+++ b/front_vue/src/views/LoginPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login-page">
+  <div class="login-page" :class="{ 'is-mobile': isMobile }">
     <!-- Левитирующие иконки на фоне -->
     <div class="floating-icons">
       <div class="float-icon icon-1"><i data-lucide="check-square"></i></div>
@@ -117,6 +117,9 @@ import { ref, onMounted, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { authApi, cardsApi } from '../api'
 import { useProjectsStore } from '../stores/projects'
+import { useMobile } from '../composables/useMobile'
+
+const { isMobile } = useMobile()
 
 const router = useRouter()
 const store = useProjectsStore()
@@ -681,29 +684,27 @@ watch(showSuccess, () => {
   100% { transform: translateX(0); }
 }
 
-/* Мобильная адаптация (MOBILE_BREAKPOINT: 768px) */
-@media (max-width: 768px) {
-  .login-title {
-    font-size: 26px;
-  }
-  
-  .login-subtitle {
-    font-size: 14px;
-  }
-  
-  .logo-icon {
-    width: 64px;
-    height: 64px;
-  }
-  
-  .logo-icon i,
-  .logo-icon svg {
-    width: 32px;
-    height: 32px;
-  }
-  
-  .float-icon {
-    opacity: 0.5;
-  }
+/* Мобильная адаптация (MOBILE_BREAKPOINT из config.js) */
+.login-page.is-mobile .login-title {
+  font-size: 26px;
+}
+
+.login-page.is-mobile .login-subtitle {
+  font-size: 14px;
+}
+
+.login-page.is-mobile .logo-icon {
+  width: 64px;
+  height: 64px;
+}
+
+.login-page.is-mobile .logo-icon i,
+.login-page.is-mobile .logo-icon svg {
+  width: 32px;
+  height: 32px;
+}
+
+.login-page.is-mobile .float-icon {
+  opacity: 0.5;
 }
 </style>
diff --git a/front_vue/src/views/MainApp.vue b/front_vue/src/views/MainApp.vue
index 1a69d21..7fbe6c5 100644
--- a/front_vue/src/views/MainApp.vue
+++ b/front_vue/src/views/MainApp.vue
@@ -67,7 +67,9 @@
       
       <!-- Доска с колонками и карточками -->
       <main class="main">
+        <Loader v-if="loading" />
         <Board 
+          v-else
           ref="boardRef"
           :active-department="activeDepartment"
           :departments="store.departments"
@@ -109,6 +111,7 @@ import Board from '../components/Board.vue'
 import TaskPanel from '../components/TaskPanel'
 import ProjectSelector from '../components/ProjectSelector.vue'
 import MobileSelect from '../components/ui/MobileSelect.vue'
+import Loader from '../components/ui/Loader.vue'
 import { useProjectsStore } from '../stores/projects'
 import { cardsApi } from '../api'
 import { useMobile } from '../composables/useMobile'
@@ -126,18 +129,32 @@ const departmentOptions = computed(() => [
 
 // ==================== КАРТОЧКИ ====================
 const cards = ref([])
+const loading = ref(true)
 
-// Загрузка карточек текущего проекта
-const fetchCards = async () => {
-  if (!store.currentProjectId) return
+// Загрузка карточек текущего проекта (silent = тихое обновление без Loader)
+const fetchCards = async (silent = false) => {
+  if (!store.currentProjectId) {
+    loading.value = false
+    return
+  }
   
-  const result = await cardsApi.getAll(store.currentProjectId)
-  if (result.success) cards.value = result.data
+  if (!silent) {
+    loading.value = true
+  }
+  try {
+    const result = await cardsApi.getAll(store.currentProjectId)
+    if (result.success) cards.value = result.data
+  } finally {
+    if (!silent) {
+      loading.value = false
+    }
+  }
 }
 
 // При смене проекта — перезагружаем карточки
 const onProjectChange = async () => {
   activeDepartment.value = null
+  loading.value = true
   await fetchCards()
 }
 
@@ -206,7 +223,7 @@ const startPolling = () => {
   if (pollTimer) clearInterval(pollTimer)
   pollTimer = setInterval(async () => {
     console.log('[AutoRefresh] Обновление данных...')
-    await fetchCards()
+    await fetchCards(true) // silent = true, без Loader
   }, REFRESH_INTERVAL)
 }
 
@@ -228,6 +245,7 @@ onMounted(async () => {
     try {
       cards.value = JSON.parse(prefetchedCards)
       sessionStorage.removeItem('prefetchedCards')
+      loading.value = false
     } catch (e) {
       await fetchCards()
     }
diff --git a/front_vue/src/views/TeamPage.vue b/front_vue/src/views/TeamPage.vue
index 60fd3d8..78509cc 100644
--- a/front_vue/src/views/TeamPage.vue
+++ b/front_vue/src/views/TeamPage.vue
@@ -6,10 +6,7 @@
       <Header title="Команда" subtitle="Наша команда специалистов" />
 
       <main class="main">
-        <div v-if="loading" class="loading">
-          <div class="spinner"></div>
-          <span>Загрузка...</span>
-        </div>
+        <Loader v-if="loading" />
 
         <!-- Desktop: grid -->
         <div v-else-if="!isMobile" class="team-grid">
@@ -92,6 +89,7 @@
 import { ref, onMounted, onUpdated } from 'vue'
 import Sidebar from '../components/Sidebar.vue'
 import Header from '../components/Header.vue'
+import Loader from '../components/ui/Loader.vue'
 import { usersApi, getFullUrl } from '../api'
 import { useMobile } from '../composables/useMobile'
 
@@ -187,28 +185,6 @@ onUpdated(refreshIcons)
   background: rgba(255, 255, 255, 0.25);
 }
 
-.loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  padding: 80px;
-  color: var(--text-secondary);
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid rgba(255, 255, 255, 0.1);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
 
 .team-grid {
   display: grid;
@@ -341,10 +317,6 @@ onUpdated(refreshIcons)
   overflow: hidden;
 }
 
-.app.mobile .loading {
-  padding: 40px;
-}
-
 /* Mobile swipe cards */
 .mobile-cards {
   width: 100%;