diff --git a/src/pages/Route/RouteCreatePage/index.tsx b/src/pages/Route/RouteCreatePage/index.tsx
index bc0c5d6..0cfbec9 100644
--- a/src/pages/Route/RouteCreatePage/index.tsx
+++ b/src/pages/Route/RouteCreatePage/index.tsx
@@ -13,7 +13,7 @@ import {
   DialogContent,
   DialogActions,
 } from "@mui/material";
-import { MediaViewer } from "@widgets";
+import { MediaViewer, VideoPreviewCard } from "@widgets";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Loader2, Save, Plus } from "lucide-react";
 import { useEffect, useState, useMemo } from "react";
@@ -24,9 +24,10 @@ import { articlesStore } from "../../../shared/store/ArticlesStore";
 import { Route, routeStore } from "../../../shared/store/RouteStore";
 import {
   languageStore,
-  SelectArticleModal,
+  ArticleSelectOrCreateDialog,
   SelectMediaDialog,
   selectedCityStore,
+  UploadMediaDialog,
 } from "@shared";
 
 export const RouteCreatePage = observer(() => {
@@ -39,6 +40,7 @@ export const RouteCreatePage = observer(() => {
   const [direction, setDirection] = useState("backward");
   const [scaleMin, setScaleMin] = useState("");
   const [scaleMax, setScaleMax] = useState("");
+  const [routeName, setRouteName] = useState("");
   const [turn, setTurn] = useState("");
   const [centerLat, setCenterLat] = useState("");
   const [centerLng, setCenterLng] = useState("");
@@ -48,6 +50,8 @@ export const RouteCreatePage = observer(() => {
     useState(false);
   const [isSelectVideoDialogOpen, setIsSelectVideoDialogOpen] = useState(false);
   const [isVideoPreviewOpen, setIsVideoPreviewOpen] = useState(false);
+  const [isUploadVideoDialogOpen, setIsUploadVideoDialogOpen] = useState(false);
+  const [fileToUpload, setFileToUpload] = useState<File | null>(null);
   const { language } = languageStore;
 
   useEffect(() => {
@@ -110,6 +114,8 @@ export const RouteCreatePage = observer(() => {
   const handleArticleSelect = (articleId: number) => {
     setGovernorAppeal(articleId.toString());
     setIsSelectArticleDialogOpen(false);
+    // Обновляем список статей после создания новой
+    articlesStore.getArticleList();
   };
 
   const handleVideoSelect = (media: {
@@ -122,6 +128,26 @@ export const RouteCreatePage = observer(() => {
     setIsSelectVideoDialogOpen(false);
   };
 
+  const handleVideoFileSelect = (file?: File) => {
+    if (file) {
+      setFileToUpload(file);
+      setIsUploadVideoDialogOpen(true);
+    } else {
+      setIsSelectVideoDialogOpen(true);
+    }
+  };
+
+  const handleVideoUpload = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setVideoPreview(media.id);
+    setIsUploadVideoDialogOpen(false);
+    setFileToUpload(null);
+  };
+
   const handleVideoPreviewClick = () => {
     setIsVideoPreviewOpen(true);
   };
@@ -167,6 +193,7 @@ export const RouteCreatePage = observer(() => {
         route_number: routeNumber,
         route_sys_number: govRouteNumber,
         governor_appeal,
+        route_name: routeName,
         route_direction,
         scale_min,
         scale_max,
@@ -208,6 +235,13 @@ export const RouteCreatePage = observer(() => {
 
       <div className="flex flex-col gap-10 w-full items-end">
         <Box className="flex flex-col gap-6 w-full">
+          <TextField
+            className="w-full"
+            label="Название маршрута"
+            required
+            value={routeName}
+            onChange={(e) => setRouteName(e.target.value)}
+          />
           <FormControl fullWidth required>
             <InputLabel>Выберите перевозчика</InputLabel>
             <Select
@@ -279,6 +313,7 @@ export const RouteCreatePage = observer(() => {
               },
             }}
           />
+
           <TextField
             className="w-full"
             label="Номер маршрута в Говорящем Городе"
@@ -287,99 +322,43 @@ export const RouteCreatePage = observer(() => {
             onChange={(e) => setGovRouteNumber(e.target.value)}
           />
 
-          {/* Заменяем Select на кнопку для выбора статьи */}
-          <Box className="flex flex-col gap-2">
-            <label className="text-sm font-medium text-gray-700">
-              Обращение к пассажирам
-            </label>
-            <Box className="flex gap-2">
-              <TextField
-                className="flex-1"
-                value={selectedArticle?.heading || "Статья не выбрана"}
-                placeholder="Выберите статью"
-                disabled
-                sx={{
-                  "& .MuiInputBase-input": {
-                    color: selectedArticle ? "inherit" : "#999",
-                  },
-                }}
-              />
-              <Button
-                variant="outlined"
-                onClick={() => setIsSelectArticleDialogOpen(true)}
-                startIcon={<Plus size={16} />}
-                sx={{ minWidth: "auto", px: 2 }}
-              >
-                Выбрать
-              </Button>
-            </Box>
+          <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+            Обращение к пассажирам
+          </Typography>
+          <Box className="flex gap-2">
+            <TextField
+              className="flex-1"
+              value={selectedArticle?.heading || "Статья не выбрана"}
+              placeholder="Выберите статью"
+              disabled
+              fullWidth
+              sx={{
+                "& .MuiInputBase-input": {
+                  color: selectedArticle ? "inherit" : "#999",
+                },
+              }}
+            />
+            <Button
+              variant="outlined"
+              onClick={() => setIsSelectArticleDialogOpen(true)}
+              startIcon={<Plus size={16} />}
+              sx={{ minWidth: "auto", px: 2 }}
+            >
+              Выбрать
+            </Button>
           </Box>
 
-          {/* Селектор видеозаставки */}
-          <Box className="flex flex-col gap-2">
-            <label className="text-sm font-medium text-gray-700">
-              Видеозаставка
-            </label>
-            <Box className="flex gap-2">
-              <Box
-                className="flex-1"
-                onClick={handleVideoPreviewClick}
-                sx={{
-                  cursor:
-                    videoPreview && videoPreview !== "" ? "pointer" : "default",
-                }}
-              >
-                <Box
-                  className="w-full h-[50px] border border-gray-400 rounded-sm flex items-center justify-between px-4"
-                  sx={{
-                    "& .MuiInputBase-input": {
-                      color:
-                        videoPreview && videoPreview !== ""
-                          ? "inherit"
-                          : "#999",
-                      cursor:
-                        videoPreview && videoPreview !== ""
-                          ? "pointer"
-                          : "default",
-                    },
-                  }}
-                >
-                  <Typography variant="body1" className="text-sm">
-                    {videoPreview && videoPreview !== ""
-                      ? "Видео выбрано"
-                      : "Видео не выбрано"}
-                  </Typography>
-                  {videoPreview && videoPreview !== "" && (
-                    <Box
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setVideoPreview("");
-                      }}
-                      sx={{
-                        cursor: "pointer",
-                        color: "#999",
-                        "&:hover": {
-                          color: "#666",
-                        },
-                      }}
-                    >
-                      <Typography variant="body1" className="text-lg font-bold">
-                        ×
-                      </Typography>
-                    </Box>
-                  )}
-                </Box>
-              </Box>
-              <Button
-                variant="outlined"
-                onClick={() => setIsSelectVideoDialogOpen(true)}
-                startIcon={<Plus size={16} />}
-                sx={{ minWidth: "auto", px: 2 }}
-              >
-                Выбрать
-              </Button>
-            </Box>
-          </Box>
+          {/* Видео-превью как на странице редактирования */}
+          <VideoPreviewCard
+            title="Видеозаставка"
+            videoId={videoPreview}
+            onVideoClick={handleVideoPreviewClick}
+            onDeleteVideoClick={() => {
+              setVideoPreview("");
+            }}
+            onSelectVideoClick={handleVideoFileSelect}
+            className="w-full"
+          />
 
           <FormControl fullWidth required>
             <InputLabel>Прямой/обратный маршрут</InputLabel>
@@ -404,6 +383,7 @@ export const RouteCreatePage = observer(() => {
             value={scaleMax}
             onChange={(e) => setScaleMax(e.target.value)}
           />
+
           <TextField
             className="w-full"
             label="Поворот"
@@ -441,8 +421,8 @@ export const RouteCreatePage = observer(() => {
         </div>
       </div>
 
-      {/* Модальное окно выбора статьи */}
-      <SelectArticleModal
+      {/* Модальное окно выбора или создания статьи */}
+      <ArticleSelectOrCreateDialog
         open={isSelectArticleDialogOpen}
         onClose={() => setIsSelectArticleDialogOpen(false)}
         onSelectArticle={handleArticleSelect}
@@ -483,6 +463,20 @@ export const RouteCreatePage = observer(() => {
           </DialogActions>
         </Dialog>
       )}
+
+      {/* Модальное окно загрузки видео */}
+      <UploadMediaDialog
+        open={isUploadVideoDialogOpen}
+        onClose={() => {
+          setIsUploadVideoDialogOpen(false);
+          setFileToUpload(null);
+        }}
+        hardcodeType="video_preview"
+        contextObjectName={routeName || "Маршрут"}
+        contextType="sight"
+        initialFile={fileToUpload || undefined}
+        afterUpload={handleVideoUpload}
+      />
     </Paper>
   );
 });
diff --git a/src/pages/Route/RouteEditPage/index.tsx b/src/pages/Route/RouteEditPage/index.tsx
index 740699b..f13f0e8 100644
--- a/src/pages/Route/RouteEditPage/index.tsx
+++ b/src/pages/Route/RouteEditPage/index.tsx
@@ -13,7 +13,7 @@ import {
   DialogContent,
   DialogActions,
 } from "@mui/material";
-import { MediaViewer } from "@widgets";
+import { MediaViewer, VideoPreviewCard } from "@widgets";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Copy, Save, Plus } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -24,8 +24,9 @@ import { articlesStore } from "../../../shared/store/ArticlesStore";
 import {
   routeStore,
   languageStore,
-  SelectArticleModal,
+  ArticleSelectOrCreateDialog,
   SelectMediaDialog,
+  UploadMediaDialog,
 } from "@shared";
 import { toast } from "react-toastify";
 import { stationsStore } from "@shared";
@@ -40,6 +41,8 @@ export const RouteEditPage = observer(() => {
     useState(false);
   const [isSelectVideoDialogOpen, setIsSelectVideoDialogOpen] = useState(false);
   const [isVideoPreviewOpen, setIsVideoPreviewOpen] = useState(false);
+  const [isUploadVideoDialogOpen, setIsUploadVideoDialogOpen] = useState(false);
+  const [fileToUpload, setFileToUpload] = useState<File | null>(null);
   const { language } = languageStore;
   const [coordinates, setCoordinates] = useState<string>("");
 
@@ -125,6 +128,8 @@ export const RouteEditPage = observer(() => {
       governor_appeal: articleId,
     });
     setIsSelectArticleDialogOpen(false);
+    // Обновляем список статей после создания новой
+    articlesStore.getArticleList();
   };
 
   const handleVideoSelect = (media: {
@@ -139,6 +144,28 @@ export const RouteEditPage = observer(() => {
     setIsSelectVideoDialogOpen(false);
   };
 
+  const handleVideoFileSelect = (file?: File) => {
+    if (file) {
+      setFileToUpload(file);
+      setIsUploadVideoDialogOpen(true);
+    } else {
+      setIsSelectVideoDialogOpen(true);
+    }
+  };
+
+  const handleVideoUpload = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    routeStore.setEditRouteData({
+      video_preview: media.id,
+    });
+    setIsUploadVideoDialogOpen(false);
+    setFileToUpload(null);
+  };
+
   const handleVideoPreviewClick = () => {
     if (editRouteData.video_preview && editRouteData.video_preview !== "") {
       setIsVideoPreviewOpen(true);
@@ -164,6 +191,17 @@ export const RouteEditPage = observer(() => {
 
       <div className="flex flex-col gap-10 w-full items-end">
         <Box className="flex flex-col gap-6 w-full">
+          <TextField
+            className="w-full"
+            label="Название маршрута"
+            required
+            value={editRouteData.route_name || ""}
+            onChange={(e) =>
+              routeStore.setEditRouteData({
+                route_name: e.target.value,
+              })
+            }
+          />
           <FormControl fullWidth required>
             <InputLabel>Выберите перевозчика</InputLabel>
             <Select
@@ -279,110 +317,6 @@ export const RouteEditPage = observer(() => {
             }
           />
 
-          {/* Заменяем Select на кнопку для выбора статьи */}
-          <Box className="flex flex-col gap-2">
-            <label className="text-sm font-medium text-gray-700">
-              Обращение к пассажирам
-            </label>
-            <Box className="flex gap-2">
-              <TextField
-                className="flex-1"
-                value={selectedArticle?.heading || "Статья не выбрана"}
-                placeholder="Выберите статью"
-                disabled
-                sx={{
-                  "& .MuiInputBase-input": {
-                    color: selectedArticle ? "inherit" : "#999",
-                  },
-                }}
-              />
-              <Button
-                variant="outlined"
-                onClick={() => setIsSelectArticleDialogOpen(true)}
-                startIcon={<Plus size={16} />}
-                sx={{ minWidth: "auto", px: 2 }}
-              >
-                Выбрать
-              </Button>
-            </Box>
-          </Box>
-
-          {/* Селектор видеозаставки */}
-          <Box className="flex flex-col gap-2">
-            <label className="text-sm font-medium text-gray-700">
-              Видеозаставка
-            </label>
-            <Box className="flex gap-2">
-              <Box
-                className="flex-1"
-                onClick={handleVideoPreviewClick}
-                sx={{
-                  cursor:
-                    editRouteData.video_preview &&
-                    editRouteData.video_preview !== ""
-                      ? "pointer"
-                      : "default",
-                }}
-              >
-                <Box
-                  className="w-full h-[50px] border border-gray-400 rounded-sm flex items-center justify-between px-4"
-                  sx={{
-                    "& .MuiInputBase-input": {
-                      color:
-                        editRouteData.video_preview &&
-                        editRouteData.video_preview !== ""
-                          ? "inherit"
-                          : "#999",
-                      cursor:
-                        editRouteData.video_preview &&
-                        editRouteData.video_preview !== ""
-                          ? "pointer"
-                          : "default",
-                    },
-                  }}
-                >
-                  <Typography variant="body1" className="text-sm">
-                    {editRouteData.video_preview &&
-                    editRouteData.video_preview !== ""
-                      ? "Видео выбрано"
-                      : "Видео не выбрано"}
-                  </Typography>
-                  {editRouteData.video_preview &&
-                    editRouteData.video_preview !== "" && (
-                      <Box
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          routeStore.setEditRouteData({ video_preview: "" });
-                        }}
-                        sx={{
-                          cursor: "pointer",
-                          color: "#999",
-                          "&:hover": {
-                            color: "#666",
-                          },
-                        }}
-                      >
-                        <Typography
-                          variant="body1"
-                          className="text-lg font-bold"
-                        >
-                          ×
-                        </Typography>
-                      </Box>
-                    )}
-                </Box>
-              </Box>
-              <Button
-                variant="outlined"
-                onClick={() => setIsSelectVideoDialogOpen(true)}
-                startIcon={<Plus size={16} />}
-                sx={{ minWidth: "auto", px: 2 }}
-              >
-                Выбрать
-              </Button>
-            </Box>
-          </Box>
-
           <FormControl fullWidth required>
             <InputLabel>Прямой/обратный маршрут</InputLabel>
             <Select
@@ -453,6 +387,45 @@ export const RouteEditPage = observer(() => {
               })
             }
           />
+
+          <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+            Обращение к пассажирам
+          </Typography>
+          <Box className="flex gap-2">
+            <TextField
+              className="flex-1"
+              value={selectedArticle?.heading || "Статья не выбрана"}
+              placeholder="Выберите статью"
+              disabled
+              fullWidth
+              sx={{
+                "& .MuiInputBase-input": {
+                  color: selectedArticle ? "inherit" : "#999",
+                },
+              }}
+            />
+            <Button
+              variant="outlined"
+              onClick={() => setIsSelectArticleDialogOpen(true)}
+              startIcon={<Plus size={16} />}
+              sx={{ minWidth: "auto", px: 2 }}
+            >
+              Выбрать
+            </Button>
+          </Box>
+
+          {/* Правая часть - Видео (30%) */}
+
+          <VideoPreviewCard
+            title="Видеозаставка"
+            videoId={editRouteData.video_preview}
+            onVideoClick={handleVideoPreviewClick}
+            onDeleteVideoClick={() => {
+              routeStore.setEditRouteData({ video_preview: "" });
+            }}
+            onSelectVideoClick={handleVideoFileSelect}
+            className="w-full"
+          />
         </Box>
 
         <LinkedItems
@@ -494,8 +467,8 @@ export const RouteEditPage = observer(() => {
         </div>
       </div>
 
-      {/* Модальное окно выбора статьи */}
-      <SelectArticleModal
+      {/* Модальное окно выбора или создания статьи */}
+      <ArticleSelectOrCreateDialog
         open={isSelectArticleDialogOpen}
         onClose={() => setIsSelectArticleDialogOpen(false)}
         onSelectArticle={handleArticleSelect}
@@ -519,19 +492,35 @@ export const RouteEditPage = observer(() => {
         <DialogTitle>Предпросмотр видео</DialogTitle>
         <DialogContent>
           <Box className="flex justify-center items-center p-4">
-            <MediaViewer
-              media={{
-                id: editRouteData.video_preview,
-                media_type: 2,
-                filename: "video_preview",
-              }}
-            />
+            {editRouteData.video_preview && (
+              <MediaViewer
+                media={{
+                  id: editRouteData.video_preview,
+                  media_type: 2,
+                  filename: "video_preview",
+                }}
+              />
+            )}
           </Box>
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setIsVideoPreviewOpen(false)}>Закрыть</Button>
         </DialogActions>
       </Dialog>
+
+      {/* Модальное окно загрузки видео */}
+      <UploadMediaDialog
+        open={isUploadVideoDialogOpen}
+        onClose={() => {
+          setIsUploadVideoDialogOpen(false);
+          setFileToUpload(null);
+        }}
+        hardcodeType="video_preview"
+        contextObjectName={editRouteData.route_name || "Маршрут"}
+        contextType="sight"
+        initialFile={fileToUpload || undefined}
+        afterUpload={handleVideoUpload}
+      />
     </Paper>
   );
 });
diff --git a/src/pages/Route/RouteListPage/index.tsx b/src/pages/Route/RouteListPage/index.tsx
index 76257bd..a834a42 100644
--- a/src/pages/Route/RouteListPage/index.tsx
+++ b/src/pages/Route/RouteListPage/index.tsx
@@ -50,6 +50,22 @@ export const RouteListPage = observer(() => {
         );
       },
     },
+    {
+      field: "route_name",
+      headerName: "Название маршрута",
+      flex: 1,
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="w-full h-full flex items-center">
+            {params.value ? (
+              params.value
+            ) : (
+              <Minus size={20} className="text-red-500" />
+            )}
+          </div>
+        );
+      },
+    },
     {
       field: "route_number",
       headerName: "Номер маршрута",
@@ -122,6 +138,7 @@ export const RouteListPage = observer(() => {
     carrier_id: route.carrier_id,
     route_number: route.route_number,
     route_direction: route.route_direction ? "Прямой" : "Обратный",
+    route_name: route.route_name,
   }));
 
   return (
diff --git a/src/shared/modals/ArticleSelectOrCreateDialog/index.tsx b/src/shared/modals/ArticleSelectOrCreateDialog/index.tsx
new file mode 100644
index 0000000..5443351
--- /dev/null
+++ b/src/shared/modals/ArticleSelectOrCreateDialog/index.tsx
@@ -0,0 +1,1083 @@
+import {
+  articlesStore,
+  languageStore,
+  authInstance,
+  SelectMediaDialog,
+  UploadMediaDialog,
+  Language,
+} from "@shared";
+import { observer } from "mobx-react-lite";
+import { useEffect, useState } from "react";
+import { runInAction } from "mobx";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  List,
+  ListItemButton,
+  ListItemText,
+  Box,
+  Tabs,
+  Tab,
+  Typography,
+  InputAdornment,
+  Paper,
+} from "@mui/material";
+import { Search, Plus, ImagePlus, Save } from "lucide-react";
+import {
+  ReactMarkdownEditor,
+  ReactMarkdownComponent,
+  MediaViewer,
+  MediaArea,
+} from "@widgets";
+import { toast } from "react-toastify";
+
+interface ArticleSelectOrCreateDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSelectArticle: (articleId: number) => void;
+}
+
+export const ArticleSelectOrCreateDialog = observer(
+  ({ open, onClose, onSelectArticle }: ArticleSelectOrCreateDialogProps) => {
+    const { articles, getArticles, getArticle, getArticleMedia } =
+      articlesStore;
+    const [modalLanguage, setModalLanguage] = useState<Language>("ru");
+    const [searchQuery, setSearchQuery] = useState("");
+    const [tabValue, setTabValue] = useState(0);
+    const [isCreating, setIsCreating] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+
+    // Режим редактирования: если выбрана статья для редактирования
+    const [selectedArticleId, setSelectedArticleId] = useState<number | null>(
+      null
+    );
+    const [editedArticleData, setEditedArticleData] = useState({
+      ru: { heading: "", body: "" },
+      en: { heading: "", body: "" },
+      zh: { heading: "", body: "" },
+    });
+    const [editedArticleMedia, setEditedArticleMedia] = useState<
+      {
+        id: string;
+        filename: string;
+        media_type: number;
+      }[]
+    >([]);
+
+    // Состояния для создания новой статьи
+    const [newArticleData, setNewArticleData] = useState({
+      ru: { heading: "", body: "" },
+      en: { heading: "", body: "" },
+      zh: { heading: "", body: "" },
+    });
+    const [createdArticleMedia, setCreatedArticleMedia] = useState<
+      {
+        id: string;
+        filename: string;
+        media_name?: string;
+        media_type: number;
+      }[]
+    >([]);
+    const [tempArticleId, setTempArticleId] = useState<number | null>(null);
+
+    const [isUploadMediaDialogOpen, setIsUploadMediaDialogOpen] =
+      useState(false);
+    const [isSelectMediaDialogOpen, setIsSelectMediaDialogOpen] =
+      useState(false);
+    const [fileToUpload, setFileToUpload] = useState<File | null>(null);
+
+    // Определяем, редактируем ли мы существующую статью или создаем новую
+    const currentArticleId = selectedArticleId || tempArticleId;
+    const currentArticleData = selectedArticleId
+      ? editedArticleData
+      : newArticleData;
+    const currentMedia = selectedArticleId
+      ? editedArticleMedia
+      : createdArticleMedia;
+    // Режим редактирования: если выбрана статья или мы на вкладке создания
+    const isEditMode =
+      selectedArticleId !== null || tempArticleId !== null || tabValue === 1;
+
+    useEffect(() => {
+      if (open) {
+        // Начинаем всегда с русского в модалке
+        setModalLanguage("ru");
+        // Загружаем списки статей для всех языков локально для модалки
+        (async () => {
+          await Promise.all([
+            getArticles("ru"),
+            getArticles("en"),
+            getArticles("zh"),
+          ]);
+        })();
+        setSearchQuery("");
+        setTabValue(0);
+        setIsCreating(false);
+        setIsSaving(false);
+        setSelectedArticleId(null);
+        setTempArticleId(null);
+        setEditedArticleData({
+          ru: { heading: "", body: "" },
+          en: { heading: "", body: "" },
+          zh: { heading: "", body: "" },
+        });
+        setNewArticleData({
+          ru: { heading: "", body: "" },
+          en: { heading: "", body: "" },
+          zh: { heading: "", body: "" },
+        });
+        setEditedArticleMedia([]);
+        setCreatedArticleMedia([]);
+      }
+    }, [open, getArticles]);
+
+    // При закрытии модалки возвращаем глобальный язык в 'ru'
+    useEffect(() => {
+      if (!open) {
+        languageStore.setLanguage("ru");
+      }
+    }, [open]);
+
+    // Загрузка статьи для редактирования
+    const loadArticleForEdit = async (articleId: number) => {
+      try {
+        const [ruArticle, enArticle, zhArticle, mediaResponse] =
+          await Promise.all([
+            articlesStore.getArticle(articleId, "ru"),
+            articlesStore.getArticle(articleId, "en"),
+            articlesStore.getArticle(articleId, "zh"),
+            authInstance.get(`/article/${articleId}/media`),
+          ]);
+
+        setEditedArticleData({
+          ru: {
+            heading: ruArticle.data.heading,
+            body: ruArticle.data.body,
+          },
+          en: {
+            heading: enArticle.data.heading,
+            body: enArticle.data.body,
+          },
+          zh: {
+            heading: zhArticle.data.heading,
+            body: zhArticle.data.body,
+          },
+        });
+
+        setEditedArticleMedia(
+          (mediaResponse.data || []).map((m: any) => ({
+            id: m.id,
+            filename: m.filename,
+            media_type: m.media_type,
+          }))
+        );
+
+        setSelectedArticleId(articleId);
+        await getArticleMedia(articleId);
+      } catch (error) {
+        console.error("Error loading article:", error);
+        toast.error("Ошибка при загрузке статьи");
+      }
+    };
+
+    const handleArticleSelect = async (articleId: number) => {
+      await loadArticleForEdit(articleId);
+    };
+
+    const handleSaveArticle = async () => {
+      if (!currentArticleId) return;
+
+      try {
+        setIsSaving(true);
+        await authInstance.patch(`/article/${currentArticleId}`, {
+          translations: {
+            heading: {
+              ru: currentArticleData.ru.heading,
+              en: currentArticleData.en.heading,
+              zh: currentArticleData.zh.heading,
+            },
+            body: {
+              ru: currentArticleData.ru.body,
+              en: currentArticleData.en.body,
+              zh: currentArticleData.zh.body,
+            },
+          },
+        });
+
+        // Обновляем данные статьи
+        await loadArticleForEdit(currentArticleId);
+
+        toast.success("Статья успешно сохранена");
+      } catch (error) {
+        console.error("Error saving article:", error);
+        toast.error("Ошибка при сохранении статьи");
+      } finally {
+        setIsSaving(false);
+      }
+    };
+
+    const handleSelectAndClose = () => {
+      if (currentArticleId) {
+        onSelectArticle(currentArticleId);
+        onClose();
+      }
+    };
+
+    const handleCreateArticle = async () => {
+      try {
+        setIsCreating(true);
+
+        const hasData = Object.values(newArticleData).some(
+          (langData) => langData.heading.trim() || langData.body.trim()
+        );
+
+        if (!hasData) {
+          toast.error("Заполните хотя бы одно поле для любого языка");
+          setIsCreating(false);
+          return;
+        }
+
+        const response = await authInstance.post("/article", {
+          translations: {
+            heading: {
+              ru: newArticleData.ru.heading || "Новый заголовок (RU)",
+              en: newArticleData.en.heading || "New Heading (EN)",
+              zh: newArticleData.zh.heading || "Новый заголовок (ZH)",
+            },
+            body: {
+              ru: newArticleData.ru.body || "Новый текст (RU)",
+              en: newArticleData.en.body || "New Text (EN)",
+              zh: newArticleData.zh.body || "Новый текст (ZH)",
+            },
+          },
+        });
+
+        const { id } = response.data;
+        setTempArticleId(id);
+
+        // Обновляем кэш статей сразу после создания
+        const ruHeading = newArticleData.ru.heading || "Новый заголовок (RU)";
+        const enHeading = newArticleData.en.heading || "New Heading (EN)";
+        const zhHeading = newArticleData.zh.heading || "Новый заголовок (ZH)";
+        const ruBody = newArticleData.ru.body || "Новый текст (RU)";
+        const enBody = newArticleData.en.body || "New Text (EN)";
+        const zhBody = newArticleData.zh.body || "Новый текст (ZH)";
+
+        runInAction(() => {
+          // articleList используется в списке выбора — обновляем его
+          articlesStore.articleList.ru.data.unshift({
+            id,
+            heading: ruHeading,
+            body: ruBody,
+            service_name: ruHeading,
+          } as any);
+          articlesStore.articleList.en.data.unshift({
+            id,
+            heading: enHeading,
+            body: enBody,
+            service_name: enHeading,
+          } as any);
+          articlesStore.articleList.zh.data.unshift({
+            id,
+            heading: zhHeading,
+            body: zhBody,
+            service_name: zhHeading,
+          } as any);
+
+          // помечаем как загруженные, чтобы не перезатирать свежие данные
+          articlesStore.articleList.ru.loaded = true;
+          articlesStore.articleList.en.loaded = true;
+          articlesStore.articleList.zh.loaded = true;
+
+          // Также поддержим общий список articles, если он где-то используется
+          if (articlesStore.articles) {
+            articlesStore.articles.ru.unshift({
+              id,
+              heading: ruHeading,
+              body: ruBody,
+              service_name: ruHeading,
+            } as any);
+            articlesStore.articles.en.unshift({
+              id,
+              heading: enHeading,
+              body: enBody,
+              service_name: enHeading,
+            } as any);
+            articlesStore.articles.zh.unshift({
+              id,
+              heading: zhHeading,
+              body: zhBody,
+              service_name: zhHeading,
+            } as any);
+          }
+        });
+
+        if (createdArticleMedia.length > 0) {
+          try {
+            for (let i = 0; i < createdArticleMedia.length; i++) {
+              await authInstance.post(`/article/${id}/media`, {
+                media_id: createdArticleMedia[i].id,
+                media_order: i + 1,
+              });
+            }
+          } catch (error) {
+            console.error("Error linking media:", error);
+            toast.warning(
+              "Статья создана, но не удалось добавить некоторые медиа"
+            );
+          }
+        }
+
+        // Загружаем медиа статьи
+        const mediaResponse = await authInstance.get(`/article/${id}/media`);
+        if (mediaResponse.data && mediaResponse.data.length > 0) {
+          setCreatedArticleMedia(
+            mediaResponse.data.map((m: any) => ({
+              id: m.id,
+              filename: m.filename,
+              media_name: m.media_name,
+              media_type: m.media_type,
+            }))
+          );
+        }
+
+        await getArticle(id);
+        await getArticleMedia(id);
+
+        toast.success("Статья успешно создана");
+
+        // Сразу выбираем созданную статью как активную и закрываем диалог
+        onSelectArticle(id);
+        onClose();
+      } catch (error) {
+        console.error("Error creating article:", error);
+        toast.error("Ошибка при создании статьи");
+      } finally {
+        setIsCreating(false);
+      }
+    };
+
+    const handleMediaSelect = async (media: {
+      id: string;
+      filename: string;
+      media_name?: string;
+      media_type: number;
+    }) => {
+      if (!currentArticleId) {
+        if (tabValue === 1) {
+          setCreatedArticleMedia((prev) => [...prev, media]);
+        }
+        setIsSelectMediaDialogOpen(false);
+        return;
+      }
+
+      try {
+        const currentMediaCount = currentMedia.length;
+        await authInstance.post(`/article/${currentArticleId}/media`, {
+          media_id: media.id,
+          media_order: currentMediaCount + 1,
+        });
+
+        const mediaResponse = await authInstance.get(
+          `/article/${currentArticleId}/media`
+        );
+        const mediaList = mediaResponse.data.map((m: any) => ({
+          id: m.id,
+          filename: m.filename,
+          media_type: m.media_type,
+        }));
+
+        if (selectedArticleId) {
+          setEditedArticleMedia(mediaList);
+        } else {
+          setCreatedArticleMedia(
+            mediaResponse.data.map((m: any) => ({
+              id: m.id,
+              filename: m.filename,
+              media_name: m.media_name,
+              media_type: m.media_type,
+            }))
+          );
+        }
+      } catch (error) {
+        console.error("Error linking media:", error);
+        toast.error("Ошибка при добавлении медиа");
+      }
+      setIsSelectMediaDialogOpen(false);
+    };
+
+    const handleDeleteMedia = async (mediaId: string) => {
+      if (!currentArticleId) {
+        if (tabValue === 1) {
+          setCreatedArticleMedia((prev) =>
+            prev.filter((m) => m.id !== mediaId)
+          );
+        }
+        return;
+      }
+
+      try {
+        await authInstance.delete(
+          `/article/${currentArticleId}/media/${mediaId}`
+        );
+        const response = await authInstance.get(
+          `/article/${currentArticleId}/media`
+        );
+        const mediaList = response.data.map((m: any) => ({
+          id: m.id,
+          filename: m.filename,
+          media_type: m.media_type,
+        }));
+
+        if (selectedArticleId) {
+          setEditedArticleMedia(mediaList);
+        } else {
+          setCreatedArticleMedia(
+            response.data.map((m: any) => ({
+              id: m.id,
+              filename: m.filename,
+              media_name: m.media_name,
+              media_type: m.media_type,
+            }))
+          );
+        }
+      } catch (error) {
+        console.error("Error deleting media:", error);
+        toast.error("Ошибка при удалении медиа");
+      }
+    };
+
+    const handleMediaFilesDrop = (files: File[]) => {
+      if (files.length > 0) {
+        setFileToUpload(files[0]);
+        setIsUploadMediaDialogOpen(true);
+      }
+    };
+
+    const handleMediaUpload = async (media: {
+      id: string;
+      filename: string;
+      media_name?: string;
+      media_type: number;
+    }) => {
+      if (!currentArticleId) {
+        await handleMediaSelect(media);
+        return;
+      }
+
+      try {
+        const currentMediaCount = currentMedia.length;
+        await authInstance.post(`/article/${currentArticleId}/media`, {
+          media_id: media.id,
+          media_order: currentMediaCount + 1,
+        });
+
+        const mediaResponse = await authInstance.get(
+          `/article/${currentArticleId}/media`
+        );
+        const mediaList = mediaResponse.data.map((m: any) => ({
+          id: m.id,
+          filename: m.filename,
+          media_type: m.media_type,
+        }));
+
+        if (selectedArticleId) {
+          setEditedArticleMedia(mediaList);
+        } else {
+          setCreatedArticleMedia(
+            mediaResponse.data.map((m: any) => ({
+              id: m.id,
+              filename: m.filename,
+              media_name: m.media_name,
+              media_type: m.media_type,
+            }))
+          );
+        }
+      } catch (error) {
+        console.error("Error linking media:", error);
+        toast.error("Ошибка при добавлении медиа");
+      }
+      setIsUploadMediaDialogOpen(false);
+      setFileToUpload(null);
+    };
+
+    const handleBack = () => {
+      if (selectedArticleId) {
+        setSelectedArticleId(null);
+        setEditedArticleData({
+          ru: { heading: "", body: "" },
+          en: { heading: "", body: "" },
+          zh: { heading: "", body: "" },
+        });
+        setEditedArticleMedia([]);
+      } else if (tempArticleId) {
+        setTempArticleId(null);
+        setNewArticleData({
+          ru: { heading: "", body: "" },
+          en: { heading: "", body: "" },
+          zh: { heading: "", body: "" },
+        });
+        setCreatedArticleMedia([]);
+        setTabValue(0);
+      } else if (tabValue === 1) {
+        setTabValue(0);
+        setNewArticleData({
+          ru: { heading: "", body: "" },
+          en: { heading: "", body: "" },
+          zh: { heading: "", body: "" },
+        });
+        setCreatedArticleMedia([]);
+      }
+      // При нажатии «Назад» переключаем язык модалки и глобальный язык в RU
+      setModalLanguage("ru");
+      languageStore.setLanguage("ru");
+    };
+
+    const filteredArticles = articles[modalLanguage].filter((article) =>
+      article?.service_name?.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    // Ховер-предпросмотр для списка статей
+    const [hoveredArticleId, setHoveredArticleId] = useState<string | null>(
+      null
+    );
+    const hoverTimerRef = (typeof window !== "undefined"
+      ? (window as any)
+      : {}) as {
+      current?: any;
+    } as React.MutableRefObject<NodeJS.Timeout | null>;
+    if (hoverTimerRef.current === undefined) {
+      (hoverTimerRef as any).current = null;
+    }
+    useEffect(() => {
+      if (
+        hoveredArticleId &&
+        tabValue === 0 &&
+        !selectedArticleId &&
+        !tempArticleId
+      ) {
+        if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+        hoverTimerRef.current = setTimeout(() => {
+          getArticle(Number(hoveredArticleId), modalLanguage);
+          getArticleMedia(Number(hoveredArticleId));
+        }, 200);
+      }
+      return () => {
+        if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+      };
+    }, [
+      hoveredArticleId,
+      tabValue,
+      selectedArticleId,
+      tempArticleId,
+      modalLanguage,
+      getArticle,
+      getArticleMedia,
+    ]);
+
+    // Данные для предпросмотра
+    const previewData = {
+      heading: currentArticleData[modalLanguage].heading || "",
+      body: currentArticleData[modalLanguage].body || "",
+    };
+
+    const previewMedia =
+      currentMedia.length > 0
+        ? {
+            id: currentMedia[0].id,
+            media_type: currentMedia[0].media_type,
+            filename: currentMedia[0].filename,
+          }
+        : null;
+
+    // Данные предпросмотра для режима выбора (по ховеру)
+    const selectionPreviewHeading =
+      (articlesStore.articleData as any)?.[modalLanguage]?.heading ||
+      (articlesStore.articleData as any)?.heading ||
+      "";
+    const selectionPreviewBody =
+      (articlesStore.articleData as any)?.[modalLanguage]?.body ||
+      (articlesStore.articleData as any)?.body ||
+      "";
+
+    return (
+      <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
+        <DialogTitle>
+          {tabValue === 0 && !isEditMode
+            ? "Выберите существующую статью"
+            : selectedArticleId
+            ? "Редактирование статьи"
+            : "Создать новую статью"}
+        </DialogTitle>
+        <DialogContent
+          dividers
+          sx={{ height: "600px", display: "flex", flexDirection: "column" }}
+        >
+          {tabValue === 0 && !isEditMode ? (
+            <>
+              <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 2 }}>
+                <Tabs
+                  value={tabValue}
+                  onChange={(_e, newValue) => setTabValue(newValue)}
+                >
+                  <Tab label="Выбрать существующую" />
+                  <Tab label="Создать новую" />
+                </Tabs>
+              </Box>
+
+              <Box
+                sx={{ display: "flex", gap: 2, flex: 1, overflow: "hidden" }}
+              >
+                {/* Левая часть - список */}
+                <Paper className="w-[66%] flex flex-col">
+                  <Box
+                    sx={{
+                      p: 2,
+                      display: "flex",
+                      flexDirection: "column",
+                      flex: 1,
+                      overflow: "hidden",
+                    }}
+                  >
+                    <TextField
+                      fullWidth
+                      placeholder="Поиск статей..."
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      sx={{ mb: 2 }}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <Search size={20} />
+                          </InputAdornment>
+                        ),
+                      }}
+                    />
+                    <List
+                      sx={{
+                        flexGrow: 1,
+                        overflowY: "auto",
+                        border: "1px solid",
+                        borderColor: "divider",
+                        borderRadius: 1,
+                      }}
+                    >
+                      {filteredArticles.length === 0 ? (
+                        <Box sx={{ p: 2, textAlign: "center" }}>
+                          <Typography variant="body2" color="text.secondary">
+                            {searchQuery
+                              ? "Статьи не найдены"
+                              : "Нет доступных статей"}
+                          </Typography>
+                        </Box>
+                      ) : (
+                        filteredArticles.map((article) => (
+                          <ListItemButton
+                            key={article.id}
+                            onClick={() => handleArticleSelect(article.id)}
+                            onMouseEnter={() =>
+                              setHoveredArticleId(article.id.toString())
+                            }
+                            onMouseLeave={() => setHoveredArticleId(null)}
+                            sx={{
+                              borderRadius: 1,
+                              mb: 0.5,
+                              "&:hover": {
+                                backgroundColor: "action.hover",
+                              },
+                            }}
+                          >
+                            <ListItemText primary={article.service_name} />
+                          </ListItemButton>
+                        ))
+                      )}
+                    </List>
+                  </Box>
+                </Paper>
+
+                {/* Правая часть - предпросмотр */}
+                <Paper
+                  elevation={3}
+                  sx={{
+                    flex: 1,
+                    maxWidth: "320px",
+                    background:
+                      "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
+                    overflowY: "auto",
+                    display: "flex",
+                    flexDirection: "column",
+                    borderRadius: "10px",
+                  }}
+                >
+                  <Box
+                    sx={{
+                      overflow: "hidden",
+                      width: "100%",
+                      minHeight: 100,
+                      padding: "3px",
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      "& img": {
+                        borderTopLeftRadius: "10px",
+                        borderTopRightRadius: "10px",
+                        width: "100%",
+                        height: "auto",
+                        objectFit: "contain",
+                      },
+                    }}
+                  >
+                    {tabValue === 0 && !isEditMode ? (
+                      articlesStore.articleMedia ? (
+                        <MediaViewer
+                          media={articlesStore.articleMedia}
+                          fullWidth
+                        />
+                      ) : (
+                        <ImagePlus size={48} color="white" />
+                      )
+                    ) : previewMedia ? (
+                      <MediaViewer media={previewMedia} fullWidth />
+                    ) : (
+                      <ImagePlus size={48} color="white" />
+                    )}
+                  </Box>
+
+                  <Box
+                    sx={{
+                      background:
+                        "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
+                      color: "white",
+                      margin: "5px 0px 5px 0px",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 1,
+                      padding: 1,
+                    }}
+                  >
+                    <Typography
+                      variant="h5"
+                      component="h2"
+                      sx={{
+                        wordBreak: "break-word",
+                        fontSize: "24px",
+                        fontWeight: 700,
+                        lineHeight: "120%",
+                      }}
+                    >
+                      {tabValue === 0 && !isEditMode
+                        ? selectionPreviewHeading || "Название информации"
+                        : previewData.heading || "Название информации"}
+                    </Typography>
+                  </Box>
+
+                  {(tabValue === 0 && !isEditMode
+                    ? selectionPreviewBody
+                    : previewData.body) && (
+                    <Box
+                      sx={{
+                        padding: 1,
+                        maxHeight: "300px",
+                        overflowY: "auto",
+                        width: "100%",
+                        "&::-webkit-scrollbar": {
+                          display: "none",
+                        },
+                        "&": {
+                          scrollbarWidth: "none",
+                        },
+                        background:
+                          "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
+                        flexGrow: 1,
+                      }}
+                    >
+                      <ReactMarkdownComponent
+                        value={
+                          tabValue === 0 && !isEditMode
+                            ? selectionPreviewBody
+                            : previewData.body
+                        }
+                      />
+                    </Box>
+                  )}
+                </Paper>
+              </Box>
+            </>
+          ) : (
+            // Режим редактирования или создания - в стиле LeftWidgetTab
+            <Box
+              sx={{
+                display: "flex",
+                gap: 3,
+                flex: 1,
+                overflow: "hidden",
+                position: "relative",
+              }}
+            >
+              <Box
+                sx={{
+                  flex: 2,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 2,
+                  overflow: "auto",
+                  position: "relative",
+                  paddingBottom: "60px",
+                }}
+              >
+                <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+                  <Tabs
+                    value={modalLanguage}
+                    onChange={(_e, newValue) => setModalLanguage(newValue)}
+                  >
+                    <Tab label="Русский" value="ru" />
+                    <Tab label="English" value="en" />
+                    <Tab label="中文" value="zh" />
+                  </Tabs>
+                </Box>
+
+                <TextField
+                  label="Название информации"
+                  value={currentArticleData[modalLanguage].heading}
+                  onChange={(e) => {
+                    if (selectedArticleId) {
+                      setEditedArticleData({
+                        ...editedArticleData,
+                        [modalLanguage]: {
+                          ...editedArticleData[modalLanguage],
+                          heading: e.target.value,
+                        },
+                      });
+                    } else {
+                      setNewArticleData({
+                        ...newArticleData,
+                        [modalLanguage]: {
+                          ...newArticleData[modalLanguage],
+                          heading: e.target.value,
+                        },
+                      });
+                    }
+                  }}
+                  variant="outlined"
+                  fullWidth
+                />
+
+                <ReactMarkdownEditor
+                  value={currentArticleData[modalLanguage].body}
+                  onChange={(value: any) => {
+                    if (selectedArticleId) {
+                      setEditedArticleData({
+                        ...editedArticleData,
+                        [modalLanguage]: {
+                          ...editedArticleData[modalLanguage],
+                          body: value,
+                        },
+                      });
+                    } else {
+                      setNewArticleData({
+                        ...newArticleData,
+                        [modalLanguage]: {
+                          ...newArticleData[modalLanguage],
+                          body: value,
+                        },
+                      });
+                    }
+                  }}
+                />
+
+                {/* MediaArea - используем для всех случаев, с фиктивным articleId для создания */}
+                <MediaArea
+                  articleId={currentArticleId || 0}
+                  mediaIds={currentMedia}
+                  deleteMedia={(_articleId, mediaId) =>
+                    handleDeleteMedia(mediaId)
+                  }
+                  setSelectMediaDialogOpen={setIsSelectMediaDialogOpen}
+                  onFilesDrop={handleMediaFilesDrop}
+                />
+              </Box>
+
+              <Box
+                sx={{
+                  flex: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  maxWidth: "320px",
+                  gap: 0.5,
+                }}
+              >
+                <Paper
+                  elevation={3}
+                  sx={{
+                    width: "100%",
+                    minWidth: 320,
+                    background:
+                      "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
+                    overflowY: "auto",
+                    display: "flex",
+                    flexDirection: "column",
+                    borderRadius: "10px",
+                  }}
+                >
+                  <Box
+                    sx={{
+                      overflow: "hidden",
+                      width: "100%",
+                      minHeight: 100,
+                      padding: "3px",
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      "& img": {
+                        borderTopLeftRadius: "10px",
+                        borderTopRightRadius: "10px",
+                        width: "100%",
+                        height: "auto",
+                        objectFit: "contain",
+                      },
+                    }}
+                  >
+                    {previewMedia ? (
+                      <MediaViewer media={previewMedia} fullWidth />
+                    ) : (
+                      <ImagePlus size={48} color="white" />
+                    )}
+                  </Box>
+
+                  <Box
+                    sx={{
+                      background:
+                        "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
+                      color: "white",
+                      margin: "5px 0px 5px 0px",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 1,
+                      padding: 1,
+                    }}
+                  >
+                    <Typography
+                      variant="h5"
+                      component="h2"
+                      sx={{
+                        wordBreak: "break-word",
+                        fontSize: "24px",
+                        fontWeight: 700,
+                        lineHeight: "120%",
+                      }}
+                    >
+                      {previewData.heading || "Название информации"}
+                    </Typography>
+                  </Box>
+
+                  {previewData.body && (
+                    <Box
+                      sx={{
+                        padding: 1,
+                        maxHeight: "300px",
+                        overflowY: "auto",
+                        width: "100%",
+                        "&::-webkit-scrollbar": {
+                          display: "none",
+                        },
+                        "&": {
+                          scrollbarWidth: "none",
+                        },
+                        background:
+                          "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
+                        flexGrow: 1,
+                      }}
+                    >
+                      <ReactMarkdownComponent value={previewData.body} />
+                    </Box>
+                  )}
+                </Paper>
+              </Box>
+            </Box>
+          )}
+        </DialogContent>
+        <DialogActions>
+          {!(tabValue === 0 && !isEditMode) && (
+            <Button onClick={handleBack} sx={{ mr: "auto" }}>
+              Назад
+            </Button>
+          )}
+          <Button
+            onClick={() => {
+              languageStore.setLanguage("ru");
+              onClose();
+            }}
+          >
+            Отмена
+          </Button>
+
+          {/* Кнопка создания - только если мы на вкладке создания и статья еще не создана */}
+          {tabValue === 1 && !tempArticleId && !selectedArticleId && (
+            <Button
+              variant="contained"
+              onClick={handleCreateArticle}
+              disabled={isCreating}
+              startIcon={<Plus size={16} />}
+            >
+              {isCreating ? "Создание..." : "Создать статью"}
+            </Button>
+          )}
+          {/* Кнопки для редактирования - если статья создана или выбрана */}
+          {(tempArticleId || selectedArticleId) && (
+            <>
+              {selectedArticleId && (
+                <Button
+                  variant="outlined"
+                  onClick={handleSaveArticle}
+                  disabled={isSaving}
+                  startIcon={<Save size={16} />}
+                >
+                  Сохранить
+                </Button>
+              )}
+              <Button
+                variant="contained"
+                onClick={() => {
+                  // Выбираем текущую и возвращаем язык в RU
+                  handleSelectAndClose();
+                  languageStore.setLanguage("ru");
+                }}
+                startIcon={<Plus size={16} />}
+              >
+                Выбрать и закрыть
+              </Button>
+            </>
+          )}
+        </DialogActions>
+
+        {/* Модальное окно выбора медиа */}
+        <SelectMediaDialog
+          open={isSelectMediaDialogOpen}
+          onClose={() => setIsSelectMediaDialogOpen(false)}
+          onSelectMedia={handleMediaSelect}
+        />
+
+        {/* Модальное окно загрузки медиа */}
+        <UploadMediaDialog
+          open={isUploadMediaDialogOpen}
+          onClose={() => {
+            setIsUploadMediaDialogOpen(false);
+            setFileToUpload(null);
+          }}
+          contextObjectName="Статья"
+          contextType="sight"
+          isArticle={true}
+          articleName={currentArticleData[modalLanguage].heading || "Статья"}
+          initialFile={fileToUpload || undefined}
+          afterUpload={handleMediaUpload}
+        />
+      </Dialog>
+    );
+  }
+);
diff --git a/src/shared/modals/index.ts b/src/shared/modals/index.ts
index 378cd4f..727e729 100644
--- a/src/shared/modals/index.ts
+++ b/src/shared/modals/index.ts
@@ -2,3 +2,4 @@ export * from "./SelectArticleDialog";
 export * from "./SelectMediaDialog";
 export * from "./PreviewMediaDialog";
 export * from "./UploadMediaDialog";
+export * from "./ArticleSelectOrCreateDialog";
diff --git a/src/shared/store/RouteStore/index.ts b/src/shared/store/RouteStore/index.ts
index 9d7ec59..c73db39 100644
--- a/src/shared/store/RouteStore/index.ts
+++ b/src/shared/store/RouteStore/index.ts
@@ -2,6 +2,7 @@ import { makeAutoObservable, runInAction } from "mobx";
 import { authInstance } from "@shared";
 
 export type Route = {
+  route_name: string;
   carrier: string;
   carrier_id: number;
   center_latitude: number;
@@ -97,6 +98,7 @@ class RouteStore {
   };
 
   editRouteData = {
+    route_name: "",
     carrier: "",
     carrier_id: 0,
     center_latitude: "",
@@ -110,7 +112,7 @@ class RouteStore {
     route_sys_number: "",
     scale_max: 0,
     scale_min: 0,
-    video_preview: "",
+    video_preview: "" as string | undefined,
   };
 
   setEditRouteData = (data: any) => {
@@ -118,6 +120,9 @@ class RouteStore {
   };
 
   editRoute = async (id: number) => {
+    if (!this.editRouteData.video_preview) {
+      delete this.editRouteData.video_preview;
+    }
     const response = await authInstance.patch(`/route/${id}`, {
       ...this.editRouteData,
       center_latitude: parseFloat(this.editRouteData.center_latitude),
diff --git a/src/widgets/VideoPreviewCard/index.tsx b/src/widgets/VideoPreviewCard/index.tsx
index 416ebad..a103a7d 100644
--- a/src/widgets/VideoPreviewCard/index.tsx
+++ b/src/widgets/VideoPreviewCard/index.tsx
@@ -11,6 +11,7 @@ interface VideoPreviewCardProps {
   onDeleteVideoClick: () => void;
   onSelectVideoClick: (file?: File) => void;
   tooltipText?: string;
+  className?: string;
 }
 
 export const VideoPreviewCard: React.FC<VideoPreviewCardProps> = ({
@@ -20,6 +21,7 @@ export const VideoPreviewCard: React.FC<VideoPreviewCardProps> = ({
   onDeleteVideoClick,
   onSelectVideoClick,
   tooltipText,
+  className,
 }) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isDragOver, setIsDragOver] = useState(false);
@@ -89,7 +91,10 @@ export const VideoPreviewCard: React.FC<VideoPreviewCardProps> = ({
         gap: 1,
         flex: 1,
         minWidth: 150,
+        width: "min-content",
+        mx: "auto",
       }}
+      className={className}
     >
       <Box sx={{ display: "flex", alignItems: "center" }}>
         <Typography variant="subtitle2" gutterBottom sx={{ mb: 0, mr: 0.5 }}>
@@ -127,7 +132,10 @@ export const VideoPreviewCard: React.FC<VideoPreviewCardProps> = ({
           </button>
         )}
         {videoId ? (
-          <Box sx={{ position: "relative", width: "100%", height: "100%" }}>
+          <Box
+            sx={{ position: "relative", width: "100%", height: "100%" }}
+            className={className}
+          >
             <video
               src={`${
                 import.meta.env.VITE_KRBL_MEDIA
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
index eba01f6..6b1027c 100644
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/globalerrorboundary.tsx","./src/app/index.tsx","./src/app/router/index.tsx","./src/entities/index.ts","./src/entities/navigation/index.ts","./src/entities/navigation/model/index.ts","./src/entities/navigation/ui/index.tsx","./src/features/index.ts","./src/features/navigation/index.ts","./src/features/navigation/ui/index.tsx","./src/pages/index.ts","./src/pages/article/index.ts","./src/pages/article/articlecreatepage/index.tsx","./src/pages/article/articleeditpage/index.tsx","./src/pages/article/articlelistpage/index.tsx","./src/pages/article/articlepreviewpage/previewleftwidget.tsx","./src/pages/article/articlepreviewpage/previewrightwidget.tsx","./src/pages/article/articlepreviewpage/index.tsx","./src/pages/carrier/index.ts","./src/pages/carrier/carriercreatepage/index.tsx","./src/pages/carrier/carriereditpage/index.tsx","./src/pages/carrier/carrierlistpage/index.tsx","./src/pages/city/index.ts","./src/pages/city/citycreatepage/index.tsx","./src/pages/city/cityeditpage/index.tsx","./src/pages/city/citylistpage/index.tsx","./src/pages/city/citypreviewpage/index.tsx","./src/pages/country/index.ts","./src/pages/country/countryaddpage/index.tsx","./src/pages/country/countrycreatepage/index.tsx","./src/pages/country/countryeditpage/index.tsx","./src/pages/country/countrylistpage/index.tsx","./src/pages/country/countrypreviewpage/index.tsx","./src/pages/createsightpage/index.tsx","./src/pages/devicespage/index.tsx","./src/pages/editsightpage/index.tsx","./src/pages/loginpage/index.tsx","./src/pages/mainpage/index.tsx","./src/pages/mappage/index.tsx","./src/pages/mappage/mapstore.ts","./src/pages/media/index.ts","./src/pages/media/mediacreatepage/index.tsx","./src/pages/media/mediaeditpage/index.tsx","./src/pages/media/medialistpage/index.tsx","./src/pages/media/mediapreviewpage/index.tsx","./src/pages/route/linekedstations.tsx","./src/pages/route/index.ts","./src/pages/route/routecreatepage/index.tsx","./src/pages/route/routeeditpage/index.tsx","./src/pages/route/routelistpage/index.tsx","./src/pages/route/route-preview/constants.ts","./src/pages/route/route-preview/infinitecanvas.tsx","./src/pages/route/route-preview/leftsidebar.tsx","./src/pages/route/route-preview/mapdatacontext.tsx","./src/pages/route/route-preview/rightsidebar.tsx","./src/pages/route/route-preview/sight.tsx","./src/pages/route/route-preview/sightinfowidget.tsx","./src/pages/route/route-preview/station.tsx","./src/pages/route/route-preview/transformcontext.tsx","./src/pages/route/route-preview/travelpath.tsx","./src/pages/route/route-preview/widgets.tsx","./src/pages/route/route-preview/index.tsx","./src/pages/route/route-preview/types.ts","./src/pages/route/route-preview/utils.ts","./src/pages/sight/index.ts","./src/pages/sight/sightlistpage/index.tsx","./src/pages/sightpage/index.tsx","./src/pages/snapshot/index.ts","./src/pages/snapshot/snapshotcreatepage/index.tsx","./src/pages/snapshot/snapshotlistpage/index.tsx","./src/pages/station/linkedsights.tsx","./src/pages/station/index.ts","./src/pages/station/stationcreatepage/index.tsx","./src/pages/station/stationeditpage/index.tsx","./src/pages/station/stationlistpage/index.tsx","./src/pages/station/stationpreviewpage/index.tsx","./src/pages/user/index.ts","./src/pages/user/usercreatepage/index.tsx","./src/pages/user/usereditpage/index.tsx","./src/pages/user/userlistpage/index.tsx","./src/pages/vehicle/index.ts","./src/pages/vehicle/vehiclecreatepage/index.tsx","./src/pages/vehicle/vehicleeditpage/index.tsx","./src/pages/vehicle/vehiclelistpage/index.tsx","./src/pages/vehicle/vehiclepreviewpage/index.tsx","./src/shared/index.tsx","./src/shared/api/index.tsx","./src/shared/config/constants.tsx","./src/shared/config/index.ts","./src/shared/const/index.ts","./src/shared/const/mediatypes.ts","./src/shared/hooks/index.ts","./src/shared/hooks/useselectedcity.ts","./src/shared/lib/gltfcachemanager.ts","./src/shared/lib/index.ts","./src/shared/lib/decodejwt/index.ts","./src/shared/lib/mui/theme.ts","./src/shared/modals/index.ts","./src/shared/modals/previewmediadialog/index.tsx","./src/shared/modals/selectarticledialog/index.tsx","./src/shared/modals/selectmediadialog/index.tsx","./src/shared/modals/uploadmediadialog/index.tsx","./src/shared/store/index.ts","./src/shared/store/articlesstore/index.tsx","./src/shared/store/authstore/index.tsx","./src/shared/store/carrierstore/index.tsx","./src/shared/store/citystore/index.ts","./src/shared/store/countrystore/index.ts","./src/shared/store/createsightstore/index.tsx","./src/shared/store/devicesstore/index.tsx","./src/shared/store/editsightstore/index.tsx","./src/shared/store/languagestore/index.tsx","./src/shared/store/mediastore/index.tsx","./src/shared/store/menustore/index.ts","./src/shared/store/modelloadingstore/index.ts","./src/shared/store/routestore/index.ts","./src/shared/store/selectedcitystore/index.ts","./src/shared/store/sightsstore/index.tsx","./src/shared/store/snapshotstore/index.ts","./src/shared/store/stationsstore/index.ts","./src/shared/store/userstore/index.ts","./src/shared/store/vehiclestore/index.ts","./src/shared/ui/index.ts","./src/shared/ui/backbutton/index.tsx","./src/shared/ui/coordinatesinput/index.tsx","./src/shared/ui/input/index.tsx","./src/shared/ui/loadingspinner/index.tsx","./src/shared/ui/modal/index.tsx","./src/shared/ui/modelloadingindicator/index.tsx","./src/shared/ui/tabpanel/index.tsx","./src/widgets/index.ts","./src/widgets/cityselector/index.tsx","./src/widgets/createbutton/index.tsx","./src/widgets/deletemodal/index.tsx","./src/widgets/devicestable/index.tsx","./src/widgets/imageuploadcard/index.tsx","./src/widgets/languageswitcher/index.tsx","./src/widgets/layout/index.tsx","./src/widgets/layout/ui/appbar.tsx","./src/widgets/layout/ui/drawer.tsx","./src/widgets/layout/ui/drawerheader.tsx","./src/widgets/leaveagree/index.tsx","./src/widgets/mediaarea/index.tsx","./src/widgets/mediaareaforsight/index.tsx","./src/widgets/mediaviewer/threeview.tsx","./src/widgets/mediaviewer/threeviewerrorboundary.tsx","./src/widgets/mediaviewer/index.tsx","./src/widgets/modelviewer3d/index.tsx","./src/widgets/reactmarkdown/index.tsx","./src/widgets/reactmarkdowneditor/index.tsx","./src/widgets/savewithoutcityagree/index.tsx","./src/widgets/sightedit/index.tsx","./src/widgets/sightheader/index.ts","./src/widgets/sightheader/ui/index.tsx","./src/widgets/sighttabs/index.ts","./src/widgets/sighttabs/createinformationtab/mediauploadbox.tsx","./src/widgets/sighttabs/createinformationtab/index.tsx","./src/widgets/sighttabs/createlefttab/index.tsx","./src/widgets/sighttabs/createrighttab/index.tsx","./src/widgets/sighttabs/informationtab/index.tsx","./src/widgets/sighttabs/leftwidgettab/index.tsx","./src/widgets/sighttabs/rightwidgettab/index.tsx","./src/widgets/sightstable/index.tsx","./src/widgets/snapshotrestore/index.tsx","./src/widgets/videopreviewcard/index.tsx","./src/widgets/modals/editstationmodal.tsx","./src/widgets/modals/index.ts","./src/widgets/modals/selectarticledialog/index.tsx"],"version":"5.8.3"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/globalerrorboundary.tsx","./src/app/index.tsx","./src/app/router/index.tsx","./src/entities/index.ts","./src/entities/navigation/index.ts","./src/entities/navigation/model/index.ts","./src/entities/navigation/ui/index.tsx","./src/features/index.ts","./src/features/navigation/index.ts","./src/features/navigation/ui/index.tsx","./src/pages/index.ts","./src/pages/article/index.ts","./src/pages/article/articlecreatepage/index.tsx","./src/pages/article/articleeditpage/index.tsx","./src/pages/article/articlelistpage/index.tsx","./src/pages/article/articlepreviewpage/previewleftwidget.tsx","./src/pages/article/articlepreviewpage/previewrightwidget.tsx","./src/pages/article/articlepreviewpage/index.tsx","./src/pages/carrier/index.ts","./src/pages/carrier/carriercreatepage/index.tsx","./src/pages/carrier/carriereditpage/index.tsx","./src/pages/carrier/carrierlistpage/index.tsx","./src/pages/city/index.ts","./src/pages/city/citycreatepage/index.tsx","./src/pages/city/cityeditpage/index.tsx","./src/pages/city/citylistpage/index.tsx","./src/pages/city/citypreviewpage/index.tsx","./src/pages/country/index.ts","./src/pages/country/countryaddpage/index.tsx","./src/pages/country/countrycreatepage/index.tsx","./src/pages/country/countryeditpage/index.tsx","./src/pages/country/countrylistpage/index.tsx","./src/pages/country/countrypreviewpage/index.tsx","./src/pages/createsightpage/index.tsx","./src/pages/devicespage/index.tsx","./src/pages/editsightpage/index.tsx","./src/pages/loginpage/index.tsx","./src/pages/mainpage/index.tsx","./src/pages/mappage/index.tsx","./src/pages/mappage/mapstore.ts","./src/pages/media/index.ts","./src/pages/media/mediacreatepage/index.tsx","./src/pages/media/mediaeditpage/index.tsx","./src/pages/media/medialistpage/index.tsx","./src/pages/media/mediapreviewpage/index.tsx","./src/pages/route/linekedstations.tsx","./src/pages/route/index.ts","./src/pages/route/routecreatepage/index.tsx","./src/pages/route/routeeditpage/index.tsx","./src/pages/route/routelistpage/index.tsx","./src/pages/route/route-preview/constants.ts","./src/pages/route/route-preview/infinitecanvas.tsx","./src/pages/route/route-preview/leftsidebar.tsx","./src/pages/route/route-preview/mapdatacontext.tsx","./src/pages/route/route-preview/rightsidebar.tsx","./src/pages/route/route-preview/sight.tsx","./src/pages/route/route-preview/sightinfowidget.tsx","./src/pages/route/route-preview/station.tsx","./src/pages/route/route-preview/transformcontext.tsx","./src/pages/route/route-preview/travelpath.tsx","./src/pages/route/route-preview/widgets.tsx","./src/pages/route/route-preview/index.tsx","./src/pages/route/route-preview/types.ts","./src/pages/route/route-preview/utils.ts","./src/pages/sight/index.ts","./src/pages/sight/sightlistpage/index.tsx","./src/pages/sightpage/index.tsx","./src/pages/snapshot/index.ts","./src/pages/snapshot/snapshotcreatepage/index.tsx","./src/pages/snapshot/snapshotlistpage/index.tsx","./src/pages/station/linkedsights.tsx","./src/pages/station/index.ts","./src/pages/station/stationcreatepage/index.tsx","./src/pages/station/stationeditpage/index.tsx","./src/pages/station/stationlistpage/index.tsx","./src/pages/station/stationpreviewpage/index.tsx","./src/pages/user/index.ts","./src/pages/user/usercreatepage/index.tsx","./src/pages/user/usereditpage/index.tsx","./src/pages/user/userlistpage/index.tsx","./src/pages/vehicle/index.ts","./src/pages/vehicle/vehiclecreatepage/index.tsx","./src/pages/vehicle/vehicleeditpage/index.tsx","./src/pages/vehicle/vehiclelistpage/index.tsx","./src/pages/vehicle/vehiclepreviewpage/index.tsx","./src/shared/index.tsx","./src/shared/api/index.tsx","./src/shared/config/constants.tsx","./src/shared/config/index.ts","./src/shared/const/index.ts","./src/shared/const/mediatypes.ts","./src/shared/hooks/index.ts","./src/shared/hooks/useselectedcity.ts","./src/shared/lib/gltfcachemanager.ts","./src/shared/lib/index.ts","./src/shared/lib/decodejwt/index.ts","./src/shared/lib/mui/theme.ts","./src/shared/modals/index.ts","./src/shared/modals/articleselectorcreatedialog/index.tsx","./src/shared/modals/previewmediadialog/index.tsx","./src/shared/modals/selectarticledialog/index.tsx","./src/shared/modals/selectmediadialog/index.tsx","./src/shared/modals/uploadmediadialog/index.tsx","./src/shared/store/index.ts","./src/shared/store/articlesstore/index.tsx","./src/shared/store/authstore/index.tsx","./src/shared/store/carrierstore/index.tsx","./src/shared/store/citystore/index.ts","./src/shared/store/countrystore/index.ts","./src/shared/store/createsightstore/index.tsx","./src/shared/store/devicesstore/index.tsx","./src/shared/store/editsightstore/index.tsx","./src/shared/store/languagestore/index.tsx","./src/shared/store/mediastore/index.tsx","./src/shared/store/menustore/index.ts","./src/shared/store/modelloadingstore/index.ts","./src/shared/store/routestore/index.ts","./src/shared/store/selectedcitystore/index.ts","./src/shared/store/sightsstore/index.tsx","./src/shared/store/snapshotstore/index.ts","./src/shared/store/stationsstore/index.ts","./src/shared/store/userstore/index.ts","./src/shared/store/vehiclestore/index.ts","./src/shared/ui/index.ts","./src/shared/ui/backbutton/index.tsx","./src/shared/ui/coordinatesinput/index.tsx","./src/shared/ui/input/index.tsx","./src/shared/ui/loadingspinner/index.tsx","./src/shared/ui/modal/index.tsx","./src/shared/ui/modelloadingindicator/index.tsx","./src/shared/ui/tabpanel/index.tsx","./src/widgets/index.ts","./src/widgets/cityselector/index.tsx","./src/widgets/createbutton/index.tsx","./src/widgets/deletemodal/index.tsx","./src/widgets/devicestable/index.tsx","./src/widgets/imageuploadcard/index.tsx","./src/widgets/languageswitcher/index.tsx","./src/widgets/layout/index.tsx","./src/widgets/layout/ui/appbar.tsx","./src/widgets/layout/ui/drawer.tsx","./src/widgets/layout/ui/drawerheader.tsx","./src/widgets/leaveagree/index.tsx","./src/widgets/mediaarea/index.tsx","./src/widgets/mediaareaforsight/index.tsx","./src/widgets/mediaviewer/threeview.tsx","./src/widgets/mediaviewer/threeviewerrorboundary.tsx","./src/widgets/mediaviewer/index.tsx","./src/widgets/modelviewer3d/index.tsx","./src/widgets/reactmarkdown/index.tsx","./src/widgets/reactmarkdowneditor/index.tsx","./src/widgets/savewithoutcityagree/index.tsx","./src/widgets/sightedit/index.tsx","./src/widgets/sightheader/index.ts","./src/widgets/sightheader/ui/index.tsx","./src/widgets/sighttabs/index.ts","./src/widgets/sighttabs/createinformationtab/mediauploadbox.tsx","./src/widgets/sighttabs/createinformationtab/index.tsx","./src/widgets/sighttabs/createlefttab/index.tsx","./src/widgets/sighttabs/createrighttab/index.tsx","./src/widgets/sighttabs/informationtab/index.tsx","./src/widgets/sighttabs/leftwidgettab/index.tsx","./src/widgets/sighttabs/rightwidgettab/index.tsx","./src/widgets/sightstable/index.tsx","./src/widgets/snapshotrestore/index.tsx","./src/widgets/videopreviewcard/index.tsx","./src/widgets/modals/editstationmodal.tsx","./src/widgets/modals/index.ts","./src/widgets/modals/selectarticledialog/index.tsx"],"version":"5.8.3"}
\ No newline at end of file