diff --git a/src/ui_kit/CustomSlider.tsx b/src/ui_kit/CustomSlider.tsx
index 6b76ea0a..206d7648 100644
--- a/src/ui_kit/CustomSlider.tsx
+++ b/src/ui_kit/CustomSlider.tsx
@@ -12,6 +12,7 @@ type CustomSliderProps = {
     _: React.SyntheticEvent | Event,
     value: number | number[],
   ) => void;
+  className: string;
 };
 
 export const CustomSlider = ({
@@ -23,6 +24,7 @@ export const CustomSlider = ({
   onChange,
   onChangeCommitted,
   sx,
+  className
 }: CustomSliderProps) => {
   // const handleChange = ({ type }: Event, newValue: number | number[]) => {
   //     // Для корректной работы слайдера в FireFox
@@ -34,6 +36,7 @@ export const CustomSlider = ({
 
   return (
     <Slider
+    className={className || ""}
       value={value}
       defaultValue={defaultValue}
       min={min}
diff --git a/src/ui_kit/CustomTextField.tsx b/src/ui_kit/CustomTextField.tsx
index db7052d6..185e3a84 100755
--- a/src/ui_kit/CustomTextField.tsx
+++ b/src/ui_kit/CustomTextField.tsx
@@ -26,6 +26,7 @@ interface CustomTextFieldProps {
   InputProps?: Partial<InputProps>;
   type?: string;
   rows?: number;
+  className?:string;
 }
 
 export default function CustomTextField({
@@ -43,6 +44,8 @@ export default function CustomTextField({
   type = "",
   rows = 0,
   sxForm,
+  className
+
 }: CustomTextFieldProps) {
   const theme = useTheme();
 
@@ -80,7 +83,7 @@ export default function CustomTextField({
   };
 
   return (
-    <FormControl fullWidth variant="standard" sx={{ p: 0, ...sxForm }}>
+    <FormControl fullWidth variant="standard" sx={{ p: 0, ...sxForm }} className={className || ""}>
       {error && (
         <InputLabel
           sx={{
diff --git a/src/ui_kit/LabeledDatePicker.tsx b/src/ui_kit/LabeledDatePicker.tsx
index 3beb050a..30856a44 100644
--- a/src/ui_kit/LabeledDatePicker.tsx
+++ b/src/ui_kit/LabeledDatePicker.tsx
@@ -17,6 +17,7 @@ interface Props {
   sxDate?: SxProps<Theme>;
   value?: Dayjs | null;
   onChange?: (value: Dayjs | null) => void;
+  className?: string
 }
 
 export default function LabeledDatePicker({
@@ -26,6 +27,7 @@ export default function LabeledDatePicker({
   sx,
   sxIcon,
   sxDate,
+  className
 }: Props) {
   const theme = useTheme();
   const upLg = useMediaQuery(theme.breakpoints.up("md"));
@@ -50,6 +52,7 @@ export default function LabeledDatePicker({
         </Typography>
       )}
       <DatePicker
+      className={className || ""}
         value={value}
         onChange={onChange}
         slots={{
diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx
index 0304094f..91fd06a7 100644
--- a/src/ui_kit/QuizPreview/QuizPreview.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreview.tsx
@@ -117,6 +117,7 @@ export default function QuizPreview() {
               overflow: "hidden",
               pointerEvents: "auto",
             }}
+            cancel=".cancel"
           >
             <QuizPreviewLayout />
           </Rnd>
diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
index c0fe92d3..e77f042c 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
@@ -117,6 +117,7 @@ export default function QuizPreviewLayout() {
             fullWidth
             size="small"
             sx={{ width: "100%", minWidth: "200px", height: "48px" }}
+            className="cancel"
           >
             <MuiSelect
               id="category-select"
@@ -235,6 +236,7 @@ export default function QuizPreviewLayout() {
               onClick={decrementCurrentQuestionIndex}
               disabled={currentQuizStep === 0}
               sx={{ px: 1, minWidth: 0 }}
+              className="cancel"
             >
               <ArrowLeft color={theme.palette.primary.main} />
             </Button>
@@ -242,6 +244,7 @@ export default function QuizPreviewLayout() {
               variant="contained"
               onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
               disabled={currentQuizStep >= maxCurrentQuizStep}
+              className="cancel"
             >
               Далее
             </Button>
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx
index 87f7bc32..8fd84660 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx
@@ -39,6 +39,7 @@ export default function Date({ question }: Props) {
             pr: "22px",
           },
         }}
+        className="cancel"
       />
     </Box>
   );
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
index 545f8883..b19530a1 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
@@ -29,7 +29,8 @@ export default function Emoji({ question }: Props) {
   };
 
   return (
-    <FormControl fullWidth>
+    <FormControl fullWidth
+    className="cancel">
       <FormLabel
         id="quiz-question-radio-group"
         data-cy="question-title"
@@ -83,6 +84,7 @@ export default function Emoji({ question }: Props) {
                 </Box>
               </Box>
               <FormControlLabel
+        className="cancel"
                 key={index}
                 value={variant.answer}
                 sx={{
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
index 4ace369a..313c7c40 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
@@ -47,7 +47,8 @@ export default function File({ question }: Props) {
       <Typography variant="h6" data-cy="question-title">
         {question.title}
       </Typography>
-      <Button variant="contained" onClick={() => fileInputRef.current?.click()}>
+      <Button variant="contained" onClick={() => fileInputRef.current?.click()}
+        className="cancel">
         Загрузить файл
         <input
           ref={fileInputRef}
@@ -58,6 +59,7 @@ export default function File({ question }: Props) {
           style={{
             display: "none",
           }}
+          className="cancel"
         />
       </Button>
       {file && (
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
index 49b11740..9b711c49 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
@@ -63,6 +63,7 @@ export default function Images({ question, widthPreview }: Props) {
           .filter(({ answer }) => answer)
           .map((variant, index) => (
             <ButtonBase
+            className="cancel"
               key={index}
               onClick={() => handleVariantClick(index)}
               data-cy="variant-button"
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
index f8139a2e..748b4227 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
@@ -47,6 +47,7 @@ export default function Number({ question }: Props) {
         }}
       >
         <CustomSlider
+        className="cancel"
           value={sliderValues}
           onChange={(e, value) => {
             setSliderValues(value);
@@ -92,6 +93,7 @@ export default function Number({ question }: Props) {
             }}
           >
             <CustomTextField
+        className="cancel"
               placeholder="0"
               value={sliderValues[0]}
               sx={{
@@ -107,6 +109,7 @@ export default function Number({ question }: Props) {
             />
             <Typography color={theme.palette.text.primary}>до</Typography>
             <CustomTextField
+        className="cancel"
               placeholder="0"
               value={sliderValues[1]}
               sx={{
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
index bb09d0a8..ee1c4408 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
@@ -69,6 +69,7 @@ export default function Rating({ question }: Props) {
         }}
       >
         <Box
+        className="cancel"
           data-cy="rating"
           data-rating={selectedRating}
           sx={{
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
index 56423c4d..e7d09595 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
@@ -36,6 +36,7 @@ export default function Text({ question }: Props) {
         {question.title}
       </Typography>
       <FormControl
+        className="cancel"
         fullWidth
         size="small"
         sx={{
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
index cbf972c5..c913e560 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
@@ -20,7 +20,8 @@ export default function Text({ question }: Props) {
       <Typography variant="h6" data-cy="question-title">
         {question.title}
       </Typography>
-      <CustomTextField placeholder={question.content.placeholder} />
+      <CustomTextField placeholder={question.content.placeholder} 
+        className="cancel"/>
     </Box>
   );
 }
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
index e4f45b17..5946c5e9 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
@@ -37,7 +37,8 @@ export default function Variant({ question }: Props) {
   };
 
   return (
-    <FormControl fullWidth>
+    <FormControl 
+    className="cancel" fullWidth>
       <FormLabel
         id="quiz-question-radio-group"
         data-cy="question-title"
@@ -51,6 +52,7 @@ export default function Variant({ question }: Props) {
         {question.title}
       </FormLabel>
       <RadioGroup
+        className="cancel"
         aria-labelledby="quiz-question-radio-group"
         value={value}
         onChange={handleChange}
@@ -63,6 +65,7 @@ export default function Variant({ question }: Props) {
           .filter(({ answer }) => answer)
           .map((variant, index) => (
             <FormControlLabel
+            className="cancel"
               key={index}
               value={variant.answer}
               data-cy="variant-answer"
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
index 8095c44b..6d6e6fd7 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
@@ -52,6 +52,7 @@ export default function Varimg({ question, widthPreview }: Props) {
       }}
     >
       <FormControl
+        className="cancel"
         sx={{
           //maxWidth: "900px",
           width: "100%",
@@ -78,6 +79,7 @@ export default function Varimg({ question, widthPreview }: Props) {
           }}
         >
           <RadioGroup
+        className="cancel"
             aria-labelledby="quiz-question-radio-group"
             value={currentVariant?.answer ?? ""}
             onChange={handleChange}