diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
index 2ef3ffc9..aea79644 100644
--- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
+++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
@@ -1,18 +1,25 @@
+import { useState } from "react";
 import {
   Box,
   Link,
   Typography,
-  ButtonBase,
   useTheme,
   useMediaQuery,
   InputAdornment,
   IconButton,
+  Button,
   Popover,
   TextareaAutosize,
   TextField,
 } from "@mui/material";
 import { useParams } from "react-router-dom";
-import AddImage from "../../../assets/icons/questionsPage/addImage";
+
+import { AnswerDraggableList } from "../AnswerDraggableList";
+import { CropModal } from "@ui_kit/Modal/CropModal";
+import { UploadImageModal } from "../UploadImage/UploadImageModal";
+
+import AddImage from "@icons/questionsPage/addImage";
+import Image from "@icons/questionsPage/image";
 import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
 import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
 import SwitchOptionsAndPict from "./switchOptionsAndPict";
@@ -22,233 +29,344 @@ import { ImageAddIcons } from "@icons/ImageAddIcons";
 import { PointsIcon } from "@icons/questionsPage/PointsIcon";
 import { MessageIcon } from "@icons/messagIcon";
 import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
+import PlusImage from "@icons/questionsPage/plus";
 
 interface Props {
   totalIndex: number;
 }
 
 export default function OptionsAndPicture({ totalIndex }: Props) {
-  const [switchState, setSwitchState] = React.useState("setting");
-  const { listQuestions } = questionStore();
-  const quizId = Number(useParams().quizId);
+  const [open, setOpen] = useState(false);
+  const [opened, setOpened] = useState<boolean>(false);
+  const [switchState, setSwitchState] = useState("setting");
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
+  const quizId = Number(useParams().quizId);
+  const { listQuestions } = questionStore();
 
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
 
+  const uploadImage = (files: FileList | null) => {
+    if (files?.length) {
+      const [file] = Array.from(files);
+
+      const clonContent = { ...listQuestions[quizId][totalIndex].content };
+      clonContent.variants[currentIndex].image = URL.createObjectURL(file);
+      updateQuestionsList(quizId, totalIndex, { content: clonContent });
+
+      setOpen(false);
+      setOpened(true);
+    }
+  };
+
+  const addNewAnswer = () => {
+    const answerNew =
+      listQuestions[quizId][totalIndex].content.variants.slice();
+    answerNew.push({ answer: "", hints: "", emoji: "", image: "" });
+
+    updateQuestionsList(quizId, totalIndex, {
+      content: {
+        ...listQuestions[quizId][totalIndex].content,
+        variants: answerNew,
+      },
+    });
+  };
+
   return (
     <>
       <Box sx={{ pl: "20px", pr: "20px" }}>
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            paddingBottom: isMobile ? "15px" : "24px",
-            marginTop: isMobile ? "15px" : "4px",
-            height: isMobile ? "auto" : "40px",
-            marginLeft: isTablet ? "0px" : "60px",
-          }}
-        >
-          {listQuestions[quizId][totalIndex].content.variants.map((_, index) => (
-            <ButtonBase
-              key={index}
-              component="label"
-              sx={{
-                display: isTablet ? "none" : "flex",
-                cursor: "pointer",
-                alignItems: "center",
-                justifyContent: "flex-start",
-              }}
-            >
-              <input
-                onChange={({ target }) => {
-                  if (target.files?.length) {
-                    const clonContent = listQuestions[quizId][totalIndex].content;
-
-                    clonContent.variants[index].answer = URL.createObjectURL(target.files[0]);
-
-                    updateQuestionsList(quizId, totalIndex, {
-                      content: clonContent,
-                    });
-                  }
-                }}
-                hidden
-                accept="image/*"
-                multiple
-                type="file"
-              />
-              <Box sx={{ display: isTablet ? "none" : "flex", alignItems: "center" }}>
+        <AnswerDraggableList
+          variants={listQuestions[quizId][totalIndex].content.variants}
+          totalIndex={totalIndex}
+          additionalContent={(variant, index) => (
+            <>
+              {!isMobile && (
                 <Box
-                  sx={{
-                    width: "60px",
-                    height: "40px",
-                    background: "#EEE4FC",
-                    display: "flex",
-                    justifyContent: "space-between",
+                  sx={{ cursor: "pointer" }}
+                  onClick={() => {
+                    setCurrentIndex(index);
+                    setOpen(true);
                   }}
                 >
-                  <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
-                    <ImageAddIcons fontSize="22px" color="#7E2AEA" />
-                  </Box>
-                  <span
-                    style={{
+                  {variant.image ? (
+                    <Box
+                      sx={{
+                        overflow: "hidden",
+                        width: "60px",
+                        display: "flex",
+                        alignItems: "center",
+                        background: "#EEE4FC",
+                        borderRadius: "3px",
+                        margin: "0 10px",
+                        height: "40px",
+                      }}
+                    >
+                      <Box sx={{ display: "flex", width: "40px" }}>
+                        <img
+                          src={variant.image}
+                          alt=""
+                          style={{ width: "100%" }}
+                        />
+                      </Box>
+                      <PlusImage />
+                    </Box>
+                  ) : (
+                    <Button component="label" sx={{ padding: "0px" }}>
+                      <AddImage
+                        sx={{
+                          height: "40px",
+                          width: "60px",
+                          margin: "0 10px",
+                        }}
+                      />
+                    </Button>
+                  )}
+                </Box>
+              )}
+            </>
+          )}
+          additionalMobile={(variant, index) => (
+            <>
+              {isMobile && (
+                <Box
+                  onClick={() => {
+                    setCurrentIndex(index);
+                    setOpen(true);
+                  }}
+                  sx={{
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    m: "8px",
+                    position: "relative",
+                    borderRadius: "3px",
+                  }}
+                >
+                  <Box
+                    sx={{
+                      width: "100%",
+                      background: "#EEE4FC",
+                      height: "40px",
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
-                      background: "#7E2AEA",
-                      height: "100%",
-                      width: "25px",
+                    }}
+                  >
+                    {variant.image ? (
+                      <Box
+                        sx={{
+                          overflow: "hidden",
+                          width: "40px",
+                          display: "flex",
+                          alignItems: "center",
+                          background: "#EEE4FC",
+                          height: "30px",
+                          borderRadius: "3px",
+                        }}
+                      >
+                        <img
+                          src={variant.image}
+                          alt=""
+                          style={{ width: "100%" }}
+                        />
+                      </Box>
+                    ) : (
+                      <Button component="label" sx={{ padding: "0px" }}>
+                        <Image
+                          sx={{
+                            height: "40px",
+                            width: "60px",
+                            margin: "0 10px",
+                          }}
+                        />
+                      </Button>
+                    )}
+                  </Box>
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      width: "20px",
+                      background: "#EEE4FC",
+                      height: "40px",
                       color: "white",
-                      fontSize: "15px",
+                      backgroundColor: "#7E2AEA",
                     }}
                   >
                     +
-                  </span>
+                  </Box>
                 </Box>
-                <Typography
-                  sx={{
-                    padding: "0 0 0 20px",
-                    fontWeight: 400,
-                    fontSize: "18px",
-                    lineHeight: "21.33px",
-                    color: theme.palette.grey2.main,
-                  }}
-                >
-                  Добавьте ответ
-                </Typography>
-              </Box>
-            </ButtonBase>
-          ))}
-          <Box
-            sx={{
-              width: "100%",
-              border: "1px solid #9A9AAF",
-              borderRadius: "8px",
-              display: isTablet ? "block" : "none",
-            }}
-          >
-            <TextField
-              fullWidth
-              focused={false}
-              placeholder={"Добавьте ответ"}
-              multiline={listQuestions[quizId][totalIndex].content.largeCheck}
-              InputProps={{
-                startAdornment: (
-                  <>
-                    <InputAdornment position="start">
-                      <PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
-                    </InputAdornment>
-                    {!isMobile && (
+              )}
+            </>
+          )}
+        />
+        <UploadImageModal
+          open={open}
+          onClose={() => setOpen(false)}
+          imgHC={uploadImage}
+        />
+        <CropModal
+          opened={opened}
+          onClose={() => setOpened(false)}
+          picture={
+            listQuestions[quizId][totalIndex].content.variants[currentIndex]
+              .image
+          }
+        />
+        <Box
+          sx={{
+            width: "100%",
+            border: "1px solid #9A9AAF",
+            borderRadius: "8px",
+            display: isTablet ? "block" : "none",
+          }}
+        >
+          <TextField
+            fullWidth
+            focused={false}
+            placeholder={"Добавьте ответ"}
+            multiline={listQuestions[quizId][totalIndex].content.largeCheck}
+            InputProps={{
+              startAdornment: (
+                <>
+                  <InputAdornment position="start">
+                    <PointsIcon
+                      style={{ color: "#9A9AAF", fontSize: "30px" }}
+                    />
+                  </InputAdornment>
+                  {!isMobile && (
+                    <Box
+                      sx={{
+                        width: "60px",
+                        height: "40px",
+                        background: "#EEE4FC",
+                        display: "flex",
+                        justifyContent: "space-between",
+                        marginRight: "20px",
+                        marginLeft: "12px",
+                      }}
+                    >
                       <Box
                         sx={{
-                          width: "60px",
-                          height: "40px",
-                          background: "#EEE4FC",
                           display: "flex",
-                          justifyContent: "space-between",
-                          marginRight: "20px",
-                          marginLeft: "12px",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          width: "100%",
                         }}
                       >
-                        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
-                          <ImageAddIcons fontSize="22px" color="#7E2AEA" />
-                        </Box>
-                        <span
-                          style={{
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            background: "#7E2AEA",
-                            height: "100%",
-                            width: "25px",
-                            color: "white",
-                            fontSize: "15px",
-                          }}
-                        >
-                          +
-                        </span>
+                        <ImageAddIcons fontSize="22px" color="#7E2AEA" />
                       </Box>
-                    )}
-                  </>
-                ),
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id">
-                      <MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
-                    </IconButton>
-                    <Popover
-                      id="my-popover-id"
-                      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                      open={false}
-                    >
-                      <TextareaAutosize
-                        style={{ margin: "10px" }}
-                        placeholder="Подсказка для этого ответа"
-                      />
-                    </Popover>
-                    <IconButton sx={{ padding: "0" }}>
-                      <DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-              sx={{
-                "& .MuiInputBase-root": {
-                  padding: "13.5px",
-                  borderRadius: "10px",
-                  background: "#ffffff",
-                  height: "48px",
-                },
-                "& .MuiOutlinedInput-notchedOutline": {
-                  border: "none",
-                },
-              }}
-              inputProps={{
-                sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
-              }}
-            />
+                      <span
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          background: "#7E2AEA",
+                          height: "100%",
+                          width: "25px",
+                          color: "white",
+                          fontSize: "15px",
+                        }}
+                      >
+                        +
+                      </span>
+                    </Box>
+                  )}
+                </>
+              ),
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    sx={{ padding: "0" }}
+                    aria-describedby="my-popover-id"
+                  >
+                    <MessageIcon
+                      style={{
+                        color: "#9A9AAF",
+                        fontSize: "30px",
+                        marginRight: "6.5px",
+                      }}
+                    />
+                  </IconButton>
+                  <Popover
+                    id="my-popover-id"
+                    anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+                    open={false}
+                  >
+                    <TextareaAutosize
+                      style={{ margin: "10px" }}
+                      placeholder="Подсказка для этого ответа"
+                    />
+                  </Popover>
+                  <IconButton sx={{ padding: "0" }}>
+                    <DeleteIcon
+                      style={{
+                        color: theme.palette.grey2.main,
+                        marginRight: "-1px",
+                      }}
+                    />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+            sx={{
+              "& .MuiInputBase-root": {
+                padding: "13.5px",
+                borderRadius: "10px",
+                background: "#ffffff",
+                height: "48px",
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                border: "none",
+              },
+            }}
+            inputProps={{
+              sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
+            }}
+          />
 
-            {isMobile && (
+          {isMobile && (
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                m: "8px",
+                position: "relative",
+              }}
+            >
+              <Box
+                sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
+              />
+              <ImageAddIcons
+                style={{
+                  position: "absolute",
+                  color: "#7E2AEA",
+                  fontSize: "20px",
+                  left: "45%",
+                  right: "55%",
+                }}
+              />
               <Box
                 sx={{
                   display: "flex",
+                  justifyContent: "center",
                   alignItems: "center",
-                  m: "8px",
-                  position: "relative",
+                  width: "20px",
+                  background: "#EEE4FC",
+                  height: "40px",
+                  color: "white",
+                  backgroundColor: "#7E2AEA",
                 }}
               >
-                <Box
-                  sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
-                />
-                <ImageAddIcons
-                  style={{
-                    position: "absolute",
-                    color: "#7E2AEA",
-                    fontSize: "20px",
-                    left: "45%",
-                    right: "55%",
-                  }}
-                />
-                <Box
-                  sx={{
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    width: "20px",
-                    background: "#EEE4FC",
-                    height: "40px",
-                    color: "white",
-                    backgroundColor: "#7E2AEA",
-                  }}
-                >
-                  +
-                </Box>
+                +
               </Box>
-            )}
-          </Box>
+            </Box>
+          )}
         </Box>
         <Box
           sx={{
@@ -293,7 +411,13 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
               >
                 или нажмите Enter
               </Typography>
-              <EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
+              <EnterIcon
+                style={{
+                  color: "#7E2AEA",
+                  fontSize: "24px",
+                  marginLeft: "6px",
+                }}
+              />
             </>
           )}
         </Box>