diff --git a/package.json b/package.json
index 55ede4f..8408a43 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "react-simple-maps": "^3.0.0",
     "react-simplemde-editor": "^5.2.0",
     "react-swipeable": "^7.0.2",
+    "react-toastify": "^11.0.5",
     "rehype-raw": "^7.0.0",
     "three": "^0.175.0",
     "vite-plugin-svgr": "^4.3.0"
diff --git a/src/components/CreateSightArticle.tsx b/src/components/CreateSightArticle.tsx
index d66f10d..cda29fa 100644
--- a/src/components/CreateSightArticle.tsx
+++ b/src/components/CreateSightArticle.tsx
@@ -19,6 +19,7 @@ import {
   ALLOWED_VIDEO_TYPES,
 } from "../components/media/MediaFormUtils";
 import { EVERY_LANGUAGE, Languages } from "@stores";
+import { useNotification } from "@refinedev/core";
 
 const MemoizedSimpleMDE = React.memo(MarkdownEditor);
 
@@ -30,14 +31,16 @@ type MediaFile = {
 };
 
 type Props = {
-  parentId: string | number;
+  parentId?: string | number;
   parentResource: string;
   childResource: string;
   title: string;
   left?: boolean;
-  language: Languages,
-  setHeadingParent?: (heading: string) => void,
-  setBodyParent?: (body: string) => void,
+  language: Languages;
+  setHeadingParent?: (heading: string) => void;
+  setBodyParent?: (body: string) => void;
+  onSave?: (something: any) => void;
+  noReset?: boolean;
 };
 
 export const CreateSightArticle = ({
@@ -48,8 +51,11 @@ export const CreateSightArticle = ({
   left,
   language,
   setHeadingParent,
-  setBodyParent
+  setBodyParent,
+  onSave,
+  noReset,
 }: Props) => {
+  const notification = useNotification();
   const theme = useTheme();
   const [mediaFiles, setMediaFiles] = useState<MediaFile[]>([]);
   const [workingLanguage, setWorkingLanguage] = useState<Languages>(language);
@@ -69,10 +75,9 @@ export const CreateSightArticle = ({
     },
   });
 
-
   const [articleData, setArticleData] = useState({
     heading: EVERY_LANGUAGE(""),
-    body: EVERY_LANGUAGE("")
+    body: EVERY_LANGUAGE(""),
   });
 
   function updateTranslations() {
@@ -85,8 +90,8 @@ export const CreateSightArticle = ({
       body: {
         ...articleData.body,
         [workingLanguage]: watch("body") ?? "",
-      }
-    }
+      },
+    };
     setArticleData(newArticleData);
     return newArticleData;
   }
@@ -126,8 +131,12 @@ export const CreateSightArticle = ({
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     accept: {
-      "image/*": ALLOWED_IMAGE_TYPES,
-      "video/*": ALLOWED_VIDEO_TYPES,
+      "image/jpeg": [".jpeg", ".jpg"],
+      "image/png": [".png"],
+      "image/webp": [".webp"],
+      "video/mp4": [".mp4"],
+      "video/webm": [".webm"],
+      "video/ogg": [".ogg"],
     },
     multiple: true,
   });
@@ -153,42 +162,48 @@ export const CreateSightArticle = ({
     try {
       // Создаем статью
       const response = await axiosInstance.post(
-        `${import.meta.env.VITE_KRBL_API}/${childResource}`, {
+        `${import.meta.env.VITE_KRBL_API}/${childResource}`,
+        {
           ...data,
-          translations: updateTranslations()
+          translations: updateTranslations(),
         }
       );
       const itemId = response.data.id;
 
-      // Получаем существующие статьи для определения порядкового номера
-      const existingItemsResponse = await axiosInstance.get(
-        `${import.meta.env.VITE_KRBL_API}/${parentResource}/${parentId}/${childResource}`
-      );
-      const existingItems = existingItemsResponse.data ?? [];
-      const nextPageNum = existingItems.length + 1;
+      if (parentId) {
+        // Получаем существующие статьи для определения порядкового номера
+        const existingItemsResponse = await axiosInstance.get(
+          `${
+            import.meta.env.VITE_KRBL_API
+          }/${parentResource}/${parentId}/${childResource}`
+        );
+        const existingItems = existingItemsResponse.data ?? [];
+        const nextPageNum = existingItems.length + 1;
 
-      if (!left) {
-        // Привязываем статью к достопримечательности если она не левая
-        await axiosInstance.post(
-          `${import.meta.env.VITE_KRBL_API}/${parentResource}/${parentId}/${childResource}/`,
-          {
-            [`${childResource}_id`]: itemId,
-            page_num: nextPageNum,
-          }
-        );
-      } else {
-        const response = await axiosInstance.get(
-          `${import.meta.env.VITE_KRBL_API}/${parentResource}/${parentId}/`
-        );
-        const data = response.data;
-        if(data) {
-          await axiosInstance.patch(
-            `${import.meta.env.VITE_KRBL_API}/${parentResource}/${parentId}/`,
+        if (!left) {
+          await axiosInstance.post(
+            `${
+              import.meta.env.VITE_KRBL_API
+            }/${parentResource}/${parentId}/${childResource}/`,
             {
-              ...data,
-              left_article: itemId
+              [`${childResource}_id`]: itemId,
+              page_num: nextPageNum,
             }
           );
+        } else {
+          const response = await axiosInstance.get(
+            `${import.meta.env.VITE_KRBL_API}/${parentResource}/${parentId}/`
+          );
+          const data = response.data;
+          if (data) {
+            await axiosInstance.patch(
+              `${import.meta.env.VITE_KRBL_API}/${parentResource}/${parentId}/`,
+              {
+                ...data,
+                left_article: itemId,
+              }
+            );
+          }
         }
       }
 
@@ -211,10 +226,21 @@ export const CreateSightArticle = ({
           )
         )
       );
-
-      resetItem();
-      setMediaFiles([]);
-      window.location.reload();
+      if (noReset) {
+        setValue("heading", "");
+        setValue("body", "");
+      } else {
+        resetItem();
+      }
+      if (onSave) {
+        onSave(response.data);
+        notification.open({
+          message: "Статья успешно создана",
+          type: "success",
+        });
+      } else {
+        window.location.reload();
+      }
     } catch (err: any) {
       console.error("Error creating item:", err);
     }
@@ -239,7 +265,7 @@ export const CreateSightArticle = ({
         helperText={(itemErrors as any)?.heading?.message}
         margin="normal"
         fullWidth
-        slotProps={{inputLabel: {shrink: true}}}
+        slotProps={{ inputLabel: { shrink: true } }}
         type="text"
         sx={{
           backgroundColor: theme.palette.background.paper,
@@ -345,7 +371,12 @@ export const CreateSightArticle = ({
       </Box>
 
       <Box sx={{ mt: 2, display: "flex", gap: 2 }}>
-        <Button variant="contained" color="primary" onClick={handleSubmitItem(handleCreate)}>
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          onClick={handleSubmitItem(handleCreate)}
+        >
           Создать
         </Button>
         <Button
diff --git a/src/components/modals/ArticleEditModal/index.tsx b/src/components/modals/ArticleEditModal/index.tsx
index 09fd921..2e213e0 100644
--- a/src/components/modals/ArticleEditModal/index.tsx
+++ b/src/components/modals/ArticleEditModal/index.tsx
@@ -38,7 +38,7 @@ const style = {
   bgcolor: "background.paper",
   border: "2px solid #000",
   boxShadow: 24,
-  p: 4
+  p: 4,
 };
 
 export const ArticleEditModal = observer(() => {
@@ -62,13 +62,11 @@ export const ArticleEditModal = observer(() => {
 
   // Load existing media files when editing an article
   const loadExistingMedia = async () => {
-    console.log("Called loadExistingMedia")
+    console.log("Called loadExistingMedia");
     if (selectedArticleId) {
       try {
         const response = await axiosInstance.get(
-          `${
-            import.meta.env.VITE_KRBL_API
-          }/article/${selectedArticleId}/media`
+          `${import.meta.env.VITE_KRBL_API}/article/${selectedArticleId}/media`
         );
         const existingMedia = response.data;
 
@@ -95,7 +93,7 @@ export const ArticleEditModal = observer(() => {
         );
 
         setMediaFiles(mediaFiles);
-        setRefresh(refresh+1);
+        setRefresh(refresh + 1);
       } catch (error) {
         console.error("Error loading existing media:", error);
       }
@@ -125,7 +123,9 @@ export const ArticleEditModal = observer(() => {
         try {
           // Upload new media files
           const newMediaFiles = mediaFiles.filter((file) => !file.media_id);
-          const existingMediaAmount = mediaFiles.filter((file) => file.media_id).length;
+          const existingMediaAmount = mediaFiles.filter(
+            (file) => file.media_id
+          ).length;
           const mediaIds = await Promise.all(
             newMediaFiles.map(async (mediaFile) => {
               return await uploadMedia(mediaFile);
@@ -164,10 +164,10 @@ export const ArticleEditModal = observer(() => {
 
   useEffect(() => {
     if (articleData.heading[language]) {
-      setValue("heading", articleData.heading[language])
+      setValue("heading", articleData.heading[language]);
     }
     if (articleData.body[language]) {
-      setValue("body", articleData.body[language])
+      setValue("body", articleData.body[language]);
     }
   }, [language, articleData, setValue]);
 
@@ -176,12 +176,12 @@ export const ArticleEditModal = observer(() => {
       ...prevData,
       heading: {
         ...prevData.heading,
-        [language]: watch("heading") ?? ""
+        [language]: watch("heading") ?? "",
       },
       body: {
         ...prevData.body,
-        [language]: watch("body") ?? ""
-      }
+        [language]: watch("body") ?? "",
+      },
     }));
   };
 
@@ -205,8 +205,12 @@ export const ArticleEditModal = observer(() => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     accept: {
-      "image/*": ALLOWED_IMAGE_TYPES,
-      "video/*": ALLOWED_VIDEO_TYPES,
+      "image/jpeg": [".jpeg", ".jpg"],
+      "image/png": [".png"],
+      "image/webp": [".webp"],
+      "video/mp4": [".mp4"],
+      "video/webm": [".webm"],
+      "video/ogg": [".ogg"],
     },
     multiple: true,
   });
@@ -258,7 +262,7 @@ export const ArticleEditModal = observer(() => {
       onClose={() => setArticleModalOpenAction(false)}
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
-      sx={{overflow: "auto"}}
+      sx={{ overflow: "auto" }}
     >
       <Box sx={style}>
         <Edit
diff --git a/src/globals.css b/src/globals.css
index aae62fc..cbce410 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -1,5 +1,5 @@
-@import './stylesheets/hidden-functionality.css';
-@import './stylesheets/roles-functionality.css';
+@import "./stylesheets/hidden-functionality.css";
+@import "./stylesheets/roles-functionality.css";
 
 .limited-text {
   overflow: hidden;
@@ -7,3 +7,19 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
+.backup-button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  width: 35px;
+  height: 35px;
+  color: #544044;
+  border-radius: 10%;
+  transition: all 0.3s ease;
+}
+.backup-button:hover {
+  background-color: rgba(84, 64, 68, 0.5);
+}
diff --git a/src/pages/sight/create.tsx b/src/pages/sight/create.tsx
index b2d4666..95ecc55 100644
--- a/src/pages/sight/create.tsx
+++ b/src/pages/sight/create.tsx
@@ -1,4 +1,13 @@
-import { Autocomplete, Box, TextField, Typography, Paper } from "@mui/material";
+import {
+  Autocomplete,
+  Box,
+  TextField,
+  Typography,
+  Paper,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+} from "@mui/material";
 import { Create, useAutocomplete } from "@refinedev/mui";
 import { useForm } from "@refinedev/react-hook-form";
 import { Controller, FieldValues } from "react-hook-form";
@@ -8,11 +17,14 @@ import { TOKEN_KEY } from "@providers";
 import { observer } from "mobx-react-lite";
 import { EVERY_LANGUAGE, Languages, languageStore, cityStore } from "@stores";
 import { LanguageSelector } from "@ui";
+import { CreateSightArticle } from "@components";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
 export const SightCreate = observer(() => {
   const { language, setLanguageAction } = languageStore;
   const [sightData, setSightData] = useState({
     name: EVERY_LANGUAGE(""),
-    address: EVERY_LANGUAGE("")
+    address: EVERY_LANGUAGE(""),
   });
 
   const {
@@ -46,9 +58,9 @@ export const SightCreate = observer(() => {
       address: {
         ...sightData.address,
         [language]: watch("address") ?? "",
-      }
-    }
-    if(update) setSightData(newSightData);
+      },
+    };
+    if (update) setSightData(newSightData);
     return newSightData;
   }
 
@@ -62,7 +74,7 @@ export const SightCreate = observer(() => {
     console.log(newTranslations);
     return onFinish({
       ...values,
-      translations: newTranslations
+      translations: newTranslations,
     });
   });
 
@@ -71,6 +83,11 @@ export const SightCreate = observer(() => {
     latitude: "",
     longitude: "",
   });
+
+  const [creatingArticleHeading, setCreatingArticleHeading] =
+    useState<string>("");
+  const [creatingArticleBody, setCreatingArticleBody] = useState<string>("");
+
   const [cityPreview, setCityPreview] = useState("");
   const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
   const [watermarkLUPreview, setWatermarkLUPreview] = useState<string | null>(
@@ -80,6 +97,8 @@ export const SightCreate = observer(() => {
     null
   );
   const [leftArticlePreview, setLeftArticlePreview] = useState("");
+  const [customOptions, setCustomOptions] = useState<any[]>([]);
+
   const [previewArticlePreview, setPreviewArticlePreview] = useState("");
 
   const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -122,6 +141,7 @@ export const SightCreate = observer(() => {
 
   const { autocompleteProps: articleAutocompleteProps } = useAutocomplete({
     resource: "article",
+
     onSearch: (value) => [
       {
         field: "heading",
@@ -131,6 +151,8 @@ export const SightCreate = observer(() => {
     ],
   });
 
+  const mergedOptions = [...articleAutocompleteProps.options, ...customOptions];
+
   // Следим за изменениями во всех полях
   const nameContent = watch("name");
   const addressContent = watch("address");
@@ -222,10 +244,13 @@ export const SightCreate = observer(() => {
   }, [previewArticleContent, articleAutocompleteProps.options]);
 
   return (
-    <Create isLoading={formLoading} saveButtonProps={{
-      ...saveButtonProps,
-      onClick: handleFormSubmit
-    }}>
+    <Create
+      isLoading={formLoading}
+      saveButtonProps={{
+        ...saveButtonProps,
+        onClick: handleFormSubmit,
+      }}
+    >
       <Box sx={{ display: "flex", gap: 2 }}>
         <Box sx={{ display: "flex", flexDirection: "column", flex: 1, gap: 2 }}>
           {/* Форма создания */}
@@ -244,7 +269,7 @@ export const SightCreate = observer(() => {
               helperText={(errors as any)?.name?.message}
               margin="normal"
               fullWidth
-              slotProps={{inputLabel: {shrink: true}}}
+              slotProps={{ inputLabel: { shrink: true } }}
               type="text"
               label={"Название *"}
               name="name"
@@ -257,7 +282,7 @@ export const SightCreate = observer(() => {
               helperText={(errors as any)?.latitude?.message}
               margin="normal"
               fullWidth
-              slotProps={{inputLabel: {shrink: true}}}
+              slotProps={{ inputLabel: { shrink: true } }}
               type="text"
               label={"Координаты *"}
             />
@@ -286,7 +311,7 @@ export const SightCreate = observer(() => {
               helperText={(errors as any)?.address?.message}
               margin="normal"
               fullWidth
-              slotProps={{inputLabel: {shrink: true}}}
+              slotProps={{ inputLabel: { shrink: true } }}
               type="text"
               label={"Адрес"}
               name="address"
@@ -370,7 +395,7 @@ export const SightCreate = observer(() => {
                       variant="outlined"
                       error={!!errors.thumbnail}
                       helperText={(errors as any)?.thumbnail?.message}
-                     // required
+                      // required
                     />
                   )}
                 />
@@ -468,27 +493,25 @@ export const SightCreate = observer(() => {
               render={({ field }) => (
                 <Autocomplete
                   {...articleAutocompleteProps}
+                  options={mergedOptions} // ← use merged options
                   value={
-                    articleAutocompleteProps.options.find(
-                      (option) => option.id === field.value
-                    ) ?? null
+                    mergedOptions.find((option) => option.id === field.value) ??
+                    null
                   }
                   onChange={(_, value) => {
                     field.onChange(value?.id ?? "");
                   }}
-                  getOptionLabel={(item) => {
-                    return item ? item.heading : "";
-                  }}
-                  isOptionEqualToValue={(option, value) => {
-                    return option.id === value?.id;
-                  }}
-                  filterOptions={(options, { inputValue }) => {
-                    return options.filter((option) =>
+                  getOptionLabel={(item) => (item ? item.heading : "")}
+                  isOptionEqualToValue={(option, value) =>
+                    option.id === value?.id
+                  }
+                  filterOptions={(options, { inputValue }) =>
+                    options.filter((option) =>
                       option.heading
                         .toLowerCase()
                         .includes(inputValue.toLowerCase())
-                    );
-                  }}
+                    )
+                  }
                   renderInput={(params) => (
                     <TextField
                       {...params}
@@ -503,6 +526,31 @@ export const SightCreate = observer(() => {
               )}
             />
 
+            {!leftArticleContent && (
+              <Accordion>
+                <AccordionSummary
+                  expandIcon={<ExpandMoreIcon />}
+                  aria-controls="create-article-content"
+                  id="create-article-header"
+                >
+                  <Typography>Создать новую статью</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <CreateSightArticle
+                    language={language}
+                    parentResource="sight"
+                    childResource="article"
+                    title="статью"
+                    noReset
+                    left
+                    onSave={(something: any) => {
+                      setCustomOptions((prev) => [...prev, something]);
+                    }}
+                  />
+                </AccordionDetails>
+              </Accordion>
+            )}
+
             <Controller
               control={control}
               name="preview_media"
@@ -516,7 +564,7 @@ export const SightCreate = observer(() => {
                     ) || null
                   }
                   onChange={(_, value) => {
-                    console.log(value, _)
+                    console.log(value, _);
                     field.onChange(value?.id || "");
                   }}
                   getOptionLabel={(item) => {
@@ -531,7 +579,7 @@ export const SightCreate = observer(() => {
                         option.media_name
                           .toLowerCase()
                           .includes(inputValue.toLowerCase()) &&
-                        [1,2,5,6].includes(option.media_type)
+                        [1, 2, 3, 4, 5, 6].includes(option.media_type)
                     );
                   }}
                   renderInput={(params) => (
diff --git a/src/pages/sight/edit.tsx b/src/pages/sight/edit.tsx
index 084e2e5..6c882cc 100644
--- a/src/pages/sight/edit.tsx
+++ b/src/pages/sight/edit.tsx
@@ -19,10 +19,18 @@ import { ArticleItem, articleFields } from "./types";
 import { axiosInstance, TOKEN_KEY } from "@providers";
 import { observer } from "mobx-react-lite";
 
-import { Languages, languageStore, articleStore, META_LANGUAGE, EVERY_LANGUAGE } from "@stores";
+import {
+  Languages,
+  languageStore,
+  articleStore,
+  META_LANGUAGE,
+  EVERY_LANGUAGE,
+} from "@stores";
 import axios from "axios";
 import { LanguageSelector, MediaData, MediaView } from "@ui";
 import { ArticleEditModal } from "../../components/modals/ArticleEditModal/index";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 
 function a11yProps(index: number) {
   return {
@@ -60,14 +68,13 @@ export const SightEdit = observer(() => {
   const { setArticleModalOpenAction, setArticleIdAction } = articleStore;
   const [sightData, setSightData] = useState({
     name: EVERY_LANGUAGE(""),
-    address: EVERY_LANGUAGE("")
+    address: EVERY_LANGUAGE(""),
   });
 
-
   const {
     saveButtonProps,
     register,
-    refineCore: {onFinish},
+    refineCore: { onFinish },
     control,
     watch,
     getValues,
@@ -76,11 +83,12 @@ export const SightEdit = observer(() => {
     formState: { errors },
   } = useForm({
     refineCoreProps: META_LANGUAGE(language),
-    warnWhenUnsavedChanges: false
+    warnWhenUnsavedChanges: false,
   });
+  const name = watch("name");
 
   const getMedia = async (id?: string | number) => {
-    if(!id) return;
+    if (!id) return;
     try {
       const response = await axios.get(
         `${import.meta.env.VITE_KRBL_API}/article/${id}/media`,
@@ -110,7 +118,7 @@ export const SightEdit = observer(() => {
         value,
       },
     ],
-    ...META_LANGUAGE("ru")
+    ...META_LANGUAGE("ru"),
   });
   const [mediaFile, setMediaFile] = useState<MediaData>();
   const [leftArticleData, setLeftArticleData] = useState<{
@@ -129,7 +137,7 @@ export const SightEdit = observer(() => {
         operator: "contains",
         value,
       },
-    ]
+    ],
   });
 
   const { autocompleteProps: articleAutocompleteProps } = useAutocomplete({
@@ -147,13 +155,11 @@ export const SightEdit = observer(() => {
         value,
       },
     ],
-
   });
 
   useEffect(() => {
-    if(sightData.name[language])
-      setValue("name", sightData.name[language]);
-    if(sightData.address[language])
+    if (sightData.name[language]) setValue("name", sightData.name[language]);
+    if (sightData.address[language])
       setValue("address", sightData.address[language]);
   }, [language, sightData, setValue]);
 
@@ -180,7 +186,8 @@ export const SightEdit = observer(() => {
 
   // Состояния для предпросмотра
 
-  const [creatingArticleHeading, setCreatingArticleHeading] = useState<string>("");
+  const [creatingArticleHeading, setCreatingArticleHeading] =
+    useState<string>("");
   const [creatingArticleBody, setCreatingArticleBody] = useState<string>("");
 
   const [coordinatesPreview, setCoordinatesPreview] = useState({
@@ -188,6 +195,7 @@ export const SightEdit = observer(() => {
     longitude: "",
   });
   const [selectedArticleIndex, setSelectedArticleIndex] = useState(-1);
+  const [previewMediaFile, setPreviewMediaFile] = useState<MediaData>();
   const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
   const [watermarkLUPreview, setWatermarkLUPreview] = useState<string | null>(
     null
@@ -202,14 +210,15 @@ export const SightEdit = observer(() => {
 
   const previewMediaId = watch("preview_media");
   const leftArticleId = watch("left_article");
+
   useEffect(() => {
     if (previewMediaId) {
       const selectedMedia = mediaAutocompleteProps.options.find(
         (option) => option.id === previewMediaId
       );
-      console.log("Triggering", previewMediaId)
-      if(!selectedMedia) return;
-      setMediaFile(selectedMedia);
+      console.log("Triggering", previewMediaId);
+      if (!selectedMedia) return;
+      setPreviewMediaFile(selectedMedia);
     }
   }, [previewMediaId, mediaAutocompleteProps.options]);
 
@@ -241,14 +250,13 @@ export const SightEdit = observer(() => {
   }, [latitudeContent, longitudeContent]);
 
   useEffect(() => {
-    if(linkedArticles[selectedArticleIndex]?.id) {
+    if (linkedArticles[selectedArticleIndex]?.id) {
       getMedia(linkedArticles[selectedArticleIndex].id).then((media) => {
         setMediaFile(media);
       });
-    };
+    }
   }, [selectedArticleIndex, linkedArticles]);
 
-
   useEffect(() => {
     const selectedThumbnail = mediaAutocompleteProps.options.find(
       (option) => option.id === thumbnailContent
@@ -312,9 +320,9 @@ export const SightEdit = observer(() => {
       address: {
         ...sightData.address,
         [language]: watch("address") ?? "",
-      }
-    }
-    if(update) setSightData(newSightData);
+      },
+    };
+    if (update) setSightData(newSightData);
     return newSightData;
   }
 
@@ -328,7 +336,7 @@ export const SightEdit = observer(() => {
     console.log(newTranslations);
     await onFinish({
       ...values,
-      translations: newTranslations
+      translations: newTranslations,
     });
   });
 
@@ -338,25 +346,33 @@ export const SightEdit = observer(() => {
     };
   }, [setLanguageAction]);
 
-  const [articleAdditionMode, setArticleAdditionMode] = useState<'attaching' | 'creating'>('attaching');
+  const [articleAdditionMode, setArticleAdditionMode] = useState<
+    "attaching" | "creating"
+  >("attaching");
   const [selectedItemId, setSelectedItemId] = useState<string>();
-  const [updatedLinkedArticles, setUpdatedLinkedArticles] = useState<ArticleItem[]>([]);
+  const [updatedLinkedArticles, setUpdatedLinkedArticles] = useState<
+    ArticleItem[]
+  >([]);
 
   const linkItem = () => {
     if (!selectedItemId) return;
     const requestData = {
       article_id: selectedItemId,
-      page_num: linkedArticles.length+1,
-    }
+      page_num: linkedArticles.length + 1,
+    };
 
     axiosInstance
-      .post(`${import.meta.env.VITE_KRBL_API}/sight/${sightId}/article`, requestData)
+      .post(
+        `${import.meta.env.VITE_KRBL_API}/sight/${sightId}/article`,
+        requestData
+      )
       .then(() => {
-        axiosInstance.get(`${import.meta.env.VITE_KRBL_API}/sight/${sightId}/article`)
-        .then((response) => {
-          setUpdatedLinkedArticles(response?.data || []);
-          setSelectedItemId(undefined);
-        });
+        axiosInstance
+          .get(`${import.meta.env.VITE_KRBL_API}/sight/${sightId}/article`)
+          .then((response) => {
+            setUpdatedLinkedArticles(response?.data || []);
+            setSelectedItemId(undefined);
+          });
       })
       .catch((error) => {
         console.error("Error linking item:", error);
@@ -381,7 +397,7 @@ export const SightEdit = observer(() => {
         <Edit
           saveButtonProps={{
             ...saveButtonProps,
-            onClick: handleFormSubmit
+            onClick: handleFormSubmit,
           }}
           footerButtonProps={{
             sx: {
@@ -390,343 +406,368 @@ export const SightEdit = observer(() => {
             },
           }}
         >
-        <Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
-          <Box sx={{ display: "flex", gap: 2, position: "relative", flex:1 }}>
-            <Box sx={{display: "flex", flexDirection: "column", flex: 1, gap: 10, justifyContent: "space-between"}}>
-              <LanguageSelector action={handleLanguageChange} />
+          <Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
+            <Box
+              sx={{ display: "flex", gap: 2, position: "relative", flex: 1 }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  flex: 1,
+                  gap: 10,
+                  justifyContent: "space-between",
+                }}
+              >
+                <LanguageSelector action={handleLanguageChange} />
 
-              {/* Форма редактирования */}
-              <Box component="form" sx={{ flex: 1, display: "flex", flexDirection: "column" }} autoComplete="off">
-                <TextField
-                  {...register("name", {
-                    //required: "Это поле является обязательным",
-                  })}
-                  error={!!(errors as any)?.name}
-                  helperText={(errors as any)?.name?.message}
-                  margin="normal"
-                  fullWidth
-                  slotProps={{inputLabel: {shrink: true}}}
-                  type="text"
-                  label={"Название"}
-                  name="name"
-                />
+                {/* Форма редактирования */}
+                <Box
+                  component="form"
+                  sx={{ flex: 1, display: "flex", flexDirection: "column" }}
+                  autoComplete="off"
+                >
+                  <TextField
+                    {...register("name", {
+                      //required: "Это поле является обязательным",
+                    })}
+                    error={!!(errors as any)?.name}
+                    helperText={(errors as any)?.name?.message}
+                    margin="normal"
+                    fullWidth
+                    slotProps={{ inputLabel: { shrink: true } }}
+                    type="text"
+                    label={"Название"}
+                    name="name"
+                  />
+                  <TextField
+                    {...register("address", {
+                      //required: "Это поле является обязательным",
+                    })}
+                    error={!!(errors as any)?.address}
+                    helperText={(errors as any)?.address?.message}
+                    margin="normal"
+                    fullWidth
+                    slotProps={{ inputLabel: { shrink: true } }}
+                    type="text"
+                    label={"Адрес"}
+                    name="address"
+                  />
 
-              <Box sx={{display: "none"}}>
-                <Controller
-                  control={control}
-                  name="preview_media"
-                  defaultValue={null}
-                  render={({ field }) => (
-                    <Autocomplete
-                      {...mediaAutocompleteProps}
-                      value={
-                        mediaAutocompleteProps.options.find(
-                          (option) => option.id === field.value
-                        ) || null
-                      }
-                      onChange={(_, value) => {
-                        field.onChange(value?.id || "");
-                      }}
-                      getOptionLabel={(item) => {
-                        return item ? item.media_name : "";
-                      }}
-                      isOptionEqualToValue={(option, value) => {
-                        return option.id === value?.id;
-                      }}
-                      filterOptions={(options, { inputValue }) => {
-                        return options.filter(
-                          (option) =>
-                            option.media_name
-                              .toLowerCase()
-                              .includes(inputValue.toLowerCase())
-                        );
-                      }}
-                      renderInput={(params) => (
-                        <TextField
-                          {...params}
-                          onClick={() => {
-                            //setPreviewSelected(true);
-                            //setSelectedMediaIndex(-1);
+                  <Box sx={{ display: "none" }}>
+                    <Controller
+                      control={control}
+                      name="preview_media"
+                      defaultValue={null}
+                      render={({ field }) => (
+                        <Autocomplete
+                          {...mediaAutocompleteProps}
+                          value={
+                            mediaAutocompleteProps.options.find(
+                              (option) => option.id === field.value
+                            ) || null
+                          }
+                          onChange={(_, value) => {
+                            field.onChange(value?.id || "");
                           }}
-                          label="Медиа-предпросмотр"
-                          margin="normal"
-                          variant="outlined"
-                          error={!!errors.arms}
-                          helperText={(errors as any)?.arms?.message}
+                          getOptionLabel={(item) => {
+                            return item ? item.media_name : "";
+                          }}
+                          isOptionEqualToValue={(option, value) => {
+                            return option.id === value?.id;
+                          }}
+                          // filterOptions={(options, { inputValue }) => {
+                          //   return options.filter((option) =>
+                          //     option.media_name
+                          //       .toLowerCase()
+                          //       .includes(inputValue.toLowerCase())
+                          //   );
+                          // }}
+                          renderInput={(params) => (
+                            <TextField
+                              {...params}
+                              onClick={() => {
+                                //setPreviewSelected(true);
+                                //setSelectedMediaIndex(-1);
+                              }}
+                              label="Медиа-предпросмотр"
+                              margin="normal"
+                              variant="outlined"
+                              error={!!errors.arms}
+                              helperText={(errors as any)?.arms?.message}
+                            />
+                          )}
                         />
                       )}
                     />
-                  )}
-                />
-              </Box>
-              
-                <input
-                  type="hidden"
-                  {...register("longitude", {
-                    value: coordinatesPreview.longitude,
-                    required: "Это поле является обязательным",
-                    valueAsNumber: true,
-                  })}
-                />
-                <input
-                  type="hidden"
-                  {...register("latitude", {
-                    value: coordinatesPreview.latitude,
-                    required: "Это поле является обязательным",
-                    valueAsNumber: true,
-                  })}
-                />
+                  </Box>
 
-                <Controller
-                  control={control}
-                  name="city_id"
-                  rules={{ required: "Это поле является обязательным" }}
-                  defaultValue={null}
-                  render={() => (<div/>)}
-                />
+                  <input
+                    type="hidden"
+                    {...register("longitude", {
+                      value: coordinatesPreview.longitude,
+                      required: "Это поле является обязательным",
+                      valueAsNumber: true,
+                    })}
+                  />
+                  <input
+                    type="hidden"
+                    {...register("latitude", {
+                      value: coordinatesPreview.latitude,
+                      required: "Это поле является обязательным",
+                      valueAsNumber: true,
+                    })}
+                  />
 
-                <Box sx={{ display: "none" }}>
                   <Controller
                     control={control}
-                    name="thumbnail"
+                    name="city_id"
+                    rules={{ required: "Это поле является обязательным" }}
                     defaultValue={null}
-                    render={({ field }) => (
-                      <Autocomplete
-                        {...mediaAutocompleteProps}
-                        value={
-                          mediaAutocompleteProps.options.find(
-                            (option) => option.id === field.value
-                          ) || null
-                        }
-                        onChange={(_, value) => {
-                          field.onChange(value?.id || "");
-                        }}
-                        getOptionLabel={(item) => {
-                          return item ? item.media_name : "";
-                        }}
-                        isOptionEqualToValue={(option, value) => {
-                          return option.id === value?.id;
-                        }}
-                        filterOptions={(options, { inputValue }) => {
-                          return options.filter(
-                            (option) =>
+                    render={() => <div />}
+                  />
+
+                  <Box sx={{ display: "none" }}>
+                    <Controller
+                      control={control}
+                      name="thumbnail"
+                      defaultValue={null}
+                      render={({ field }) => (
+                        <Autocomplete
+                          {...mediaAutocompleteProps}
+                          value={
+                            mediaAutocompleteProps.options.find(
+                              (option) => option.id === field.value
+                            ) || null
+                          }
+                          onChange={(_, value) => {
+                            field.onChange(value?.id || "");
+                          }}
+                          getOptionLabel={(item) => {
+                            return item ? item.media_name : "";
+                          }}
+                          isOptionEqualToValue={(option, value) => {
+                            return option.id === value?.id;
+                          }}
+                          filterOptions={(options, { inputValue }) => {
+                            return options.filter(
+                              (option) =>
+                                option.media_name
+                                  .toLowerCase()
+                                  .includes(inputValue.toLowerCase()) &&
+                                option.media_type === 3
+                            );
+                          }}
+                          renderInput={(params) => (
+                            <TextField
+                              {...params}
+                              label="Выберите логотип достопримечательности"
+                              margin="normal"
+                              variant="outlined"
+                              error={!!errors.arms}
+                              helperText={(errors as any)?.arms?.message}
+                              required
+                            />
+                          )}
+                        />
+                      )}
+                    />
+                  </Box>
+
+                  <Box sx={{ display: "none" }}>
+                    <Controller
+                      control={control}
+                      name="watermark_lu"
+                      defaultValue={null}
+                      render={({ field }) => (
+                        <Autocomplete
+                          {...mediaAutocompleteProps}
+                          value={
+                            mediaAutocompleteProps.options.find(
+                              (option) => option.id === field.value
+                            ) || null
+                          }
+                          onChange={(_, value) => {
+                            field.onChange(value?.id || "");
+                          }}
+                          getOptionLabel={(item) => {
+                            return item ? item.media_name : "";
+                          }}
+                          isOptionEqualToValue={(option, value) => {
+                            return option.id === value?.id;
+                          }}
+                          filterOptions={(options, { inputValue }) => {
+                            return options.filter((option) =>
                               option.media_name
                                 .toLowerCase()
-                                .includes(inputValue.toLowerCase()) &&
-                              option.media_type === 3
-                          );
-                        }}
-                        renderInput={(params) => (
-                          <TextField
-                            {...params}
-                            label="Выберите логотип достопримечательности"
-                            margin="normal"
-                            variant="outlined"
-                            error={!!errors.arms}
-                            helperText={(errors as any)?.arms?.message}
-                            required
-                          />
-                        )}
-                      />
-                    )}
-                  />
-                </Box>
-
-                <Box sx={{ display: "none" }}>
-                  <Controller
-                    control={control}
-                    name="watermark_lu"
-                    defaultValue={null}
-                    render={({ field }) => (
-                      <Autocomplete
-                        {...mediaAutocompleteProps}
-                        value={
-                          mediaAutocompleteProps.options.find(
-                            (option) => option.id === field.value
-                          ) || null
-                        }
-                        onChange={(_, value) => {
-                          field.onChange(value?.id || "");
-                        }}
-                        getOptionLabel={(item) => {
-                          return item ? item.media_name : "";
-                        }}
-                        isOptionEqualToValue={(option, value) => {
-                          return option.id === value?.id;
-                        }}
-                        filterOptions={(options, { inputValue }) => {
-                          return options.filter((option) =>
-                            option.media_name
-                              .toLowerCase()
-                              .includes(inputValue.toLowerCase())
-                          );
-                        }}
-                        renderInput={(params) => (
-                          <TextField
-                            {...params}
-                            label="Выберите водный знак (Левый верх)"
-                            margin="normal"
-                            variant="outlined"
-                            error={!!errors.arms}
-                            helperText={(errors as any)?.arms?.message}
-                            required
-                          />
-                        )}
-                      />
-                    )}
-                  />
-                </Box>
-                <Box sx={{ display: "none" }}>
-                  <Controller
-                    control={control}
-                    name="watermark_rd"
-                    defaultValue={null}
-                    render={({ field }) => (
-                      <Autocomplete
-                        {...mediaAutocompleteProps}
-                        value={
-                          mediaAutocompleteProps.options.find(
-                            (option) => option.id === field.value
-                          ) || null
-                        }
-                        onChange={(_, value) => {
-                          field.onChange(value?.id || "");
-                        }}
-                        getOptionLabel={(item) => {
-                          return item ? item.media_name : "";
-                        }}
-                        isOptionEqualToValue={(option, value) => {
-                          return option.id === value?.id;
-                        }}
-                        filterOptions={(options, { inputValue }) => {
-                          return options.filter((option) =>
-                            option.media_name
-                              .toLowerCase()
-                              .includes(inputValue.toLowerCase())
-                          );
-                        }}
-                        renderInput={(params) => (
-                          <TextField
-                            {...params}
-                            label="Выберите водный знак (Правый вверх)"
-                            margin="normal"
-                            variant="outlined"
-                            error={!!errors.arms}
-                            helperText={(errors as any)?.arms?.message}
-                            required
-                          />
-                        )}
-                      />
-                    )}
-                  />
-                </Box>
-
-                <Controller
-                  control={control}
-                  name="left_article"
-                  defaultValue={null}
-                  render={({ field }) => (
-                    <Autocomplete
-                      {...articleAutocompleteProps}
-                      value={
-                        articleAutocompleteProps.options.find(
-                          (option) => option.id === field.value
-                        ) || null
-                      }
-                      onChange={(_, value) => {
-                        field.onChange(value?.id || "");
-                        setLeftArticleData(undefined);
-                      }}
-                      getOptionLabel={(item) => {
-                        return item ? item.heading : "";
-                      }}
-                      isOptionEqualToValue={(option, value) => {
-                        return option.id === value?.id;
-                      }}
-                      filterOptions={(options, { inputValue }) => {
-                        return options.filter((option) =>
-                          option.heading
-                            .toLowerCase()
-                            .includes(inputValue.toLowerCase())
-                        );
-                      }}
-                      renderInput={(params) => (
-                        <TextField
-                          {...params}
-                          label="Левая статья"
-                          margin="normal"
-                          variant="outlined"
-                          error={!!errors.arms}
-                          helperText={(errors as any)?.arms?.message}
+                                .includes(inputValue.toLowerCase())
+                            );
+                          }}
+                          renderInput={(params) => (
+                            <TextField
+                              {...params}
+                              label="Выберите водный знак (Левый верх)"
+                              margin="normal"
+                              variant="outlined"
+                              error={!!errors.arms}
+                              helperText={(errors as any)?.arms?.message}
+                              required
+                            />
+                          )}
                         />
                       )}
                     />
-                  )}
-                />
-
-                {leftArticleId ? (
-                  <Button
-                    variant="outlined"
-                    size="large"
-                    sx={{
-                      width: "100%",
-                    }}
-                    onClick={() => {
-                      setArticleModalOpenAction(true);
-                      setArticleIdAction(leftArticleId);
-                    }}
-                    color="secondary"
-                  >
-                    Редактировать выбранную левую статью
-                  </Button>
-                ) : (
-                  <>
-                    <Typography
-                      variant="h6"
-                      gutterBottom
-                      px={2}
-                      py={.5}
-                      
-                      sx={{
-                        color: "text.primary"
-                      }}
-                    >
-                    Создать и прикрепить новую статью:
-                    </Typography>
-                    <CreateSightArticle
-                      language={language}
-                      parentId={sightId!}
-                      parentResource="sight"
-                      childResource="article"
-                      title="статью"
-                      left
-                      setHeadingParent={(heading) => {
-                        //console.log("Updating", heading)
-                        setCreatingArticleHeading(heading);
-                      }}
-                      setBodyParent={(body) => {
-                        setCreatingArticleBody(body);
-                      }}
+                  </Box>
+                  <Box sx={{ display: "none" }}>
+                    <Controller
+                      control={control}
+                      name="watermark_rd"
+                      defaultValue={null}
+                      render={({ field }) => (
+                        <Autocomplete
+                          {...mediaAutocompleteProps}
+                          value={
+                            mediaAutocompleteProps.options.find(
+                              (option) => option.id === field.value
+                            ) || null
+                          }
+                          onChange={(_, value) => {
+                            field.onChange(value?.id || "");
+                          }}
+                          getOptionLabel={(item) => {
+                            return item ? item.media_name : "";
+                          }}
+                          isOptionEqualToValue={(option, value) => {
+                            return option.id === value?.id;
+                          }}
+                          filterOptions={(options, { inputValue }) => {
+                            return options.filter((option) =>
+                              option.media_name
+                                .toLowerCase()
+                                .includes(inputValue.toLowerCase())
+                            );
+                          }}
+                          renderInput={(params) => (
+                            <TextField
+                              {...params}
+                              label="Выберите водный знак (Правый вверх)"
+                              margin="normal"
+                              variant="outlined"
+                              error={!!errors.arms}
+                              helperText={(errors as any)?.arms?.message}
+                              required
+                            />
+                          )}
+                        />
+                      )}
                     />
-                  </>
-                  
-                  // <Link to="/article/create">
-                  //   <Button
-                  //     variant="outlined"
-                  //     size="large"
-                  //     sx={{
-                  //       width: "100%",
-                  //     }}
-                  //     color="secondary"
-                  //   >
-                  //     Создать новую статью
-                  //   </Button>
-                  // </Link>
-                )}
+                  </Box>
+
+                  <Controller
+                    control={control}
+                    name="left_article"
+                    defaultValue={null}
+                    render={({ field }) => (
+                      <Autocomplete
+                        {...articleAutocompleteProps}
+                        value={
+                          articleAutocompleteProps.options.find(
+                            (option) => option.id === field.value
+                          ) || null
+                        }
+                        onChange={(_, value) => {
+                          field.onChange(value?.id || "");
+                          setLeftArticleData(undefined);
+                        }}
+                        getOptionLabel={(item) => {
+                          return item ? item.heading : "";
+                        }}
+                        isOptionEqualToValue={(option, value) => {
+                          return option.id === value?.id;
+                        }}
+                        filterOptions={(options, { inputValue }) => {
+                          return options.filter((option) =>
+                            option.heading
+                              .toLowerCase()
+                              .includes(inputValue.toLowerCase())
+                          );
+                        }}
+                        renderInput={(params) => (
+                          <TextField
+                            {...params}
+                            label="Левая статья"
+                            margin="normal"
+                            variant="outlined"
+                            error={!!errors.arms}
+                            helperText={(errors as any)?.arms?.message}
+                          />
+                        )}
+                      />
+                    )}
+                  />
+
+                  {leftArticleId ? (
+                    <Button
+                      variant="outlined"
+                      size="large"
+                      sx={{
+                        width: "100%",
+                      }}
+                      onClick={() => {
+                        setArticleModalOpenAction(true);
+                        setArticleIdAction(leftArticleId);
+                      }}
+                      color="secondary"
+                    >
+                      Редактировать выбранную левую статью
+                    </Button>
+                  ) : (
+                    <>
+                      <Typography
+                        variant="h6"
+                        gutterBottom
+                        px={2}
+                        py={0.5}
+                        sx={{
+                          color: "text.primary",
+                        }}
+                      >
+                        Создать и прикрепить новую статью:
+                      </Typography>
+                      <CreateSightArticle
+                        language={language}
+                        parentId={sightId!}
+                        parentResource="sight"
+                        childResource="article"
+                        title="статью"
+                        left
+                        setHeadingParent={(heading) => {
+                          //console.log("Updating", heading)
+                          setCreatingArticleHeading(heading);
+                        }}
+                        setBodyParent={(body) => {
+                          setCreatingArticleBody(body);
+                        }}
+                      />
+                    </>
+
+                    // <Link to="/article/create">
+                    //   <Button
+                    //     variant="outlined"
+                    //     size="large"
+                    //     sx={{
+                    //       width: "100%",
+                    //     }}
+                    //     color="secondary"
+                    //   >
+                    //     Создать новую статью
+                    //   </Button>
+                    // </Link>
+                  )}
+                </Box>
               </Box>
             </Box>
-          </Box>
-          <Paper
+            <Paper
               sx={{
                 p: 2,
                 width: "30%",
@@ -767,7 +808,7 @@ export const SightEdit = observer(() => {
                   mb: 3,
                 }}
               >
-                {leftArticleId ? leftArticleData?.heading : creatingArticleHeading}
+                {name}
               </Typography>
 
               {/* Адрес */}
@@ -786,752 +827,841 @@ export const SightEdit = observer(() => {
                 </Box>
               </Typography>
 
-              {/* Текст статьи */}
-              <Typography variant="body1" sx={{ mb: 2 }}>
-                <Box
-                  component="span"
-                  sx={{
+              <Box
+                sx={{
+                  "& img": {
+                    maxWidth: "100%",
+                    height: "auto",
+                    borderRadius: 1,
+                  },
+                  "& h1, & h2, & h3, & h4, & h5, & h6": {
+                    color: "primary.main",
+                    mt: 2,
+                    mb: 1,
+                  },
+                  "& p": {
+                    mb: 2,
                     color: (theme) =>
                       theme.palette.mode === "dark" ? "grey.300" : "grey.800",
-                  }}
-                >
+                  },
+                  "& a": {
+                    color: "primary.main",
+                    textDecoration: "none",
+                    "&:hover": {
+                      textDecoration: "underline",
+                    },
+                  },
+                  "& blockquote": {
+                    borderLeft: "4px solid",
+                    borderColor: "primary.main",
+                    pl: 2,
+                    my: 2,
+                    color: "text.secondary",
+                  },
+                  "& code": {
+                    bgcolor: (theme) =>
+                      theme.palette.mode === "dark" ? "grey.900" : "grey.100",
+                    p: 0.5,
+                    borderRadius: 0.5,
+                    color: "primary.main",
+                  },
+                }}
+              >
+                <ReactMarkdown rehypePlugins={[rehypeRaw]}>
                   {leftArticleId ? leftArticleData?.body : creatingArticleBody}
-                </Box>
-              </Typography>
+                </ReactMarkdown>
+              </Box>
             </Paper>
           </Box>
         </Edit>
       </CustomTabPanel>
 
       <CustomTabPanel value={tabValue} index={1}>
-        <Edit 
+        <Edit
           saveButtonProps={{
             ...saveButtonProps,
-            onClick: handleFormSubmit
+            onClick: handleFormSubmit,
           }}
           footerButtonProps={{
-          sx: {bottom: 0, left: 0 },
-        }}>
-        <Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
-          <Box sx={{ flex:1, gap: 2, position: "relative" }}>
-            <Box component="form" sx={{ flex: 1, display: "flex", flexDirection: "column" }} autoComplete="off">
-
-            <Controller
-              control={control}
-              name="preview_media"
-              defaultValue={null}
-              render={({ field }) => (
-                <Autocomplete
-                  {...mediaAutocompleteProps}
-                  value={
-                    mediaAutocompleteProps.options.find(
-                      (option) => option.id === field.value
-                    ) || null
-                  }
-                  onChange={(_, value) => {
-                    console.log(value, _)
-                    field.onChange(value?.id || "");
-                  }}
-                  getOptionLabel={(item) => {
-                    return item ? item.media_name : "";
-                  }}
-                  isOptionEqualToValue={(option, value) => {
-                    return option.id === value?.id;
-                  }}
-                  filterOptions={(options, { inputValue }) => {
-                    return options.filter(
-                      (option) =>
-                        option.media_name
-                          .toLowerCase()
-                          .includes(inputValue.toLowerCase()) &&
-                        [1,2,5,6].includes(option.media_type)
-                    );
-                  }}
-                  renderInput={(params) => (
-                    <TextField
-                      {...params}
-                      onClick={() => {
-                        //setPreviewSelected(true);
-                        //setSelectedMediaIndex(-1);
+            sx: { bottom: 0, left: 0 },
+          }}
+        >
+          <Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
+            <Box sx={{ flex: 1, gap: 2, position: "relative" }}>
+              <Box
+                component="form"
+                sx={{ flex: 1, display: "flex", flexDirection: "column" }}
+                autoComplete="off"
+              >
+                <Controller
+                  control={control}
+                  name="preview_media"
+                  defaultValue={null}
+                  render={({ field }) => (
+                    <Autocomplete
+                      {...mediaAutocompleteProps}
+                      value={
+                        mediaAutocompleteProps.options.find(
+                          (option) => option.id === field.value
+                        ) || null
+                      }
+                      onChange={(_, value) => {
+                        console.log(value, _);
+                        field.onChange(value?.id || "");
                       }}
-                      label="Медиа-предпросмотр"
-                      margin="normal"
-                      variant="outlined"
-                      error={!!errors.arms}
-                      helperText={(errors as any)?.arms?.message}
+                      getOptionLabel={(item) => {
+                        return item ? item.media_name : "";
+                      }}
+                      isOptionEqualToValue={(option, value) => {
+                        return option.id === value?.id;
+                      }}
+                      filterOptions={(options, { inputValue }) => {
+                        return options.filter((option) =>
+                          option.media_name
+                            .toLowerCase()
+                            .includes(inputValue.toLowerCase())
+                        );
+                      }}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          onClick={() => {
+                            setPreviewSelected(true);
+                            //setSelectedMediaIndex(-1);
+                          }}
+                          label="Медиа-предпросмотр"
+                          margin="normal"
+                          variant="outlined"
+                          error={!!errors.arms}
+                          helperText={(errors as any)?.arms?.message}
+                        />
+                      )}
                     />
                   )}
                 />
-              )}
-            />
-            </Box>
-            <LanguageSelector action={handleLanguageChange} />
-            <Box sx={{ mt: 3 }}>
-              <Box sx={{ mb: 2 }}>
-                <Box sx={{ display: "flex", gap: 2, height: "min-content" }}>
-                  <Box
-                    sx={{
-                      cursor: "pointer",
-                      flex: 1,
-                      display: "flex",
-                      justifyContent: "center",
-                      bgcolor: articleAdditionMode === "attaching" ? "primary.main" : "transparent",
-                      color: articleAdditionMode === "attaching" ? "white" : "inherit",
-                      borderRadius: 1,
-                      p: 1,
-                    }}
-                    onClick={() => setArticleAdditionMode("attaching")}
-                  >
-                    Добавить существующую статью
-                  </Box>
-                  <Box
-                    sx={{
-                      cursor: "pointer",
-                      flex: 1,
-                      display: "flex",
-                      justifyContent: "center",
-                      bgcolor: articleAdditionMode === "creating" ? "primary.main" : "transparent",
-                      color: articleAdditionMode === "creating" ? "white" : "inherit",
-                      borderRadius: 1,
-                      p: 1,
-                    }}
-                    onClick={() => setArticleAdditionMode("creating")}
-                  >
-                    Создать и привязать новую статью
+              </Box>
+              <LanguageSelector action={handleLanguageChange} />
+              <Box sx={{ mt: 3 }}>
+                <Box sx={{ mb: 2 }}>
+                  <Box sx={{ display: "flex", gap: 2, height: "min-content" }}>
+                    <Box
+                      sx={{
+                        cursor: "pointer",
+                        flex: 1,
+                        display: "flex",
+                        justifyContent: "center",
+                        bgcolor:
+                          articleAdditionMode === "attaching"
+                            ? "primary.main"
+                            : "transparent",
+                        color:
+                          articleAdditionMode === "attaching"
+                            ? "white"
+                            : "inherit",
+                        borderRadius: 1,
+                        p: 1,
+                      }}
+                      onClick={() => setArticleAdditionMode("attaching")}
+                    >
+                      Добавить существующую статью
+                    </Box>
+                    <Box
+                      sx={{
+                        cursor: "pointer",
+                        flex: 1,
+                        display: "flex",
+                        justifyContent: "center",
+                        bgcolor:
+                          articleAdditionMode === "creating"
+                            ? "primary.main"
+                            : "transparent",
+                        color:
+                          articleAdditionMode === "creating"
+                            ? "white"
+                            : "inherit",
+                        borderRadius: 1,
+                        p: 1,
+                      }}
+                      onClick={() => setArticleAdditionMode("creating")}
+                    >
+                      Создать и привязать новую статью
+                    </Box>
                   </Box>
                 </Box>
-              </Box>
-              {articleAdditionMode === "attaching" && (
-                <Stack gap={2} mt={2}>
-                  <Autocomplete
-                    {...articleAutocompleteProps}
-                    value={
-                      articleAutocompleteProps.options.find(
-                        (option) => option.id === selectedItemId
-                      ) || null
-                    }
-                    onChange={(_, value) => {
-                      setSelectedItemId(value?.id || "");
-                      setLeftArticleData(undefined);
-                    }}
-                    getOptionLabel={(item) => {
-                      return item ? item.heading : "";
-                    }}
-                    isOptionEqualToValue={(option, value) => {
-                      return option.id === value?.id;
-                    }}
-                    filterOptions={(options, { inputValue }) => {
-                      return options.filter((option) =>
-                        option.heading
-                          .toLowerCase()
-                          .includes(inputValue.toLowerCase())
-                      );
-                    }}
-                    renderInput={(params) => (
-                      <TextField
-                        {...params}
-                        label="Добавляемая статья"
-                        margin="normal"
+                {articleAdditionMode === "attaching" && (
+                  <Stack gap={2} mt={2}>
+                    <Autocomplete
+                      {...articleAutocompleteProps}
+                      value={
+                        articleAutocompleteProps.options.find(
+                          (option) => option.id === selectedItemId
+                        ) || null
+                      }
+                      onChange={(_, value) => {
+                        setSelectedItemId(value?.id || "");
+                        setLeftArticleData(undefined);
+                      }}
+                      getOptionLabel={(item) => {
+                        return item ? item.heading : "";
+                      }}
+                      isOptionEqualToValue={(option, value) => {
+                        return option.id === value?.id;
+                      }}
+                      filterOptions={(options, { inputValue }) => {
+                        return options.filter((option) =>
+                          option.heading
+                            .toLowerCase()
+                            .includes(inputValue.toLowerCase())
+                        );
+                      }}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label="Добавляемая статья"
+                          margin="normal"
+                          variant="outlined"
+                          error={!!errors.arms}
+                          helperText={(errors as any)?.arms?.message}
+                        />
+                      )}
+                    />
+                    <Box sx={{ mt: -2, display: "flex", gap: 2 }}>
+                      <Button
+                        variant="contained"
+                        onClick={linkItem}
+                        disabled={!selectedItemId}
+                        sx={{ alignSelf: "flex-start" }}
+                      >
+                        Добавить
+                      </Button>
+                      <Button
                         variant="outlined"
-                        error={!!errors.arms}
-                        helperText={(errors as any)?.arms?.message}
-                      />
-                    )}
+                        onClick={() => setSelectedItemId(undefined)}
+                      >
+                        Очистить
+                      </Button>
+                    </Box>
+                  </Stack>
+                )}
+                {articleAdditionMode === "creating" && (
+                  <CreateSightArticle
+                    language={language}
+                    parentId={sightId!}
+                    parentResource="sight"
+                    childResource="article"
+                    title="статью"
+                    //left
+                    setHeadingParent={(heading) => {
+                      console.log("Updating", heading);
+                      setCreatingArticleHeading(heading);
+                    }}
+                    setBodyParent={(body) => {
+                      setCreatingArticleBody(body);
+                    }}
                   />
-                  <Box sx={{ mt: -2, display: "flex", gap: 2 }}>
-                    <Button
-                      variant="contained"
-                      onClick={linkItem}
-                      disabled={!selectedItemId}
-                      sx={{ alignSelf: "flex-start" }}
-                    >
-                      Добавить
-                    </Button>
-                    <Button variant="outlined" onClick={() => setSelectedItemId(undefined)}>
-                      Очистить
-                    </Button>
-                  </Box>
-                </Stack>
-              )}
-              {articleAdditionMode === "creating" && (
-                <CreateSightArticle
-                  language={language}
+                )}
+                <Typography
+                  variant="subtitle1"
+                  fontWeight="bold"
+                  sx={{ mt: 4 }}
+                >
+                  Привязанные статьи
+                </Typography>
+
+                <LinkedItemsContents<ArticleItem>
+                  type="edit"
+                  disableCreation
                   parentId={sightId!}
+                  dragAllowed={true}
+                  setItemsParent={setLinkedArticles}
                   parentResource="sight"
+                  fields={articleFields}
                   childResource="article"
-                  title="статью"
-                  //left
-                  setHeadingParent={(heading) => {
-                    console.log("Updating", heading)
-                    setCreatingArticleHeading(heading);
-                  }}
-                  setBodyParent={(body) => {
-                    setCreatingArticleBody(body);
-                  }}
+                  title="статьи"
+                  updatedLinkedItems={updatedLinkedArticles}
                 />
-              )}
-              <Typography variant="subtitle1" fontWeight="bold" sx={{mt: 4}}>
-                Привязанные статьи
-              </Typography>
-
-              <LinkedItemsContents<ArticleItem>
-                type="edit"
-                disableCreation
-                parentId={sightId!}
-                dragAllowed={true}
-                setItemsParent={setLinkedArticles}
-                parentResource="sight"
-                fields={articleFields}
-                childResource="article"
-                title="статьи"
-                updatedLinkedItems={updatedLinkedArticles}
-              />
-
+              </Box>
             </Box>
-          </Box>
-          {/* Предпросмотр */}
-          <Paper
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              p: 0,
-              height: "max-content",
-              minWidth: "400px",
-              width: "30%",
-
-              top: "178px",
-              minHeight: "600px",
-              right: 50,
-              zIndex: 1000,
-              borderRadius: 2,
-              border: "1px solid",
-
-              bgcolor: "#806c59",
-            }}
-          >
-            <Box
+            {/* Предпросмотр */}
+            <Paper
               sx={{
                 display: "flex",
                 flexDirection: "column",
-                flexGrow: 1,
+                p: 0,
+                height: "max-content",
+                minWidth: "400px",
+                width: "30%",
+
+                top: "178px",
+                minHeight: "600px",
+                right: 50,
+                zIndex: 1000,
+                borderRadius: 2,
+                border: "1px solid",
+
+                bgcolor: "#806c59",
               }}
             >
-              
               <Box
                 sx={{
-                  mb: 2,
-                  //margin: "0 auto",
                   display: "flex",
                   flexDirection: "column",
-                  maxHeight: "300px",
-                  gap: 2,
+                  flexGrow: 1,
                 }}
               >
-                {mediaFile && (
-                  <MediaView media={mediaFile} />
-                )}
-              </Box>
-
-              {
                 <Box
                   sx={{
-                    //mt: "auto",
-                    flexGrow: 1,
-                    mb: 0,
+                    mb: 2,
+                    //margin: "0 auto",
                     display: "flex",
                     flexDirection: "column",
-                    justifyContent: "space-between",
-                    //height: "250px",
-                    overflowY: "auto",
+                    maxHeight: "300px",
+                    gap: 2,
                   }}
                 >
+                  {previewSelected && previewMediaFile && (
+                    <MediaView media={previewMediaFile} />
+                  )}
+                  {mediaFile && !previewSelected && (
+                    <MediaView media={mediaFile} />
+                  )}
+                </Box>
 
-                  {!previewSelected && articleAdditionMode !== "creating" && (
-                    <Box
-                      sx={{
-                        display: "flex",
-                        flexDirection: "column",
-                        flexGrow: 1,
-                        gap: 2,
-                      }}
-                    >
-                      {selectedArticle && (
+                {
+                  <Box
+                    sx={{
+                      //mt: "auto",
+                      flexGrow: 1,
+                      mb: 0,
+                      display: "flex",
+                      flexDirection: "column",
+                      justifyContent: "space-between",
+                      //height: "250px",
+                      overflowY: "auto",
+                    }}
+                  >
+                    {!previewSelected && articleAdditionMode !== "creating" && (
+                      <Box
+                        sx={{
+                          display: "flex",
+                          flexDirection: "column",
+                          flexGrow: 1,
+                          gap: 2,
+                        }}
+                      >
+                        {selectedArticle && (
+                          <Typography
+                            variant="h4"
+                            gutterBottom
+                            px={2}
+                            py={0.5}
+                            sx={{
+                              color: "text.primary",
+                              background:
+                                "linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
+                              boxShadow:
+                                "inset 4px 4px 12px hsla(0,0%,100%,.12)",
+                            }}
+                          >
+                            {selectedArticle.heading}
+                          </Typography>
+                        )}
+
+                        {selectedArticle && (
+                          <Box
+                            sx={{
+                              mt: -6,
+                              p: 2,
+                              "& img": {
+                                maxWidth: "100%",
+                                height: "auto",
+                                borderRadius: 1,
+                              },
+                              "& h1, & h2, & h3, & h4, & h5, & h6": {
+                                color: "primary.main",
+                                mt: 2,
+                                mb: 1,
+                              },
+                              "& p": {
+                                mb: 2,
+                                color: (theme) =>
+                                  theme.palette.mode === "dark"
+                                    ? "grey.300"
+                                    : "grey.800",
+                              },
+                              "& a": {
+                                color: "primary.main",
+                                textDecoration: "none",
+                                "&:hover": {
+                                  textDecoration: "underline",
+                                },
+                              },
+                              "& blockquote": {
+                                borderLeft: "4px solid",
+                                borderColor: "primary.main",
+                                pl: 2,
+                                my: 2,
+                                color: "text.secondary",
+                              },
+                              "& code": {
+                                bgcolor: (theme) =>
+                                  theme.palette.mode === "dark"
+                                    ? "grey.900"
+                                    : "grey.100",
+                                p: 0.5,
+                                borderRadius: 0.5,
+                                color: "primary.main",
+                              },
+                            }}
+                          >
+                            <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+                              {selectedArticle.body}
+                            </ReactMarkdown>
+                          </Box>
+                        )}
+                      </Box>
+                    )}
+
+                    {articleAdditionMode === "creating" && (
+                      <Box
+                        sx={{
+                          display: "flex",
+                          flexDirection: "column",
+                          flexGrow: 1,
+                          gap: 2,
+                        }}
+                      >
                         <Typography
                           variant="h4"
                           gutterBottom
                           px={2}
-                          py={.5}
-                          
+                          py={0.5}
                           sx={{
                             color: "text.primary",
                             background:
-                            "linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
-                          boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
-                          
+                              "linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
+                            boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
                           }}
                         >
-                          {selectedArticle.heading}
+                          {creatingArticleHeading}
                         </Typography>
-                      )}
 
-                      {selectedArticle && (
                         <Typography
                           variant="body1"
                           gutterBottom
                           px={2}
                           sx={{ color: "text.primary" }}
                         >
-                          {selectedArticle.body}
+                          {creatingArticleBody}
                         </Typography>
-                      )}
-                    </Box>
-                  )}
-
-                  {articleAdditionMode === "creating" && (
-                    <Box
-                      sx={{
-                        display: "flex",
-                        flexDirection: "column",
-                        flexGrow: 1,
-                        gap: 2,
-                      }}
-                    >
-                      <Typography
-                        variant="h4"
-                        gutterBottom
-                        px={2}
-                        py={.5}
-                        
-                        sx={{
-                          color: "text.primary",
-                          background:
-                          "linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
-                        boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
-                        
-                        }}
-                      >
-                        {creatingArticleHeading}
-                      </Typography>
-
-                      <Typography
-                        variant="body1"
-                        gutterBottom
-                        px={2}
-                        sx={{ color: "text.primary" }}
-                      >
-                        {creatingArticleBody}
-                      </Typography>
-                    </Box>
-                  )}
-                  <Box sx={{mt: "auto"}}>
-                    <Box
-                      sx={{
-                        display: "flex",
-                        flexDirection: "row",
-                        justifyContent: "center",
-                        margin: "0 auto",
-                        background:
-                          "linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
-                        boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
-                        
-                      }}
-                    >
+                      </Box>
+                    )}
+                    <Box sx={{ mt: "auto" }}>
                       <Box
                         sx={{
                           display: "flex",
                           flexDirection: "row",
-                          flexWrap: "wrap",
-                          borderRadius: 2,
+                          justifyContent: "center",
+                          margin: "0 auto",
+                          background:
+                            "linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
+                          boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
                         }}
                       >
-                        {linkedArticles.map((article, index) => (
-                          <Box
-                            key={article.id}
-                            onClick={() => {
-                              setSelectedArticleIndex(index);
-                              setPreviewSelected(false);
-                            }}
-                            sx={{
-                              cursor: "pointer",
-                              bgcolor: "transparent",
-                              color: "inherit",
-                              textDecoration:
-                                selectedArticleIndex === index ?
-                                "underline" : "none",
-                              p: 1,
-                              borderRadius: 1,
-                            }}
-                          >
-                            <Typography variant="body1">
-                              {article.heading}
-                            </Typography>
-                          </Box>
-                        ))}
+                        <Box
+                          sx={{
+                            display: "flex",
+                            flexDirection: "row",
+                            flexWrap: "wrap",
+                            borderRadius: 2,
+                          }}
+                        >
+                          {linkedArticles.map((article, index) => (
+                            <Box
+                              key={article.id}
+                              onClick={() => {
+                                setSelectedArticleIndex(index);
+                                setPreviewSelected(false);
+                              }}
+                              sx={{
+                                cursor: "pointer",
+                                bgcolor: "transparent",
+                                color: "inherit",
+                                textDecoration:
+                                  selectedArticleIndex === index
+                                    ? "underline"
+                                    : "none",
+                                p: 1,
+                                borderRadius: 1,
+                              }}
+                            >
+                              <Typography variant="body1">
+                                {article.heading}
+                              </Typography>
+                            </Box>
+                          ))}
+                        </Box>
                       </Box>
                     </Box>
                   </Box>
-                </Box>
-              }
-            </Box>
-          </Paper>
-        </Box>
-      </Edit>
-      </CustomTabPanel>
-
-      <CustomTabPanel value={tabValue} index={2}>
-        <Edit 
-          saveButtonProps={{...saveButtonProps, onClick: handleFormSubmit}}
-          footerButtonProps={{sx: {bottom: 0, left: 0}}}
-        >
-        <Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
-          <Box sx={{ display: "flex", flex: 1, gap: 2, position: "relative" }}>
-            <Box component="form" sx={{ flex: 1, display: "flex", flexDirection: "column" }} autoComplete="off">
-              <LanguageSelector action={handleLanguageChange} />
-              <TextField
-                {...register("address", {
-                  //required: "Это поле является обязательным",
-                })}
-                error={!!(errors as any)?.address}
-                helperText={(errors as any)?.address?.message}
-                margin="normal"
-                fullWidth
-                slotProps={{inputLabel: {shrink: true}}}
-                type="text"
-                label={"Адрес"}
-                name="address"
-              />
-
-              <Controller
-                control={control}
-                name="city_id"
-                //rules={{ required: "Это поле является обязательным" }}
-                defaultValue={null}
-                render={({ field }) => (
-                  <Autocomplete
-                    {...cityAutocompleteProps}
-                    value={
-                      cityAutocompleteProps.options.find(
-                        (option) => option.id === field.value
-                      ) || null
-                    }
-                    onChange={(_, value) => {
-                      field.onChange(value?.id || "");
-                    }}
-                    getOptionLabel={(item) => {
-                      return item ? item.name : "";
-                    }}
-                    isOptionEqualToValue={(option, value) => {
-                      console.log(cityAutocompleteProps.options)
-                      return option.id === value?.id;
-                    }}
-                    filterOptions={(options, { inputValue }) => {
-                      return options.filter((option) =>
-                        option.name
-                          .toLowerCase()
-                          .includes(inputValue.toLowerCase())
-                      );
-                    }}
-                    renderInput={(params) => (
-                      <TextField
-                        {...params}
-                        label="Выберите город"
-                        margin="normal"
-                        variant="outlined"
-                        error={!!errors.city_id}
-                        helperText={(errors as any)?.city_id?.message}
-                      />
-                    )}
-                  />
-                )}
-              />
-
-              <Controller
-                control={control}
-                name="thumbnail"
-                defaultValue={null}
-                render={({ field }) => (
-                  <Autocomplete
-                    {...mediaAutocompleteProps}
-                    value={
-                      mediaAutocompleteProps.options.find(
-                        (option) => option.id === field.value
-                      ) || null
-                    }
-                    onChange={(_, value) => {
-                      field.onChange(value?.id || "");
-                    }}
-                    getOptionLabel={(item) => {
-                      return item ? item.media_name : "";
-                    }}
-                    isOptionEqualToValue={(option, value) => {
-                      return option.id === value?.id;
-                    }}
-                    filterOptions={(options, { inputValue }) => {
-                      return options.filter(
-                        (option) =>
-                          option.media_name
-                            .toLowerCase()
-                            .includes(inputValue.toLowerCase()) &&
-                          option.media_type === 3
-                      );
-                    }}
-                    renderInput={(params) => (
-                      <TextField
-                        {...params}
-                        label="Выберите логотип достопримечательности"
-                        margin="normal"
-                        variant="outlined"
-                        error={!!errors.arms}
-                        helperText={(errors as any)?.arms?.message}
-                      />
-                    )}
-                  />
-                )}
-              />
-
-              <Controller
-                control={control}
-                name="watermark_lu"
-                defaultValue={null}
-                render={({ field }) => (
-                  <Autocomplete
-                    {...mediaAutocompleteProps}
-                    value={
-                      mediaAutocompleteProps.options.find(
-                        (option) => option.id === field.value
-                      ) || null
-                    }
-                    onChange={(_, value) => {
-                      field.onChange(value?.id || "");
-                    }}
-                    getOptionLabel={(item) => {
-                      return item ? item.media_name : "";
-                    }}
-                    isOptionEqualToValue={(option, value) => {
-                      return option.id === value?.id;
-                    }}
-                    filterOptions={(options, { inputValue }) => {
-                      return options.filter(
-                        (option) =>
-                          option.media_name
-                            .toLowerCase()
-                            .includes(inputValue.toLowerCase()) &&
-                          option.media_type === 4
-                      );
-                    }}
-                    renderInput={(params) => (
-                      <TextField
-                        {...params}
-                        label="Выберите водный знак (Левый верх)"
-                        margin="normal"
-                        variant="outlined"
-                        error={!!errors.arms}
-                        helperText={(errors as any)?.arms?.message}
-                      />
-                    )}
-                  />
-                )}
-              />
-
-              <Controller
-                control={control}
-                name="watermark_rd"
-                defaultValue={null}
-                render={({ field }) => (
-                  <Autocomplete
-                    {...mediaAutocompleteProps}
-                    value={
-                      mediaAutocompleteProps.options.find(
-                        (option) => option.id === field.value
-                      ) || null
-                    }
-                    onChange={(_, value) => {
-                      field.onChange(value?.id || "");
-                    }}
-                    getOptionLabel={(item) => {
-                      return item ? item.media_name : "";
-                    }}
-                    isOptionEqualToValue={(option, value) => {
-                      return option.id === value?.id;
-                    }}
-                    filterOptions={(options, { inputValue }) => {
-                      return options.filter(
-                        (option) =>
-                          option.media_name
-                            .toLowerCase()
-                            .includes(inputValue.toLowerCase()) &&
-                          option.media_type === 4
-                      );
-                    }}
-                    renderInput={(params) => (
-                      <TextField
-                        {...params}
-                        label="Выберите водный знак (Правый вверх)"
-                        margin="normal"
-                        variant="outlined"
-                        error={!!errors.arms}
-                        helperText={(errors as any)?.arms?.message}
-                      />
-                    )}
-                  />
-                )}
-              />
-
-              <TextField
-                value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
-                onChange={handleCoordinatesChange}
-                error={!!(errors as any)?.latitude}
-                helperText={(errors as any)?.latitude?.message}
-                margin="normal"
-                fullWidth
-                slotProps={{inputLabel: {shrink: true}}}
-                type="text"
-                label={"Координаты *"}
-              />
-            </Box>
-
-            {/* Предпросмотр */}
-            <Paper
-              sx={{
-                p: 2,
-                minWidth: "fit-content",
-                width: "30%",
-
-                top: "178px",
-
-                right: 50,
-                zIndex: 1000,
-                borderRadius: 2,
-                border: "1px solid",
-                borderColor: "primary.main",
-                bgcolor: (theme) =>
-                  theme.palette.mode === "dark" ? "background.paper" : "#fff",
-              }}
-            >
-              <Typography variant="h6" gutterBottom color="primary">
-                Предпросмотр
-              </Typography>
-
-              {thumbnailPreview && (
-                <Box>
-                  <Typography
-                  variant="body1"
-                  sx={{ display: "flex", flexDirection: "column", mb: 2 }}
-                >
-                  <Box component="span" sx={{ color: "text.secondary" }}>
-                    Адрес:{" "}
-                  </Box>
-                  <Box
-                    component="span"
-                    sx={{
-                      color: (theme) =>
-                        theme.palette.mode === "dark" ? "grey.300" : "grey.800",
-                    }}
-                  >
-                    {`${addressContent}`}
-                  </Box>
-                </Typography>
-                  <Typography
-                    variant="body2"
-                    gutterBottom
-                    sx={{ color: "text.secondary" }}
-                  >
-                    Логотип достопримечательности:
-                  </Typography>
-                  <Box
-                    component="img"
-                    src={thumbnailPreview}
-                    alt="Логотип достопримечательности"
-                    sx={{
-                      width: "50%",
-                      objectFit: "cover",
-                      borderRadius: 1,
-                      marginBottom: 2,
-                    }}
-                  />
-                </Box>
-              )}
-
-              {/* Водяные знаки */}
-              <Box sx={{ mb: 2 }}>
-                <Typography
-                  variant="body1"
-                  gutterBottom
-                  sx={{ color: "text.secondary" }}
-                >
-                  Водяные знаки:
-                </Typography>
-                <Box sx={{ display: "flex", gap: 2 }}>
-                  {watermarkLUPreview && (
-                    <Box>
-                      <Typography
-                        variant="body2"
-                        gutterBottom
-                        sx={{ color: "text.secondary" }}
-                      >
-                        Левый верхний:
-                      </Typography>
-                      <Box
-                        component="img"
-                        src={watermarkLUPreview}
-                        alt="Водяной знак (ЛВ)"
-                        sx={{
-                          width: 100,
-                          height: 100,
-                          objectFit: "cover",
-                          borderRadius: 1,
-                          border: "1px solid",
-                          borderColor: "primary.main",
-                        }}
-                      />
-                    </Box>
-                  )}
-                  {watermarkRDPreview && (
-                    <Box>
-                      <Typography
-                        variant="body2"
-                        gutterBottom
-                        sx={{ color: "text.secondary" }}
-                      >
-                        Правый верхний:
-                      </Typography>
-                      <Box
-                        component="img"
-                        src={watermarkRDPreview}
-                        alt="Водяной знак (ПН)"
-                        sx={{
-                          width: 100,
-                          height: 100,
-                          objectFit: "cover",
-                          borderRadius: 1,
-                          border: "1px solid",
-                          borderColor: "primary.main",
-                        }}
-                      />
-                    </Box>
-                  )}
-                </Box>
-                {/* Координаты */}
-                <Typography
-                  variant="body1"
-                  sx={{ display: "flex", flexDirection: "column", mb: 2 }}
-                >
-                  <Box component="span" sx={{ color: "text.secondary" }}>
-                    Координаты:{" "}
-                  </Box>
-                  <Box
-                    component="span"
-                    sx={{
-                      color: (theme) =>
-                        theme.palette.mode === "dark" ? "grey.300" : "grey.800",
-                    }}
-                  >
-                    {`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
-                  </Box>
-                </Typography>
+                }
               </Box>
             </Paper>
           </Box>
+        </Edit>
+      </CustomTabPanel>
+
+      <CustomTabPanel value={tabValue} index={2}>
+        <Edit
+          saveButtonProps={{ ...saveButtonProps, onClick: handleFormSubmit }}
+          footerButtonProps={{ sx: { bottom: 0, left: 0 } }}
+        >
+          <Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
+            <Box
+              sx={{ display: "flex", flex: 1, gap: 2, position: "relative" }}
+            >
+              <Box
+                component="form"
+                sx={{ flex: 1, display: "flex", flexDirection: "column" }}
+                autoComplete="off"
+              >
+                <LanguageSelector action={handleLanguageChange} />
+
+                <Controller
+                  control={control}
+                  name="city_id"
+                  //rules={{ required: "Это поле является обязательным" }}
+                  defaultValue={null}
+                  render={({ field }) => (
+                    <Autocomplete
+                      {...cityAutocompleteProps}
+                      value={
+                        cityAutocompleteProps.options.find(
+                          (option) => option.id === field.value
+                        ) || null
+                      }
+                      onChange={(_, value) => {
+                        field.onChange(value?.id || "");
+                      }}
+                      getOptionLabel={(item) => {
+                        return item ? item.name : "";
+                      }}
+                      isOptionEqualToValue={(option, value) => {
+                        console.log(cityAutocompleteProps.options);
+                        return option.id === value?.id;
+                      }}
+                      filterOptions={(options, { inputValue }) => {
+                        return options.filter((option) =>
+                          option.name
+                            .toLowerCase()
+                            .includes(inputValue.toLowerCase())
+                        );
+                      }}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label="Выберите город"
+                          margin="normal"
+                          variant="outlined"
+                          error={!!errors.city_id}
+                          helperText={(errors as any)?.city_id?.message}
+                        />
+                      )}
+                    />
+                  )}
+                />
+
+                <Controller
+                  control={control}
+                  name="thumbnail"
+                  defaultValue={null}
+                  render={({ field }) => (
+                    <Autocomplete
+                      {...mediaAutocompleteProps}
+                      value={
+                        mediaAutocompleteProps.options.find(
+                          (option) => option.id === field.value
+                        ) || null
+                      }
+                      onChange={(_, value) => {
+                        field.onChange(value?.id || "");
+                      }}
+                      getOptionLabel={(item) => {
+                        return item ? item.media_name : "";
+                      }}
+                      isOptionEqualToValue={(option, value) => {
+                        return option.id === value?.id;
+                      }}
+                      filterOptions={(options, { inputValue }) => {
+                        return options.filter(
+                          (option) =>
+                            option.media_name
+                              .toLowerCase()
+                              .includes(inputValue.toLowerCase()) &&
+                            option.media_type === 3
+                        );
+                      }}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label="Выберите логотип достопримечательности"
+                          margin="normal"
+                          variant="outlined"
+                          error={!!errors.arms}
+                          helperText={(errors as any)?.arms?.message}
+                        />
+                      )}
+                    />
+                  )}
+                />
+
+                <Controller
+                  control={control}
+                  name="watermark_lu"
+                  defaultValue={null}
+                  render={({ field }) => (
+                    <Autocomplete
+                      {...mediaAutocompleteProps}
+                      value={
+                        mediaAutocompleteProps.options.find(
+                          (option) => option.id === field.value
+                        ) || null
+                      }
+                      onChange={(_, value) => {
+                        field.onChange(value?.id || "");
+                      }}
+                      getOptionLabel={(item) => {
+                        return item ? item.media_name : "";
+                      }}
+                      isOptionEqualToValue={(option, value) => {
+                        return option.id === value?.id;
+                      }}
+                      filterOptions={(options, { inputValue }) => {
+                        return options.filter(
+                          (option) =>
+                            option.media_name
+                              .toLowerCase()
+                              .includes(inputValue.toLowerCase()) &&
+                            option.media_type === 4
+                        );
+                      }}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label="Выберите водный знак (Левый верх)"
+                          margin="normal"
+                          variant="outlined"
+                          error={!!errors.arms}
+                          helperText={(errors as any)?.arms?.message}
+                        />
+                      )}
+                    />
+                  )}
+                />
+
+                <Controller
+                  control={control}
+                  name="watermark_rd"
+                  defaultValue={null}
+                  render={({ field }) => (
+                    <Autocomplete
+                      {...mediaAutocompleteProps}
+                      value={
+                        mediaAutocompleteProps.options.find(
+                          (option) => option.id === field.value
+                        ) || null
+                      }
+                      onChange={(_, value) => {
+                        field.onChange(value?.id || "");
+                      }}
+                      getOptionLabel={(item) => {
+                        return item ? item.media_name : "";
+                      }}
+                      isOptionEqualToValue={(option, value) => {
+                        return option.id === value?.id;
+                      }}
+                      filterOptions={(options, { inputValue }) => {
+                        return options.filter(
+                          (option) =>
+                            option.media_name
+                              .toLowerCase()
+                              .includes(inputValue.toLowerCase()) &&
+                            option.media_type === 4
+                        );
+                      }}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label="Выберите водный знак (Правый вверх)"
+                          margin="normal"
+                          variant="outlined"
+                          error={!!errors.arms}
+                          helperText={(errors as any)?.arms?.message}
+                        />
+                      )}
+                    />
+                  )}
+                />
+
+                <TextField
+                  value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
+                  onChange={handleCoordinatesChange}
+                  error={!!(errors as any)?.latitude}
+                  helperText={(errors as any)?.latitude?.message}
+                  margin="normal"
+                  fullWidth
+                  slotProps={{ inputLabel: { shrink: true } }}
+                  type="text"
+                  label={"Координаты *"}
+                />
+              </Box>
+
+              {/* Предпросмотр */}
+              <Paper
+                sx={{
+                  p: 2,
+                  minWidth: "fit-content",
+                  width: "30%",
+
+                  top: "178px",
+
+                  right: 50,
+                  zIndex: 1000,
+                  borderRadius: 2,
+                  border: "1px solid",
+                  borderColor: "primary.main",
+                  bgcolor: (theme) =>
+                    theme.palette.mode === "dark" ? "background.paper" : "#fff",
+                }}
+              >
+                <Typography variant="h6" gutterBottom color="primary">
+                  Предпросмотр
+                </Typography>
+
+                {thumbnailPreview && (
+                  <Box>
+                    <Typography
+                      variant="body1"
+                      sx={{ display: "flex", flexDirection: "column", mb: 2 }}
+                    >
+                      <Box component="span" sx={{ color: "text.secondary" }}>
+                        Адрес:{" "}
+                      </Box>
+                      <Box
+                        component="span"
+                        sx={{
+                          color: (theme) =>
+                            theme.palette.mode === "dark"
+                              ? "grey.300"
+                              : "grey.800",
+                        }}
+                      >
+                        {`${addressContent}`}
+                      </Box>
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      gutterBottom
+                      sx={{ color: "text.secondary" }}
+                    >
+                      Логотип достопримечательности:
+                    </Typography>
+                    <Box
+                      component="img"
+                      src={thumbnailPreview}
+                      alt="Логотип достопримечательности"
+                      sx={{
+                        width: "50%",
+                        objectFit: "cover",
+                        borderRadius: 1,
+                        marginBottom: 2,
+                      }}
+                    />
+                  </Box>
+                )}
+
+                {/* Водяные знаки */}
+                <Box sx={{ mb: 2 }}>
+                  <Typography
+                    variant="body1"
+                    gutterBottom
+                    sx={{ color: "text.secondary" }}
+                  >
+                    Водяные знаки:
+                  </Typography>
+                  <Box sx={{ display: "flex", gap: 2 }}>
+                    {watermarkLUPreview && (
+                      <Box>
+                        <Typography
+                          variant="body2"
+                          gutterBottom
+                          sx={{ color: "text.secondary" }}
+                        >
+                          Левый верхний:
+                        </Typography>
+                        <Box
+                          component="img"
+                          src={watermarkLUPreview}
+                          alt="Водяной знак (ЛВ)"
+                          sx={{
+                            width: 100,
+                            height: 100,
+                            objectFit: "cover",
+                            borderRadius: 1,
+                            border: "1px solid",
+                            borderColor: "primary.main",
+                          }}
+                        />
+                      </Box>
+                    )}
+                    {watermarkRDPreview && (
+                      <Box>
+                        <Typography
+                          variant="body2"
+                          gutterBottom
+                          sx={{ color: "text.secondary" }}
+                        >
+                          Правый верхний:
+                        </Typography>
+                        <Box
+                          component="img"
+                          src={watermarkRDPreview}
+                          alt="Водяной знак (ПН)"
+                          sx={{
+                            width: 100,
+                            height: 100,
+                            objectFit: "cover",
+                            borderRadius: 1,
+                            border: "1px solid",
+                            borderColor: "primary.main",
+                          }}
+                        />
+                      </Box>
+                    )}
+                  </Box>
+                  {/* Координаты */}
+                  <Typography
+                    variant="body1"
+                    sx={{ display: "flex", flexDirection: "column", mb: 2 }}
+                  >
+                    <Box component="span" sx={{ color: "text.secondary" }}>
+                      Координаты:{" "}
+                    </Box>
+                    <Box
+                      component="span"
+                      sx={{
+                        color: (theme) =>
+                          theme.palette.mode === "dark"
+                            ? "grey.300"
+                            : "grey.800",
+                      }}
+                    >
+                      {`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
+                    </Box>
+                  </Typography>
+                </Box>
+              </Paper>
+            </Box>
           </Box>
         </Edit>
       </CustomTabPanel>
diff --git a/src/pages/snapshot/list.tsx b/src/pages/snapshot/list.tsx
index aeb5461..a0cb5f1 100644
--- a/src/pages/snapshot/list.tsx
+++ b/src/pages/snapshot/list.tsx
@@ -12,8 +12,14 @@ import { CustomDataGrid } from "@components";
 import { localeText } from "../../locales/ru/localeText";
 import { observer } from "mobx-react-lite";
 import { useMany } from "@refinedev/core";
+import { DatabaseBackup } from "lucide-react";
+import axios from "axios";
+import { TOKEN_KEY } from "../../providers/authProvider";
+import { toast } from "react-toastify";
+import { useNotification } from "@refinedev/core";
 
 export const SnapshotList = observer(() => {
+  const notification = useNotification();
   const { dataGridProps } = useDataGrid({
     resource: "snapshots",
     hasPagination: false,
@@ -47,6 +53,30 @@ export const SnapshotList = observer(() => {
     return map;
   }, [parentsData]);
 
+  const handleBackup = async (id: number) => {
+    try {
+      const response = await axios.post(
+        `${import.meta.env.VITE_KRBL_API}/snapshots/${id}/restore`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
+          },
+        }
+      );
+
+      notification?.open({
+        message: "Cнапшот восстановлен",
+        type: "success",
+      });
+    } catch (error) {
+      notification?.open({
+        message: "Ошибка при восстановлении снимка",
+        type: "error",
+      });
+    }
+  };
+
   const columns = React.useMemo<GridColDef[]>(
     () => [
       {
@@ -80,6 +110,12 @@ export const SnapshotList = observer(() => {
         renderCell: function render({ row }) {
           return (
             <>
+              <button
+                className="backup-button"
+                onClick={() => handleBackup(row.ID)}
+              >
+                <DatabaseBackup />
+              </button>
               <ShowButton hideText recordItemId={row.ID} />
               <DeleteButton
                 hideText
diff --git a/src/providers/data.ts b/src/providers/data.ts
index f054ae8..450aebb 100644
--- a/src/providers/data.ts
+++ b/src/providers/data.ts
@@ -19,8 +19,6 @@ axiosInstance.interceptors.request.use((config) => {
 
   config.headers["X-Language"] = config.headers["Accept-Language"];
 
-  console.log("Request headers:", config.headers);
-
   return config;
 });
 
diff --git a/yarn.lock b/yarn.lock
index fb2e746..5bc75d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5703,6 +5703,13 @@ react-swipeable@^7.0.2:
   resolved "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.2.tgz"
   integrity sha512-v1Qx1l+aC2fdxKa9aKJiaU/ZxmJ5o98RMoFwUqAAzVWUcxgfHFXDDruCKXhw6zIYXm6V64JiHgP9f6mlME5l8w==
 
+react-toastify@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-11.0.5.tgz#ce4c42d10eeb433988ab2264d3e445c4e9d13313"
+  integrity sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==
+  dependencies:
+    clsx "^2.1.1"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"