diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx
index 7aab0d11..d2e0b416 100755
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@@ -17,6 +17,7 @@ import {
 } from "@root/questions";
 import { DraggableList } from "./DraggableList";
 import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
+import { createPortal } from "react-dom";
 
 export default function QuestionsPage() {
     const { listQuizes, updateQuizesList } = quizStore();
@@ -105,7 +106,7 @@ export default function QuestionsPage() {
                     </Button>
                 </Box>
             </Box>
-            <QuizPreview />
+            {createPortal(<QuizPreview />, document.body)}
         </>
     );
 }
diff --git a/src/stores/quizPreview.ts b/src/stores/quizPreview.ts
index dc931463..9a0eaf40 100644
--- a/src/stores/quizPreview.ts
+++ b/src/stores/quizPreview.ts
@@ -10,7 +10,7 @@ interface QuizPreviewStore {
 export const useQuizPreviewStore = create<QuizPreviewStore>()(
     devtools(
         (set, get) => ({
-            isPreviewShown: false,
+            isPreviewShown: true,
             currentQuizStep: 0,
         }),
         {
@@ -24,8 +24,14 @@ export const showQuizPreview = () => useQuizPreviewStore.setState({ isPreviewSho
 
 export const hideQuizPreview = () => useQuizPreviewStore.setState({ isPreviewShown: false });
 
-export const toggleQuizPreview = () => useQuizPreviewStore.setState(state => ({ isPreviewShown: !state.isPreviewShown }));
+export const toggleQuizPreview = () => useQuizPreviewStore.setState(
+    state => ({ isPreviewShown: !state.isPreviewShown })
+);
 
-export const incrementCurrentQuizStep = (maxStep: number) => useQuizPreviewStore.setState(state => ({ currentQuizStep: Math.min(state.currentQuizStep + 1, maxStep) }));
+export const incrementCurrentQuizStep = (maxStep: number) => useQuizPreviewStore.setState(
+    state => ({ currentQuizStep: Math.min(state.currentQuizStep + 1, maxStep) })
+);
 
-export const decrementCurrentQuizStep = () => useQuizPreviewStore.setState(state => ({ currentQuizStep: Math.max(state.currentQuizStep - 1, 0) }));
+export const decrementCurrentQuizStep = () => useQuizPreviewStore.setState(
+    state => ({ currentQuizStep: Math.max(state.currentQuizStep - 1, 0) })
+);
diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx
index 38d25f49..7627ceea 100644
--- a/src/ui_kit/QuizPreview/QuizPreview.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreview.tsx
@@ -1,7 +1,7 @@
 import PointsIcon from "@icons/questionsPage/PointsIcon";
-import { Box, IconButton, Paper, keyframes } from "@mui/material";
+import { Box, IconButton } from "@mui/material";
 import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef } from "react";
 import { Rnd } from "react-rnd";
 import QuizPreviewContent from "./QuizPreviewContent";
 import ResizeIcon from "./ResizeIcon";
@@ -10,7 +10,7 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
 
 const DRAG_PARENT_MARGIN = 25;
 const NAVBAR_HEIGHT = 81;
-const DRAG_PARENT_BOTTOM_MARGIN = 25;
+const DRAG_PARENT_BOTTOM_MARGIN = 65;
 
 interface RndPositionAndSize {
     x: number;
@@ -55,6 +55,7 @@ export default function QuizPreview() {
                 right: DRAG_PARENT_MARGIN,
                 // backgroundColor: "rgba(0, 100, 0, 0.2)",
                 pointerEvents: "none",
+                zIndex: 100,
             }}
         >
             {isPreviewShown &&
@@ -80,47 +81,49 @@ export default function QuizPreview() {
                         rndPositionAndSizeRef.current.x = d.x;
                         rndPositionAndSizeRef.current.y = d.y;
                     }}
+                    onDragStart={(e, d) => {
+                        e.preventDefault();
+                    }}
                     enableResizing={{
                         topLeft: isPreviewShown,
                     }}
                     resizeHandleComponent={{
                         topLeft: <ResizeIcon />
                     }}
+                    resizeHandleStyles={{
+                        topLeft: {
+                            top: "-1px",
+                            left: "-1px",
+                        }
+                    }}
                     style={{
                         pointerEvents: "auto",
-                        display: "flex",
-                        flexDirection: "column",
                     }}
                 >
-                    <Paper sx={{
-                        flexGrow: 1,
-                        borderRadius: "12px",
-                        mb: 1,
-                    }}>
-                        <QuizPreviewContent />
-                    </Paper>
-                    <Box sx={{
-                        alignSelf: "end",
-                        mt: "auto",
-                        mr: "45px",
-                        display: "flex",
-                    }}>
-                        <IconButton className="quiz-preview-draghandle">
-                            <PointsIcon />
-                        </IconButton>
-                    </Box>
+                    <QuizPreviewContent />
+                    <IconButton
+                        className="quiz-preview-draghandle"
+                        sx={{
+                            position: "absolute",
+                            bottom: -54,
+                            right: 46,
+                            cursor: "move",
+                        }}
+                    >
+                        <PointsIcon />
+                    </IconButton>
                 </Rnd>
             }
             <IconButton
                 onClick={toggleQuizPreview}
                 sx={{
-                    pointerEvents: "auto",
                     position: "absolute",
-                    right: 4,
-                    bottom: 4,
+                    right: 0,
+                    bottom: -54,
+                    pointerEvents: "auto",
                 }}
             >
-                <VisibilityIcon />
+                <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
             </IconButton>
         </Box>
     );
diff --git a/src/ui_kit/QuizPreview/QuizPreviewContent.tsx b/src/ui_kit/QuizPreview/QuizPreviewContent.tsx
index 833bcf54..13d8cfc3 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewContent.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewContent.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, LinearProgress } from "@mui/material";
+import { Box, Button, LinearProgress, Paper } from "@mui/material";
 import { Question, questionStore } from "@root/questions";
 import { decrementCurrentQuizStep, incrementCurrentQuizStep, useQuizPreviewStore } from "@root/quizPreview";
 import { useParams } from "react-router-dom";
@@ -12,19 +12,24 @@ export default function QuizPreviewContent() {
 
     const quizQuestions: Question[] | undefined = listQuestions[quizId];
     const currentProgress = Math.floor((currentQuizStep / quizQuestions.length) * 100);
+    const currentQuestion = quizQuestions[currentQuizStep];
 
     return (
-        <Box sx={{
+        <Paper sx={{
             height: "100%",
             display: "flex",
             flexDirection: "column",
-            flexWrap: "wrap",
-            gap: 1,
+            flexGrow: 1,
+            borderRadius: "12px",
+            pointerEvents: "auto",
         }}>
             <Box sx={{
                 p: "16px",
+                whiteSpace: "break-spaces",
+                overflowY: "auto",
+                flexGrow: 1,
             }}>
-                <Button variant="contained">Button</Button>
+                 
             </Box>
             <Box sx={{
                 mt: "auto",
@@ -69,6 +74,6 @@ export default function QuizPreviewContent() {
                     >Далее</Button>
                 </Box>
             </Box>
-        </Box>
+        </Paper>
     );
 }
diff --git a/src/ui_kit/QuizPreview/ResizeIcon.tsx b/src/ui_kit/QuizPreview/ResizeIcon.tsx
index de55c923..3d5895d6 100644
--- a/src/ui_kit/QuizPreview/ResizeIcon.tsx
+++ b/src/ui_kit/QuizPreview/ResizeIcon.tsx
@@ -9,15 +9,16 @@ export default function ResizeIcon({ sx }: Props) {
 
     return (
         <Box sx={{
-            height: "30px",
-            width: "30px",
+            height: "20px",
+            width: "20px",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
             cursor: "nwse-resize",
+            pointerEvents: "auto",
             ...sx,
         }}>
-            <svg width="30" height="30" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg width="20" height="20" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M10.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM19.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM10.5 16.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" fill="#4D4D4D" />
             </svg>
         </Box>