diff --git a/package.json b/package.json
index decf6cd8..b35fa6f2 100755
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dnd": "^3.0.2",
     "@types/react-dom": "^18.0.0",
+    "@types/react-slick": "^0.23.13",
     "axios": "^1.5.1",
     "cypress-file-upload": "^5.0.8",
     "cytoscape": "^3.26.0",
@@ -47,6 +48,8 @@
     "react-rnd": "^10.4.1",
     "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
     "swr": "^2.2.4",
     "typescript": "^5.2.2",
     "use-debounce": "^9.0.4",
diff --git a/src/assets/icons/arrow_left.svg b/src/assets/icons/arrow_left.svg
new file mode 100644
index 00000000..ab458806
--- /dev/null
+++ b/src/assets/icons/arrow_left.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;stroke:#7E2AEA;stroke-width:2;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#7E2AEA;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<g>
+	<path class="st0" d="M6.3,24.7C6.3,14.4,14.7,6,25.1,6s18.8,8.4,18.8,18.8s-8.4,18.8-18.8,18.8S6.3,35.1,6.3,24.7z"/>
+	<path class="st1" d="M27.4,17.7l-7.8,7l7.8,7"/>
+</g>
+</svg>
diff --git a/src/assets/icons/arrow_right.svg b/src/assets/icons/arrow_right.svg
new file mode 100644
index 00000000..ba5ffa5d
--- /dev/null
+++ b/src/assets/icons/arrow_right.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;stroke:#7E2AEA;stroke-width:2;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#7E2AEA;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<g>
+	<path class="st0" d="M43.8,24.7c0,10.4-8.4,18.8-18.8,18.8S6.3,35.1,6.3,24.7S14.7,6,25.1,6S43.8,14.4,43.8,24.7z"/>
+	<path class="st1" d="M22.7,31.8l7.8-7l-7.8-7"/>
+</g>
+</svg>
diff --git a/src/pages/startPage/stepOne.tsx b/src/pages/startPage/stepOne.tsx
index e3d7511a..600609f8 100755
--- a/src/pages/startPage/stepOne.tsx
+++ b/src/pages/startPage/stepOne.tsx
@@ -1,13 +1,45 @@
-import { Box, Button } from "@mui/material";
+import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
 import CreationCard from "@ui_kit/CreationCard";
 import quizCreationImage1 from "../../assets/quiz-creation-1.png";
 import quizCreationImage2 from "../../assets/quiz-creation-2.png";
 import { setQuizType } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
+import { useEffect, useRef, useState } from "react";
+
+import arrowLeftIcon from "../../assets/icons/arrow_left.svg";
+import arrowRightIcon from "../../assets/icons/arrow_right.svg";
+
+import "slick-carousel/slick/slick-theme.css";
+import "slick-carousel/slick/slick.css";
 
 export default function StepOne() {
   const quiz = useCurrentQuiz();
   const config = quiz?.config;
+  const theme = useTheme();
+  const isSlider = useMediaQuery(theme.breakpoints.down(950));
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (containerRef.current && buttonRefs.current.length > 0) {
+      const buttonWidth = buttonRefs.current[0]!.offsetWidth;
+
+      containerRef.current.scrollTo({
+        left: currentIndex * buttonWidth,
+        behavior: "smooth",
+      });
+    }
+  }, [currentIndex]);
+
+  const handlePrevClick = () => {
+    setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
+  };
+
+  const handleNextClick = () => {
+    setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, 2));
+  };
 
   if (!config) return null;
 
@@ -20,14 +52,18 @@ export default function StepOne() {
       }}
     >
       <Box
+        ref={containerRef}
         sx={{
-          minWidth: "720px",
+          overflow: "auto",
           display: "flex",
           gap: "20px",
           mt: "60px",
+          position: "relative",
         }}
       >
         <Button
+          sx={{ minWidth: "325px" }}
+          ref={(ref) => (buttonRefs.current[0] = ref as HTMLButtonElement)}
           variant="text"
           data-cy="create-quiz-card"
           onClick={() => {
@@ -42,6 +78,23 @@ export default function StepOne() {
           />
         </Button>
         <Button
+          sx={{ minWidth: "325px" }}
+          ref={(ref) => (buttonRefs.current[1] = ref as HTMLButtonElement)}
+          variant="text"
+          onClick={() => {
+            setQuizType(quiz.id, "form");
+          }}
+        >
+          <CreationCard
+            header="Создание анкеты"
+            text="Режим анкеты создан, в целях оставить пользователю варианты вопросов используемых в исследованиях и убирания всего лишнего, что может мешать и приводить к ошибкам"
+            image={quizCreationImage2}
+            border={config.type === "form" ? "1px solid #7E2AEA" : "none"}
+          />
+        </Button>
+        <Button
+          sx={{ minWidth: "325px" }}
+          ref={(ref) => (buttonRefs.current[2] = ref as HTMLButtonElement)}
           variant="text"
           onClick={() => {
             setQuizType(quiz.id, "form");
@@ -55,6 +108,33 @@ export default function StepOne() {
           />
         </Button>
       </Box>
+
+      {isSlider && (
+        <>
+          <img
+            onClick={handlePrevClick}
+            style={{
+              position: "absolute",
+              left: "0",
+              top: "50%",
+              width: "40px",
+              height: "40px",
+            }}
+            src={arrowLeftIcon}
+          />
+          <img
+            onClick={handleNextClick}
+            style={{
+              position: "absolute",
+              right: "0",
+              top: "50%",
+              width: "40px",
+              height: "40px",
+            }}
+            src={arrowRightIcon}
+          />
+        </>
+      )}
     </Box>
   );
 }
diff --git a/src/pages/startPage/steptwo.tsx b/src/pages/startPage/steptwo.tsx
index 9fce2ebe..e4eb42af 100755
--- a/src/pages/startPage/steptwo.tsx
+++ b/src/pages/startPage/steptwo.tsx
@@ -11,13 +11,40 @@ import cardImage1 from "../../assets/card-1.png";
 import cardImage2 from "../../assets/card-2.png";
 import cardImage3 from "../../assets/card-3.png";
 import CardWithImage from "./CardWithImage";
+import { useRef, useState, useEffect } from "react";
+
+import arrowLeftIcon from "../../assets/icons/arrow_left.svg";
+import arrowRightIcon from "../../assets/icons/arrow_right.svg";
 
 export default function Steptwo() {
+  const quiz = useCurrentQuiz();
+  const config = quiz?.config;
   const theme = useTheme();
   const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300));
-  const quiz = useCurrentQuiz();
+  const isSlider = useMediaQuery(theme.breakpoints.down(1250));
 
-  const config = quiz?.config;
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (containerRef.current && buttonRefs.current.length > 0) {
+      const buttonWidth = buttonRefs.current[0]!.offsetWidth;
+
+      containerRef.current.scrollTo({
+        left: currentIndex * buttonWidth,
+        behavior: "smooth",
+      });
+    }
+  }, [currentIndex]);
+
+  const handlePrevClick = () => {
+    setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
+  };
+
+  const handleNextClick = () => {
+    setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, 2));
+  };
 
   if (!config) return null;
 
@@ -32,15 +59,19 @@ export default function Steptwo() {
         }}
       >
         <Box
+          ref={containerRef}
           sx={{
-            minWidth: "950px",
+            overflow: "auto",
             display: "flex",
             gap: "20px",
             mt: "40px",
+            position: "relative",
             padding: isSmallMonitor ? "0 15px 15px" : 0,
           }}
         >
           <Button
+            sx={{ minWidth: "325px" }}
+            ref={(ref) => (buttonRefs.current[0] = ref as HTMLButtonElement)}
             variant="text"
             data-cy="select-quiz-layout-standard"
             onClick={() => {
@@ -58,6 +89,8 @@ export default function Steptwo() {
             />
           </Button>
           <Button
+            sx={{ minWidth: "325px" }}
+            ref={(ref) => (buttonRefs.current[1] = ref as HTMLButtonElement)}
             variant="text"
             onClick={() => {
               setQuizStartpageType(quiz.id, "expanded");
@@ -74,6 +107,8 @@ export default function Steptwo() {
             />
           </Button>
           <Button
+            sx={{ minWidth: "325px" }}
+            ref={(ref) => (buttonRefs.current[2] = ref as HTMLButtonElement)}
             variant="text"
             onClick={() => {
               setQuizStartpageType(quiz.id, "centered");
@@ -90,6 +125,32 @@ export default function Steptwo() {
             />
           </Button>
         </Box>
+        {isSlider && (
+          <>
+            <img
+              onClick={handlePrevClick}
+              style={{
+                position: "absolute",
+                left: "0",
+                top: "50%",
+                width: "40px",
+                height: "40px",
+              }}
+              src={arrowLeftIcon}
+            />
+            <img
+              onClick={handleNextClick}
+              style={{
+                position: "absolute",
+                right: "0",
+                top: "50%",
+                width: "40px",
+                height: "40px",
+              }}
+              src={arrowRightIcon}
+            />
+          </>
+        )}
       </Box>
     </Box>
   );
diff --git a/yarn.lock b/yarn.lock
index f5472212..6f23d7b9 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -2436,6 +2436,13 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-slick@^0.23.13":
+  version "0.23.13"
+  resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.13.tgz#037434e73a58063047b121e08565f7185d811f36"
+  integrity sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.4.7", "@types/react-transition-group@^4.4.8":
   version "4.4.9"
   resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz"
@@ -3617,6 +3624,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classnames@^2.2.5:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clean-css@^5.2.2:
   version "5.3.1"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz"
@@ -4633,6 +4645,11 @@ enhanced-resolve@^5.10.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
+
 enquirer@^2.3.6:
   version "2.4.1"
   resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz"
@@ -6965,6 +6982,13 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
+  dependencies:
+    string-convert "^0.2.0"
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz"
@@ -8919,6 +8943,17 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-slick@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb"
+  integrity sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
@@ -9122,6 +9157,11 @@ requires-port@^1.0.0:
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
@@ -9529,6 +9569,11 @@ slice-ansi@^7.0.0:
     ansi-styles "^6.2.1"
     is-fullwidth-code-point "^5.0.0"
 
+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz"
@@ -9667,6 +9712,11 @@ string-argv@0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz"