diff --git a/src/assets/icons/questionsPage/image.tsx b/src/assets/icons/questionsPage/image.tsx
new file mode 100644
index 00000000..cccdcfd7
--- /dev/null
+++ b/src/assets/icons/questionsPage/image.tsx
@@ -0,0 +1,53 @@
+import { Box, SxProps } from "@mui/material";
+import { FC } from "react";
+
+interface Iprops {
+  onClick?: () => void;
+  sx?: SxProps;
+}
+
+const Image: FC<Iprops> = ({ onClick, sx }) => {
+  return (
+    <Box
+      onClick={onClick}
+      sx={{
+        height: "38px",
+        width: "45px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        ...sx,
+      }}
+    >
+      <svg
+        width="27"
+        height="22"
+        viewBox="0 0 27 22"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M24.9583 1H2.04167C1.46637 1 1 1.44772 1 2V20C1 20.5523 1.46637 21 2.04167 21H24.9583C25.5336 21 26 20.5523 26 20V2C26 1.44772 25.5336 1 24.9583 1Z"
+          stroke="#7E2AEA"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M1 15.9035L7.54948 9.31272C7.64641 9.21368 7.76194 9.13502 7.88936 9.08133C8.01677 9.02765 8.15353 9 8.29167 9C8.4298 9 8.56656 9.02765 8.69398 9.08133C8.82139 9.13502 8.93693 9.21368 9.03385 9.31272L14.8411 15.1567C14.9381 15.2557 15.0536 15.3343 15.181 15.388C15.3084 15.4417 15.4452 15.4694 15.5833 15.4694C15.7215 15.4694 15.8582 15.4417 15.9856 15.388C16.1131 15.3343 16.2286 15.2557 16.3255 15.1567L19.0078 12.4574C19.1047 12.3584 19.2203 12.2797 19.3477 12.2261C19.4751 12.1724 19.6119 12.1447 19.75 12.1447C19.8881 12.1447 20.0249 12.1724 20.1523 12.2261C20.2797 12.2797 20.3953 12.3584 20.4922 12.4574L26 18"
+          stroke="#7E2AEA"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M16.5 9C17.3284 9 18 8.32843 18 7.5C18 6.67157 17.3284 6 16.5 6C15.6716 6 15 6.67157 15 7.5C15 8.32843 15.6716 9 16.5 9Z"
+          fill="#7E2AEA"
+        />
+      </svg>
+    </Box>
+  );
+};
+
+export default Image;
diff --git a/src/assets/icons/questionsPage/plus.tsx b/src/assets/icons/questionsPage/plus.tsx
index eddbe273..98b7fa83 100644
--- a/src/assets/icons/questionsPage/plus.tsx
+++ b/src/assets/icons/questionsPage/plus.tsx
@@ -13,8 +13,8 @@ export default function Plus() {
     >
       <svg
         width="20"
-        height="30"
-        viewBox="0 0 15 40"
+        height="40"
+        viewBox="0 0 20 40"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
index a9e3c86c..17ffb74c 100644
--- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
+++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
@@ -70,7 +70,7 @@ export const AnswerItem = ({
 
   const addNewAnswer = () => {
     const answerNew = variants.slice();
-    answerNew.push({ answer: "", hints: "", emoji: "" });
+    answerNew.push({ answer: "", hints: "", emoji: "", image: "" });
 
     updateQuestionsList(quizId, totalIndex, {
       content: {
@@ -177,7 +177,6 @@ export const AnswerItem = ({
                 ),
               }}
               sx={{
-                padding: isTablet ? "10px 0px" : 0,
                 "& .MuiInputBase-root": {
                   minHeight: "48px",
                   borderRadius: "10px",
diff --git a/src/pages/Questions/DropDown/DropDown.tsx b/src/pages/Questions/DropDown/DropDown.tsx
index 95dc201c..80e4b41b 100644
--- a/src/pages/Questions/DropDown/DropDown.tsx
+++ b/src/pages/Questions/DropDown/DropDown.tsx
@@ -27,7 +27,7 @@ export default function DropDown({ totalIndex }: Props) {
 
   const addNewAnswer = () => {
     const answerNew = variants.slice();
-    answerNew.push({ answer: "", hints: "", emoji: "" });
+    answerNew.push({ answer: "", hints: "", emoji: "", image: "" });
 
     updateQuestionsList(quizId, totalIndex, {
       content: {
diff --git a/src/pages/Questions/Emoji/Emoji.tsx b/src/pages/Questions/Emoji/Emoji.tsx
index cdfa43c8..2bf7aee1 100644
--- a/src/pages/Questions/Emoji/Emoji.tsx
+++ b/src/pages/Questions/Emoji/Emoji.tsx
@@ -18,8 +18,8 @@ import { EmojiIcons } from "@icons/EmojiIocns";
 
 import { questionStore, updateQuestionsList } from "@root/questions";
 
-import AddEmoji from "../../../assets/icons/questionsPage/addEmoji";
-import PlusImage from "../../../assets/icons/questionsPage/plus";
+import AddEmoji from "@icons/questionsPage/addEmoji";
+import PlusImage from "@icons/questionsPage/plus";
 
 interface Props {
   totalIndex: number;
@@ -199,7 +199,7 @@ export default function Emoji({ totalIndex }: Props) {
             onClick={() => {
               const answerNew =
                 listQuestions[quizId][totalIndex].content.variants.slice();
-              answerNew.push({ answer: "", hints: "", emoji: "" });
+              answerNew.push({ answer: "", hints: "", emoji: "", image: "" });
 
               updateQuestionsList(quizId, totalIndex, {
                 content: {
diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
index 3a519398..dd72ca94 100644
--- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
+++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
@@ -197,7 +197,12 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
             sx={{ color: theme.palette.brightPurple.main }}
             onClick={() => {
               const clonContent = listQuestions[quizId][totalIndex].content;
-              clonContent.variants.push({ answer: "", hints: "", emoji: "" });
+              clonContent.variants.push({
+                answer: "",
+                hints: "",
+                emoji: "",
+                image: "",
+              });
 
               updateQuestionsList(quizId, totalIndex, { content: clonContent });
             }}
diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
index 27d75747..9e8686eb 100644
--- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
+++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
@@ -7,33 +7,29 @@ import {
   Button,
   useTheme,
   useMediaQuery,
-  InputAdornment,
-  IconButton,
-  TextareaAutosize,
-  Popover,
-  TextField,
 } from "@mui/material";
 
 import ButtonsOptions from "../ButtonsOptions";
+import { AnswerDraggableList } from "../AnswerDraggableList";
+import { CropModal } from "@ui_kit/Modal/CropModal";
+import { UploadImageModal } from "../UploadImage/UploadImageModal";
 import { questionStore, updateQuestionsList } from "@root/questions";
 
 import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import AddImage from "../../../assets/icons/questionsPage/addImage";
+import Image from "../../../assets/icons/questionsPage/image";
 import SwitchAnswerOptionsPict from "./switchOptionsPict";
-
-import type { ChangeEvent } from "react";
-import PointsIcon from "@icons/questionsPage/PointsIcon";
-import MessageIcon from "@icons/messagIcon";
-import DeleteIcon from "@icons/questionsPage/deleteIcon";
-import { ImageAddIcons } from "@icons/ImageAddIcons";
+import PlusImage from "@icons/questionsPage/plus";
 
 interface Props {
   totalIndex: number;
 }
 
 export default function OptionsPicture({ totalIndex }: Props) {
+  const [open, setOpen] = useState(false);
+  const [opened, setOpened] = useState<boolean>(false);
+  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 [switchState, setSwitchState] = useState("setting");
@@ -43,148 +39,176 @@ export default function OptionsPicture({ totalIndex }: Props) {
     setSwitchState(data);
   };
 
-  const addImage = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    if (target.files?.length) {
-      const clonContent = listQuestions[quizId][totalIndex].content;
-
-      clonContent.images.push(URL.createObjectURL(target.files[0]));
+  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={{ padding: "20px" }}>
-        <Box
-          sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
-        >
-          <input type="file" hidden onChange={addImage} />
-          <Box sx={{ display: isTablet ? "none" : "block" }}>
-            <Button component="label" sx={{ padding: "0px" }}>
-              <AddImage />
-            </Button>
-            <Typography
-              sx={{
-                padding: "0 0 0 20px",
-                fontWeight: 400,
-                fontSize: "18px",
-                lineHeight: "21.33px",
-                color: theme.palette.grey2.main,
-              }}
-            >
-              Добавьте ответ
-            </Typography>
-          </Box>
-
-          <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 />
-                    </InputAdornment>
-                    {!isMobile && (
-                      <AddImage sx={{ h: "100%", margin: "0px 20px" }} />
-                    )}
-                  </>
-                ),
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton aria-describedby="my-popover-id">
-                      <MessageIcon />
-                    </IconButton>
-                    <Popover
-                      id="my-popover-id"
-                      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                      open={false}
-                    >
-                      <TextareaAutosize
-                        style={{ margin: "10px" }}
-                        placeholder="Подсказка для этого ответа"
-                      />
-                    </Popover>
-                    <IconButton>
-                      <DeleteIcon color={theme.palette.grey2.main} />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-              sx={{
-                "& .MuiInputBase-root": {
-                  padding: "13.5px",
-                  borderRadius: "10px",
-                  background: "#ffffff",
-                },
-                "& .MuiOutlinedInput-notchedOutline": {
-                  border: "none",
-                },
-              }}
-              inputProps={{
-                sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
-              }}
-            />
-
-            {isMobile && (
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  m: "8px",
-                  position: "relative",
-                }}
-              >
+        <AnswerDraggableList
+          variants={listQuestions[quizId][totalIndex].content.variants}
+          totalIndex={totalIndex}
+          additionalContent={(variant, index) => (
+            <>
+              {!isMobile && (
                 <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",
+                  sx={{ cursor: "pointer" }}
+                  onClick={() => {
+                    setCurrentIndex(index);
+                    setOpen(true);
                   }}
                 >
-                  +
+                  {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>
-              </Box>
-            )}
-          </Box>
-        </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",
+                    }}
+                  >
+                    {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",
+                      backgroundColor: "#7E2AEA",
+                    }}
+                  >
+                    +
+                  </Box>
+                </Box>
+              )}
+            </>
+          )}
+        />
+        <UploadImageModal
+          open={open}
+          onClose={() => setOpen(false)}
+          imgHC={uploadImage}
+        />
+        <CropModal
+          opened={opened}
+          onClose={() => setOpened(false)}
+          picture={
+            listQuestions[quizId][totalIndex].content.variants[currentIndex]
+              .image
+          }
+        />
         <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
           <Link
             component="button"
             variant="body2"
             sx={{ color: theme.palette.brightPurple.main }}
-            // onClick={() => {
-            //     console.info("I'm a button.");
-            // }}
+            onClick={addNewAnswer}
           >
             Добавьте ответ
           </Link>
diff --git a/src/pages/Questions/answerOptions/AnswerOptions.tsx b/src/pages/Questions/answerOptions/AnswerOptions.tsx
index 5687e255..dd35e830 100755
--- a/src/pages/Questions/answerOptions/AnswerOptions.tsx
+++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx
@@ -25,7 +25,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
 
   const addNewAnswer = () => {
     const answerNew = variants.slice();
-    answerNew.push({ answer: "", hints: "", emoji: "" });
+    answerNew.push({ answer: "", hints: "", emoji: "", image: "" });
 
     updateQuestionsList(quizId, totalIndex, {
       content: {
diff --git a/src/stores/questions.ts b/src/stores/questions.ts
index 36788b87..c232d5b4 100644
--- a/src/stores/questions.ts
+++ b/src/stores/questions.ts
@@ -5,6 +5,7 @@ export type Variants = {
   answer: string;
   hints: string;
   emoji: string;
+  image: string;
 };
 
 type Hint = {
@@ -36,7 +37,6 @@ export interface Question {
     variants: Variants[];
     hint: Hint;
     rule: Rule;
-    images: string[];
     largeCheck: boolean;
     large: string;
     multi: boolean;
@@ -100,7 +100,6 @@ export const DEFAULT_QUESTION: Omit<Question, "id"> = {
     type: "all",
     autofill: true,
     default: "",
-    images: [],
     number: false,
     single: false,
     xy: "",
@@ -125,6 +124,7 @@ export const DEFAULT_QUESTION: Omit<Question, "id"> = {
         answer: "",
         hints: "",
         emoji: "",
+        image: "",
       },
     ],
     hint: {