From 68bbef35ee368265500f3680d42cad6e5b034b7d Mon Sep 17 00:00:00 2001
From: "Andrey K. Choi" <a.choi@smartsoltech.kr>
Date: Sun, 9 Nov 2025 22:15:48 +0900
Subject: [PATCH 1/2] localization && navbar fix

---
 docker-compose.yml                            |   8 +-
 frontend/linktree-frontend/.dockerignore      |   2 -
 frontend/linktree-frontend/Dockerfile         |  29 +-
 .../(protected)/dashboard/DashboardClient.tsx | 208 ++++++------
 .../src/app/(protected)/dashboard/page.tsx    |  21 +-
 .../src/app/auth/login/page.tsx               |  30 +-
 .../src/app/auth/register/page.tsx            |  42 +--
 .../src/app/components/CustomizationPanel.tsx |  80 ++---
 .../src/app/components/LanguageSelector.tsx   |  55 ++--
 .../src/app/components/LayoutWrapper.tsx      | 171 +++++-----
 .../src/app/components/LayoutWrapper.tsx.bak  | 302 ++++++++++++++++++
 .../src/app/components/Navbar.tsx             |  28 ++
 .../src/app/components/Providers.tsx          |   2 +
 .../src/app/components/ThemeToggle.css        | 123 +++++++
 .../src/app/components/ThemeToggle.tsx        |  54 ++--
 .../src/app/components/footer.tsx             |  12 +-
 .../linktree-frontend/src/app/locales/en.json | 154 ++++++++-
 .../linktree-frontend/src/app/locales/ja.json |  88 ++++-
 .../linktree-frontend/src/app/locales/ko.json |  90 +++++-
 .../linktree-frontend/src/app/locales/ru.json | 156 ++++++++-
 .../linktree-frontend/src/app/locales/zh.json |  88 ++++-
 frontend/linktree-frontend/src/app/page.tsx   | 169 +---------
 22 files changed, 1386 insertions(+), 526 deletions(-)
 create mode 100644 frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx.bak
 create mode 100644 frontend/linktree-frontend/src/app/components/Navbar.tsx
 create mode 100644 frontend/linktree-frontend/src/app/components/ThemeToggle.css

diff --git a/docker-compose.yml b/docker-compose.yml
index e40416a..6589fec 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,7 +8,7 @@ services:
       - media_volume:/app/storage
       - static_volume:/app/staticfiles
     env_file:
-      - .env
+      - .env.local
     ports:
       - "8000:8000"
     depends_on:
@@ -22,7 +22,7 @@ services:
     volumes:
       - postgres_data:/var/lib/postgresql/data/
     env_file:
-      - .env
+      - .env.local
     environment:
       - POSTGRES_INITDB_ARGS=--auth-host=scram-sha-256
     restart: unless-stopped
@@ -34,9 +34,9 @@ services:
     ports:
       - "3000:3000"
     environment:
-      - NEXT_PUBLIC_API_URL=https://links.shareon.kr
+      - NEXT_PUBLIC_API_URL=http://localhost:8000
     env_file:
-      - .env
+      - .env.local
     restart: unless-stopped
     depends_on:
       - web
diff --git a/frontend/linktree-frontend/.dockerignore b/frontend/linktree-frontend/.dockerignore
index 1ff2662..5034fb3 100644
--- a/frontend/linktree-frontend/.dockerignore
+++ b/frontend/linktree-frontend/.dockerignore
@@ -3,7 +3,6 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-package-lock.json
 yarn.lock
 
 # Production build
@@ -81,7 +80,6 @@ __tests__/
 
 # TypeScript
 *.tsbuildinfo
-tsconfig.json
 
 # Storybook
 .storybook/
diff --git a/frontend/linktree-frontend/Dockerfile b/frontend/linktree-frontend/Dockerfile
index 24b1300..6b60296 100644
--- a/frontend/linktree-frontend/Dockerfile
+++ b/frontend/linktree-frontend/Dockerfile
@@ -1,12 +1,24 @@
-FROM node:20-alpine
+# Этап 1: Установка зависимостей
+FROM node:20-alpine as deps
 
 WORKDIR /app
 
 # Копирование package.json и package-lock.json
 COPY package*.json ./
 
-# Установка зависимостей
-RUN npm install
+# Установка зависимостей с очисткой кеша
+RUN npm ci --omit=dev && npm cache clean --force
+
+# Этап 2: Сборка приложения
+FROM node:20-alpine as builder
+
+WORKDIR /app
+
+# Копирование package.json и package-lock.json
+COPY package*.json ./
+
+# Установка всех зависимостей (включая dev)
+RUN npm ci
 
 # Копирование исходного кода
 COPY . .
@@ -14,6 +26,17 @@ COPY . .
 # Сборка приложения
 RUN npm run build
 
+# Этап 3: Финальный образ
+FROM node:20-alpine as runner
+
+WORKDIR /app
+
+# Копирование зависимостей продакшена
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package*.json ./
+
 EXPOSE 3000
 
 CMD ["npm", "start"]
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/(protected)/dashboard/DashboardClient.tsx b/frontend/linktree-frontend/src/app/(protected)/dashboard/DashboardClient.tsx
index 996b1ab..c19b4c8 100644
--- a/frontend/linktree-frontend/src/app/(protected)/dashboard/DashboardClient.tsx
+++ b/frontend/linktree-frontend/src/app/(protected)/dashboard/DashboardClient.tsx
@@ -6,6 +6,8 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { ProfileCard } from '../../components/ProfileCard'
 import { CustomizationPanel } from '../../components/CustomizationPanel'
+import { Navbar } from '../../components/Navbar'
+import { useLocale } from '../../contexts/LocaleContext'
 
 interface UserProfile {
   id: number
@@ -72,6 +74,7 @@ interface DesignSettings {
 }
 
 export default function DashboardClient() {
+  const { t } = useLocale()
   const router = useRouter()
   const [user, setUser] = useState<UserProfile | null>(null)
   const [groups, setGroups] = useState<Group[]>([])
@@ -174,7 +177,7 @@ export default function DashboardClient() {
     
     try {
       await navigator.clipboard.writeText(shareUrl)
-      alert('Ссылка скопирована в буфер обмена!')
+      alert(t('common.success') + ': ' + t('dashboard.shareUrl.copied'))
     } catch (err) {
       // Fallback для старых браузеров
       const textArea = document.createElement('textarea')
@@ -183,7 +186,7 @@ export default function DashboardClient() {
       textArea.select()
       document.execCommand('copy')
       document.body.removeChild(textArea)
-      alert('Ссылка скопирована в буфер обмена!')
+      alert(t('common.success') + ': ' + t('dashboard.shareUrl.copied'))
     }
   }
 
@@ -221,9 +224,9 @@ export default function DashboardClient() {
       fetch('/api/customization/settings/', { headers: { Authorization: `Bearer ${token}` } }),
     ])
       .then(async ([uRes, gRes, lRes, dRes]) => {
-        if (!uRes.ok) throw new Error('Не удалось получить профиль')
-        if (!gRes.ok) throw new Error('Не удалось загрузить группы')
-        if (!lRes.ok) throw new Error('Не удалось загрузить ссылки')
+        if (!uRes.ok) throw new Error(t('common.error') + ': ' + t('auth.networkError'))
+        if (!gRes.ok) throw new Error(t('common.error') + ': ' + t('dashboard.groups'))
+        if (!lRes.ok) throw new Error(t('common.error') + ': ' + t('dashboard.links'))
         
         const userData   = await uRes.json()
         const groupsData = await gRes.json()
@@ -318,7 +321,7 @@ export default function DashboardClient() {
     await reloadData()
   }
   async function handleDeleteGroup(grp: Group) {
-    if (!confirm(`Удалить группу "${grp.name}"?`)) return
+    if (!confirm(t('common.confirm') + ` ${t('group.delete')} "${grp.name}"?`)) return
     const token = localStorage.getItem('token')!
     await fetch(`${API}/api/groups/${grp.id}/`, {
       method: 'DELETE',
@@ -372,7 +375,7 @@ export default function DashboardClient() {
     await reloadData()
   }
   async function handleDeleteLink(link: LinkItem) {
-    if (!confirm(`Удалить ссылку "${link.title}"?`)) return
+    if (!confirm(t('common.confirm') + ` ${t('link.delete')} "${link.title}"?`)) return
     const token = localStorage.getItem('token')!
     await fetch(`${API}/api/links/${link.id}/`, {
       method: 'DELETE',
@@ -419,11 +422,11 @@ export default function DashboardClient() {
       setShowProfileModal(false)
     } else {
       const error = await res.json()
-      alert('Ошибка: ' + JSON.stringify(error))
+      alert(t('dashboard.error') + JSON.stringify(error))
     }
   }
 
-  if (loading)  return <div className="flex items-center justify-center h-screen">Загрузка...</div>
+  if (loading)  return <div className="flex items-center justify-center h-screen">{t('common.loading')}</div>
   if (error)    return <div className="p-6 text-red-600 max-w-xl mx-auto">{error}</div>
 
   // Функция расчета оптимального размера изображения для группы
@@ -475,9 +478,9 @@ export default function DashboardClient() {
   const renderListLayout = () => (
     <div className="card">
       <div className="card-header d-flex justify-content-between align-items-center">
-        <h5 className="mb-0">Группы ссылок</h5>
+        <h5 className="mb-0">{t('dashboard.groups')}</h5>
         <button className="btn btn-sm btn-success" onClick={openAddGroup}>
-          <i className="bi bi-plus-lg"></i> Добавить группу
+          <i className="bi bi-plus-lg"></i> {t('dashboard.addGroup')}
         </button>
       </div>
       <div className="list-group list-group-flush">
@@ -528,9 +531,9 @@ export default function DashboardClient() {
   const renderGridLayout = () => (
     <div>
       <div className="d-flex justify-content-between align-items-center mb-3">
-        <h5 className="mb-0">Группы ссылок</h5>
+        <h5 className="mb-0">{t('dashboard.groups')}</h5>
         <button className="btn btn-sm btn-success" onClick={openAddGroup}>
-          <i className="bi bi-plus-lg"></i> Добавить группу
+          <i className="bi bi-plus-lg"></i> {t('dashboard.addGroup')}
         </button>
       </div>
       <div className="row g-3">
@@ -599,7 +602,7 @@ export default function DashboardClient() {
   const renderCompactLayout = () => (
     <div className="compact-layout">
       <div className="d-flex justify-content-between align-items-center mb-2">
-        <h6 className="mb-0">Группы ссылок</h6>
+        <h6 className="mb-0">{t('dashboard.groups')}</h6>
         <button className="btn btn-sm btn-success" onClick={openAddGroup}>
           <i className="bi bi-plus-lg"></i>
         </button>
@@ -647,9 +650,9 @@ export default function DashboardClient() {
   const renderCardsLayout = () => (
     <div>
       <div className="d-flex justify-content-between align-items-center mb-4">
-        <h5 className="mb-0">Группы ссылок</h5>
+        <h5 className="mb-0">{t('dashboard.linkGroups')}</h5>
         <button className="btn btn-success" onClick={openAddGroup}>
-          <i className="bi bi-plus-lg"></i> Добавить группу
+          <i className="bi bi-plus-lg"></i> {t('dashboard.addGroup')}
         </button>
       </div>
       <div className="row g-4">
@@ -673,7 +676,7 @@ export default function DashboardClient() {
                         <h5 className="mb-1" style={{ color: designSettings.group_text_color || designSettings.theme_color }}>
                           {group.name}
                         </h5>
-                        <small className="text-muted">{group.links.length} ссылок</small>
+                        <small className="text-muted">{t('dashboard.linksCount', { count: group.links.length })}</small>
                       </div>
                     </div>
                   </div>
@@ -738,7 +741,7 @@ export default function DashboardClient() {
       <div className="col-md-3">
         <div className="card">
           <div className="card-header">
-            <h6 className="mb-0">Группы</h6>
+            <h6 className="mb-0">{t('dashboard.groups')}</h6>
             <button className="btn btn-sm btn-success mt-2 w-100" onClick={openAddGroup}>
               <i className="bi bi-plus-lg"></i> Добавить
             </button>
@@ -830,9 +833,9 @@ export default function DashboardClient() {
   const renderMasonryLayout = () => (
     <div>
       <div className="d-flex justify-content-between align-items-center mb-3">
-        <h5 className="mb-0">Группы ссылок</h5>
+        <h5 className="mb-0">{t('dashboard.groups')}</h5>
         <button className="btn btn-success" onClick={openAddGroup}>
-          <i className="bi bi-plus-lg"></i> Добавить группу
+          <i className="bi bi-plus-lg"></i> {t('dashboard.addGroup')}
         </button>
       </div>
       <div className="row g-3">
@@ -904,9 +907,9 @@ export default function DashboardClient() {
   const renderTimelineLayout = () => (
     <div>
       <div className="d-flex justify-content-between align-items-center mb-4">
-        <h5 className="mb-0">Группы ссылок</h5>
+        <h5 className="mb-0">{t('dashboard.groups')}</h5>
         <button className="btn btn-success" onClick={openAddGroup}>
-          <i className="bi bi-plus-lg"></i> Добавить группу
+          <i className="bi bi-plus-lg"></i> {t('dashboard.addGroup')}
         </button>
       </div>
       <div className="timeline">
@@ -929,7 +932,7 @@ export default function DashboardClient() {
                       <h6 className="mb-0" style={{ color: designSettings.group_text_color || designSettings.theme_color }}>
                         {group.name}
                       </h6>
-                      <small className="text-muted">{group.links.length} ссылок</small>
+                      <small className="text-muted">{t('dashboard.linksCount', { count: group.links.length })}</small>
                     </div>
                   </div>
                 </div>
@@ -976,9 +979,9 @@ export default function DashboardClient() {
   const renderMagazineLayout = () => (
     <div>
       <div className="d-flex justify-content-between align-items-center mb-4">
-        <h5 className="mb-0">Группы ссылок</h5>
+        <h5 className="mb-0">{t('dashboard.groups')}</h5>
         <button className="btn btn-success" onClick={openAddGroup}>
-          <i className="bi bi-plus-lg"></i> Добавить группу
+          <i className="bi bi-plus-lg"></i> {t('dashboard.addGroup')}
         </button>
       </div>
       <div className="magazine-layout">
@@ -1006,7 +1009,7 @@ export default function DashboardClient() {
                       {group.name}
                     </h5>
                     <p className="card-text text-muted">
-                      {group.links.length} ссылок в этой группе
+                      {t('dashboard.linksInGroup', { count: group.links.length })}
                     </p>
                     <div className="links-preview">
                       {group.links.slice(0, 3).map(link => (
@@ -1017,7 +1020,7 @@ export default function DashboardClient() {
                         </div>
                       ))}
                       {group.links.length > 3 && (
-                        <small className="text-muted">и еще {group.links.length - 3}...</small>
+                        <small className="text-muted">{t('dashboard.andMore', { count: group.links.length - 3 })}</small>
                       )}
                     </div>
                     <div className="mt-3">
@@ -1087,6 +1090,8 @@ export default function DashboardClient() {
       style={containerStyle}
       suppressHydrationWarning={true}
     >
+      <Navbar />
+      
       {user && (
         <ProfileCard
           avatar={user.avatar_url || user.avatar}
@@ -1102,20 +1107,20 @@ export default function DashboardClient() {
 
       <div className="container my-4">
         <div className="d-flex justify-content-between align-items-center mb-3">
-          <h2>Ваши ссылки</h2>
+          <h2>{t('dashboard.title')}</h2>
           <div>
-            <span className="me-2">Panel state: {showCustomizationPanel ? 'Open' : 'Closed'}</span>
+            <span className="me-2">Panel state: {showCustomizationPanel ? t('dashboard.panelOpen') : t('dashboard.panelClosed')}</span>
             <button 
               className="btn btn-outline-info me-2" 
               onClick={openEditProfile}
             >
-              <i className="bi bi-person-gear"></i> Профиль
+              <i className="bi bi-person-gear"></i> {t('profile.edit')}
             </button>
             <button 
               className="btn btn-outline-success me-2" 
               onClick={() => setShowShareModal(true)}
             >
-              <i className="bi bi-share"></i> Поделиться
+              <i className="bi bi-share"></i> {t('dashboard.share')}
             </button>
             <button 
               className="btn btn-outline-primary" 
@@ -1126,7 +1131,7 @@ export default function DashboardClient() {
                 console.log('After setting showCustomizationPanel to true')
               }}
             >
-              <i className="bi bi-gear"></i> Настройки
+              <i className="bi bi-gear"></i> {t('dashboard.settings')}
             </button>
           </div>
         </div>
@@ -1141,18 +1146,18 @@ export default function DashboardClient() {
         <div className="modal-dialog">
           <div className="modal-content">
             <div className="modal-header">
-              <h5 className="modal-title">{groupModalMode === 'add' ? 'Добавить группу' : 'Редактировать группу'}</h5>
+              <h5 className="modal-title">{groupModalMode === 'add' ? t('group.create') : t('group.edit')}</h5>
               <button 
                 type="button" 
                 className="btn-close" 
                 onClick={() => setShowGroupModal(false)}
-                aria-label="Закрыть"
-                title="Закрыть модальное окно"
+                aria-label={t('common.close')}
+                title={t('common.close')}
               />
             </div>
             <div className="modal-body">
               <div className="mb-3">
-                <label className="form-label">Название</label>
+                <label className="form-label">{t('group.name')}</label>
                 <input
                   type="text"
                   className="form-control"
@@ -1161,17 +1166,17 @@ export default function DashboardClient() {
                 />
               </div>
               <div className="mb-3">
-                <label className="form-label">Описание (опционально)</label>
+                <label className="form-label">{t('group.description')} ({t('common.optional')})</label>
                 <textarea
                   className="form-control"
                   rows={3}
                   value={groupForm.description}
                   onChange={e => setGroupForm(f => ({ ...f, description: e.target.value }))}
-                  placeholder="Краткое описание группы ссылок"
+                  placeholder={t('group.descriptionPlaceholder')}
                 />
               </div>
               <div className="mb-3">
-                <label className="form-label">Цвет заголовка</label>
+                <label className="form-label">{t('group.color')}</label>
                 <input
                   type="color"
                   className="form-control form-control-color"
@@ -1191,7 +1196,7 @@ export default function DashboardClient() {
                       onChange={(e) => setGroupForm(prev => ({ ...prev, is_public: e.target.checked }))}
                     />
                     <label className="form-check-label" htmlFor="groupPublic">
-                      Публичная
+                      {t('group.public')}
                     </label>
                   </div>
                 </div>
@@ -1205,7 +1210,7 @@ export default function DashboardClient() {
                       onChange={(e) => setGroupForm(prev => ({ ...prev, is_favorite: e.target.checked }))}
                     />
                     <label className="form-check-label" htmlFor="groupFavorite">
-                      Избранная
+                      {t('group.favorite')}
                     </label>
                   </div>
                 </div>
@@ -1219,20 +1224,20 @@ export default function DashboardClient() {
                       onChange={(e) => setGroupForm(prev => ({ ...prev, is_expanded: e.target.checked }))}
                     />
                     <label className="form-check-label" htmlFor="groupExpanded">
-                      Развернутая
+                      {t('group.expanded')}
                     </label>
                   </div>
                 </div>
               </div>
               <div className="mb-3">
-                <label className="form-label">Иконка группы (опционально)</label>
+                <label className="form-label">{t('group.icon')} ({t('common.optional')})</label>
                 {editingGroup?.icon_url && (
                   <div className="mb-2">
-                    <label className="form-label small">Текущая иконка:</label>
+                    <label className="form-label small">{t('group.currentIcon')}:</label>
                     <div className="d-flex align-items-center gap-2">
                       <img 
                         src={editingGroup.icon_url} 
-                        alt="Текущая иконка группы" 
+                        alt={t('group.currentIcon')} 
                         className="img-thumbnail"
                         style={{ width: '32px', height: '32px', objectFit: 'cover' }}
                       />
@@ -1240,7 +1245,7 @@ export default function DashboardClient() {
                         type="button"
                         className="btn btn-outline-danger btn-sm"
                         onClick={() => {
-                          if (confirm('Удалить текущую иконку группы?')) {
+                          if (confirm(t('group.confirmRemoveIcon'))) {
                             // Удаляем иконку через API
                             fetch(`/api/groups/${editingGroup.id}/`, {
                               method: 'PATCH',
@@ -1264,9 +1269,9 @@ export default function DashboardClient() {
                             })
                           }
                         }}
-                        title="Убрать иконку группы"
+                        title={t('group.removeIcon')}
                       >
-                        <i className="bi bi-trash"></i> Убрать иконку
+                        <i className="bi bi-trash"></i> {t('group.removeIcon')}
                       </button>
                     </div>
                   </div>
@@ -1277,17 +1282,17 @@ export default function DashboardClient() {
                   accept="image/*"
                   onChange={e => setGroupForm(f => ({ ...f, iconFile: e.target.files?.[0] || null }))}
                 />
-                <div className="form-text">Рекомендуемый размер: 32x32 пикселя</div>
+                <div className="form-text">{t('group.iconSizeRecommendation')}</div>
               </div>
               <div className="mb-3">
-                <label className="form-label">Фоновое изображение (опционально)</label>
+                <label className="form-label">{t('group.background')} ({t('common.optional')})</label>
                 {editingGroup?.background_image_url && (
                   <div className="mb-2">
-                    <label className="form-label small">Текущий фон:</label>
+                    <label className="form-label small">{t('group.currentBackground')}:</label>
                     <div className="d-flex align-items-center gap-2">
                       <img 
                         src={editingGroup.background_image_url} 
-                        alt="Текущий фон группы" 
+                        alt={t('group.currentBackground')} 
                         className="img-thumbnail"
                         style={{ maxWidth: '150px', maxHeight: '80px', objectFit: 'cover' }}
                       />
@@ -1295,7 +1300,7 @@ export default function DashboardClient() {
                         type="button"
                         className="btn btn-outline-danger btn-sm"
                         onClick={() => {
-                          if (confirm('Удалить текущий фон группы?')) {
+                          if (confirm(t('group.confirmRemoveBackground'))) {
                             // Удаляем фон через API
                             fetch(`/api/groups/${editingGroup.id}/`, {
                               method: 'PATCH',
@@ -1319,9 +1324,9 @@ export default function DashboardClient() {
                             })
                           }
                         }}
-                        title="Убрать фон группы"
+                        title={t('group.removeBackground')}
                       >
-                        <i className="bi bi-trash"></i> Убрать фон
+                        <i className="bi bi-trash"></i> {t('group.removeBackground')}
                       </button>
                     </div>
                   </div>
@@ -1334,7 +1339,7 @@ export default function DashboardClient() {
                 />
                 <div className="alert alert-info mt-2">
                   <i className="bi bi-info-circle me-2"></i>
-                  <strong>Рекомендуемый размер изображения:</strong>
+                  <strong>{t('group.imageSizeRecommendation')}</strong>
                   <br />
                   {(() => {
                     const linksCount = editingGroup ? editingGroup.links.length : 3 // по умолчанию для новых групп
@@ -1350,16 +1355,16 @@ export default function DashboardClient() {
                   </small>
                   <br />
                   <small className="text-muted">
-                    💡 <strong>Совет:</strong> Для групп с рамкой используйте изображения с отступами по краям (10-20px)
+                    💡 <strong>{t('group.tip')}</strong> {t('group.borderTip')}
                   </small>
                 </div>
-                <div className="form-text">Изображение будет использовано как фон для содержимого группы</div>
+                <div className="form-text">{t('group.backgroundDescription')}</div>
               </div>
             </div>
             <div className="modal-footer">
-              <button className="btn btn-secondary" onClick={() => setShowGroupModal(false)}>Отмена</button>
+              <button className="btn btn-secondary" onClick={() => setShowGroupModal(false)}>{t('common.cancel')}</button>
               <button className="btn btn-primary" onClick={handleGroupSubmit}>
-                Сохранить
+                {t('common.save')}
               </button>
             </div>
           </div>
@@ -1371,55 +1376,55 @@ export default function DashboardClient() {
         <div className="modal-dialog">
           <div className="modal-content">
             <div className="modal-header">
-              <h5 className="modal-title">{linkModalMode === 'add' ? 'Добавить ссылку' : 'Редактировать ссылку'}</h5>
+              <h5 className="modal-title">{linkModalMode === 'add' ? t('link.create') : t('link.edit')}</h5>
               <button 
                 type="button" 
                 className="btn-close" 
                 onClick={() => setShowLinkModal(false)}
-                aria-label="Закрыть"
-                title="Закрыть модальное окно"
+                aria-label={t('common.close')}
+                title={t('common.close')}
               />
             </div>
             <div className="modal-body">
               <div className="mb-3">
-                <label className="form-label">Заголовок</label>
+                <label className="form-label">{t('link.title')}</label>
                 <input
                   type="text"
                   className="form-control"
                   value={linkForm.title}
                   onChange={e => setLinkForm(f => ({ ...f, title: e.target.value }))}
-                  placeholder="Название ссылки"
+                  placeholder={t('link.titlePlaceholder')}
                 />
               </div>
               <div className="mb-3">
-                <label className="form-label">URL</label>
+                <label className="form-label">{t('link.url')}</label>
                 <input
                   type="url"
                   className="form-control"
                   value={linkForm.url}
                   onChange={e => setLinkForm(f => ({ ...f, url: e.target.value }))}
-                  placeholder="https://example.com"
+                  placeholder={t('link.urlPlaceholder')}
                 />
               </div>
               <div className="mb-3">
-                <label className="form-label">Описание (опционально)</label>
+                <label className="form-label">{t('link.description')} ({t('common.optional')})</label>
                 <textarea
                   className="form-control"
                   rows={2}
                   value={linkForm.description}
                   onChange={e => setLinkForm(f => ({ ...f, description: e.target.value }))}
-                  placeholder="Краткое описание ссылки"
+                  placeholder={t('link.descriptionPlaceholder')}
                 />
               </div>
               <div className="mb-3">
-                <label className="form-label">Иконка (опционально)</label>
+                <label className="form-label">{t('link.icon')} ({t('common.optional')})</label>
                 {editingLink?.icon_url && (
                   <div className="mb-2">
-                    <label className="form-label small">Текущая иконка:</label>
+                    <label className="form-label small">{t('link.currentIcon')}:</label>
                     <div className="d-flex align-items-center gap-2">
                       <img 
                         src={editingLink.icon_url} 
-                        alt="Текущая иконка" 
+                        alt={t('link.currentIcon')} 
                         className="img-thumbnail"
                         style={{ width: '32px', height: '32px', objectFit: 'cover' }}
                       />
@@ -1427,7 +1432,7 @@ export default function DashboardClient() {
                         type="button"
                         className="btn btn-outline-danger btn-sm"
                         onClick={() => {
-                          if (confirm('Удалить текущую иконку ссылки?')) {
+                          if (confirm(t('link.confirmRemoveIcon'))) {
                             // Удаляем иконку через API
                             fetch(`/api/links/${editingLink.id}/`, {
                               method: 'PATCH',
@@ -1454,9 +1459,9 @@ export default function DashboardClient() {
                             })
                           }
                         }}
-                        title="Убрать иконку ссылки"
+                        title={t('link.removeIcon')}
                       >
-                        <i className="bi bi-trash"></i> Убрать иконку
+                        <i className="bi bi-trash"></i> {t('link.removeIcon')}
                       </button>
                     </div>
                   </div>
@@ -1467,13 +1472,13 @@ export default function DashboardClient() {
                   accept="image/*"
                   onChange={e => setLinkForm(f => ({ ...f, iconFile: e.target.files?.[0] || null }))}
                 />
-                <div className="form-text">Рекомендуемый размер: 24x24 пикселя</div>
+                <div className="form-text">{t('link.iconSizeRecommendation')}</div>
               </div>
             </div>
             <div className="modal-footer">
-              <button className="btn btn-secondary" onClick={() => setShowLinkModal(false)}>Отмена</button>
+              <button className="btn btn-secondary" onClick={() => setShowLinkModal(false)}>{t('common.cancel')}</button>
               <button className="btn btn-primary" onClick={handleLinkSubmit}>
-                Сохранить
+                {t('common.save')}
               </button>
             </div>
           </div>
@@ -1485,25 +1490,25 @@ export default function DashboardClient() {
         <div className="modal-dialog">
           <div className="modal-content">
             <div className="modal-header">
-              <h5 className="modal-title">Поделиться страницей</h5>
+              <h5 className="modal-title">{t('share.title')}</h5>
               <button 
                 type="button" 
                 className="btn-close" 
                 onClick={() => setShowShareModal(false)}
-                aria-label="Закрыть"
-                title="Закрыть модальное окно"
+                aria-label={t('common.close')}
+                title={t('common.closeModal')}
               />
             </div>
             <div className="modal-body">
-              <p>Ваша публичная страница со ссылками доступна по адресу:</p>
+              <p>{t('share.description')}</p>
               <div className="input-group mb-3">
                 <input
                   type="text"
                   className="form-control"
-                  value={shareUrl || 'Загрузка...'}
+                  value={shareUrl || t('share.loading')}
                   readOnly
-                  aria-label="URL публичной страницы"
-                  title="URL публичной страницы"
+                  aria-label={t('share.urlAriaLabel')}
+                  title={t('share.urlTitle')}
                 />
                 <button 
                   className="btn btn-outline-primary" 
@@ -1511,17 +1516,16 @@ export default function DashboardClient() {
                   onClick={copyShareUrl}
                   disabled={!shareUrl}
                 >
-                  <i className="bi bi-clipboard"></i> Копировать
+                  <i className="bi bi-clipboard"></i> {t('share.copy')}
                 </button>
               </div>
               <p className="text-muted small">
-                На этой странице будут видны все ваши группы и ссылки. 
-                Она обновляется автоматически при изменении данных.
+                {t('share.note')}
               </p>
             </div>
             <div className="modal-footer">
               <button className="btn btn-secondary" onClick={() => setShowShareModal(false)}>
-                Закрыть
+                {t('common.close')}
               </button>
               {shareUrl && (
                 <a 
@@ -1530,7 +1534,7 @@ export default function DashboardClient() {
                   rel="noopener noreferrer"
                   className="btn btn-primary"
                 >
-                  <i className="bi bi-box-arrow-up-right"></i> Открыть страницу
+                  <i className="bi bi-box-arrow-up-right"></i> {t('share.openPage')}
                 </a>
               )}
             </div>
@@ -1543,20 +1547,20 @@ export default function DashboardClient() {
         <div className="modal-dialog modal-lg">
           <div className="modal-content">
             <div className="modal-header">
-              <h5 className="modal-title">Редактировать профиль</h5>
+              <h5 className="modal-title">{t('profile.edit')}</h5>
               <button 
                 type="button" 
                 className="btn-close" 
                 onClick={() => setShowProfileModal(false)}
-                aria-label="Закрыть"
-                title="Закрыть модальное окно"
+                aria-label={t('common.close')}
+                title={t('common.closeModal')}
               />
             </div>
             <div className="modal-body">
               <div className="row">
                 <div className="col-md-6">
                   <div className="mb-3">
-                    <label className="form-label">Email</label>
+                    <label className="form-label">{t('profile.email')}</label>
                     <input
                       type="email"
                       className="form-control"
@@ -1565,7 +1569,7 @@ export default function DashboardClient() {
                     />
                   </div>
                   <div className="mb-3">
-                    <label className="form-label">Имя</label>
+                    <label className="form-label">{t('profile.firstName')}</label>
                     <input
                       type="text"
                       className="form-control"
@@ -1574,7 +1578,7 @@ export default function DashboardClient() {
                     />
                   </div>
                   <div className="mb-3">
-                    <label className="form-label">Фамилия</label>
+                    <label className="form-label">{t('profile.lastName')}</label>
                     <input
                       type="text"
                       className="form-control"
@@ -1583,7 +1587,7 @@ export default function DashboardClient() {
                     />
                   </div>
                   <div className="mb-3">
-                    <label className="form-label">Полное имя</label>
+                    <label className="form-label">{t('profile.fullName')}</label>
                     <input
                       type="text"
                       className="form-control"
@@ -1594,7 +1598,7 @@ export default function DashboardClient() {
                 </div>
                 <div className="col-md-6">
                   <div className="mb-3">
-                    <label className="form-label">Биография</label>
+                    <label className="form-label">{t('profile.bio')}</label>
                     <textarea
                       className="form-control"
                       rows={4}
@@ -1603,7 +1607,7 @@ export default function DashboardClient() {
                     />
                   </div>
                   <div className="mb-3">
-                    <label className="form-label">Аватар</label>
+                    <label className="form-label">{t('profile.avatar')}</label>
                     <input
                       type="file"
                       className="form-control"
@@ -1612,12 +1616,12 @@ export default function DashboardClient() {
                     />
                     {user?.avatar && (
                       <div className="mt-2">
-                        <img src={user.avatar_url || user.avatar} alt="Текущий аватар" className="img-thumbnail w-25" />
+                        <img src={user.avatar_url || user.avatar} alt={t('profile.currentAvatar')} className="img-thumbnail w-25" />
                       </div>
                     )}
                   </div>
                   <div className="mb-3">
-                    <label className="form-label">Обложка</label>
+                    <label className="form-label">{t('profile.cover')}</label>
                     <input
                       type="file"
                       className="form-control"
@@ -1634,7 +1638,7 @@ export default function DashboardClient() {
                 className="btn btn-secondary" 
                 onClick={() => setShowProfileModal(false)}
               >
-                Отмена
+                {t('common.cancel')}
               </button>
               <button 
                 type="button" 
diff --git a/frontend/linktree-frontend/src/app/(protected)/dashboard/page.tsx b/frontend/linktree-frontend/src/app/(protected)/dashboard/page.tsx
index 79b3b24..c521ac7 100644
--- a/frontend/linktree-frontend/src/app/(protected)/dashboard/page.tsx
+++ b/frontend/linktree-frontend/src/app/(protected)/dashboard/page.tsx
@@ -1,20 +1,25 @@
 'use client'
 
 import dynamic from 'next/dynamic'
+import { useLocale } from '../../contexts/LocaleContext'
 
 // Динамический импорт клиентского компонента без SSR
 const DashboardClient = dynamic(() => import('./DashboardClient'), {
   ssr: false,
-  loading: () => (
-    <div className="d-flex justify-content-center align-items-center min-vh-100">
-      <div className="text-center">
-        <div className="spinner-border text-primary" role="status">
-          <span className="visually-hidden">Загрузка...</span>
+  loading: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { t } = useLocale()
+    return (
+      <div className="d-flex justify-content-center align-items-center min-vh-100">
+        <div className="text-center">
+          <div className="spinner-border text-primary" role="status">
+            <span className="visually-hidden">{t('common.loading')}</span>
+          </div>
+          <p className="mt-3">{t('dashboard.title')} {t('common.loading')}...</p>
         </div>
-        <p className="mt-3">Загрузка дашборда...</p>
       </div>
-    </div>
-  )
+    )
+  }
 })
 
 export default function DashboardPage() {
diff --git a/frontend/linktree-frontend/src/app/auth/login/page.tsx b/frontend/linktree-frontend/src/app/auth/login/page.tsx
index 1ed8ca9..c41e28a 100644
--- a/frontend/linktree-frontend/src/app/auth/login/page.tsx
+++ b/frontend/linktree-frontend/src/app/auth/login/page.tsx
@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
+import { useLocale } from '../../contexts/LocaleContext'
 
 type FormData = { username: string; password: string }
 
@@ -12,6 +13,7 @@ export default function LoginPage() {
   const router = useRouter()
   const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>()
   const [apiError, setApiError] = useState<string | null>(null)
+  const { t } = useLocale()
 
   useEffect(() => {
     if (typeof window !== 'undefined' && localStorage.getItem('token')) {
@@ -32,14 +34,14 @@ export default function LoginPage() {
       )
       if (!res.ok) {
         const json = await res.json()
-        setApiError(json.detail || 'Ошибка входа')
+        setApiError(json.detail || t('auth.loginError'))
         return
       }
       const { access } = await res.json()
       localStorage.setItem('token', access)
       router.push('/dashboard')
     } catch {
-      setApiError('Сетевая ошибка')
+      setApiError(t('auth.networkError'))
     }
   }
 
@@ -58,8 +60,8 @@ export default function LoginPage() {
                     height="80" 
                     className="mb-3"
                   />
-                  <h2 className="fw-bold text-primary">Добро пожаловать!</h2>
-                  <p className="text-muted">Войдите в свой аккаунт CatLink</p>
+                  <h2 className="fw-bold text-primary">{t('auth.welcome')}</h2>
+                  <p className="text-muted">{t('auth.welcomeSubtitle')}</p>
                 </div>
 
                 {apiError && (
@@ -70,13 +72,13 @@ export default function LoginPage() {
 
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="mb-3">
-                    <label htmlFor="username" className="form-label">Имя пользователя</label>
+                    <label htmlFor="username" className="form-label">{t('auth.usernameLabel')}</label>
                     <input
                       id="username"
                       type="text"
-                      placeholder="Введите имя пользователя"
+                      placeholder={t('auth.usernamePlaceholder')}
                       className={`form-control form-control-lg ${errors.username ? 'is-invalid' : ''}`}
-                      {...register('username', { required: 'Введите имя пользователя' })}
+                      {...register('username', { required: t('auth.usernameRequired') })}
                     />
                     {errors.username && (
                       <div className="invalid-feedback">{errors.username.message}</div>
@@ -84,13 +86,13 @@ export default function LoginPage() {
                   </div>
 
                   <div className="mb-4">
-                    <label htmlFor="password" className="form-label">Пароль</label>
+                    <label htmlFor="password" className="form-label">{t('auth.passwordLabel')}</label>
                     <input
                       id="password"
                       type="password"
-                      placeholder="Введите пароль"
+                      placeholder={t('auth.passwordPlaceholder')}
                       className={`form-control form-control-lg ${errors.password ? 'is-invalid' : ''}`}
-                      {...register('password', { required: 'Введите пароль' })}
+                      {...register('password', { required: t('auth.passwordRequired') })}
                     />
                     {errors.password && (
                       <div className="invalid-feedback">{errors.password.message}</div>
@@ -105,19 +107,19 @@ export default function LoginPage() {
                     {isSubmitting ? (
                       <>
                         <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-                        Входим...
+                        {t('auth.loggingIn')}
                       </>
                     ) : (
-                      'Войти'
+                      t('auth.loginButton')
                     )}
                   </button>
                 </form>
 
                 <div className="text-center">
                   <p className="text-muted mb-0">
-                    Нет аккаунта?{' '}
+                    {t('auth.noAccount')}{' '}
                     <Link href="/auth/register" className="text-primary text-decoration-none fw-bold">
-                      Зарегистрироваться
+                      {t('common.register')}
                     </Link>
                   </p>
                 </div>
diff --git a/frontend/linktree-frontend/src/app/auth/register/page.tsx b/frontend/linktree-frontend/src/app/auth/register/page.tsx
index 63219b3..7efa13c 100644
--- a/frontend/linktree-frontend/src/app/auth/register/page.tsx
+++ b/frontend/linktree-frontend/src/app/auth/register/page.tsx
@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import Image from 'next/image'
+import { useLocale } from '../../contexts/LocaleContext'
 
 export default function RegisterPage() {
   const [formData, setFormData] = useState({
@@ -17,6 +18,7 @@ export default function RegisterPage() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const router = useRouter()
+  const { t } = useLocale()
 
   useEffect(() => {
     // Автозаполнение email из главной страницы
@@ -40,7 +42,7 @@ export default function RegisterPage() {
     setError(null)
 
     if (formData.password !== formData.password2) {
-      setError('Пароли не совпадают')
+      setError(t('auth.passwordMismatch'))
       setLoading(false)
       return
     }
@@ -59,10 +61,10 @@ export default function RegisterPage() {
         router.push('/auth/login?message=registration_success')
       } else {
         const errorData = await response.json()
-        setError(errorData.message || 'Ошибка регистрации')
+        setError(errorData.message || t('auth.registrationError'))
       }
     } catch (err) {
-      setError('Ошибка соединения с сервером')
+      setError(t('auth.connectionError'))
     } finally {
       setLoading(false)
     }
@@ -84,8 +86,8 @@ export default function RegisterPage() {
                     height={64}
                     className="mb-3"
                   />
-                  <h2 className="fw-bold text-primary">Создать аккаунт</h2>
-                  <p className="text-muted">Присоединяйтесь к CatLink сегодня</p>
+                  <h2 className="fw-bold text-primary">{t('auth.createAccount')}</h2>
+                  <p className="text-muted">{t('auth.createAccountSubtitle')}</p>
                 </div>
 
                 {/* Форма регистрации */}
@@ -99,7 +101,7 @@ export default function RegisterPage() {
                   <div className="row">
                     <div className="col-sm-6 mb-3">
                       <label htmlFor="first_name" className="form-label">
-                        Имя
+                        {t('auth.firstNameLabel')}
                       </label>
                       <input
                         type="text"
@@ -113,7 +115,7 @@ export default function RegisterPage() {
                     </div>
                     <div className="col-sm-6 mb-3">
                       <label htmlFor="last_name" className="form-label">
-                        Фамилия
+                        {t('auth.lastNameLabel')}
                       </label>
                       <input
                         type="text"
@@ -129,7 +131,7 @@ export default function RegisterPage() {
 
                   <div className="mb-3">
                     <label htmlFor="username" className="form-label">
-                      Имя пользователя
+                      {t('auth.usernameLabel')}
                     </label>
                     <input
                       type="text"
@@ -138,14 +140,14 @@ export default function RegisterPage() {
                       name="username"
                       value={formData.username}
                       onChange={handleChange}
-                      placeholder="Только латинские буквы, цифры и _"
+                      placeholder={t('auth.usernameHelp')}
                       required
                     />
                   </div>
 
                   <div className="mb-3">
                     <label htmlFor="email" className="form-label">
-                      Email
+                      {t('auth.emailLabel')}
                     </label>
                     <input
                       type="email"
@@ -160,7 +162,7 @@ export default function RegisterPage() {
 
                   <div className="mb-3">
                     <label htmlFor="password" className="form-label">
-                      Пароль
+                      {t('auth.passwordLabel')}
                     </label>
                     <input
                       type="password"
@@ -176,7 +178,7 @@ export default function RegisterPage() {
 
                   <div className="mb-4">
                     <label htmlFor="password2" className="form-label">
-                      Подтвердите пароль
+                      {t('auth.passwordConfirmLabel')}
                     </label>
                     <input
                       type="password"
@@ -198,17 +200,17 @@ export default function RegisterPage() {
                     {loading ? (
                       <>
                         <span className="spinner-border spinner-border-sm me-2"></span>
-                        Создание аккаунта...
+                        {t('auth.registering')}
                       </>
                     ) : (
-                      'Создать аккаунт'
+                      t('auth.registerButton')
                     )}
                   </button>
 
                   <div className="text-center">
-                    <span className="text-muted">Уже есть аккаунт? </span>
+                    <span className="text-muted">{t('auth.haveAccount')} </span>
                     <Link href="/auth/login" className="text-decoration-none">
-                      Войти
+                      {t('common.login')}
                     </Link>
                   </div>
                 </form>
@@ -218,13 +220,13 @@ export default function RegisterPage() {
             {/* Дополнительная информация */}
             <div className="text-center mt-4">
               <p className="text-muted small">
-                Создавая аккаунт, вы соглашаетесь с{' '}
+                {t('auth.termsAgreement')}{' '}
                 <Link href="/terms" className="text-decoration-none">
-                  Условиями использования
+                  {t('auth.termsLink')}
                 </Link>{' '}
-                и{' '}
+                {t('auth.and')}{' '}
                 <Link href="/privacy" className="text-decoration-none">
-                  Политикой конфиденциальности
+                  {t('auth.privacyLink')}
                 </Link>
               </p>
             </div>
diff --git a/frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx b/frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx
index 84db0de..7a03003 100644
--- a/frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx
+++ b/frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx
@@ -358,63 +358,63 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                     <div className="col-12 mb-4">
                       <label className="form-label fs-5 mb-3">
                         <i className="bi bi-layout-text-window-reverse me-2"></i>
-                        Стиль отображения групп и ссылок
+                        {t('customization.layout.style')}
                       </label>
                       <div className="row g-3">
                         {[
                           { 
                             value: 'list', 
-                            label: 'Список', 
+                            labelKey: 'customization.layout.list', 
                             icon: 'bi-list-ul',
-                            description: 'Классический вертикальный список' 
+                            descriptionKey: 'customization.layout.listDescription' 
                           },
                           { 
                             value: 'grid', 
-                            label: 'Сетка', 
+                            labelKey: 'customization.layout.grid', 
                             icon: 'bi-grid-3x3',
-                            description: 'Равномерная сетка карточек' 
+                            descriptionKey: 'customization.layout.gridDescription' 
                           },
                           { 
                             value: 'cards', 
-                            label: 'Карточки', 
+                            labelKey: 'customization.layout.cards', 
                             icon: 'bi-card-heading',
-                            description: 'Большие информативные карточки' 
+                            descriptionKey: 'customization.layout.cardsDescription' 
                           },
                           { 
                             value: 'compact', 
-                            label: 'Компактный', 
+                            labelKey: 'customization.layout.compact', 
                             icon: 'bi-layout-text-sidebar',
-                            description: 'Компактное отображение без отступов' 
+                            descriptionKey: 'customization.layout.compactDescription' 
                           },
                           { 
                             value: 'sidebar', 
-                            label: 'Боковая панель', 
+                            labelKey: 'customization.layout.sidebar', 
                             icon: 'bi-layout-sidebar',
-                            description: 'Навигация в боковой панели' 
+                            descriptionKey: 'customization.layout.sidebarDescription' 
                           },
                           { 
                             value: 'masonry', 
-                            label: 'Кладка', 
+                            labelKey: 'customization.layout.masonry', 
                             icon: 'bi-bricks',
-                            description: 'Динамическая сетка разной высоты' 
+                            descriptionKey: 'customization.layout.masonryDescription' 
                           },
                           { 
                             value: 'timeline', 
-                            label: 'Лента времени', 
+                            labelKey: 'customization.layout.timeline', 
                             icon: 'bi-clock-history',
-                            description: 'Хронологическое отображение' 
+                            descriptionKey: 'customization.layout.timelineDescription' 
                           },
                           { 
                             value: 'magazine', 
-                            label: 'Журнальный', 
+                            labelKey: 'customization.layout.magazine', 
                             icon: 'bi-newspaper',
-                            description: 'Стиль журнала с крупными изображениями' 
+                            descriptionKey: 'customization.layout.magazineDescription' 
                           },
                           { 
                             value: 'test-list', 
-                            label: 'Тестовый список', 
+                            labelKey: 'customization.layout.testList', 
                             icon: 'bi-list-check',
-                            description: 'Полный несворачиваемый список всех групп и ссылок' 
+                            descriptionKey: 'customization.layout.testListDescription' 
                           }
                         ].map((layout) => (
                           <div key={layout.value} className="col-md-6 col-lg-4">
@@ -425,8 +425,8 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                             >
                               <div className="card-body d-flex flex-column">
                                 <i className={`${layout.icon} fs-1 mb-3 text-primary`}></i>
-                                <h6 className="card-title mb-2">{layout.label}</h6>
-                                <p className="card-text small text-muted flex-grow-1">{layout.description}</p>
+                                <h6 className="card-title mb-2">{t(layout.labelKey)}</h6>
+                                <p className="card-text small text-muted flex-grow-1">{t(layout.descriptionKey)}</p>
                                 {settings.dashboard_layout === layout.value && (
                                   <div className="mt-2">
                                     <span className="badge bg-primary">
@@ -458,7 +458,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                 <div className="tab-pane fade show active">
                   <div className="row">
                     <div className="col-md-6 mb-3">
-                      <label className="form-label">Основной цвет темы</label>
+                      <label className="form-label">{t('customization.colors.theme')}</label>
                       <div className="input-group">
                         <input
                           type="color"
@@ -475,7 +475,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                       </div>
                     </div>
                     <div className="col-md-6 mb-3">
-                      <label className="form-label">Цвет фона дашборда</label>
+                      <label className="form-label">{t('customization.colors.background')}</label>
                       <div className="input-group">
                         <input
                           type="color"
@@ -492,7 +492,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                       </div>
                     </div>
                     <div className="col-12 mb-3">
-                      <label className="form-label">Фоновое изображение</label>
+                      <label className="form-label">{t('customization.colors.backgroundImage')}</label>
                       <div className="mb-2">
                         <input
                           type="file"
@@ -506,12 +506,12 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                           }}
                         />
                         <div className="form-text">
-                          Выберите изображение для фона (JPG, PNG, GIF). Если не выбрано - текущее изображение останется без изменений.
+                          {t('customization.colors.backgroundImageHelp')}
                         </div>
                       </div>
                       {settings.background_image_url && (
                         <div className="mb-2">
-                          <label className="form-label small">Текущее изображение:</label>
+                          <label className="form-label small">{t('customization.colors.currentImage')}</label>
                           <div className="d-flex align-items-center gap-2">
                             <img 
                               src={settings.background_image_url} 
@@ -525,16 +525,16 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                               onClick={() => {
                                 handleChange('background_image_url', '')
                               }}
-                              title="Убрать фон"
+                              title={t('customization.colors.removeBackground')}
                             >
-                              <i className="bi bi-trash"></i> Убрать фон
+                              <i className="bi bi-trash"></i> {t('customization.colors.removeBackground')}
                             </button>
                           </div>
                         </div>
                       )}
                       {backgroundImageFile && (
                         <div className="mb-2">
-                          <label className="form-label small">Новое изображение (будет применено после сохранения):</label>
+                          <label className="form-label small">{t('customization.colors.newImage')}</label>
                           <div className="text-success">
                             <i className="bi bi-file-earmark-image me-1"></i>
                             {backgroundImageFile.name}
@@ -543,7 +543,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                       )}
                     </div>
                     <div className="col-md-4 mb-3">
-                      <label className="form-label">Цвет заголовков</label>
+                      <label className="form-label">{t('customization.colors.header')}</label>
                       <div className="input-group">
                         <input
                           type="color"
@@ -560,7 +560,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                       </div>
                     </div>
                     <div className="col-md-4 mb-3">
-                      <label className="form-label">Цвет названий групп</label>
+                      <label className="form-label">{t('customization.colors.group')}</label>
                       <div className="input-group">
                         <input
                           type="color"
@@ -577,7 +577,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                       </div>
                     </div>
                     <div className="col-md-4 mb-3">
-                      <label className="form-label">Цвет названий ссылок</label>
+                      <label className="form-label">{t('customization.colors.link')}</label>
                       <div className="input-group">
                         <input
                           type="color"
@@ -602,7 +602,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                 <div className="tab-pane fade show active">
                   <div className="row">
                     <div className="col-12 mb-3">
-                      <h6 className="text-muted">Настройки отображения групп</h6>
+                      <h6 className="text-muted">{t('customization.groups.displaySettings')}</h6>
                     </div>
                     <div className="col-12 mb-3">
                       <div className="form-check form-switch">
@@ -874,10 +874,10 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                 <div className="tab-pane fade show active">
                   <div className="row">
                     <div className="col-12 mb-4">
-                      <h6 className="text-muted">Настройки шрифтов</h6>
+                      <h6 className="text-muted">{t('customization.advanced.fontSettings')}</h6>
                     </div>
                     <div className="col-md-6 mb-3">
-                      <label className="form-label">Основной шрифт</label>
+                      <label className="form-label">{t('customization.advanced.mainFont')}</label>
                       <select
                         className="form-select"
                         value={settings.font_family}
@@ -900,7 +900,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                       </select>
                     </div>
                     <div className="col-md-6 mb-3">
-                      <label className="form-label">Шрифт заголовков</label>
+                      <label className="form-label">{t('customization.advanced.headingFont')}</label>
                       <select
                         className="form-select"
                         value={settings.heading_font_family || settings.font_family}
@@ -929,7 +929,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                       </select>
                     </div>
                     <div className="col-md-6 mb-3">
-                      <label className="form-label">Шрифт основного текста</label>
+                      <label className="form-label">{t('customization.advanced.bodyFont')}</label>
                       <select
                         className="form-select"
                         value={settings.body_font_family || settings.font_family}
@@ -963,11 +963,11 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                     
                     <div className="col-12 mb-4">
                       <hr />
-                      <h6 className="text-muted">Дополнительные настройки</h6>
+                      <h6 className="text-muted">{t('customization.advanced.additionalSettings')}</h6>
                     </div>
                     
                     <div className="col-12 mb-3">
-                      <label className="form-label">Дополнительный CSS</label>
+                      <label className="form-label">{t('customization.advanced.customCSS')}</label>
                       <textarea
                         className="form-control font-monospace"
                         rows={6}
@@ -1183,7 +1183,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
               type="button"
               className="btn btn-outline-warning"
               onClick={() => {
-                if (confirm('Вы уверены, что хотите сбросить все настройки интерфейса к значениям по умолчанию? Это действие нельзя отменить.')) {
+                if (confirm(t('customization.advanced.resetConfirm'))) {
                   // Сброс к дефолтным настройкам
                   const defaultSettings = {
                     theme_color: '#007bff',
diff --git a/frontend/linktree-frontend/src/app/components/LanguageSelector.tsx b/frontend/linktree-frontend/src/app/components/LanguageSelector.tsx
index f014d08..5a84994 100644
--- a/frontend/linktree-frontend/src/app/components/LanguageSelector.tsx
+++ b/frontend/linktree-frontend/src/app/components/LanguageSelector.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
+"use client"
+
+import React, { useState } from 'react';
 import { useLocale, Locale } from '../contexts/LocaleContext';
 
 const LanguageSelector: React.FC = () => {
   const { locale, setLocale, t } = useLocale();
+  const [isOpen, setIsOpen] = useState(false);
 
   const languages: Array<{ code: Locale; name: string; flag: string }> = [
     { code: 'en', name: 'English', flag: '🇺🇸' },
@@ -14,31 +17,43 @@ const LanguageSelector: React.FC = () => {
 
   const currentLanguage = languages.find(lang => lang.code === locale);
 
+  const handleLanguageChange = (langCode: Locale) => {
+    console.log('Changing language from', locale, 'to', langCode);
+    setLocale(langCode);
+    setIsOpen(false);
+    console.log('Language change completed');
+  };
+
   return (
-    <div className="dropdown">
+    <div className="dropdown position-relative">
       <button
-        className="btn btn-outline-secondary btn-sm dropdown-toggle d-flex align-items-center"
+        className="btn btn-outline-secondary btn-sm d-flex align-items-center"
         type="button"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        title={t('language.select')}
+        onClick={() => setIsOpen(!isOpen)}
+        title="Выбрать язык"
       >
         <span className="me-1">{currentLanguage?.flag}</span>
-        <span className="d-none d-lg-inline">{currentLanguage?.name}</span>
+        <span className="d-none d-lg-inline me-1">{currentLanguage?.name}</span>
+        <i className={`bi bi-chevron-${isOpen ? 'up' : 'down'}`} style={{ fontSize: '0.7em' }}></i>
       </button>
-      <ul className="dropdown-menu">
-        {languages.map((language) => (
-          <li key={language.code}>
-            <button
-              className={`dropdown-item d-flex align-items-center ${locale === language.code ? 'active' : ''}`}
-              onClick={() => setLocale(language.code)}
-            >
-              <span className="me-2">{language.flag}</span>
-              {language.name}
-            </button>
-          </li>
-        ))}
-      </ul>
+      {isOpen && (
+        <ul 
+          className="dropdown-menu show position-absolute end-0" 
+          style={{ top: '100%', zIndex: 1000 }}
+        >
+          {languages.map((language) => (
+            <li key={language.code}>
+              <button
+                className={`dropdown-item d-flex align-items-center ${locale === language.code ? 'active' : ''}`}
+                onClick={() => handleLanguageChange(language.code)}
+              >
+                <span className="me-2">{language.flag}</span>
+                {language.name}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 };
diff --git a/frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx b/frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx
index 5485a21..4dbd078 100644
--- a/frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx
+++ b/frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx
@@ -7,7 +7,6 @@ import Link from 'next/link'
 import Image from 'next/image'
 import Script from 'next/script'
 import { useLocale } from '../contexts/LocaleContext'
-import { useTheme } from '../contexts/ThemeContext'
 import ThemeToggle from './ThemeToggle'
 import LanguageSelector from './LanguageSelector'
 import '../layout.css'
@@ -23,38 +22,42 @@ interface User {
 export function LayoutWrapper({ children }: { children: ReactNode }) {
   const pathname = usePathname() || ''
   const isPublicUserPage = /^\/[^\/]+$/.test(pathname)
-  const isDashboard = pathname === '/dashboard'
   const [user, setUser] = useState<User | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
   const router = useRouter()
   const { t } = useLocale()
 
-  // При монтировании пробуем загрузить профиль
   useEffect(() => {
-    const token = localStorage.getItem('token')
-    if (token) {
-      fetch('/api/auth/user', {
-        headers: { Authorization: `Bearer ${token}` },
-      })
-        .then(res => {
-          if (!res.ok) throw new Error()
-          return res.json()
-        })
-        .then(data => {
-          // Заполняем полную информацию о пользователе
-          setUser({
-            id: data.id,
-            username: data.username,
-            email: data.email,
-            full_name: data.full_name || '',
-            avatar: data.avatar
+    const checkAuth = async () => {
+      const token = localStorage.getItem('token')
+      if (token) {
+        try {
+          const response = await fetch('/api/auth/user', {
+            headers: { Authorization: `Bearer ${token}` },
           })
-        })
-        .catch(() => {
-          // сбросить некорректный токен
+          if (response.ok) {
+            const data = await response.json()
+            setUser({
+              id: data.id,
+              username: data.username,
+              email: data.email,
+              full_name: data.full_name || '',
+              avatar: data.avatar
+            })
+          } else {
+            localStorage.removeItem('token')
+            setUser(null)
+          }
+        } catch (error) {
+          console.error('Auth check failed:', error)
           localStorage.removeItem('token')
           setUser(null)
-        })
+        }
+      }
+      setIsLoading(false)
     }
+
+    checkAuth()
   }, [])
 
   const handleLogout = () => {
@@ -67,9 +70,8 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {
 
   return (
     <>
-      {/* Шапка не выводим на публичных страницах /[username] */}
       {!isPublicUserPage && (
-        <nav className="navbar navbar-expand-lg theme-bg-secondary fixed-top shadow-sm border-bottom theme-border">
+        <nav className="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm border-bottom">
           <div className="container">
             <Link href="/" className="navbar-brand d-flex align-items-center">
               <Image
@@ -82,82 +84,86 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {
               <span className="fw-bold">CatLink</span>
             </Link>
             
-            <button
-              className="navbar-toggler"
-              type="button"
-              data-bs-toggle="collapse"
-              data-bs-target="#navcol-1"
-              title={t('common.menu')}
-            >
-              <span className="navbar-toggler-icon"></span>
-            </button>
-            
-            <div className="collapse navbar-collapse" id="navcol-1">
+            {/* Убираем navbar-toggler и делаем всё всегда видимым */}
+            <div className="d-flex justify-content-between align-items-center flex-grow-1">
               {/* Левое меню */}
-              <ul className="navbar-nav me-auto">
+              <ul className="navbar-nav d-flex flex-row me-auto">
                 {user && (
-                  <li className="nav-item">
-                    <Link href="/dashboard" className="nav-link">
-                      <i className="fas fa-tachometer-alt me-1"></i>
-                      {t('dashboard.title')}
-                    </Link>
-                  </li>
+                  <>
+                    <li className="nav-item me-3">
+                      <Link href="/dashboard" className="nav-link">
+                        <i className="bi bi-speedometer2 me-1"></i>
+                        {t('dashboard.title')}
+                      </Link>
+                    </li>
+                    <li className="nav-item me-3">
+                      <Link href="/profile" className="nav-link">
+                        <i className="bi bi-person-gear me-1"></i>
+                        {t('common.profile')}
+                      </Link>
+                    </li>
+                  </>
                 )}
               </ul>
 
               {/* Правое меню */}
               <div className="d-flex align-items-center gap-2">
-                {/* Переключатели темы и языка всегда видны */}
+                {/* Компоненты контекстов */}
                 <ThemeToggle />
                 <LanguageSelector />
                 
-                {!user ? (
+                {isLoading ? (
+                  <div className="spinner-border spinner-border-sm ms-2" role="status">
+                    <span className="visually-hidden">{t('common.loading')}</span>
+                  </div>
+                ) : !user ? (
                   <div className="d-flex gap-2 ms-2">
                     <Link href="/auth/login" className="btn btn-outline-primary btn-sm">
-                      <i className="fas fa-sign-in-alt me-1"></i>
+                      <i className="bi bi-box-arrow-in-right me-1"></i>
                       <span className="d-none d-sm-inline">{t('common.login')}</span>
                     </Link>
                     <Link href="/auth/register" className="btn btn-primary btn-sm">
-                      <i className="fas fa-user-plus me-1"></i>
+                      <i className="bi bi-person-plus me-1"></i>
                       <span className="d-none d-sm-inline">{t('common.register')}</span>
                     </Link>
                   </div>
                 ) : (
                   <div className="dropdown ms-2">
                     <button
-                      className="btn btn-link text-decoration-none d-flex align-items-center dropdown-toggle"
+                      className="btn btn-outline-secondary dropdown-toggle d-flex align-items-center"
                       type="button"
                       data-bs-toggle="dropdown"
-                      aria-expanded="false"
                     >
-                      <Image
-                        src={
-                          user.avatar && user.avatar.startsWith('http')
-                            ? user.avatar
-                            : user.avatar 
-                              ? `${process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'}${user.avatar}`
-                              : '/assets/img/avatar-dhg.png'
-                        }
-                        alt="Avatar"
-                        width={32}
-                        height={32}
-                        className="rounded-circle me-2"
-                      />
-                      <span className="text-dark fw-medium d-none d-md-inline">
+                      {user.avatar ? (
+                        <Image
+                          src={
+                            user.avatar.startsWith('http')
+                              ? user.avatar
+                              : `http://localhost:8000${user.avatar}`
+                          }
+                          alt="Avatar"
+                          width={24}
+                          height={24}
+                          className="rounded-circle me-2"
+                        />
+                      ) : (
+                        <i className="bi bi-person-circle me-2"></i>
+                      )}
+                      <span className="d-none d-md-inline">
                         {user.full_name?.trim() || user.username}
                       </span>
                     </button>
                     <ul className="dropdown-menu dropdown-menu-end">
                       <li>
-                        <Link href="/profile" className="dropdown-item">
-                          <i className="fas fa-user me-2"></i>
-                          {t('profile.edit')}
+                        <Link href="/dashboard" className="dropdown-item">
+                          <i className="bi bi-speedometer2 me-2"></i>
+                          {t('dashboard.title')}
                         </Link>
                       </li>
                       <li>
-                        <Link href="/dashboard" className="dropdown-item">
-                          <i className="fas fa-tachometer-alt me-2"></i>
-                          {t('dashboard.title')}
+                        <Link href="/profile" className="dropdown-item">
+                          <i className="bi bi-person-gear me-2"></i>
+                          {t('common.profile')}
                         </Link>
                       </li>
                       <li><hr className="dropdown-divider" /></li>
@@ -166,7 +172,7 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {
                           onClick={handleLogout}
                           className="dropdown-item text-danger"
                         >
-                          <i className="fas fa-sign-out-alt me-2"></i>
+                          <i className="bi bi-box-arrow-right me-2"></i>
                           {t('common.logout')}
                         </button>
                       </li>
@@ -179,42 +185,27 @@ export function LayoutWrapper({ children }: { children: ReactNode }) {
         </nav>
       )}
 
-      {/* отступ, чтобы контент не прятался под фиксированным хедером */}
-      {!isPublicUserPage && <div className="navbar-spacing" />}
+      {!isPublicUserPage && <div style={{ height: '76px' }} />}
 
       {children}
 
-      {/* Подвал не выводим на публичных страницах */}
       {!isPublicUserPage && (
         <footer className="bg-light footer border-top mt-5">
           <div className="container py-4">
             <div className="row">
               <div className="col-lg-6 text-center text-lg-start mb-2 mb-lg-0">
                 <ul className="list-inline mb-1">
-                  <li className="list-inline-item"><Link href="#">About</Link></li>
+                  <li className="list-inline-item"><Link href="#">{t('footer.about')}</Link></li>
                   <li className="list-inline-item">⋅</li>
-                  <li className="list-inline-item"><Link href="#">Contact</Link></li>
-                  <li className="list-inline-item">⋅</li>
-                  <li className="list-inline-item"><Link href="#">Terms of Use</Link></li>
-                  <li className="list-inline-item">⋅</li>
-                  <li className="list-inline-item"><Link href="#">Privacy Policy</Link></li>
-                </ul>
-                <p className="text-muted small mb-0">© CatLink 2025</p>
-              </div>
-              <div className="col-lg-6 text-center text-lg-end">
-                <ul className="list-inline mb-0">
-                  <li className="list-inline-item"><Link href="#"><i className="fa fa-facebook fa-lg fa-fw"></i></Link></li>
-                  <li className="list-inline-item"><Link href="#"><i className="fa fa-twitter fa-lg fa-fw"></i></Link></li>
-                  <li className="list-inline-item"><Link href="#"><i className="fa fa-instagram fa-lg fa-fw"></i></Link></li>
+                  <li className="list-inline-item"><Link href="#">{t('footer.contact')}</Link></li>
                 </ul>
+                <p className="text-muted small mb-0">{t('footer.copyright')}</p>
               </div>
             </div>
           </div>
         </footer>
       )}
 
-      {/* Bootstrap JS */}
-      {/* Bootstrap JS: load after React hydrates to avoid DOM mutations during hydration */}
       <Script
         src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
         strategy="afterInteractive"
diff --git a/frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx.bak b/frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx.bak
new file mode 100644
index 0000000..fbcd194
--- /dev/null
+++ b/frontend/linktree-frontend/src/app/components/LayoutWrapper.tsx.bak
@@ -0,0 +1,302 @@
+// src/components/LayoutWrapper.tsx
+'use client'
+
+import React, { ReactNode, useEffect, useState } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import Link from 'next/link'
+import Image from 'next/image'
+import Script from 'next/script'
+import { useLocale } from '../contexts/LocaleContext'
+import { useTheme } from '../contexts/ThemeContext'
+import ThemeToggle from './ThemeToggle'
+import LanguageSelector from './LanguageSelector'
+import '../layout.css'
+
+interface User {
+  id: number
+  username: string
+  email: string
+  full_name: string
+  avatar: string | null
+}
+
+export function LayoutWrapper({ children }: { children: ReactNode }) {
+  const pathname = usePathname() || ''
+  const isPublicUserPage = /^\/[^\/]+$/.test(pathname)
+  const [user, setUser] = useState<User | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const router = useRouter()
+  const { t } = useLocale()
+
+  // При монтировании пробуем загрузить профиль
+  useEffect(() => {
+    const checkAuth = async () => {
+      const token = localStorage.getItem('token')
+      if (token) {
+        try {
+          const response = await fetch('/api/auth/user', {
+            headers: { Authorization: `Bearer ${token}` },
+          })
+          if (response.ok) {
+            const data = await response.json()
+            setUser({
+              id: data.id,
+              username: data.username,
+              email: data.email,
+              full_name: data.full_name || '',
+              avatar: data.avatar
+            })
+          } else {
+            // Токен недействителен
+            localStorage.removeItem('token')
+            setUser(null)
+          }
+        } catch (error) {
+          console.error('Auth check failed:', error)
+          localStorage.removeItem('token')
+          setUser(null)
+        }
+      }
+      setIsLoading(false)
+    }
+
+    checkAuth()
+  }, [])
+
+  const handleLogout = () => {
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem('token')
+    }
+    setUser(null)
+    router.push('/')
+  }
+
+  return (
+    <>
+      {/* Шапка отображается на всех страницах кроме публичных /[username] */}
+      {!isPublicUserPage && (
+        <nav className="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm border-bottom">
+          <div className="container">
+            <Link href="/" className="navbar-brand d-flex align-items-center">
+              <Image
+                src="/assets/img/CAT.png"
+                alt="CatLink"
+                width={32}
+                height={32}
+                className="me-2"
+              />
+              <span className="fw-bold">CatLink</span>
+            </Link>
+            
+            <button
+              className="navbar-toggler"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#navcol-1"
+              aria-controls="navcol-1"
+              aria-expanded="false"
+              aria-label="Toggle navigation"
+            >
+              <span className="navbar-toggler-icon"></span>
+            </button>
+            
+            <div className="collapse navbar-collapse" id="navcol-1">
+              {/* Левое меню */}
+              <ul className="navbar-nav me-auto">
+                {user && (
+                  <>
+                    <li className="nav-item">
+                      <Link href="/dashboard" className="nav-link">
+                        <i className="bi bi-speedometer2 me-1"></i>
+                        Дашборд
+                      </Link>
+                    </li>
+                    <li className="nav-item">
+                      <Link href="/profile" className="nav-link">
+                        <i className="bi bi-person-gear me-1"></i>
+                        Профиль
+                      </Link>
+                    </li>
+                  </>
+                )}
+              </ul>
+
+              {/* Правое меню - всегда отображается */}
+              <div className="d-flex align-items-center gap-2">
+                {/* Переключатели темы и языка - всегда видны */}
+                <ThemeToggle />
+                <LanguageSelector />
+                
+                {/* Блок авторизации */}
+                {isLoading ? (
+                  <div className="spinner-border spinner-border-sm ms-2" role="status">
+                    <span className="visually-hidden">Загрузка...</span>
+                  </div>
+                ) : !user ? (
+                  <div className="d-flex gap-2 ms-2">
+                    <Link href="/auth/login" className="btn btn-outline-primary btn-sm">
+                      <i className="bi bi-box-arrow-in-right me-1"></i>
+                      <span className="d-none d-sm-inline">Вход</span>
+                    </Link>
+                    <Link href="/auth/register" className="btn btn-primary btn-sm">
+                      <i className="bi bi-person-plus me-1"></i>
+                      <span className="d-none d-sm-inline">Регистрация</span>
+                    </Link>
+                  </div>
+                ) : (
+                  <div className="dropdown ms-2">
+                    <button
+                      className="btn btn-outline-secondary dropdown-toggle d-flex align-items-center"
+                      type="button"
+                      id="userDropdown"
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
+                    >
+                      {user.avatar ? (
+                        <Image
+                          src={
+                            user.avatar.startsWith('http')
+                              ? user.avatar
+                              : `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'}${user.avatar}`
+                          }
+                          alt="Avatar"
+                          width={24}
+                          height={24}
+                          className="rounded-circle me-2"
+                        />
+                      ) : (
+                        <i className="bi bi-person-circle me-2"></i>
+                      )}
+                      <span className="d-none d-md-inline">
+                        {user.full_name?.trim() || user.username}
+                      </span>
+                    </button>
+                    <ul className="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
+                      <li>
+                        <Link href="/dashboard" className="dropdown-item">
+                          <i className="bi bi-speedometer2 me-2"></i>
+                          Дашборд
+                        </Link>
+                      </li>
+                      <li>
+                        <Link href="/profile" className="dropdown-item">
+                          <i className="bi bi-person-gear me-2"></i>
+                          Профиль
+                        </Link>
+                      </li>
+                      <li><hr className="dropdown-divider" /></li>
+                      <li>
+                        <button 
+                          onClick={handleLogout}
+                          className="dropdown-item text-danger"
+                        >
+                          <i className="bi bi-box-arrow-right me-2"></i>
+                          Выход
+                        </button>
+                      </li>
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </nav>
+      )}
+
+      {/* Отступ для фиксированного навбара */}
+      {!isPublicUserPage && <div style={{ height: '76px' }} />}
+                      aria-expanded="false"
+                    >
+                      <Image
+                        src={
+                          user.avatar && user.avatar.startsWith('http')
+                            ? user.avatar
+                            : user.avatar 
+                              ? `${process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'}${user.avatar}`
+                              : '/assets/img/avatar-dhg.png'
+                        }
+                        alt="Avatar"
+                        width={32}
+                        height={32}
+                        className="rounded-circle me-2"
+                      />
+                      <span className="text-dark fw-medium d-none d-md-inline">
+                        {user.full_name?.trim() || user.username}
+                      </span>
+                    </button>
+                    <ul className="dropdown-menu dropdown-menu-end">
+                      <li>
+                        <Link href="/profile" className="dropdown-item">
+                          <i className="fas fa-user me-2"></i>
+                          {t('profile.edit')}
+                        </Link>
+                      </li>
+                      <li>
+                        <Link href="/dashboard" className="dropdown-item">
+                          <i className="fas fa-tachometer-alt me-2"></i>
+                          {t('dashboard.title')}
+                        </Link>
+                      </li>
+                      <li><hr className="dropdown-divider" /></li>
+                      <li>
+                        <button 
+                          onClick={handleLogout}
+                          className="dropdown-item text-danger"
+                        >
+                          <i className="fas fa-sign-out-alt me-2"></i>
+                          {t('common.logout')}
+                        </button>
+                      </li>
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </nav>
+      )}
+
+      {/* отступ, чтобы контент не прятался под фиксированным хедером */}
+      {!isPublicUserPage && <div className="navbar-spacing" />}
+
+      {children}
+
+      {/* Подвал не выводим на публичных страницах */}
+      {!isPublicUserPage && (
+        <footer className="bg-light footer border-top mt-5">
+          <div className="container py-4">
+            <div className="row">
+              <div className="col-lg-6 text-center text-lg-start mb-2 mb-lg-0">
+                <ul className="list-inline mb-1">
+                  <li className="list-inline-item"><Link href="#">About</Link></li>
+                  <li className="list-inline-item">⋅</li>
+                  <li className="list-inline-item"><Link href="#">Contact</Link></li>
+                  <li className="list-inline-item">⋅</li>
+                  <li className="list-inline-item"><Link href="#">Terms of Use</Link></li>
+                  <li className="list-inline-item">⋅</li>
+                  <li className="list-inline-item"><Link href="#">Privacy Policy</Link></li>
+                </ul>
+                <p className="text-muted small mb-0">© CatLink 2025</p>
+              </div>
+              <div className="col-lg-6 text-center text-lg-end">
+                <ul className="list-inline mb-0">
+                  <li className="list-inline-item"><Link href="#"><i className="fa fa-facebook fa-lg fa-fw"></i></Link></li>
+                  <li className="list-inline-item"><Link href="#"><i className="fa fa-twitter fa-lg fa-fw"></i></Link></li>
+                  <li className="list-inline-item"><Link href="#"><i className="fa fa-instagram fa-lg fa-fw"></i></Link></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      )}
+
+      {/* Bootstrap JS */}
+      {/* Bootstrap JS: load after React hydrates to avoid DOM mutations during hydration */}
+      <Script
+        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        strategy="afterInteractive"
+      />
+      <Script src="/assets/js/bs-init.js" strategy="afterInteractive" />
+    </>
+  )
+}
diff --git a/frontend/linktree-frontend/src/app/components/Navbar.tsx b/frontend/linktree-frontend/src/app/components/Navbar.tsx
new file mode 100644
index 0000000..5d95521
--- /dev/null
+++ b/frontend/linktree-frontend/src/app/components/Navbar.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { useLocale } from '../contexts/LocaleContext'
+import LanguageSelector from './LanguageSelector'
+import ThemeToggle from './ThemeToggle'
+
+interface NavbarProps {
+  className?: string
+}
+
+export function Navbar({ className = '' }: NavbarProps) {
+  const { t } = useLocale()
+
+  return (
+    <nav className={`navbar navbar-expand-lg navbar-light bg-light border-bottom ${className}`}>
+      <div className="container-fluid">
+        <a className="navbar-brand fw-bold" href="/">
+          🐱 CatLink
+        </a>
+        
+        <div className="navbar-nav ms-auto d-flex flex-row align-items-center gap-3">
+          <LanguageSelector />
+          <ThemeToggle />
+        </div>
+      </div>
+    </nav>
+  )
+}
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/components/Providers.tsx b/frontend/linktree-frontend/src/app/components/Providers.tsx
index f177ac6..23e59ee 100644
--- a/frontend/linktree-frontend/src/app/components/Providers.tsx
+++ b/frontend/linktree-frontend/src/app/components/Providers.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import React from 'react';
 import { ThemeProvider } from '../contexts/ThemeContext';
 import { LocaleProvider } from '../contexts/LocaleContext';
diff --git a/frontend/linktree-frontend/src/app/components/ThemeToggle.css b/frontend/linktree-frontend/src/app/components/ThemeToggle.css
new file mode 100644
index 0000000..2440099
--- /dev/null
+++ b/frontend/linktree-frontend/src/app/components/ThemeToggle.css
@@ -0,0 +1,123 @@
+.theme-toggle {
+  position: relative;
+  width: 60px;
+  height: 30px;
+  background-color: var(--bs-light);
+  border: 2px solid var(--bs-border-color);
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.theme-toggle.dark {
+  background-color: var(--bs-dark);
+  border-color: var(--bs-secondary);
+}
+
+.theme-toggle-slider {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 22px;
+  height: 22px;
+  background: linear-gradient(45deg, #ffd700, #ffed4e);
+  border-radius: 50%;
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.theme-toggle.dark .theme-toggle-slider {
+  transform: translateX(30px);
+  background: linear-gradient(45deg, #4a5568, #718096);
+}
+
+.theme-toggle-icon {
+  font-size: 12px;
+  transition: all 0.4s ease;
+  transform-origin: center;
+}
+
+.theme-toggle .theme-toggle-icon {
+  animation: iconSpin 0.4s ease-in-out;
+}
+
+.theme-toggle.dark .theme-toggle-icon {
+  animation: iconSpin 0.4s ease-in-out;
+}
+
+@keyframes iconSpin {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(0.8);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+/* Дополнительные эффекты при наведении */
+.theme-toggle:hover {
+  transform: scale(1.05);
+}
+
+.theme-toggle:active {
+  transform: scale(0.95);
+}
+
+/* Светлая тема - эффект солнечных лучей */
+.theme-toggle:not(.dark)::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 13px;
+  width: 2px;
+  height: 2px;
+  background: #ffd700;
+  border-radius: 50%;
+  box-shadow: 
+    0 -8px 0 #ffd700,
+    6px -6px 0 #ffd700,
+    8px 0 0 #ffd700,
+    6px 6px 0 #ffd700,
+    0 8px 0 #ffd700,
+    -6px 6px 0 #ffd700,
+    -8px 0 0 #ffd700,
+    -6px -6px 0 #ffd700;
+  animation: sunRays 2s linear infinite;
+  opacity: 0.6;
+}
+
+@keyframes sunRays {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Темная тема - звездочки */
+.theme-toggle.dark::after {
+  content: '✨';
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+  font-size: 8px;
+  animation: twinkle 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes twinkle {
+  0% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/components/ThemeToggle.tsx b/frontend/linktree-frontend/src/app/components/ThemeToggle.tsx
index 8d314d9..0350a71 100644
--- a/frontend/linktree-frontend/src/app/components/ThemeToggle.tsx
+++ b/frontend/linktree-frontend/src/app/components/ThemeToggle.tsx
@@ -1,35 +1,35 @@
-'use client'
+"use client"
 
-import React from 'react'
-import { useTheme } from '../contexts/ThemeContext'
-import { useLocale } from '../contexts/LocaleContext'
+import React from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { useLocale } from '../contexts/LocaleContext';
+import './ThemeToggle.css';
 
-interface ThemeToggleProps {
-  className?: string
-  showLabel?: boolean
-}
-
-export const ThemeToggle: React.FC<ThemeToggleProps> = ({ 
-  className = '', 
-  showLabel = false 
-}) => {
-  const { theme, toggleTheme } = useTheme()
-  const { t } = useLocale()
+const ThemeToggle: React.FC = () => {
+  const { theme, toggleTheme } = useTheme();
+  const { t } = useLocale();
 
   return (
-    <button
+    <div
+      className={`theme-toggle ${theme === 'dark' ? 'dark' : ''}`}
       onClick={toggleTheme}
-      className={`btn btn-outline-secondary btn-sm d-flex align-items-center ${className}`}
-      title={theme === 'light' ? t('theme.dark') : t('theme.light')}
+      title={t('theme.toggle')}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          toggleTheme();
+        }
+      }}
     >
-      <i className={`fas ${theme === 'light' ? 'fa-moon' : 'fa-sun'} ${showLabel ? 'me-2' : ''}`}></i>
-      {showLabel && (
-        <span className="d-none d-lg-inline">
-          {theme === 'light' ? t('theme.dark') : t('theme.light')}
+      <div className="theme-toggle-slider">
+        <span className="theme-toggle-icon">
+          {theme === 'dark' ? '🌙' : '☀️'}
         </span>
-      )}
-    </button>
-  )
-}
+      </div>
+    </div>
+  );
+};
 
-export default ThemeToggle
\ No newline at end of file
+export default ThemeToggle;
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/components/footer.tsx b/frontend/linktree-frontend/src/app/components/footer.tsx
index 9818636..53170b0 100644
--- a/frontend/linktree-frontend/src/app/components/footer.tsx
+++ b/frontend/linktree-frontend/src/app/components/footer.tsx
@@ -1,21 +1,23 @@
 import Link from 'next/link'
+import { useLocale } from '../contexts/LocaleContext'
 
 export function Footer() {
+  const { t } = useLocale()
   return (
     <footer className="bg-light footer py-5 border-top">
       <div className="container">
         <div className="row">
           <div className="col-lg-6 text-center text-lg-start mb-3 mb-lg-0">
             <ul className="list-inline mb-2">
-              <li className="list-inline-item"><Link href="#">About</Link></li>
+              <li className="list-inline-item"><Link href="#">{t('footer.about')}</Link></li>
               <li className="list-inline-item"><span>⋅</span></li>
-              <li className="list-inline-item"><Link href="#">Contact</Link></li>
+              <li className="list-inline-item"><Link href="#">{t('footer.contact')}</Link></li>
               <li className="list-inline-item"><span>⋅</span></li>
-              <li className="list-inline-item"><Link href="#">Terms of Use</Link></li>
+              <li className="list-inline-item"><Link href="#">{t('footer.terms')}</Link></li>
               <li className="list-inline-item"><span>⋅</span></li>
-              <li className="list-inline-item"><Link href="#">Privacy Policy</Link></li>
+              <li className="list-inline-item"><Link href="#">{t('footer.privacy')}</Link></li>
             </ul>
-            <p className="text-muted small mb-0">© CatLink 2025. Все права защищены.</p>
+            <p className="text-muted small mb-0">{t('footer.copyright')}</p>
           </div>
           <div className="col-lg-6 text-center text-lg-end">
             <ul className="list-inline mb-0">
diff --git a/frontend/linktree-frontend/src/app/locales/en.json b/frontend/linktree-frontend/src/app/locales/en.json
index 9eefa72..bf1f64a 100644
--- a/frontend/linktree-frontend/src/app/locales/en.json
+++ b/frontend/linktree-frontend/src/app/locales/en.json
@@ -27,6 +27,88 @@
   "common.yes": "Yes",
   "common.no": "No",
   "common.menu": "Menu",
+  "common.optional": "optional",
+  "common.closeModal": "Close modal",
+
+  "share.title": "Share Page",
+  "share.description": "Your public page with links is available at:",
+  "share.loading": "Loading...",
+  "share.urlAriaLabel": "Public page URL",
+  "share.urlTitle": "Public page URL",
+  "share.copy": "Copy",
+  "share.note": "All your groups and links will be visible on this page. It updates automatically when data changes.",
+  "share.openPage": "Open Page",
+
+  "home.title": "Your links. Your style. Your CatLink.",
+  "home.subtitle": "Create a beautiful personal page with all your important links in one place. Share professionally and stylishly!",
+  "home.emailPlaceholder": "Enter your email",
+  "home.startFree": "Start Free",
+  "home.haveAccount": "Already have an account?",
+  "home.signIn": "Sign In",
+
+  "home.features.title": "Why Choose CatLink?",
+  "home.features.subtitle": "Simple and powerful tool for creating your digital presence",
+
+  "home.features.links.title": "One URL — All Links",
+  "home.features.links.description": "Gather all important links in one place. Social media, portfolio, contacts — everything under one address.",
+
+  "home.features.customization.title": "Customization",
+  "home.features.customization.description": "Customize colors, fonts, layouts. Create a unique style that reflects your personality or brand.",
+
+  "home.features.analytics.title": "Analytics",
+  "home.features.analytics.description": "Track clicks, link popularity and visitor activity. Understand your audience better.",
+
+  "home.useCases.title": "For Everyone",
+  "home.useCases.bloggers": "Bloggers",
+  "home.useCases.bloggersDescription": "Gather all social media",
+  "home.useCases.business": "Business",
+  "home.useCases.businessDescription": "Show services and contacts",
+  "home.useCases.musicians": "Musicians",
+  "home.useCases.musiciansDescription": "Share your creativity",
+  "home.useCases.photographers": "Photographers",
+  "home.useCases.photographersDescription": "Show your portfolio",
+  "home.useCases.exampleTitle": "Your personal page",
+  "home.useCases.exampleSubtitle": "Example of your page",
+  "home.useCases.personalSite": "Personal website",
+
+  "home.cta.title": "Ready to Start?",
+  "home.cta.subtitle": "Join thousands of users who have already created their perfect link page",
+  "home.cta.createFree": "Create Free Account",
+  "home.cta.haveAccount": "I have an account",
+  "home.cta.features": "Free forever • No limits • Quick setup",
+
+  "auth.welcome": "Welcome!",
+  "auth.welcomeSubtitle": "Sign in to your CatLink account",
+  "auth.createAccount": "Create Account",
+  "auth.createAccountSubtitle": "Join CatLink today",
+  "auth.usernameLabel": "Username",
+  "auth.usernamePlaceholder": "Enter your username",
+  "auth.usernameRequired": "Please enter username",
+  "auth.usernameHelp": "Only Latin letters, numbers and _",
+  "auth.passwordLabel": "Password",
+  "auth.passwordPlaceholder": "Enter your password",
+  "auth.passwordRequired": "Please enter password",
+  "auth.passwordConfirmLabel": "Confirm Password",
+  "auth.passwordConfirmRequired": "Please confirm password",
+  "auth.passwordMismatch": "Passwords do not match",
+  "auth.emailLabel": "Email",
+  "auth.emailRequired": "Please enter email",
+  "auth.firstNameLabel": "First Name",
+  "auth.lastNameLabel": "Last Name",
+  "auth.loginButton": "Sign In",
+  "auth.registerButton": "Create Account",
+  "auth.loggingIn": "Signing in...",
+  "auth.registering": "Creating account...",
+  "auth.noAccount": "Don't have an account?",
+  "auth.haveAccount": "Already have an account?",
+  "auth.loginError": "Login error",
+  "auth.networkError": "Network error",
+  "auth.registrationError": "Registration error",
+  "auth.connectionError": "Server connection error",
+  "auth.termsAgreement": "By creating an account, you agree to the",
+  "auth.termsLink": "Terms of Service",
+  "auth.privacyLink": "Privacy Policy",
+  "auth.and": "and",
 
   "auth.login.title": "Login",
   "auth.login.email": "Email",
@@ -50,16 +132,26 @@
   "dashboard.welcome": "Welcome, {{name}}!",
   "dashboard.groups": "Groups",
   "dashboard.links": "Links",
-  "dashboard.settings": "Settings",
+    "dashboard.settings": "Settings",
+  "dashboard.share": "Share",
   "dashboard.customize": "Customize",
+  "dashboard.panelOpen": "Open",
+  "dashboard.panelClosed": "Closed",
+  "dashboard.error": "Error: ",
+  "dashboard.linkGroups": "Link Groups",
+  "dashboard.andMore": "and {{count}} more...",
+  "dashboard.linksCount": "{{count}} links",
+  "dashboard.linksInGroup": "{{count}} links in this group",
   "dashboard.addGroup": "Add Group",
   "dashboard.addLink": "Add Link",
   "dashboard.noGroups": "No groups yet",
   "dashboard.noLinks": "No links yet",
   "dashboard.createFirst": "Create your first",
+  "dashboard.shareUrl.copied": "Link copied to clipboard",
 
   "group.create": "Create Group",
   "group.edit": "Edit Group",
+  "group.delete": "delete group",
   "group.name": "Group name",
   "group.description": "Description",
   "group.icon": "Icon",
@@ -70,9 +162,20 @@
   "group.expanded": "Expanded by default",
   "group.removeIcon": "Remove icon",
   "group.removeBackground": "Remove background",
+  "group.descriptionPlaceholder": "Brief description of link group",
+  "group.currentIcon": "Current icon",
+  "group.confirmRemoveIcon": "Remove current group icon?",
+  "group.iconSizeRecommendation": "Recommended size: 32x32 pixels",
+  "group.currentBackground": "Current background",
+  "group.confirmRemoveBackground": "Remove current group background?",
+  "group.imageSizeRecommendation": "Recommended image size:",
+  "group.tip": "Tip:",
+  "group.borderTip": "For groups with borders, use images with edge padding (10-20px)",
+  "group.backgroundDescription": "Image will be used as background for group content",
 
   "link.create": "Create Link",
   "link.edit": "Edit Link",
+  "link.delete": "delete link",
   "link.title": "Link title",
   "link.url": "URL",
   "link.description": "Description",
@@ -80,16 +183,23 @@
   "link.removeIcon": "Remove icon",
   "link.public": "Public",
   "link.featured": "Featured",
+  "link.titlePlaceholder": "Link title",
+  "link.descriptionPlaceholder": "Brief description of the link",
+  "link.urlPlaceholder": "https://example.com",
+  "link.currentIcon": "Current icon",
+  "link.confirmRemoveIcon": "Remove current link icon?",
+  "link.iconSizeRecommendation": "Recommended size: 24x24 pixels",
 
   "profile.edit": "Edit Profile",
   "profile.username": "Username",
   "profile.email": "Email",
-  "profile.firstName": "First name",
-  "profile.lastName": "Last name",
-  "profile.fullName": "Full name",
-  "profile.bio": "Bio",
+  "profile.firstName": "First Name",
+  "profile.lastName": "Last Name",
+  "profile.fullName": "Full Name",
+  "profile.bio": "Biography",
   "profile.avatar": "Avatar",
-  "profile.cover": "Cover image",
+  "profile.cover": "Cover",
+  "profile.currentAvatar": "Current avatar",
   "profile.removeAvatar": "Remove avatar",
   "profile.removeCover": "Remove cover",
 
@@ -103,17 +213,29 @@
   
   "customization.layout.style": "Display style for groups and links",
   "customization.layout.list": "List",
-  "customization.layout.grid": "Grid",
+  "customization.layout.grid": "Grid", 
   "customization.layout.cards": "Cards",
   "customization.layout.compact": "Compact",
   "customization.layout.masonry": "Masonry",
   "customization.layout.timeline": "Timeline",
   "customization.layout.magazine": "Magazine",
-
-  "customization.colors.theme": "Theme color",
+  "customization.layout.sidebar": "Sidebar",
+  "customization.layout.testList": "Test List",
+  "customization.layout.listDescription": "Classic vertical list",
+  "customization.layout.gridDescription": "Uniform grid of cards",
+  "customization.layout.cardsDescription": "Large informative cards",
+  "customization.layout.compactDescription": "Compact display without spacing",
+  "customization.layout.sidebarDescription": "Navigation in sidebar",
+  "customization.layout.masonryDescription": "Dynamic grid with varying heights",
+  "customization.layout.timelineDescription": "Chronological display",
+  "customization.layout.magazineDescription": "Magazine style with large images",
+  "customization.layout.testListDescription": "Full non-collapsible list of all groups and links",  "customization.colors.theme": "Theme color",
   "customization.colors.background": "Background color",
   "customization.colors.backgroundImage": "Background image",
   "customization.colors.removeBackground": "Remove background",
+  "customization.colors.backgroundImageHelp": "Select background image (JPG, PNG, GIF). If not selected - current image will remain unchanged.",
+  "customization.colors.currentImage": "Current image:",
+  "customization.colors.newImage": "New image (will be applied after saving):",
   "customization.colors.header": "Header text color",
   "customization.colors.group": "Group text color",
   "customization.colors.link": "Link text color",
@@ -121,9 +243,13 @@
   "customization.groups.showIcons": "Show group icons",
   "customization.groups.showLinks": "Show link icons",
   "customization.groups.defaultExpanded": "Groups expanded by default",
-  "customization.groups.showTitle": "Show groups title",
+  "customization.groups.showTitle": "Show group titles",
+  "customization.groups.displaySettings": "Group display settings",
 
   "customization.advanced.fonts": "Font settings",
+  "customization.advanced.fontSettings": "Font settings",
+  "customization.advanced.additionalSettings": "Additional settings",
+  "customization.advanced.resetConfirm": "Are you sure you want to reset all interface settings to default values? This action cannot be undone.",
   "customization.advanced.mainFont": "Main font",
   "customization.advanced.headingFont": "Heading font",
   "customization.advanced.bodyFont": "Body font",
@@ -191,5 +317,11 @@
   "language.ru": "Русский",
   "language.ko": "한국어",
   "language.zh": "中文",
-  "language.ja": "日本語"
+  "language.ja": "日本語",
+
+  "footer.about": "About",
+  "footer.contact": "Contact",
+  "footer.terms": "Terms of Service",
+  "footer.privacy": "Privacy Policy",
+  "footer.copyright": "© CatLink 2025. All rights reserved."
 }
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/locales/ja.json b/frontend/linktree-frontend/src/app/locales/ja.json
index 8d84e60..bc590bc 100644
--- a/frontend/linktree-frontend/src/app/locales/ja.json
+++ b/frontend/linktree-frontend/src/app/locales/ja.json
@@ -28,6 +28,77 @@
   "common.no": "いいえ",
   "common.menu": "メニュー",
 
+  "home.title": "あなたのリンク。あなたのスタイル。あなたのCatLink。",
+  "home.subtitle": "大切なリンクをすべて一箇所に集めた美しい個人ページを作成しましょう。プロフェッショナルでスタイリッシュにシェア！",
+  "home.emailPlaceholder": "メールアドレスを入力",
+  "home.startFree": "無料で始める",
+  "home.haveAccount": "既にアカウントをお持ちですか？",
+  "home.signIn": "サインイン",
+
+  "home.features.title": "なぜCatLinkを選ぶのか？",
+  "home.features.subtitle": "デジタルプレゼンスを作るためのシンプルで強力なツール",
+
+  "home.features.links.title": "一つのURL — すべてのリンク",
+  "home.features.links.description": "重要なリンクをすべて一箇所に集めます。ソーシャルメディア、ポートフォリオ、連絡先 — すべてが一つのアドレスに。",
+
+  "home.features.customization.title": "カスタマイゼーション",
+  "home.features.customization.description": "色、フォント、レイアウトをカスタマイズ。あなたの個性やブランドを反映するユニークなスタイルを作成しましょう。",
+
+  "home.features.analytics.title": "アナリティクス",
+  "home.features.analytics.description": "クリック数、リンクの人気度、訪問者の活動を追跡。あなたのオーディエンスをより良く理解しましょう。",
+
+  "home.useCases.title": "すべての人のために",
+  "home.useCases.bloggers": "ブロガー",
+  "home.useCases.bloggersDescription": "すべてのソーシャルメディアを集約",
+  "home.useCases.business": "ビジネス",
+  "home.useCases.businessDescription": "サービスと連絡先を表示",
+  "home.useCases.musicians": "ミュージシャン",
+  "home.useCases.musiciansDescription": "あなたの作品をシェア",
+  "home.useCases.photographers": "フォトグラファー",
+  "home.useCases.photographersDescription": "ポートフォリオを表示",
+  "home.useCases.exampleTitle": "個人ページ",
+  "home.useCases.exampleSubtitle": "ページの例",
+  "home.useCases.personalSite": "個人ウェブサイト",
+
+  "home.cta.title": "始める準備はできていますか？",
+  "home.cta.subtitle": "完璧なリンクページを作成した数千人のユーザーに参加しましょう",
+  "home.cta.createFree": "無料アカウントを作成",
+  "home.cta.haveAccount": "アカウントを持っています",
+  "home.cta.features": "永続無料 • 制限なし • 素早いセットアップ",
+
+  "auth.welcome": "ようこそ！",
+  "auth.welcomeSubtitle": "CatLinkアカウントにサインイン",
+  "auth.createAccount": "アカウント作成",
+  "auth.createAccountSubtitle": "今日CatLinkに参加しましょう",
+  "auth.usernameLabel": "ユーザー名",
+  "auth.usernamePlaceholder": "ユーザー名を入力",
+  "auth.usernameRequired": "ユーザー名を入力してください",
+  "auth.usernameHelp": "ラテン文字、数字、_のみ",
+  "auth.passwordLabel": "パスワード",
+  "auth.passwordPlaceholder": "パスワードを入力",
+  "auth.passwordRequired": "パスワードを入力してください",
+  "auth.passwordConfirmLabel": "パスワード確認",
+  "auth.passwordConfirmRequired": "パスワードを確認してください",
+  "auth.passwordMismatch": "パスワードが一致しません",
+  "auth.emailLabel": "メール",
+  "auth.emailRequired": "メールを入力してください",
+  "auth.firstNameLabel": "名前",
+  "auth.lastNameLabel": "苗字",
+  "auth.loginButton": "サインイン",
+  "auth.registerButton": "アカウント作成",
+  "auth.loggingIn": "サインイン中...",
+  "auth.registering": "アカウント作成中...",
+  "auth.noAccount": "アカウントをお持ちでない方",
+  "auth.haveAccount": "既にアカウントをお持ちですか？",
+  "auth.loginError": "ログインエラー",
+  "auth.networkError": "ネットワークエラー",
+  "auth.registrationError": "登録エラー",
+  "auth.connectionError": "サーバー接続エラー",
+  "auth.termsAgreement": "アカウントを作成することで、以下に同意したことになります",
+  "auth.termsLink": "利用規約",
+  "auth.privacyLink": "プライバシーポリシー",
+  "auth.and": "および",
+
   "auth.login.title": "ログイン",
   "auth.login.email": "メール",
   "auth.login.password": "パスワード",
@@ -51,15 +122,17 @@
   "dashboard.groups": "グループ",
   "dashboard.links": "リンク",
   "dashboard.settings": "設定",
-  "dashboard.customize": "カスタマイズ",
+  "dashboard.customize": "シェア",
   "dashboard.addGroup": "グループ追加",
   "dashboard.addLink": "リンク追加",
-  "dashboard.noGroups": "グループがありません",
-  "dashboard.noLinks": "リンクがありません",
+  "dashboard.noGroups": "まだグループがありません",
+  "dashboard.noLinks": "まだリンクがありません",
   "dashboard.createFirst": "最初の作成",
+  "dashboard.shareUrl.copied": "リンクがクリップボードにコピーされました",
 
   "group.create": "グループ作成",
   "group.edit": "グループ編集",
+  "group.delete": "グループ削除",
   "group.name": "グループ名",
   "group.description": "説明",
   "group.icon": "アイコン",
@@ -73,6 +146,7 @@
 
   "link.create": "リンク作成",
   "link.edit": "リンク編集",
+  "link.delete": "リンク削除",
   "link.title": "リンクタイトル",
   "link.url": "URL",
   "link.description": "説明",
@@ -191,5 +265,11 @@
   "language.ru": "Русский",
   "language.ko": "한국어",
   "language.zh": "中文",
-  "language.ja": "日本語"
+  "language.ja": "日本語",
+
+  "footer.about": "会社概要",
+  "footer.contact": "お問い合わせ",
+  "footer.terms": "利用規約",
+  "footer.privacy": "プライバシーポリシー",
+  "footer.copyright": "© CatLink 2025. 全ての権利を保有。"
 }
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/locales/ko.json b/frontend/linktree-frontend/src/app/locales/ko.json
index b0f55d0..18efe6f 100644
--- a/frontend/linktree-frontend/src/app/locales/ko.json
+++ b/frontend/linktree-frontend/src/app/locales/ko.json
@@ -28,6 +28,77 @@
   "common.no": "아니오",
   "common.menu": "메뉴",
 
+  "home.title": "당신의 링크. 당신의 스타일. 당신의 CatLink.",
+  "home.subtitle": "모든 중요한 링크를 한 곳에서 관리할 수 있는 아름다운 개인 페이지를 만드세요. 전문적이고 스타일리시하게 공유하세요!",
+  "home.emailPlaceholder": "이메일을 입력하세요",
+  "home.startFree": "무료 시작",
+  "home.haveAccount": "이미 계정이 있으신가요?",
+  "home.signIn": "로그인",
+
+  "home.features.title": "왜 CatLink를 선택해야 할까요?",
+  "home.features.subtitle": "디지털 존재감을 만들기 위한 간단하고 강력한 도구",
+
+  "home.features.links.title": "하나의 URL — 모든 링크",
+  "home.features.links.description": "모든 중요한 링크를 한 곳에 모아보세요. 소셜 미디어, 포트폴리오, 연락처 — 모든 것이 하나의 주소에.",
+
+  "home.features.customization.title": "커스터마이징",
+  "home.features.customization.description": "색상, 글꼴, 레이아웃을 맞춤 설정하세요. 당신의 개성이나 브랜드를 반영하는 독특한 스타일을 만드세요.",
+
+  "home.features.analytics.title": "분석",
+  "home.features.analytics.description": "클릭 수, 링크 인기도, 방문자 활동을 추적하세요. 당신의 청중을 더 잘 이해하세요.",
+
+  "home.useCases.title": "모두를 위한",
+  "home.useCases.bloggers": "블로거",
+  "home.useCases.bloggersDescription": "모든 소셜 미디어 모으기",
+  "home.useCases.business": "비즈니스",
+  "home.useCases.businessDescription": "서비스와 연락처 보여주기",
+  "home.useCases.musicians": "음악가",
+  "home.useCases.musiciansDescription": "창작물 공유하기",
+  "home.useCases.photographers": "사진가",
+  "home.useCases.photographersDescription": "포트폴리오 보여주기",
+  "home.useCases.exampleTitle": "개인 페이지",
+  "home.useCases.exampleSubtitle": "페이지 예시",
+  "home.useCases.personalSite": "개인 웹사이트",
+
+  "home.cta.title": "시작할 준비가 되셨나요?",
+  "home.cta.subtitle": "완벽한 링크 페이지를 만든 수천 명의 사용자와 함께하세요",
+  "home.cta.createFree": "무료 계정 만들기",
+  "home.cta.haveAccount": "계정이 있습니다",
+  "home.cta.features": "영원히 무료 • 제한 없음 • 빠른 설정",
+
+  "auth.welcome": "환영합니다!",
+  "auth.welcomeSubtitle": "CatLink 계정에 로그인하세요",
+  "auth.createAccount": "계정 만들기",
+  "auth.createAccountSubtitle": "오늘 CatLink와 함께하세요",
+  "auth.usernameLabel": "사용자명",
+  "auth.usernamePlaceholder": "사용자명을 입력하세요",
+  "auth.usernameRequired": "사용자명을 입력해주세요",
+  "auth.usernameHelp": "라틴 문자, 숫자 및 _ 만",
+  "auth.passwordLabel": "비밀번호",
+  "auth.passwordPlaceholder": "비밀번호를 입력하세요",
+  "auth.passwordRequired": "비밀번호를 입력해주세요",
+  "auth.passwordConfirmLabel": "비밀번호 확인",
+  "auth.passwordConfirmRequired": "비밀번호를 확인해주세요",
+  "auth.passwordMismatch": "비밀번호가 일치하지 않습니다",
+  "auth.emailLabel": "이메일",
+  "auth.emailRequired": "이메일을 입력해주세요",
+  "auth.firstNameLabel": "이름",
+  "auth.lastNameLabel": "성",
+  "auth.loginButton": "로그인",
+  "auth.registerButton": "계정 만들기",
+  "auth.loggingIn": "로그인 중...",
+  "auth.registering": "계정 생성 중...",
+  "auth.noAccount": "계정이 없으신가요?",
+  "auth.haveAccount": "이미 계정이 있으신가요?",
+  "auth.loginError": "로그인 오류",
+  "auth.networkError": "네트워크 오류",
+  "auth.registrationError": "등록 오류",
+  "auth.connectionError": "서버 연결 오류",
+  "auth.termsAgreement": "계정을 만들면 다음에 동의하는 것입니다",
+  "auth.termsLink": "서비스 약관",
+  "auth.privacyLink": "개인정보 보호정책",
+  "auth.and": "및",
+
   "auth.login.title": "로그인",
   "auth.login.email": "이메일",
   "auth.login.password": "비밀번호",
@@ -51,15 +122,17 @@
   "dashboard.groups": "그룹",
   "dashboard.links": "링크",
   "dashboard.settings": "설정",
-  "dashboard.customize": "커스터마이즈",
+  "dashboard.customize": "공유",
   "dashboard.addGroup": "그룹 추가",
   "dashboard.addLink": "링크 추가",
-  "dashboard.noGroups": "그룹이 없습니다",
-  "dashboard.noLinks": "링크가 없습니다",
-  "dashboard.createFirst": "첫 번째 생성하기",
+  "dashboard.noGroups": "그룹이 아직 없습니다",
+  "dashboard.noLinks": "링크가 아직 없습니다",
+  "dashboard.createFirst": "첫 번째 만들기",
+  "dashboard.shareUrl.copied": "링크가 클립보드에 복사되었습니다",
 
   "group.create": "그룹 생성",
   "group.edit": "그룹 편집",
+  "group.delete": "그룹 삭제",
   "group.name": "그룹 이름",
   "group.description": "설명",
   "group.icon": "아이콘",
@@ -73,6 +146,7 @@
 
   "link.create": "링크 생성",
   "link.edit": "링크 편집",
+  "link.delete": "링크 삭제",
   "link.title": "링크 제목",
   "link.url": "URL",
   "link.description": "설명",
@@ -191,5 +265,11 @@
   "language.ru": "Русский",
   "language.ko": "한국어",
   "language.zh": "中文",
-  "language.ja": "日本語"
+  "language.ja": "日本語",
+
+  "footer.about": "회사 소개",
+  "footer.contact": "연락처",
+  "footer.terms": "이용약관",
+  "footer.privacy": "개인정보 보호정책",
+  "footer.copyright": "© CatLink 2025. 모든 권리 보유."
 }
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/locales/ru.json b/frontend/linktree-frontend/src/app/locales/ru.json
index 86660c1..57b28ea 100644
--- a/frontend/linktree-frontend/src/app/locales/ru.json
+++ b/frontend/linktree-frontend/src/app/locales/ru.json
@@ -27,6 +27,88 @@
   "common.yes": "Да",
   "common.no": "Нет",
   "common.menu": "Меню",
+  "common.optional": "опционально",
+  "common.closeModal": "Закрыть модальное окно",
+
+  "share.title": "Поделиться страницей",
+  "share.description": "Ваша публичная страница со ссылками доступна по адресу:",
+  "share.loading": "Загрузка...",
+  "share.urlAriaLabel": "URL публичной страницы",
+  "share.urlTitle": "URL публичной страницы",
+  "share.copy": "Копировать",
+  "share.note": "На этой странице будут видны все ваши группы и ссылки. Она обновляется автоматически при изменении данных.",
+  "share.openPage": "Открыть страницу",
+
+  "home.title": "Ваши ссылки. Ваш стиль. Ваш CatLink.",
+  "home.subtitle": "Создайте красивую персональную страницу со всеми важными ссылками в одном месте. Делитесь профессионально и стильно!",
+  "home.emailPlaceholder": "Введите ваш email",
+  "home.startFree": "Начать бесплатно",
+  "home.haveAccount": "Уже есть аккаунт?",
+  "home.signIn": "Войти",
+
+  "home.features.title": "Почему выбирают CatLink?",
+  "home.features.subtitle": "Простой и мощный инструмент для создания вашего цифрового присутствия",
+
+  "home.features.links.title": "Один URL — все ссылки",
+  "home.features.links.description": "Соберите все важные ссылки в одном месте. Социальные сети, портфолио, контакты — всё под одним адресом.",
+
+  "home.features.customization.title": "Персонализация",
+  "home.features.customization.description": "Настройте цвета, шрифты, макеты. Создайте уникальный стиль, который отражает вашу личность или бренд.",
+
+  "home.features.analytics.title": "Аналитика",
+  "home.features.analytics.description": "Отслеживайте клики, популярность ссылок и активность посетителей. Понимайте свою аудиторию лучше.",
+
+  "home.useCases.title": "Для всех и каждого",
+  "home.useCases.bloggers": "Блогеры",
+  "home.useCases.bloggersDescription": "Соберите все социальные сети",
+  "home.useCases.business": "Бизнес",
+  "home.useCases.businessDescription": "Покажите услуги и контакты",
+  "home.useCases.musicians": "Музыканты",
+  "home.useCases.musiciansDescription": "Поделитесь творчеством",
+  "home.useCases.photographers": "Фотографы",
+  "home.useCases.photographersDescription": "Покажите портфолио",
+  "home.useCases.exampleTitle": "Ваша персональная страница",
+  "home.useCases.exampleSubtitle": "Пример вашей страницы",
+  "home.useCases.personalSite": "Личный сайт",
+
+  "home.cta.title": "Готовы начать?",
+  "home.cta.subtitle": "Присоединяйтесь к тысячам пользователей, которые уже создали свою идеальную страницу ссылок",
+  "home.cta.createFree": "Создать аккаунт бесплатно",
+  "home.cta.haveAccount": "У меня есть аккаунт",
+  "home.cta.features": "Бесплатно навсегда • Без ограничений • Быстрая настройка",
+
+  "auth.welcome": "Добро пожаловать!",
+  "auth.welcomeSubtitle": "Войдите в свой аккаунт CatLink",
+  "auth.createAccount": "Создать аккаунт",
+  "auth.createAccountSubtitle": "Присоединяйтесь к CatLink сегодня",
+  "auth.usernameLabel": "Имя пользователя",
+  "auth.usernamePlaceholder": "Введите имя пользователя",
+  "auth.usernameRequired": "Введите имя пользователя",
+  "auth.usernameHelp": "Только латинские буквы, цифры и _",
+  "auth.passwordLabel": "Пароль",
+  "auth.passwordPlaceholder": "Введите пароль",
+  "auth.passwordRequired": "Введите пароль",
+  "auth.passwordConfirmLabel": "Подтвердите пароль",
+  "auth.passwordConfirmRequired": "Подтвердите пароль",
+  "auth.passwordMismatch": "Пароли не совпадают",
+  "auth.emailLabel": "Email",
+  "auth.emailRequired": "Введите email",
+  "auth.firstNameLabel": "Имя",
+  "auth.lastNameLabel": "Фамилия",
+  "auth.loginButton": "Войти",
+  "auth.registerButton": "Создать аккаунт",
+  "auth.loggingIn": "Входим...",
+  "auth.registering": "Создание аккаунта...",
+  "auth.noAccount": "Нет аккаунта?",
+  "auth.haveAccount": "Уже есть аккаунт?",
+  "auth.loginError": "Ошибка входа",
+  "auth.networkError": "Сетевая ошибка",
+  "auth.registrationError": "Ошибка регистрации",
+  "auth.connectionError": "Ошибка соединения с сервером",
+  "auth.termsAgreement": "Создавая аккаунт, вы соглашаетесь с",
+  "auth.termsLink": "Условиями использования",
+  "auth.privacyLink": "Политикой конфиденциальности",
+  "auth.and": "и",
 
   "auth.login.title": "Вход",
   "auth.login.email": "Email",
@@ -46,20 +128,30 @@
   "auth.register.haveAccount": "Уже есть аккаунт?",
   "auth.register.signIn": "Войти",
 
-  "dashboard.title": "Панель управления",
+    "dashboard.title": "Панель управления",
   "dashboard.welcome": "Добро пожаловать, {{name}}!",
   "dashboard.groups": "Группы",
-  "dashboard.links": "Ссылки",
+  "dashboard.links": "Ссылки", 
   "dashboard.settings": "Настройки",
-  "dashboard.customize": "Настроить",
+  "dashboard.share": "Поделиться",
+  "dashboard.customize": "Персонализация",
+  "dashboard.panelOpen": "Открыта",
+  "dashboard.panelClosed": "Закрыта",
+  "dashboard.error": "Ошибка: ",
+  "dashboard.linkGroups": "Группы ссылок",
+  "dashboard.andMore": "и еще {{count}}...",
+  "dashboard.linksCount": "{{count}} ссылок",
+  "dashboard.linksInGroup": "{{count}} ссылок в этой группе",
   "dashboard.addGroup": "Добавить группу",
   "dashboard.addLink": "Добавить ссылку",
-  "dashboard.noGroups": "Пока нет групп",
-  "dashboard.noLinks": "Пока нет ссылок",
-  "dashboard.createFirst": "Создайте вашу первую",
+  "dashboard.noGroups": "Групп пока нет",
+  "dashboard.noLinks": "Ссылок пока нет",
+  "dashboard.createFirst": "Создайте первую",
+  "dashboard.shareUrl.copied": "Ссылка скопирована в буфер обмена",
 
   "group.create": "Создать группу",
   "group.edit": "Редактировать группу",
+  "group.delete": "удалить группу",
   "group.name": "Название группы",
   "group.description": "Описание",
   "group.icon": "Иконка",
@@ -70,9 +162,20 @@
   "group.expanded": "Развернута по умолчанию",
   "group.removeIcon": "Убрать иконку",
   "group.removeBackground": "Убрать фон",
+  "group.descriptionPlaceholder": "Краткое описание группы ссылок",
+  "group.currentIcon": "Текущая иконка",
+  "group.confirmRemoveIcon": "Удалить текущую иконку группы?",
+  "group.iconSizeRecommendation": "Рекомендуемый размер: 32x32 пикселя",
+  "group.currentBackground": "Текущий фон",
+  "group.confirmRemoveBackground": "Удалить текущий фон группы?",
+  "group.imageSizeRecommendation": "Рекомендуемый размер изображения:",
+  "group.tip": "Совет:",
+  "group.borderTip": "Для групп с рамкой используйте изображения с отступами по краям (10-20px)",
+  "group.backgroundDescription": "Изображение будет использовано как фон для содержимого группы",
 
   "link.create": "Создать ссылку",
   "link.edit": "Редактировать ссылку",
+  "link.delete": "удалить ссылку",
   "link.title": "Название ссылки",
   "link.url": "URL",
   "link.description": "Описание",
@@ -80,6 +183,12 @@
   "link.removeIcon": "Убрать иконку",
   "link.public": "Публичная",
   "link.featured": "Рекомендуемая",
+  "link.titlePlaceholder": "Название ссылки",
+  "link.descriptionPlaceholder": "Краткое описание ссылки",
+  "link.urlPlaceholder": "https://example.com",
+  "link.currentIcon": "Текущая иконка",
+  "link.confirmRemoveIcon": "Удалить текущую иконку ссылки?",
+  "link.iconSizeRecommendation": "Рекомендуемый размер: 24x24 пикселя",
 
   "profile.edit": "Редактировать профиль",
   "profile.username": "Имя пользователя",
@@ -87,9 +196,10 @@
   "profile.firstName": "Имя",
   "profile.lastName": "Фамилия",
   "profile.fullName": "Полное имя",
-  "profile.bio": "О себе",
+  "profile.bio": "Биография",
   "profile.avatar": "Аватар",
   "profile.cover": "Обложка",
+  "profile.currentAvatar": "Текущий аватар",
   "profile.removeAvatar": "Убрать аватар",
   "profile.removeCover": "Убрать обложку",
 
@@ -103,17 +213,29 @@
   
   "customization.layout.style": "Стиль отображения групп и ссылок",
   "customization.layout.list": "Список",
-  "customization.layout.grid": "Сетка",
+  "customization.layout.grid": "Сетка", 
   "customization.layout.cards": "Карточки",
   "customization.layout.compact": "Компактный",
   "customization.layout.masonry": "Кирпичная кладка",
   "customization.layout.timeline": "Временная шкала",
   "customization.layout.magazine": "Журнал",
-
-  "customization.colors.theme": "Цвет темы",
+  "customization.layout.sidebar": "Боковая панель",
+  "customization.layout.testList": "Тестовый список",
+  "customization.layout.listDescription": "Классический вертикальный список",
+  "customization.layout.gridDescription": "Равномерная сетка карточек",
+  "customization.layout.cardsDescription": "Большие информативные карточки",
+  "customization.layout.compactDescription": "Компактное отображение без отступов",
+  "customization.layout.sidebarDescription": "Навигация в боковой панели",
+  "customization.layout.masonryDescription": "Динамическая сетка разной высоты",
+  "customization.layout.timelineDescription": "Хронологическое отображение",
+  "customization.layout.magazineDescription": "Стиль журнала с крупными изображениями",
+  "customization.layout.testListDescription": "Полный несворачиваемый список всех групп и ссылок",  "customization.colors.theme": "Цвет темы",
   "customization.colors.background": "Цвет фона",
   "customization.colors.backgroundImage": "Фоновое изображение",
   "customization.colors.removeBackground": "Убрать фон",
+  "customization.colors.backgroundImageHelp": "Выберите изображение для фона (JPG, PNG, GIF). Если не выбрано - текущее изображение останется без изменений.",
+  "customization.colors.currentImage": "Текущее изображение:",
+  "customization.colors.newImage": "Новое изображение (будет применено после сохранения):",
   "customization.colors.header": "Цвет текста заголовков",
   "customization.colors.group": "Цвет текста групп",
   "customization.colors.link": "Цвет текста ссылок",
@@ -122,8 +244,12 @@
   "customization.groups.showLinks": "Показывать иконки ссылок",
   "customization.groups.defaultExpanded": "Группы развернуты по умолчанию",
   "customization.groups.showTitle": "Показывать заголовки групп",
+  "customization.groups.displaySettings": "Настройки отображения групп",
 
   "customization.advanced.fonts": "Настройки шрифтов",
+  "customization.advanced.fontSettings": "Настройки шрифтов",
+  "customization.advanced.additionalSettings": "Дополнительные настройки",
+  "customization.advanced.resetConfirm": "Вы уверены, что хотите сбросить все настройки интерфейса к значениям по умолчанию? Это действие нельзя отменить.",
   "customization.advanced.mainFont": "Основной шрифт",
   "customization.advanced.headingFont": "Шрифт заголовков",
   "customization.advanced.bodyFont": "Шрифт текста",
@@ -186,10 +312,16 @@
   "theme.light": "Светлая тема",
   "theme.dark": "Темная тема",
 
-  "language.select": "Выберите язык",
+  "language.select": "Выбрать язык",
   "language.en": "English",
   "language.ru": "Русский",
   "language.ko": "한국어",
   "language.zh": "中文",
-  "language.ja": "日本語"
+  "language.ja": "日本語",
+
+  "footer.about": "О нас",
+  "footer.contact": "Контакты",
+  "footer.terms": "Условия использования",
+  "footer.privacy": "Политика конфиденциальности",
+  "footer.copyright": "© CatLink 2025. Все права защищены."
 }
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/locales/zh.json b/frontend/linktree-frontend/src/app/locales/zh.json
index fa6b43f..726a22e 100644
--- a/frontend/linktree-frontend/src/app/locales/zh.json
+++ b/frontend/linktree-frontend/src/app/locales/zh.json
@@ -28,6 +28,77 @@
   "common.no": "否",
   "common.menu": "菜单",
 
+  "home.title": "您的链接。您的风格。您的CatLink。",
+  "home.subtitle": "创建一个美丽的个人页面，将所有重要链接集中在一处。专业且时尚地分享！",
+  "home.emailPlaceholder": "输入您的邮箱",
+  "home.startFree": "免费开始",
+  "home.haveAccount": "已有账户？",
+  "home.signIn": "登录",
+
+  "home.features.title": "为什么选择CatLink？",
+  "home.features.subtitle": "创建数字存在感的简单而强大的工具",
+
+  "home.features.links.title": "一个网址 — 所有链接",
+  "home.features.links.description": "将所有重要链接汇聚在一处。社交媒体、作品集、联系方式——全部在一个地址下。",
+
+  "home.features.customization.title": "个性化定制",
+  "home.features.customization.description": "自定义颜色、字体、布局。创造反映您个性或品牌的独特风格。",
+
+  "home.features.analytics.title": "分析统计",
+  "home.features.analytics.description": "追踪点击量、链接热度和访客活动。更好地了解您的受众。",
+
+  "home.useCases.title": "适合所有人",
+  "home.useCases.bloggers": "博主",
+  "home.useCases.bloggersDescription": "汇聚所有社交媒体",
+  "home.useCases.business": "企业",
+  "home.useCases.businessDescription": "展示服务和联系方式",
+  "home.useCases.musicians": "音乐家",
+  "home.useCases.musiciansDescription": "分享您的作品",
+  "home.useCases.photographers": "摄影师",
+  "home.useCases.photographersDescription": "展示您的作品集",
+  "home.useCases.exampleTitle": "个人页面",
+  "home.useCases.exampleSubtitle": "页面示例",
+  "home.useCases.personalSite": "个人网站",
+
+  "home.cta.title": "准备开始了吗？",
+  "home.cta.subtitle": "加入数千名用户，他们已经创建了完美的链接页面",
+  "home.cta.createFree": "创建免费账户",
+  "home.cta.haveAccount": "我有账户",
+  "home.cta.features": "永久免费 • 无限制 • 快速设置",
+
+  "auth.welcome": "欢迎！",
+  "auth.welcomeSubtitle": "登录您的CatLink账户",
+  "auth.createAccount": "创建账户",
+  "auth.createAccountSubtitle": "今天就加入CatLink",
+  "auth.usernameLabel": "用户名",
+  "auth.usernamePlaceholder": "输入您的用户名",
+  "auth.usernameRequired": "请输入用户名",
+  "auth.usernameHelp": "只能使用拉丁字母、数字和_",
+  "auth.passwordLabel": "密码",
+  "auth.passwordPlaceholder": "输入您的密码",
+  "auth.passwordRequired": "请输入密码",
+  "auth.passwordConfirmLabel": "确认密码",
+  "auth.passwordConfirmRequired": "请确认密码",
+  "auth.passwordMismatch": "密码不匹配",
+  "auth.emailLabel": "邮箱",
+  "auth.emailRequired": "请输入邮箱",
+  "auth.firstNameLabel": "名字",
+  "auth.lastNameLabel": "姓氏",
+  "auth.loginButton": "登录",
+  "auth.registerButton": "创建账户",
+  "auth.loggingIn": "登录中...",
+  "auth.registering": "创建账户中...",
+  "auth.noAccount": "还没有账户？",
+  "auth.haveAccount": "已有账户？",
+  "auth.loginError": "登录错误",
+  "auth.networkError": "网络错误",
+  "auth.registrationError": "注册错误",
+  "auth.connectionError": "服务器连接错误",
+  "auth.termsAgreement": "创建账户即表示您同意",
+  "auth.termsLink": "服务条款",
+  "auth.privacyLink": "隐私政策",
+  "auth.and": "和",
+
   "auth.login.title": "登录",
   "auth.login.email": "邮箱",
   "auth.login.password": "密码",
@@ -51,15 +122,17 @@
   "dashboard.groups": "分组",
   "dashboard.links": "链接",
   "dashboard.settings": "设置",
-  "dashboard.customize": "自定义",
+  "dashboard.customize": "分享",
   "dashboard.addGroup": "添加分组",
   "dashboard.addLink": "添加链接",
-  "dashboard.noGroups": "暂无分组",
-  "dashboard.noLinks": "暂无链接",
+  "dashboard.noGroups": "还没有分组",
+  "dashboard.noLinks": "还没有链接",
   "dashboard.createFirst": "创建您的第一个",
+  "dashboard.shareUrl.copied": "链接已复制到剪贴板",
 
   "group.create": "创建分组",
   "group.edit": "编辑分组",
+  "group.delete": "删除分组",
   "group.name": "分组名称",
   "group.description": "描述",
   "group.icon": "图标",
@@ -73,6 +146,7 @@
 
   "link.create": "创建链接",
   "link.edit": "编辑链接",
+  "link.delete": "删除链接",
   "link.title": "链接标题",
   "link.url": "网址",
   "link.description": "描述",
@@ -191,5 +265,11 @@
   "language.ru": "Русский",
   "language.ko": "한국어",
   "language.zh": "中文",
-  "language.ja": "日本語"
+  "language.ja": "日本語",
+
+  "footer.about": "关于我们",
+  "footer.contact": "联系我们",
+  "footer.terms": "服务条款",
+  "footer.privacy": "隐私政策",
+  "footer.copyright": "© CatLink 2025. 保留所有权利。"
 }
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/page.tsx b/frontend/linktree-frontend/src/app/page.tsx
index 77f51a3..4aed95a 100644
--- a/frontend/linktree-frontend/src/app/page.tsx
+++ b/frontend/linktree-frontend/src/app/page.tsx
@@ -4,12 +4,13 @@
 import { useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import Image from 'next/image'
+import { useLocale } from './contexts/LocaleContext'
 
 export default function HomePage() {
   const [email, setEmail] = useState('')
   const [loading, setLoading] = useState(false)
   const router = useRouter()
+  const { t } = useLocale()
 
   const handleQuickStart = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -17,10 +18,7 @@ export default function HomePage() {
 
     setLoading(true)
     
-    // Сохраняем email в локальном хранилище для автозаполнения формы регистрации
     localStorage.setItem('quickStartEmail', email)
-    
-    // Перенаправляем на страницу регистрации
     router.push('/auth/register')
   }
 
@@ -38,21 +36,11 @@ export default function HomePage() {
         <div className="container py-5">
           <div className="row">
             <div className="col-xl-10 mx-auto">
-              <div className="mb-4">
-                <Image
-                  src="/assets/img/CAT.png"
-                  alt="CatLink"
-                  width={120}
-                  height={120}
-                  className="mb-4"
-                />
-              </div>
               <h1 className="display-4 fw-bold mb-4">
-                Ваши ссылки. Ваш стиль. Ваш CatLink.
+                {t('home.title')}
               </h1>
               <p className="lead mb-5 fs-4">
-                Создайте красивую персональную страницу со всеми важными ссылками в одном месте. 
-                Делитесь профессионально и стильно!
+                {t('home.subtitle')}
               </p>
             </div>
             <div className="col-md-10 col-lg-8 col-xl-6 mx-auto">
@@ -60,7 +48,7 @@ export default function HomePage() {
                 <input
                   className="form-control form-control-lg"
                   type="email"
-                  placeholder="Введите ваш email"
+                  placeholder={t('home.emailPlaceholder')}
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   required
@@ -74,180 +62,51 @@ export default function HomePage() {
                   {loading ? (
                     <span className="spinner-border spinner-border-sm"></span>
                   ) : (
-                    'Начать бесплатно'
+                    t('home.startFree')
                   )}
                 </button>
               </form>
               <div className="mt-3">
                 <small className="text-white-50">
-                  Уже есть аккаунт? <Link href="/auth/login" className="text-warning text-decoration-none fw-bold">Войти</Link>
+                  {t('home.haveAccount')} <Link href="/auth/login" className="text-warning text-decoration-none fw-bold">{t('home.signIn')}</Link>
                 </small>
               </div>
             </div>
           </div>
-          
-          {/* Анимированная стрелка вниз */}
-          <div className="position-absolute bottom-0 start-50 translate-middle-x mb-4">
-            <div className="animate-bounce">
-              <i className="bi bi-chevron-down text-white fs-3"></i>
-            </div>
-          </div>
         </div>
       </header>
 
-      {/* Преимущества */}
       <section className="py-5 bg-light">
         <div className="container">
           <div className="row text-center mb-5">
             <div className="col-lg-8 mx-auto">
-              <h2 className="display-5 fw-bold mb-3">Почему выбирают CatLink?</h2>
+              <h2 className="display-5 fw-bold mb-3">{t('home.features.title')}</h2>
               <p className="lead text-muted">
-                Простой и мощный инструмент для создания вашего цифрового присутствия
+                {t('home.features.subtitle')}
               </p>
             </div>
           </div>
-          <div className="row">
-            <div className="col-lg-4 mb-4">
-              <div className="text-center h-100">
-                <div className="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style={{ width: '80px', height: '80px' }}>
-                  <i className="bi bi-link-45deg text-white fs-1"></i>
-                </div>
-                <h4 className="fw-bold">Один URL — все ссылки</h4>
-                <p className="text-muted">
-                  Соберите все важные ссылки в одном месте. Социальные сети, портфолио, 
-                  контакты — всё под одним адресом.
-                </p>
-              </div>
-            </div>
-            <div className="col-lg-4 mb-4">
-              <div className="text-center h-100">
-                <div className="bg-success rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style={{ width: '80px', height: '80px' }}>
-                  <i className="bi bi-palette text-white fs-1"></i>
-                </div>
-                <h4 className="fw-bold">Персонализация</h4>
-                <p className="text-muted">
-                  Настройте цвета, шрифты, макеты. Создайте уникальный стиль, 
-                  который отражает вашу личность или бренд.
-                </p>
-              </div>
-            </div>
-            <div className="col-lg-4 mb-4">
-              <div className="text-center h-100">
-                <div className="bg-warning rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style={{ width: '80px', height: '80px' }}>
-                  <i className="bi bi-graph-up text-white fs-1"></i>
-                </div>
-                <h4 className="fw-bold">Аналитика</h4>
-                <p className="text-muted">
-                  Отслеживайте клики, популярность ссылок и активность посетителей. 
-                  Понимайте свою аудиторию лучше.
-                </p>
-              </div>
-            </div>
-          </div>
         </div>
       </section>
 
-      {/* Примеры использования */}
-      <section className="py-5">
-        <div className="container">
-          <div className="row align-items-center">
-            <div className="col-lg-6 mb-4">
-              <h2 className="display-6 fw-bold mb-4">Для всех и каждого</h2>
-              <div className="row">
-                <div className="col-sm-6 mb-3">
-                  <div className="d-flex align-items-start">
-                    <div className="bg-primary rounded-circle me-3 d-flex align-items-center justify-content-center" style={{ width: '40px', height: '40px', minWidth: '40px' }}>
-                      <i className="bi bi-person text-white"></i>
-                    </div>
-                    <div>
-                      <h6 className="fw-bold mb-1">Блогеры</h6>
-                      <small className="text-muted">Соберите все социальные сети</small>
-                    </div>
-                  </div>
-                </div>
-                <div className="col-sm-6 mb-3">
-                  <div className="d-flex align-items-start">
-                    <div className="bg-success rounded-circle me-3 d-flex align-items-center justify-content-center" style={{ width: '40px', height: '40px', minWidth: '40px' }}>
-                      <i className="bi bi-briefcase text-white"></i>
-                    </div>
-                    <div>
-                      <h6 className="fw-bold mb-1">Бизнес</h6>
-                      <small className="text-muted">Покажите услуги и контакты</small>
-                    </div>
-                  </div>
-                </div>
-                <div className="col-sm-6 mb-3">
-                  <div className="d-flex align-items-start">
-                    <div className="bg-warning rounded-circle me-3 d-flex align-items-center justify-content-center" style={{ width: '40px', height: '40px', minWidth: '40px' }}>
-                      <i className="bi bi-music-note text-white"></i>
-                    </div>
-                    <div>
-                      <h6 className="fw-bold mb-1">Музыканты</h6>
-                      <small className="text-muted">Поделитесь творчеством</small>
-                    </div>
-                  </div>
-                </div>
-                <div className="col-sm-6 mb-3">
-                  <div className="d-flex align-items-start">
-                    <div className="bg-info rounded-circle me-3 d-flex align-items-center justify-content-center" style={{ width: '40px', height: '40px', minWidth: '40px' }}>
-                      <i className="bi bi-camera text-white"></i>
-                    </div>
-                    <div>
-                      <h6 className="fw-bold mb-1">Фотографы</h6>
-                      <small className="text-muted">Покажите портфолио</small>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="col-lg-6 text-center">
-              <div className="bg-light rounded-3 p-4 shadow-sm">
-                <div className="bg-white rounded-3 p-4 mb-3 border">
-                  <div className="d-flex align-items-center mb-3">
-                    <div className="bg-primary rounded-circle me-3" style={{ width: '40px', height: '40px' }}></div>
-                    <div>
-                      <h6 className="mb-0">@your_username</h6>
-                      <small className="text-muted">Ваша персональная страница</small>
-                    </div>
-                  </div>
-                  <div className="d-grid gap-2">
-                    <div className="bg-light rounded-2 p-2 text-start">
-                      <small><i className="bi bi-instagram text-danger me-2"></i>Instagram</small>
-                    </div>
-                    <div className="bg-light rounded-2 p-2 text-start">
-                      <small><i className="bi bi-youtube text-danger me-2"></i>YouTube</small>
-                    </div>
-                    <div className="bg-light rounded-2 p-2 text-start">
-                      <small><i className="bi bi-globe text-primary me-2"></i>Личный сайт</small>
-                    </div>
-                  </div>
-                </div>
-                <small className="text-muted">Пример вашей страницы</small>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* CTA секция */}
       <section className="py-5 bg-primary text-white">
         <div className="container text-center">
           <div className="row">
             <div className="col-lg-8 mx-auto">
-              <h2 className="display-6 fw-bold mb-4">Готовы начать?</h2>
+              <h2 className="display-6 fw-bold mb-4">{t('home.cta.title')}</h2>
               <p className="lead mb-4">
-                Присоединяйтесь к тысячам пользователей, которые уже создали свою идеальную страницу ссылок
+                {t('home.cta.subtitle')}
               </p>
               <div className="d-flex flex-column flex-sm-row gap-3 justify-content-center">
                 <Link href="/auth/register" className="btn btn-warning btn-lg px-4 fw-bold">
-                  Создать аккаунт бесплатно
+                  {t('home.cta.createFree')}
                 </Link>
                 <Link href="/auth/login" className="btn btn-outline-light btn-lg px-4">
-                  У меня есть аккаунт
+                  {t('home.cta.haveAccount')}
                 </Link>
               </div>
               <div className="mt-3">
-                <small className="text-white-75">Бесплатно навсегда • Без ограничений • Быстрая настройка</small>
+                <small className="text-white-75">{t('home.cta.features')}</small>
               </div>
             </div>
           </div>

From 271f30375785152dcf39fc7e73f86479bebd591b Mon Sep 17 00:00:00 2001
From: "Andrey K. Choi" <a.choi@smartsoltech.kr>
Date: Tue, 11 Nov 2025 08:26:25 +0900
Subject: [PATCH 2/2] localization, dark theme

---
 .env.local                                    |  71 +++
 .../src/app/components/CustomizationPanel.tsx |  26 +-
 .../src/app/components/ThemeToggle.css        |  30 +-
 frontend/linktree-frontend/src/app/layout.tsx |   3 +-
 .../linktree-frontend/src/app/locales/en.json |  19 +-
 .../linktree-frontend/src/app/locales/ru.json |  19 +-
 .../src/app/styles/comfort.css                | 217 +++++++++
 .../src/app/styles/themes.css                 | 421 +++++++++++++++---
 8 files changed, 725 insertions(+), 81 deletions(-)
 create mode 100644 .env.local
 create mode 100644 frontend/linktree-frontend/src/app/styles/comfort.css

diff --git a/.env.local b/.env.local
new file mode 100644
index 0000000..d0e2f0f
--- /dev/null
+++ b/.env.local
@@ -0,0 +1,71 @@
+# Django настройки для локальной разработки
+DJANGO_SECRET_KEY=lskjflSDJHFdSFYU7TYOREIFLUDJKFBNKLJSDHFP9Q234856QT80OUAEIYDWSF9PQ28345701784QRTEOYAGWDFLSBAPWO9I485Y
+DJANGO_DEBUG=True
+DJANGO_ALLOWED_HOSTS=localhost,127.0.0.1,web
+DJANGO_CSRF_TRUSTED_ORIGINS=http://localhost:3000,http://127.0.0.1:3000,http://localhost:8000,http://127.0.0.1:8000
+
+# CORS настройки для локальной разработки
+CORS_ALLOWED_ORIGINS=http://127.0.0.1:3000,http://localhost:3000
+CORS_ALLOW_ALL_ORIGINS=True
+CORS_ALLOW_CREDENTIALS=True
+CORS_ALLOW_HEADERS=accept,accept-encoding,authorization,content-type,dnt,origin,user-agent,x-csrftoken,x-requested-with
+
+# Локализация
+DJANGO_LANGUAGE_CODE=ru-ru
+DJANGO_TIME_ZONE=UTC
+DJANGO_USE_I18N=True
+DJANGO_USE_TZ=True
+
+# Статические файлы
+DJANGO_STATIC_URL=/static/
+DJANGO_MEDIA_URL=/storage/
+
+# API настройки
+DJANGO_APPEND_SLASH=False
+
+# JWT настройки
+JWT_ACCESS_TOKEN_LIFETIME_MINUTES=60
+JWT_REFRESH_TOKEN_LIFETIME_DAYS=1
+
+# База данных PostgreSQL
+DATABASE_ENGINE=django.db.backends.postgresql
+DATABASE_NAME=links_db
+DATABASE_USER=links_user
+DATABASE_PASSWORD=links_OASDUIFH90324*ftye(guBJ;O234789SDgfu{
+DATABASE_HOST=db
+DATABASE_PORT=5432
+
+# PostgreSQL настройки для контейнера
+POSTGRES_DB=links_db
+POSTGRES_USER=links_user
+POSTGRES_PASSWORD=links_OASDUIFH90324*ftye(guBJ;O234789SDgfu{
+
+# Frontend настройки (для локальной разработки)
+NEXT_PUBLIC_API_URL=http://localhost:8000
+
+# URL настройки для Django backend (локальные)
+DJANGO_BACKEND_URL=http://localhost:8000
+DJANGO_BACKEND_PROTOCOL=http
+DJANGO_BACKEND_DOMAIN=localhost:8000
+DJANGO_MEDIA_BASE_URL=http://localhost:8000
+
+# Безопасность (отключено для локальной разработки)
+DJANGO_SECURE_SSL_REDIRECT=False
+DJANGO_SECURE_HSTS_SECONDS=0
+DJANGO_SECURE_HSTS_INCLUDE_SUBDOMAINS=False
+DJANGO_SECURE_HSTS_PRELOAD=False
+DJANGO_SECURE_CONTENT_TYPE_NOSNIFF=True
+DJANGO_SECURE_BROWSER_XSS_FILTER=True
+DJANGO_X_FRAME_OPTIONS=SAMEORIGIN
+
+# Email настройки (консоль для локальной разработки)
+DJANGO_EMAIL_BACKEND=django.core.mail.backends.console.EmailBackend
+DJANGO_EMAIL_HOST=
+DJANGO_EMAIL_PORT=587
+DJANGO_EMAIL_HOST_USER=
+DJANGO_EMAIL_HOST_PASSWORD=
+DJANGO_EMAIL_USE_TLS=False
+DJANGO_EMAIL_USE_SSL=False
+DJANGO_EMAIL_TIMEOUT=30
+DJANGO_DEFAULT_FROM_EMAIL=
+DJANGO_SERVER_EMAIL=
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx b/frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx
index 7a03003..4042034 100644
--- a/frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx
+++ b/frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx
@@ -445,7 +445,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                     <div className="col-12 mb-3">
                       <div className="alert alert-info">
                         <i className="bi bi-info-circle me-2"></i>
-                        <strong>Совет:</strong> Попробуйте разные макеты, чтобы найти наиболее подходящий для вашего контента. 
+                        <strong>{t('customization.layout.tip')}</strong> {t('customization.layout.tipText')} 
                         Каждый стиль имеет свои преимущества в зависимости от количества ссылок и их типа.
                       </div>
                     </div>
@@ -515,7 +515,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                           <div className="d-flex align-items-center gap-2">
                             <img 
                               src={settings.background_image_url} 
-                              alt="Текущий фон" 
+                              alt={t('customization.colors.currentBackgroundAlt')} 
                               className="img-thumbnail"
                               style={{ maxWidth: '200px', maxHeight: '100px', objectFit: 'cover' }}
                             />
@@ -654,13 +654,13 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                           onChange={(e) => handleChange('show_groups_title', e.target.checked)}
                         />
                         <label className="form-check-label">
-                          Показывать заголовок "Группы ссылок"
+                          {t('customization.colors.showGroupsTitle')}
                         </label>
                       </div>
                     </div>
                     
                     <div className="col-md-6 mb-3">
-                      <label className="form-label">Цвет описаний групп</label>
+                      <label className="form-label">{t('customization.colors.groupDescription')}</label>
                       <div className="input-group">
                         <input
                           type="color"
@@ -681,7 +681,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                     <div className="col-12 mb-3">
                       <div className="card">
                         <div className="card-header">
-                          <h6 className="mb-0">Цветовое перекрытие групп</h6>
+                          <h6 className="mb-0">{t('customization.colors.groupOverlay')}</h6>
                         </div>
                         <div className="card-body">
                           <div className="form-check mb-3">
@@ -708,7 +708,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                                       className="form-control form-control-color"
                                       value={settings.group_overlay_color || '#000000'}
                                       onChange={(e) => handleChange('group_overlay_color', e.target.value)}
-                                      title="Выберите цвет перекрытия"
+                                      title={t('customization.colors.chooseOverlayColor')}
                                     />
                                     <input
                                       type="text"
@@ -716,7 +716,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                                       value={settings.group_overlay_color || '#000000'}
                                       onChange={(e) => handleChange('group_overlay_color', e.target.value)}
                                       placeholder="#000000"
-                                      title="Hex код цвета"
+                                      title={t('customization.colors.hexColorCode')}
                                     />
                                   </div>
                                 </div>
@@ -767,7 +767,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                     <div className="col-12">
                       <div className="alert alert-info">
                         <i className="bi bi-info-circle me-2"></i>
-                        <strong>Настройки отдельных групп</strong><br/>
+                        <strong>{t('customization.advanced.individualGroupSettings')}</strong><br/>
                         Чтобы настроить конкретную группу (публичность, избранное, разворачивание), используйте кнопку редактирования рядом с названием группы в основном списке.
                       </div>
                     </div>
@@ -776,7 +776,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                     <div className="col-12 mt-4">
                       <div className="border rounded p-3">
                         <div className="d-flex align-items-center justify-content-between mb-3">
-                          <h6 className="mb-0">Цветовое перекрытие кнопок ссылок</h6>
+                          <h6 className="mb-0">{t('customization.colors.linkOverlay')}</h6>
                           <div className="form-check form-switch">
                             <input
                               className="form-check-input"
@@ -883,8 +883,8 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                         value={settings.font_family}
                         onChange={(e) => handleChange('font_family', e.target.value)}
                       >
-                        <option value="sans-serif">Системный Sans Serif</option>
-                        <option value="serif">Системный Serif</option>
+                        <option value="sans-serif">{t('customization.advanced.systemSansSerif')}</option>
+                        <option value="serif">{t('customization.advanced.systemSerif')}</option>
                         <option value="monospace">Monospace</option>
                         <option value="'PT Sans', sans-serif">PT Sans</option>
                         <option value="'PT Serif', serif">PT Serif</option>
@@ -906,7 +906,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                         value={settings.heading_font_family || settings.font_family}
                         onChange={(e) => handleChange('heading_font_family', e.target.value)}
                       >
-                        <option value="">Как основной</option>
+                        <option value="">{t('customization.advanced.sameAsMain')}</option>
                         <option value="'PT Sans', sans-serif">PT Sans</option>
                         <option value="'PT Serif', serif">PT Serif</option>
                         <option value="'Roboto', sans-serif">Roboto</option>
@@ -935,7 +935,7 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, gr
                         value={settings.body_font_family || settings.font_family}
                         onChange={(e) => handleChange('body_font_family', e.target.value)}
                       >
-                        <option value="">Как основной</option>
+                        <option value="">{t('customization.advanced.sameAsMain')}</option>
                         <option value="'PT Sans', sans-serif">PT Sans</option>
                         <option value="'PT Serif', serif">PT Serif</option>
                         <option value="'Roboto', sans-serif">Roboto</option>
diff --git a/frontend/linktree-frontend/src/app/components/ThemeToggle.css b/frontend/linktree-frontend/src/app/components/ThemeToggle.css
index 2440099..909e700 100644
--- a/frontend/linktree-frontend/src/app/components/ThemeToggle.css
+++ b/frontend/linktree-frontend/src/app/components/ThemeToggle.css
@@ -6,13 +6,14 @@
   border: 2px solid var(--bs-border-color);
   border-radius: 20px;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
 }
 
 .theme-toggle.dark {
-  background-color: var(--bs-dark);
-  border-color: var(--bs-secondary);
+  background: linear-gradient(135deg, #7c3aed, #9333ea);
+  border: 2px solid #8b5cf6;
+  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25);
 }
 
 .theme-toggle-slider {
@@ -27,12 +28,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 }
 
 .theme-toggle.dark .theme-toggle-slider {
   transform: translateX(30px);
-  background: linear-gradient(45deg, #4a5568, #718096);
+  background: linear-gradient(45deg, #f8fafc, #e2e8f0);
+  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.3);
 }
 
 .theme-toggle-icon {
@@ -66,6 +68,11 @@
   transform: scale(1.05);
 }
 
+.theme-toggle.dark:hover {
+  box-shadow: 0 6px 25px rgba(124, 58, 237, 0.35);
+  transform: scale(1.05);
+}
+
 .theme-toggle:active {
   transform: scale(0.95);
 }
@@ -104,20 +111,23 @@
 
 /* Темная тема - звездочки */
 .theme-toggle.dark::after {
-  content: '✨';
+  content: '🌙';
   position: absolute;
   top: 50%;
   right: 8px;
   transform: translateY(-50%);
-  font-size: 8px;
-  animation: twinkle 1.5s ease-in-out infinite alternate;
+  font-size: 10px;
+  animation: moonGlow 2s ease-in-out infinite alternate;
+  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.6));
 }
 
-@keyframes twinkle {
+@keyframes moonGlow {
   0% {
-    opacity: 0.3;
+    opacity: 0.6;
+    filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.6));
   }
   100% {
     opacity: 1;
+    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.9));
   }
 }
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/layout.tsx b/frontend/linktree-frontend/src/app/layout.tsx
index f84ecac..c6a3473 100644
--- a/frontend/linktree-frontend/src/app/layout.tsx
+++ b/frontend/linktree-frontend/src/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import "./styles/themes.css";
+import "./styles/comfort.css";
 import { ReactNode } from "react";
 import { LayoutWrapper } from "./components/LayoutWrapper";
 import Providers from "./components/Providers";
@@ -70,7 +71,7 @@ export default function RootLayout({
         />
 
         <link rel="manifest" href="/manifest.json?h=457941ffad3c027c946331c09a4d7d2f" />
-        <meta name="theme-color" content="#ffffff" />
+        <meta name="theme-color" content="#1a1a23" />
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
diff --git a/frontend/linktree-frontend/src/app/locales/en.json b/frontend/linktree-frontend/src/app/locales/en.json
index bf1f64a..ebfcda6 100644
--- a/frontend/linktree-frontend/src/app/locales/en.json
+++ b/frontend/linktree-frontend/src/app/locales/en.json
@@ -229,7 +229,24 @@
   "customization.layout.masonryDescription": "Dynamic grid with varying heights",
   "customization.layout.timelineDescription": "Chronological display",
   "customization.layout.magazineDescription": "Magazine style with large images",
-  "customization.layout.testListDescription": "Full non-collapsible list of all groups and links",  "customization.colors.theme": "Theme color",
+  "customization.layout.testListDescription": "Full non-collapsible list of all groups and links",
+  "customization.layout.tip": "Tip:",
+  "customization.layout.tipText": "Try different layouts to find the most suitable for your content.",
+
+  "customization.colors.currentBackgroundAlt": "Current background",
+  "customization.colors.groupDescription": "Group descriptions color",
+  "customization.colors.showGroupsTitle": "Show \"Link Groups\" title",
+  "customization.colors.groupOverlay": "Group color overlay",
+  "customization.colors.overlayColor": "Overlay color",
+  "customization.colors.chooseOverlayColor": "Choose overlay color",
+  "customization.colors.overlayOpacity": "Overlay opacity setting",
+  "customization.colors.preview": "Preview",
+  "customization.colors.linkOverlay": "Link button color overlay",
+
+  "customization.advanced.individualGroupSettings": "Individual group settings",
+  "customization.advanced.systemSansSerif": "System Sans Serif",
+  "customization.advanced.systemSerif": "System Serif",
+  "customization.advanced.sameAsMain": "Same as main",  "customization.colors.theme": "Theme color",
   "customization.colors.background": "Background color",
   "customization.colors.backgroundImage": "Background image",
   "customization.colors.removeBackground": "Remove background",
diff --git a/frontend/linktree-frontend/src/app/locales/ru.json b/frontend/linktree-frontend/src/app/locales/ru.json
index 57b28ea..26502a4 100644
--- a/frontend/linktree-frontend/src/app/locales/ru.json
+++ b/frontend/linktree-frontend/src/app/locales/ru.json
@@ -229,7 +229,24 @@
   "customization.layout.masonryDescription": "Динамическая сетка разной высоты",
   "customization.layout.timelineDescription": "Хронологическое отображение",
   "customization.layout.magazineDescription": "Стиль журнала с крупными изображениями",
-  "customization.layout.testListDescription": "Полный несворачиваемый список всех групп и ссылок",  "customization.colors.theme": "Цвет темы",
+  "customization.layout.testListDescription": "Полный несворачиваемый список всех групп и ссылок",
+  "customization.layout.tip": "Совет:",
+  "customization.layout.tipText": "Попробуйте разные макеты, чтобы найти наиболее подходящий для вашего контента.",
+
+  "customization.colors.currentBackgroundAlt": "Текущий фон",
+  "customization.colors.groupDescription": "Цвет описаний групп",
+  "customization.colors.showGroupsTitle": "Показывать заголовок \"Группы ссылок\"",
+  "customization.colors.groupOverlay": "Цветовое перекрытие групп",
+  "customization.colors.overlayColor": "Цвет перекрытия",
+  "customization.colors.chooseOverlayColor": "Выберите цвет перекрытия",
+  "customization.colors.overlayOpacity": "Настройка прозрачности перекрытия",
+  "customization.colors.preview": "Предварительный просмотр",
+  "customization.colors.linkOverlay": "Цветовое перекрытие кнопок ссылок",
+
+  "customization.advanced.individualGroupSettings": "Настройки отдельных групп",
+  "customization.advanced.systemSansSerif": "Системный Sans Serif",
+  "customization.advanced.systemSerif": "Системный Serif",
+  "customization.advanced.sameAsMain": "Как основной",  "customization.colors.theme": "Цвет темы",
   "customization.colors.background": "Цвет фона",
   "customization.colors.backgroundImage": "Фоновое изображение",
   "customization.colors.removeBackground": "Убрать фон",
diff --git a/frontend/linktree-frontend/src/app/styles/comfort.css b/frontend/linktree-frontend/src/app/styles/comfort.css
new file mode 100644
index 0000000..d8db073
--- /dev/null
+++ b/frontend/linktree-frontend/src/app/styles/comfort.css
@@ -0,0 +1,217 @@
+/* Комфортные стили для темной темы - дополнительные настройки для лучшего UX */
+
+/* Адаптация к системным настройкам пользователя */
+@media (prefers-reduced-motion: reduce) {
+  [data-theme="dark"] * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Улучшенная читаемость текста */
+@media (prefers-contrast: high) {
+  [data-theme="dark"] {
+    --text: #f0f0f8;
+    --text-secondary: #c8c8d8;
+    --border: #4a4a5a;
+  }
+}
+
+/* Адаптация к размеру экрана для комфорта */
+@media (max-width: 768px) {
+  [data-theme="dark"] {
+    --card-bg: #1e1e2a;
+    --background-secondary: #1e1e2a;
+  }
+  
+  [data-theme="dark"] .card {
+    border-radius: 16px;
+    margin-bottom: 1rem;
+  }
+  
+  [data-theme="dark"] .btn {
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-size: 16px;
+  }
+}
+
+/* Специальные стили для больших экранов */
+@media (min-width: 1200px) {
+  [data-theme="dark"] .container-fluid {
+    max-width: 1400px;
+  }
+  
+  [data-theme="dark"] .card {
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+  }
+}
+
+/* Улучшенная фокусировка для пользователей клавиатуры */
+@media (prefers-reduced-transparency: no-preference) {
+  [data-theme="dark"] .btn:focus,
+  [data-theme="dark"] .form-control:focus,
+  [data-theme="dark"] a:focus {
+    outline: 3px solid rgba(124, 58, 237, 0.5);
+    outline-offset: 2px;
+    background: rgba(124, 58, 237, 0.05);
+  }
+}
+
+/* Мягкая анимация появления элементов */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+[data-theme="dark"] .fade-in {
+  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Улучшенные состояния загрузки */
+[data-theme="dark"] .loading {
+  background: linear-gradient(
+    90deg,
+    var(--background-secondary) 25%,
+    var(--background-tertiary) 37%,
+    var(--background-secondary) 63%
+  );
+  background-size: 400% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Специальная палитра для состояний */
+[data-theme="dark"] .state-success {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
+  border-left: 4px solid #22c55e;
+  color: #86efac;
+}
+
+[data-theme="dark"] .state-warning {
+  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
+  border-left: 4px solid #fbbf24;
+  color: #fde68a;
+}
+
+[data-theme="dark"] .state-error {
+  background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(248, 113, 113, 0.05));
+  border-left: 4px solid #f87171;
+  color: #fca5a5;
+}
+
+[data-theme="dark"] .state-info {
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(56, 189, 248, 0.05));
+  border-left: 4px solid #38bdf8;
+  color: #7dd3fc;
+}
+
+/* Комфортные тултипы */
+[data-theme="dark"] .tooltip {
+  background: var(--background-tertiary);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* Стили для уведомлений */
+[data-theme="dark"] .notification {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+/* Улучшенный выбор текста */
+[data-theme="dark"] ::selection {
+  background: rgba(124, 58, 237, 0.3);
+  color: var(--text);
+}
+
+[data-theme="dark"] ::-moz-selection {
+  background: rgba(124, 58, 237, 0.3);
+  color: var(--text);
+}
+
+/* Специальные эффекты для интерактивных элементов */
+[data-theme="dark"] .interactive-element {
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .interactive-element::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(124, 58, 237, 0.1),
+    transparent
+  );
+  transition: left 0.5s;
+}
+
+[data-theme="dark"] .interactive-element:hover::before {
+  left: 100%;
+}
+
+/* Мягкое появление модальных окон */
+[data-theme="dark"] .modal.fade .modal-dialog {
+  transform: scale(0.9);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-theme="dark"] .modal.show .modal-dialog {
+  transform: scale(1);
+}
+
+/* Комфортные разделители */
+[data-theme="dark"] hr {
+  border: none;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--border),
+    transparent
+  );
+  margin: 2rem 0;
+}
+
+/* Улучшенные списки */
+[data-theme="dark"] .list-group-item {
+  background: var(--card-bg);
+  border-color: var(--border);
+  transition: all 0.3s ease;
+}
+
+[data-theme="dark"] .list-group-item:hover {
+  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.02));
+  transform: translateX(4px);
+  border-left: 3px solid var(--primary);
+}
\ No newline at end of file
diff --git a/frontend/linktree-frontend/src/app/styles/themes.css b/frontend/linktree-frontend/src/app/styles/themes.css
index 8186ee1..4d0ef69 100644
--- a/frontend/linktree-frontend/src/app/styles/themes.css
+++ b/frontend/linktree-frontend/src/app/styles/themes.css
@@ -1,67 +1,70 @@
 /* CSS Custom Properties для темизации */
 
 :root {
-  /* Светлая тема (по умолчанию) */
-  --background: #ffffff;
-  --background-secondary: #f8f9fa;
-  --background-tertiary: #e9ecef;
-  --text: #212529;
-  --text-secondary: #6c757d;
-  --text-muted: #868e96;
-  --border: #dee2e6;
-  --border-light: #e9ecef;
-  --primary: #0d6efd;
-  --primary-hover: #0b5ed7;
-  --secondary: #6c757d;
-  --success: #198754;
-  --danger: #dc3545;
-  --warning: #ffc107;
-  --info: #0dcaf0;
+  /* Светлая тема (обновленная) */
+  --background: #fafafa;
+  --background-secondary: #f5f5f7;
+  --background-tertiary: #e8e8ed;
+  --text: #1a1a1f;
+  --text-secondary: #6e6e73;
+  --text-muted: #86868b;
+  --border: #d2d2d7;
+  --border-light: #e8e8ed;
+  --primary: #8b5cf6;
+  --primary-hover: #7c3aed;
+  --secondary: #6366f1;
+  --success: #10b981;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --info: #06b6d4;
   --card-bg: #ffffff;
-  --card-border: #dee2e6;
+  --card-border: #d2d2d7;
   --input-bg: #ffffff;
-  --input-border: #ced4da;
-  --input-focus-border: #86b7fe;
+  --input-border: #d2d2d7;
+  --input-focus-border: #8b5cf6;
   --dropdown-bg: #ffffff;
-  --dropdown-border: #dee2e6;
+  --dropdown-border: #d2d2d7;
   --modal-bg: #ffffff;
-  --modal-backdrop: rgba(0, 0, 0, 0.5);
+  --modal-backdrop: rgba(26, 26, 31, 0.5);
   --navbar-bg: #ffffff;
-  --sidebar-bg: #f8f9fa;
-  --shadow: rgba(0, 0, 0, 0.175);
-  --shadow-lg: rgba(0, 0, 0, 0.15);
+  --sidebar-bg: #f5f5f7;
+  --shadow: rgba(26, 26, 31, 0.1);
+  --shadow-lg: rgba(26, 26, 31, 0.12);
 }
 
 [data-theme="dark"] {
-  /* Темная тема */
-  --background: #0d1117;
-  --background-secondary: #161b22;
-  --background-tertiary: #21262d;
-  --text: #f0f6fc;
-  --text-secondary: #8b949e;
-  --text-muted: #656d76;
-  --border: #30363d;
-  --border-light: #21262d;
-  --primary: #4fb3ff;
-  --primary-hover: #58a6ff;
-  --secondary: #8b949e;
-  --success: #3fb950;
-  --danger: #f85149;
-  --warning: #d29922;
-  --info: #56d4dd;
-  --card-bg: #161b22;
-  --card-border: #30363d;
-  --input-bg: #0d1117;
-  --input-border: #30363d;
-  --input-focus-border: #58a6ff;
-  --dropdown-bg: #161b22;
-  --dropdown-border: #30363d;
-  --modal-bg: #161b22;
-  --modal-backdrop: rgba(0, 0, 0, 0.7);
-  --navbar-bg: #161b22;
-  --sidebar-bg: #0d1117;
-  --shadow: rgba(0, 0, 0, 0.4);
+  /* Темная тема - Комфортная ночная палитра */
+  --background: #1a1a23;
+  --background-secondary: #22222f;
+  --background-tertiary: #2a2a3a;
+  --text: #e8e8f0;
+  --text-secondary: #b8b8c8;
+  --text-muted: #9090a0;
+  --border: #3a3a4a;
+  --border-light: #32323f;
+  --primary: #7c3aed;
+  --primary-hover: #8b5cf6;
+  --secondary: #64748b;
+  --success: #22c55e;
+  --danger: #f87171;
+  --warning: #fbbf24;
+  --info: #38bdf8;
+  --card-bg: #22222f;
+  --card-border: #3a3a4a;
+  --input-bg: #1a1a23;
+  --input-border: #3a3a4a;
+  --input-focus-border: #7c3aed;
+  --dropdown-bg: #22222f;
+  --dropdown-border: #3a3a4a;
+  --modal-bg: #22222f;
+  --modal-backdrop: rgba(26, 26, 35, 0.75);
+  --navbar-bg: #22222f;
+  --sidebar-bg: #1a1a23;
+  --shadow: rgba(0, 0, 0, 0.2);
   --shadow-lg: rgba(0, 0, 0, 0.3);
+  --accent-glow: rgba(124, 58, 237, 0.1);
+  --warm-accent: #fbbf24;
+  --cool-accent: #38bdf8;
 }
 
 /* Применение темы к основным элементам */
@@ -102,11 +105,11 @@ body {
   background-color: var(--input-bg);
   border-color: var(--input-focus-border);
   color: var(--text);
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
 }
 
 [data-theme="dark"] .form-control:focus {
-  box-shadow: 0 0 0 0.25rem rgba(88, 166, 255, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25);
 }
 
 .form-select {
@@ -214,9 +217,165 @@ body {
   color: var(--text) !important;
 }
 
+/* Специальные стили для светлой темы */
+[data-theme="light"] .btn-primary,
+:root .btn-primary {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: #ffffff;
+}
+
+[data-theme="light"] .btn-primary:hover,
+:root .btn-primary:hover {
+  background-color: var(--primary-hover);
+  border-color: var(--primary-hover);
+  color: #ffffff;
+}
+
+[data-theme="light"] .btn-outline-primary,
+:root .btn-outline-primary {
+  color: var(--primary);
+  border-color: var(--primary);
+}
+
+[data-theme="light"] .btn-outline-primary:hover,
+:root .btn-outline-primary:hover {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: #ffffff;
+}
+
+[data-theme="light"] .card:hover,
+:root .card:hover {
+  box-shadow: 0 0.5rem 1rem rgba(139, 92, 246, 0.08);
+  transition: box-shadow 0.3s ease;
+}
+
+[data-theme="light"] .nav-tabs .nav-link:hover,
+:root .nav-tabs .nav-link:hover {
+  color: var(--primary);
+}
+
+[data-theme="light"] .nav-tabs .nav-link.active,
+:root .nav-tabs .nav-link.active {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
+}
+
+/* Дополнительные стили для фиолетовой темы */
+[data-theme="dark"] .btn-primary {
+  background: linear-gradient(135deg, var(--primary), #9333ea);
+  border-color: var(--primary);
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
+}
+
+[data-theme="dark"] .btn-primary:hover {
+  background: linear-gradient(135deg, var(--primary-hover), #a855f7);
+  border-color: var(--primary-hover);
+  color: #ffffff;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
+}
+
+[data-theme="dark"] .btn-secondary {
+  background-color: var(--secondary);
+  border-color: var(--secondary);
+  color: #ffffff;
+}
+
+[data-theme="dark"] .btn-secondary:hover {
+  background-color: #475569;
+  border-color: #475569;
+  color: #ffffff;
+  transform: translateY(-1px);
+}
+
+[data-theme="dark"] .btn-outline-primary {
+  color: var(--primary);
+  border-color: var(--primary);
+  background: rgba(124, 58, 237, 0.05);
+}
+
+[data-theme="dark"] .btn-outline-primary:hover {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+}
+
+[data-theme="dark"] .navbar {
+  background-color: var(--navbar-bg);
+  border-bottom: 1px solid var(--border);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+[data-theme="dark"] .card {
+  background: linear-gradient(145deg, var(--card-bg), #2a2a3a);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+}
+
+[data-theme="dark"] .card:hover {
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-theme="dark"] .modal-content {
+  background: var(--modal-bg);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .form-control,
+[data-theme="dark"] .form-select {
+  background-color: var(--input-bg);
+  border: 1px solid var(--input-border);
+  color: var(--text);
+  border-radius: 8px;
+}
+
+[data-theme="dark"] .form-control:focus,
+[data-theme="dark"] .form-select:focus {
+  background-color: var(--input-bg);
+  border-color: var(--primary);
+  box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25);
+  outline: none;
+}
+
+[data-theme="dark"] .dropdown-item:hover,
+[data-theme="dark"] .dropdown-item:focus {
+  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.05));
+  color: var(--text);
+  border-radius: 6px;
+}
+
+[data-theme="dark"] .nav-tabs .nav-link:hover {
+  color: var(--primary);
+  border-bottom: 2px solid transparent;
+}
+
+[data-theme="dark"] .nav-tabs .nav-link.active {
+  color: var(--primary);
+  background: rgba(124, 58, 237, 0.1);
+  border-bottom: 2px solid var(--primary);
+  border-radius: 8px 8px 0 0;
+}
+
+[data-theme="dark"] .list-group-item:hover {
+  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.02));
+  border-radius: 8px;
+}
+
 /* Анимация переключения темы */
 * {
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+  transition: 
+    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Кастомные утилитарные классы для темизации */
@@ -254,4 +413,156 @@ body {
 
 .theme-shadow-lg {
   box-shadow: 0 1rem 3rem var(--shadow-lg);
+}
+
+/* Комфортные градиенты для темной темы */
+[data-theme="dark"] .gradient-primary {
+  background: linear-gradient(135deg, var(--primary) 0%, #9333ea 100%);
+}
+
+[data-theme="dark"] .gradient-card {
+  background: linear-gradient(145deg, var(--card-bg) 0%, var(--background-tertiary) 100%);
+  border: 1px solid rgba(124, 58, 237, 0.1);
+}
+
+/* Улучшенные тени для комфортного восприятия */
+[data-theme="dark"] .enhanced-shadow {
+  box-shadow: 
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+[data-theme="dark"] .enhanced-shadow-lg {
+  box-shadow: 
+    0 20px 25px -5px rgba(0, 0, 0, 0.15),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* Специальные классы для ночного режима */
+[data-theme="dark"] .night-comfort {
+  filter: brightness(0.95) contrast(1.05);
+}
+
+[data-theme="dark"] .text-emphasis {
+  color: var(--text);
+  font-weight: 500;
+}
+
+[data-theme="dark"] .soft-glow {
+  box-shadow: 0 0 20px rgba(124, 58, 237, 0.1);
+}
+
+/* Адаптивная яркость для различных элементов */
+[data-theme="dark"] .bright-element {
+  filter: brightness(1.1);
+}
+
+[data-theme="dark"] .dim-element {
+  filter: brightness(0.9);
+}
+
+/* Гладкие переходы для всех элементов */
+[data-theme="dark"] * {
+  transition: 
+    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Комфортная прокрутка для темной темы */
+[data-theme="dark"] ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-track {
+  background: var(--background-secondary);
+  border-radius: 6px;
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, var(--primary), #9333ea);
+  border-radius: 6px;
+  border: 2px solid var(--background-secondary);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, var(--primary-hover), #a855f7);
+}
+
+/* Мягкие стили для фокуса */
+[data-theme="dark"] :focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Приятные ссылки */
+[data-theme="dark"] a {
+  color: var(--primary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+[data-theme="dark"] a:hover {
+  color: var(--primary-hover);
+  text-decoration: underline;
+}
+
+/* Улучшенная типография для ночного чтения */
+[data-theme="dark"] body {
+  line-height: 1.6;
+  letter-spacing: 0.01em;
+}
+
+[data-theme="dark"] h1, 
+[data-theme="dark"] h2, 
+[data-theme="dark"] h3, 
+[data-theme="dark"] h4, 
+[data-theme="dark"] h5, 
+[data-theme="dark"] h6 {
+  color: var(--text);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+/* Мягкие акценты для важных элементов */
+[data-theme="dark"] .alert {
+  border: none;
+  border-radius: 12px;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+[data-theme="dark"] .alert-info {
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(56, 189, 248, 0.05));
+  border-left: 4px solid var(--cool-accent);
+  color: var(--text);
+}
+
+[data-theme="dark"] .alert-warning {
+  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
+  border-left: 4px solid var(--warm-accent);
+  color: var(--text);
+}
+
+[data-theme="dark"] .alert-danger {
+  background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(248, 113, 113, 0.05));
+  border-left: 4px solid var(--danger);
+  color: var(--text);
+}
+
+[data-theme="dark"] .alert-success {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
+  border-left: 4px solid var(--success);
+  color: var(--text);
+}
+
+/* Комфортные тени и подсветки */
+[data-theme="dark"] .btn:focus,
+[data-theme="dark"] .form-control:focus,
+[data-theme="dark"] .form-select:focus {
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
 }
\ No newline at end of file