diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
index e9ffe26e..5ad9d0de 100644
--- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
+++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
@@ -1,46 +1,42 @@
-import { useState } from "react";
 import {
     Box,
-    Link,
-    Typography,
-    useTheme,
-    useMediaQuery,
-    InputAdornment,
     IconButton,
-    Button,
+    InputAdornment,
+    Link,
     Popover,
-    TextareaAutosize,
     TextField,
+    TextareaAutosize,
+    Typography,
+    useMediaQuery,
+    useTheme
 } from "@mui/material";
+import { useState } from "react";
 import { useParams } from "react-router-dom";
 
-import { AnswerDraggableList } from "../AnswerDraggableList";
 import { CropModal } from "@ui_kit/Modal/CropModal";
+import { AnswerDraggableList } from "../AnswerDraggableList";
 import { UploadImageModal } from "../UploadImage/UploadImageModal";
 
-import AddImage from "@icons/questionsPage/addImage";
-import Image from "@icons/questionsPage/image";
+import { ImageAddIcons } from "@icons/ImageAddIcons";
+import { MessageIcon } from "@icons/messagIcon";
+import { PointsIcon } from "@icons/questionsPage/PointsIcon";
+import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
+import { questionStore, updateQuestionsList } from "@root/questions";
 import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
 import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
 import SwitchOptionsAndPict from "./switchOptionsAndPict";
-import React from "react";
-import { questionStore, updateQuestionsList } from "@root/questions";
-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";
 
-import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
+import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
 import { produce } from "immer";
+import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
 
 interface Props {
     totalIndex: number;
 }
 
 export default function OptionsAndPicture({ totalIndex }: Props) {
-    const [open, setOpen] = useState(false);
-    const [opened, setOpened] = useState<boolean>(false);
+    const [isUploadImageModalOpen, setIsUploadImageModalOpen] = useState(false);
+    const [isCropModalOpen, setIsCropModalOpen] = useState<boolean>(false);
     const [switchState, setSwitchState] = useState("setting");
     const [currentIndex, setCurrentIndex] = useState<number>(0);
     const quizId = Number(useParams().quizId);
@@ -65,8 +61,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                 content: clonedContent,
             });
 
-            setOpen(false);
-            setOpened(true);
+            setIsUploadImageModalOpen(false);
+            setIsCropModalOpen(true);
         }
     };
 
@@ -79,134 +75,52 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                     additionalContent={(variant, index) => (
                         <>
                             {!isMobile && (
-                                <Box
-                                    sx={{ cursor: "pointer" }}
-                                    onClick={() => {
+                                <AddOrEditImageButton
+                                    imageSrc={variant.extendedText}
+                                    onImageClick={() => {
                                         setCurrentIndex(index);
-                                        setOpen(true);
+                                        if (variant.extendedText) return setIsCropModalOpen(true);
+
+                                        setIsUploadImageModalOpen(true);
                                     }}
-                                >
-                                    {variant.extendedText ? (
-                                        <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.extendedText}
-                                                    alt=""
-                                                    style={{ width: "100%" }}
-                                                />
-                                            </Box>
-                                            <PlusImage />
-                                        </Box>
-                                    ) : (
-                                        <Button component="label" sx={{ padding: "0px" }}>
-                                            <AddImage
-                                                sx={{
-                                                    height: "40px",
-                                                    width: "60px",
-                                                    margin: "0 10px",
-                                                }}
-                                            />
-                                        </Button>
-                                    )}
-                                </Box>
+                                    onPlusClick={() => {
+                                        setCurrentIndex(index);
+                                        setIsUploadImageModalOpen(true);
+                                    }}
+                                    sx={{ mx: "10px" }}
+                                />
                             )}
                         </>
                     )}
                     additionalMobile={(variant, index) => (
                         <>
                             {isMobile && (
-                                <Box
-                                    onClick={() => {
+                                <AddOrEditImageButton
+                                    imageSrc={variant.extendedText}
+                                    onImageClick={() => {
                                         setCurrentIndex(index);
-                                        setOpen(true);
+                                        if (variant.extendedText) return setIsCropModalOpen(true);
+
+                                        setIsUploadImageModalOpen(true);
                                     }}
-                                    sx={{
-                                        overflow: "hidden",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        m: "8px",
-                                        position: "relative",
-                                        borderRadius: "3px",
+                                    onPlusClick={() => {
+                                        setCurrentIndex(index);
+                                        setIsUploadImageModalOpen(true);
                                     }}
-                                >
-                                    <Box
-                                        sx={{
-                                            width: "100%",
-                                            background: "#EEE4FC",
-                                            height: "40px",
-                                            display: "flex",
-                                            alignItems: "center",
-                                            justifyContent: "center",
-                                        }}
-                                    >
-                                        {variant.extendedText ? (
-                                            <Box
-                                                sx={{
-                                                    overflow: "hidden",
-                                                    width: "40px",
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    background: "#EEE4FC",
-                                                    height: "30px",
-                                                    borderRadius: "3px",
-                                                }}
-                                            >
-                                                <img
-                                                    src={variant.extendedText}
-                                                    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>
+                                    sx={{ m: "8px", width: "auto" }}
+                                />
                             )}
                         </>
                     )}
                 />
                 <UploadImageModal
-                    open={open}
-                    onClose={() => setOpen(false)}
+                    open={isUploadImageModalOpen}
+                    onClose={() => setIsUploadImageModalOpen(false)}
                     imgHC={uploadImage}
                 />
                 <CropModal
-                    opened={opened}
-                    onClose={() => setOpened(false)}
+                    opened={isCropModalOpen}
+                    onClose={() => setIsCropModalOpen(false)}
                     picture={question.content.variants[currentIndex]?.extendedText}
                     onCropPress={url => {
                         const content = produce(question.content, draft => {
diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
index 1be84281..14f0ba1b 100644
--- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
+++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
@@ -1,40 +1,36 @@
-import { useState } from "react";
-import { useParams } from "react-router-dom";
 import {
     Box,
     Link,
     Typography,
-    Button,
-    useTheme,
-    useMediaQuery
+    useMediaQuery,
+    useTheme
 } from "@mui/material";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
 
-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 { CropModal } from "@ui_kit/Modal/CropModal";
+import { AnswerDraggableList } from "../AnswerDraggableList";
+import ButtonsOptions from "../ButtonsOptions";
+import { UploadImageModal } from "../UploadImage/UploadImageModal";
 
 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 PlusImage from "@icons/questionsPage/plus";
 
-import type { QuizQuestionImages } from "../../../model/questionTypes/images";
+import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
 import { produce } from "immer";
+import type { QuizQuestionImages } from "../../../model/questionTypes/images";
 
 interface Props {
     totalIndex: number;
 }
 
 export default function OptionsPicture({ totalIndex }: Props) {
-    const [open, setOpen] = useState(false);
-    const [opened, setOpened] = useState<boolean>(false);
+    const [isUploadImageModalOpen, setIsUploadImageModalOpen] = useState(false);
+    const [isCropModalOpen, setIsCropModalOpen] = useState<boolean>(false);
     const [currentIndex, setCurrentIndex] = useState<number>(0);
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(790));
-    const isTablet = useMediaQuery(theme.breakpoints.down(790));
     const quizId = Number(useParams().quizId);
     const [switchState, setSwitchState] = useState("setting");
     const { listQuestions } = questionStore();
@@ -55,8 +51,8 @@ export default function OptionsPicture({ totalIndex }: Props) {
                 content: clonedContent,
             });
 
-            setOpen(false);
-            setOpened(true);
+            setIsUploadImageModalOpen(false);
+            setIsCropModalOpen(true);
         }
     };
 
@@ -78,130 +74,52 @@ export default function OptionsPicture({ totalIndex }: Props) {
                     additionalContent={(variant, index) => (
                         <>
                             {!isMobile && (
-                                <Box
-                                    sx={{ cursor: "pointer" }}
-                                    onClick={() => {
+                                <AddOrEditImageButton
+                                    imageSrc={variant.extendedText}
+                                    onImageClick={() => {
                                         setCurrentIndex(index);
-                                        setOpen(true);
+                                        if (variant.extendedText) return setIsCropModalOpen(true);
+
+                                        setIsUploadImageModalOpen(true);
                                     }}
-                                >
-                                    {variant.extendedText ? (
-                                        <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.extendedText}
-                                                    alt=""
-                                                    style={{ width: "100%" }}
-                                                />
-                                            </Box>
-                                            <PlusImage />
-                                        </Box>
-                                    ) : (
-                                        <Button component="label" sx={{ padding: "0px" }}>
-                                            <AddImage
-                                                sx={{ height: "40px", width: "60px", margin: "0 10px" }}
-                                            />
-                                        </Button>
-                                    )}
-                                </Box>
+                                    onPlusClick={() => {
+                                        setCurrentIndex(index);
+                                        setIsUploadImageModalOpen(true);
+                                    }}
+                                    sx={{ mx: "10px" }}
+                                />
                             )}
                         </>
                     )}
                     additionalMobile={(variant, index) => (
                         <>
                             {isMobile && (
-                                <Box
-                                    onClick={() => {
+                                <AddOrEditImageButton
+                                    imageSrc={variant.extendedText}
+                                    onImageClick={() => {
                                         setCurrentIndex(index);
-                                        setOpen(true);
+                                        if (variant.extendedText) return setIsCropModalOpen(true);
+
+                                        setIsUploadImageModalOpen(true);
                                     }}
-                                    sx={{
-                                        overflow: "hidden",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        m: "8px",
-                                        position: "relative",
-                                        borderRadius: "3px",
+                                    onPlusClick={() => {
+                                        setCurrentIndex(index);
+                                        setIsUploadImageModalOpen(true);
                                     }}
-                                >
-                                    <Box
-                                        sx={{
-                                            width: "100%",
-                                            background: "#EEE4FC",
-                                            height: "40px",
-                                            display: "flex",
-                                            alignItems: "center",
-                                            justifyContent: "center",
-                                        }}
-                                    >
-                                        {variant.extendedText ? (
-                                            <Box
-                                                sx={{
-                                                    overflow: "hidden",
-                                                    width: "40px",
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    background: "#EEE4FC",
-                                                    height: "30px",
-                                                    borderRadius: "3px",
-                                                }}
-                                            >
-                                                <img
-                                                    src={variant.extendedText}
-                                                    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>
+                                    sx={{ m: "8px", width: "auto" }}
+                                />
                             )}
                         </>
                     )}
                 />
                 <UploadImageModal
-                    open={open}
-                    onClose={() => setOpen(false)}
+                    open={isUploadImageModalOpen}
+                    onClose={() => setIsUploadImageModalOpen(false)}
                     imgHC={uploadImage}
                 />
                 <CropModal
-                    opened={opened}
-                    onClose={() => setOpened(false)}
+                    opened={isCropModalOpen}
+                    onClose={() => setIsCropModalOpen(false)}
                     picture={question.content.variants[currentIndex]?.extendedText}
                     onCropPress={url => {
                         const content = produce(question.content, draft => {
diff --git a/src/ui_kit/AddOrEditImageButton.tsx b/src/ui_kit/AddOrEditImageButton.tsx
new file mode 100644
index 00000000..b3174a2e
--- /dev/null
+++ b/src/ui_kit/AddOrEditImageButton.tsx
@@ -0,0 +1,59 @@
+import Plus from "@icons/questionsPage/plus";
+import { Box, ButtonBase, SxProps, Theme } from "@mui/material";
+import Image from "../assets/icons/questionsPage/image";
+
+
+interface Props {
+    sx?: SxProps<Theme>;
+    imageSrc?: string;
+    onImageClick?: () => void;
+    onPlusClick?: () => void;
+}
+
+export default function AddOrEditImageButton({ onImageClick, onPlusClick, sx, imageSrc }: Props) {
+
+    return (
+        <Box sx={{
+            display: "flex",
+            height: "40px",
+            minWidth: "60px",
+            width: "60px",
+            borderRadius: "3px",
+            overflow: "hidden",
+            ...sx,
+        }}>
+            <ButtonBase
+                onClick={onImageClick}
+                sx={{
+                    flexGrow: 1,
+                    backgroundColor: "#EEE4FC",
+                }}>
+                {imageSrc ? (
+                    <img
+                        src={imageSrc}
+                        alt=""
+                        style={{
+                            width: "100%",
+                            height: "100%",
+                            objectFit: "scale-down",
+                            display: "block",
+                        }}
+                    />
+                ) : (
+                    <Image sx={{
+                        height: "100%",
+                        width: "100%",
+                    }} />
+                )}
+            </ButtonBase>
+            <ButtonBase
+                onClick={onPlusClick}
+                sx={{
+                    width: "20px",
+                }}
+            >
+                <Plus />
+            </ButtonBase>
+        </Box>
+    );
+}