diff --git a/backend/static/css/components/employee-list.css b/backend/static/css/components/employee-list.css
new file mode 100644
index 00000000..e67a9211
--- /dev/null
+++ b/backend/static/css/components/employee-list.css
@@ -0,0 +1,127 @@
+/**
+ * Employee List Component
+ *
+ * Стили для списка сотрудников с аватарами, должностями и действиями
+ * Оптимизирован для вертикальной прокрутки и адаптивного отображения
+ */
+
+/* Токены списка сотрудников */
+#empList{
+ --emp-row-py: .6rem; /* вертикальные отступы строки */
+ --emp-row-px: .75rem; /* горизонтальные отступы строки */
+ --emp-gap: 14px; /* расстояние внутри строки */
+ --emp-avatar: 56px; /* размер аватара */
+}
+
+/* Контейнер списка (скролл в колонке) */
+#empList{
+ border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 12%);
+ border-radius: var(--feed-radius, 16px);
+ background: var(--bs-body-bg);
+ padding: 0;
+ max-height: calc(100dvh - var(--navbar-h, 0px) - 160px);
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+/* Важно: убираем межстрочный gap от .feed-stream */
+#empList.feed-stream{
+ display: block;
+ gap: 0 !important;
+}
+
+/* Строка сотрудника */
+#empList .emp-row{
+ padding: var(--emp-row-py) var(--emp-row-px) !important;
+ margin: 0 !important;
+ border-bottom: 1px solid var(--bs-border-color);
+}
+
+#empList .emp-row:last-child{
+ border-bottom: 0;
+}
+
+/* Шапка строки: [аватар] [контент] [действия] */
+#empList .emp-row .feed-hd{
+ display: grid;
+ grid-template-columns: var(--emp-avatar) 1fr auto;
+ align-items: center;
+ gap: var(--emp-gap);
+ margin: 0;
+ padding: 0 !important; /* без внутренних паддингов — ими управляет .emp-row */
+}
+
+/* Аватар */
+#empList .emp-row .feed-ava{
+ width: var(--emp-avatar);
+ height: var(--emp-avatar);
+ border-radius: 50%;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: color-mix(in srgb, var(--bs-secondary-bg), transparent 30%);
+ flex: none;
+}
+
+#empList .emp-row .feed-ava img{
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+}
+
+#empList .emp-row .feed-ava i{
+ font-size: 1.5rem;
+ line-height: 1;
+ opacity: .6;
+}
+
+/* Контент */
+#empList .emp-row .feed-meta{
+ margin: 0;
+ padding: 0;
+ min-width: 0;
+}
+
+.feed-author{
+ font-weight: 700;
+ line-height: 1.25;
+}
+
+.emp-pos{
+ color: var(--bs-secondary-color);
+}
+
+.feed-sub{
+ margin-top: .25rem;
+ color: var(--bs-secondary-color);
+}
+
+.feed-sub a{
+ color: inherit;
+ text-decoration: none;
+}
+
+.feed-sub a:hover{
+ text-decoration: underline;
+}
+
+/* Действия справа */
+.emp-actions{
+ justify-self: end;
+}
+
+/* Хвост карточки в списке не используем — убираем отступы */
+#empList .emp-row .feed-actions{
+ padding: 0 !important;
+}
+
+#empList .emp-row .feed-body:empty{
+ display: none !important;
+}
+
+#empList .emp-row .feed-body{
+ padding: 0 !important;
+}
diff --git a/backend/templates/employees/employees_list.html b/backend/templates/employees/employees_list.html
index fd260ebe..a4ec6ba7 100644
--- a/backend/templates/employees/employees_list.html
+++ b/backend/templates/employees/employees_list.html
@@ -6,80 +6,9 @@
{% block extra_css %}
+
{% endblock %}