diff --git a/public/images/union.svg b/public/images/union.svg
new file mode 100644
index 0000000..ff70ff0
--- /dev/null
+++ b/public/images/union.svg
@@ -0,0 +1,9 @@
+<svg width="381" height="278" viewBox="0 0 381 278" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M304.094 0C337.06 0 368.029 18.4292 384.013 48.1206C414.224 104.64 395.635 161.631 356.089 190.103C353.468 191.99 352.836 195.763 354.698 198.436C376.692 230.006 382.175 274.697 357.04 318.927C341.056 347.595 310.587 364.488 278.619 364.488H163.735L107.791 365C106.293 365 105.294 363.464 105.793 361.928L179.957 160.078C180.719 158.004 182.629 156.61 184.788 156.552L230.395 155.322C234.131 155.221 236.797 159.004 235.534 162.612L186.767 301.908C185.524 305.459 188.089 309.201 191.767 309.201H271.626C308.589 309.201 336.061 265.175 307.091 225.245C300.597 216.031 290.108 210.912 279.119 210.912H249.678C246.009 210.912 243.445 207.186 244.672 203.638L260.382 158.228C261.134 156.053 263.139 154.6 265.388 154.6H271.626H296.601C333.564 154.6 361.036 110.575 332.065 70.6452C325.572 61.4306 315.082 56.3114 304.094 56.3114H44.8546C27.8717 56.3114 12.8868 45.0491 7.39229 28.6676L0.286398 7.20299C-0.883792 3.66823 1.67788 0 5.31652 0H304.094ZM39.1141 84.4328C37.9998 80.9116 40.5583 77.2996 44.1668 77.2996H202.69C229.922 77.2996 248.929 103.526 241.79 129.998C241.198 132.195 239.177 133.611 236.956 133.611H93.3C70.3231 133.611 50.3432 118.765 42.8508 96.2407L39.1141 84.4328Z" fill="url(#paint0_linear_28_3379)"/>
+<defs>
+<linearGradient id="paint0_linear_28_3379" x1="199.5" y1="0" x2="199.5" y2="365" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F2D8C"/>
+<stop offset="1" stop-color="#4F2D8C" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Input/inp.module.css b/src/components/Input/inp.module.css
index 762ae0e..2a32748 100644
--- a/src/components/Input/inp.module.css
+++ b/src/components/Input/inp.module.css
@@ -1,14 +1,14 @@
 .inp{
-    background: #23252C;
-    border-radius: 14px;
     height: 40px;
     line-height: 40px;
-    border: 0px;
     padding: 0 14px;
-    color: #4D505B;
     font-size: 12px;
     width: 100%;
     max-width: 400px;
+    background: #11073B;
+    border: 2px solid #7D47BF;
+    border-radius: 12px;
+    color: rgba(255, 255, 255, 0.7);
 }
 .inp:hover{
     box-shadow: -3px -3px 8px rgb(255 255 255 / 5%), 3px 3px 8px rgb(0 0 0 / 5%);
diff --git a/src/components/selectSuperPower/selectSuperPower.module.css b/src/components/selectSuperPower/selectSuperPower.module.css
index 985a46c..ad72f04 100644
--- a/src/components/selectSuperPower/selectSuperPower.module.css
+++ b/src/components/selectSuperPower/selectSuperPower.module.css
@@ -1,16 +1,20 @@
 .selectSuperPower{
-    height: 32px;
-    width: 32px;
-    background: #000;
+    border: 2px solid #7D47BF;
+    border-radius: 8px;
+    border-radius: 8px;
+    width: 48px;
+    height: 24px;
     cursor: pointer;
 }
 .active{
-    background-color: green !important;
+    background: #7D47BF;
 }
 
 .selectWrapper{
+    margin-top: 10px;
     display: flex;
     flex-direction: row;
-    gap:5px;
-
+    gap:10px;
+    justify-content: space-between;
+    margin-bottom: 20px;
 }
\ No newline at end of file
diff --git a/src/pages/registration/onBoarding/1.tsx b/src/pages/registration/onBoarding/1.tsx
index 0f86a11..7defb58 100644
--- a/src/pages/registration/onBoarding/1.tsx
+++ b/src/pages/registration/onBoarding/1.tsx
@@ -5,6 +5,7 @@ import { Input } from "../../../components/Input";
 import { useDispatch, useSelector } from "react-redux";
 import { getFormState, setWhyPage, whyPageIE } from "../../../app/user/onBoardingSlice";
 import { AppState } from '../../../app/store'
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage1: NextPage = () => {
     let initState = useSelector((state: AppState)=>getFormState(state))[0] as whyPageIE
@@ -22,23 +23,28 @@ const OnBoardingPage1: NextPage = () => {
     } as whyPageIE
 
     return(
-        <div>
-            <div>Прежде чем что-то сделать, спроси себя "Зачем?"</div>
+        <div className={styles.mainWrapper}>
+            <div className={styles.h}>Прежде чем что-то <br></br>
+            <span className={styles.hc}>сделать,</span> <br></br> спроси себя <br></br><span className={styles.hc}>"Зачем?"</span></div>
             <div>
                 <div>Я хочу узнать:</div>
-                <Input value={initState.whatIwantKnown} placeholder="что хотите узнать?" onChange={(value)=>setWhatIwantKnown(value)}></Input>
+                <Input value={initState.whatIwantKnown} class={styles.inp1} placeholder="что хотите узнать?" onChange={(value)=>setWhatIwantKnown(value)}></Input>
             </div>
             <div>
                 <div>Я хочу получить:</div>
-                <Input value={initState.whatIwantGet} placeholder="что хотите получить?" onChange={(value)=>setWhatIwantGet(value)}></Input>
+                <Input class={styles.inp1} value={initState.whatIwantGet} placeholder="что хотите получить?" onChange={(value)=>setWhatIwantGet(value)}></Input>
             </div>
             <div>
                 <div>Я хочу научится:</div>
-                <Input value={initState.whatIwantLearn} placeholder="чему вы хотите научится?" onChange={(value)=>setWhatIwantLearn(value)}></Input>
+                <Input class={styles.inp1} value={initState.whatIwantLearn} placeholder="чему вы хотите научится?" onChange={(value)=>setWhatIwantLearn(value)}></Input>
             </div>
-            <div onClick={()=>dispatch(setWhyPage(WhyPageState))}>
-                <Link href="/registration/onBoarding" >Назад</Link>
-                <Link href="/registration/onBoarding/2" >Вперед</Link>
+            <div className={styles.linkWrapper} onClick={()=>dispatch(setWhyPage(WhyPageState))}>
+                <div className={styles.backLink}>
+                    <Link href="/registration/onBoarding" >Назад</Link>
+                </div>
+                <div className={styles.nextLink}>   
+                    <Link href="/registration/onBoarding/2">Вперед</Link>
+                </div>
             </div>
         </div>
     )
diff --git a/src/pages/registration/onBoarding/2.tsx b/src/pages/registration/onBoarding/2.tsx
index c26bfc3..f4a8ff0 100644
--- a/src/pages/registration/onBoarding/2.tsx
+++ b/src/pages/registration/onBoarding/2.tsx
@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { getFormState, setSuperPowerPage, superPowerPageIE } from "../../../app/user/onBoardingSlice";
 import { AppState } from '../../../app/store'
 import { SelectSuperPower } from "../../../components/selectSuperPower";
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage2: NextPage = () => {
     let initState = useSelector((state: AppState)=>getFormState(state))[1] as superPowerPageIE
@@ -32,9 +33,10 @@ const OnBoardingPage2: NextPage = () => {
     let dispatch = useDispatch()
 
     return(
-        <div>
-            <div>Какая у тебя суперсила?</div>
-            <div>
+        <div className={styles.mainWrapper} >
+            <div className={styles.h}>Какая у тебя <br></br>
+                <span className={styles.hc}> "суперсила?"</span></div>
+            <div className={styles.powerWrapper}>
                 <div>
                     <div>Коммуникация и сотрудничество</div>
                     <SelectSuperPower active={communication} onChange={(value)=>setCommunication(value)}></SelectSuperPower>
@@ -67,10 +69,15 @@ const OnBoardingPage2: NextPage = () => {
                     <div>Лидерство, умение вести за собой</div>
                     <SelectSuperPower active={leaders} onChange={(value)=>setLeaders(value)}></SelectSuperPower>
                 </div>
-                <div onClick={()=>dispatch(setSuperPowerPage(SuperPowerPageState))}>
-                    <Link href="/registration/onBoarding/1">Назад</Link>
-                    <Link href="/registration/onBoarding/3">Вперед</Link>
-                </div>
+
+            </div>
+            <div className={styles.linkWrapper} onClick={()=>dispatch(setSuperPowerPage(SuperPowerPageState))}>
+                    <div className={styles.backLink}>
+                        <Link href="/registration/onBoarding/1">Назад</Link>
+                    </div>
+                    <div className={styles.nextLink}>
+                        <Link href="/registration/onBoarding/3" className={styles.nextLink}>Вперед</Link>
+                    </div>
             </div>
         </div>
     )
diff --git a/src/pages/registration/onBoarding/3.tsx b/src/pages/registration/onBoarding/3.tsx
index 558d6e5..89c2305 100644
--- a/src/pages/registration/onBoarding/3.tsx
+++ b/src/pages/registration/onBoarding/3.tsx
@@ -4,6 +4,7 @@ import React, {useState} from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getFormState, setDrawDreamPage, drawDreamPageIE } from "../../../app/user/onBoardingSlice";
 import { AppState } from '../../../app/store'
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage3: NextPage = () => {
     let initState = useSelector((state: AppState)=>getFormState(state))[2] as drawDreamPageIE
@@ -12,21 +13,31 @@ const OnBoardingPage3: NextPage = () => {
     let dispatch = useDispatch()
 
     return(
-        <div>
-            <div>Нарисуй свои ассоциации со словом "мечта", подпиши каждый рисунок и приложи их ниже</div>
+        <div className={styles.mainWrapper}>
+            <div className={styles.h}><span className={styles.hc}>Нарисуй</span> свои <br></br>
+                <span className={styles.hc}>ассоциации</span> со <br></br>
+                словом "мечта"
+            </div>
+            <div>Подпиши каждый и приложи и прикрепи ниже</div>
             <div>
-                <div>Загрузить рисунки</div>
                 <div>
                 <input
                     onChange={(e)=>setFiles(e.target.files)}
                     type="file"
                     multiple={true}
+                    className={styles.inpFile}
                 />
                 </div>
             </div>
-            <div onClick={()=>dispatch(setDrawDreamPage({images:files}))}>
-                    <Link href="/registration/onBoarding/2">Назад</Link>
-                    <Link href="/registration/onBoarding/4">Вперед</Link>
+            <div className={styles.linkWrapper} onClick={()=>dispatch(setDrawDreamPage({images:files}))}>
+                    <div className={styles.backLink}>
+                        <Link href="/registration/onBoarding/2">Назад</Link>
+
+                    </div>
+                    <div className={styles.nextLink}>
+                        <Link href="/registration/onBoarding/4" className={styles.nextLink}>Вперед</Link>
+                    </div>
+
             </div>
         </div>
     )
diff --git a/src/pages/registration/onBoarding/4.tsx b/src/pages/registration/onBoarding/4.tsx
index 59215cd..47c2289 100644
--- a/src/pages/registration/onBoarding/4.tsx
+++ b/src/pages/registration/onBoarding/4.tsx
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { getFormState, setWhoIPage, whoIPageIE } from "../../../app/user/onBoardingSlice";
 import { AppState } from '../../../app/store'
 import { WhoIToggle } from "../../../components/WhoIToggle";
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage4: NextPage = () => {
     let initState = useSelector((state: AppState)=>getFormState(state))[3] as whoIPageIE
@@ -70,9 +71,14 @@ const OnBoardingPage4: NextPage = () => {
                 ></WhoIToggle>
 
             </div>
-            <div onClick={()=>dispatch(setWhoIPage(state))}>
-                    <Link href="/registration/onBoarding/3">Назад</Link>
-                    <Link href="/registration/onBoarding/5">Вперед</Link>
+            <div className={styles.linkWrapper} onClick={()=>dispatch(setWhoIPage(state))}>
+                    <div className={styles.backLink}>
+                        <Link href="/registration/onBoarding/3">Назад</Link>
+                    </div>
+                    <div className={styles.nextLink}>
+                        <Link href="/registration/onBoarding/5" className={styles.nextLink}>Вперед</Link>
+                    </div>
+
             </div>
         </div>
     )
diff --git a/src/pages/registration/onBoarding/5.tsx b/src/pages/registration/onBoarding/5.tsx
index b0a3bd9..9cba31f 100644
--- a/src/pages/registration/onBoarding/5.tsx
+++ b/src/pages/registration/onBoarding/5.tsx
@@ -48,8 +48,12 @@ const OnBoardingPage5: NextPage = () => {
                 {inputs}
             </div>
             <div onClick={()=>dispatch(setWhatILikePage({things:list}))}>
-                    <Link href="/registration/onBoarding/4">Назад</Link>
-                    <Link href="/registration/onBoarding/lastPage">Вперед</Link>
+                    <div>
+                        <Link href="/registration/onBoarding/4">Назад</Link>
+                    </div>
+                    <div className={styles.nextLink}>
+                        <Link href="/registration/onBoarding/lastPage">Вперед</Link>
+                    </div>
             </div>
         </div>
     )
diff --git a/src/pages/registration/onBoarding/index.tsx b/src/pages/registration/onBoarding/index.tsx
index d041394..c749fc6 100644
--- a/src/pages/registration/onBoarding/index.tsx
+++ b/src/pages/registration/onBoarding/index.tsx
@@ -2,12 +2,17 @@ import { NextPage } from "next";
 import Link from "next/link";
 import React from "react";
 import { Button } from "../../../components/Button";
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage: NextPage = () => {
     return(
-        <div>
-            <div>Сформмируй профиль</div>
-            <Link href="/registration/onBoarding/1">Дальше</Link>
+        <div className={styles.mainWrapper}>
+            <div className={styles.h}>Сформмируйте <span className={styles.hc}>профиль</span></div>
+            <div>Это поможет достигнуть цели!</div>
+            <div className={styles.nextLink}>
+                <Link href="/registration/onBoarding/1" className={styles.nextLink}>Дальше</Link>
+            </div>
+            <img src="/images/union.svg" className={styles.union}></img>
         </div>
     )
 }
diff --git a/src/pages/registration/onBoarding/lastPage.tsx b/src/pages/registration/onBoarding/lastPage.tsx
index 045ecc7..89c6a78 100644
--- a/src/pages/registration/onBoarding/lastPage.tsx
+++ b/src/pages/registration/onBoarding/lastPage.tsx
@@ -76,7 +76,9 @@ const lastPage: NextPage = () => {
                 </div>
             </div>
             <div>Мы уверены, все твои цели и мечты сбудуться, если следовать четкому плану</div>
-            <Link href="/">Далее</Link>
+            <div className={styles.nextLink}>
+                <Link href="/" className={styles.nextLink}>Далее</Link>
+            </div>
         </div>
     )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 7b10c79..d8a0d03 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,9 +3,24 @@ body {
   padding: 0;
   margin: 0;
   font-family: 'Jost', sans-serif;
-  font-size: 14px;
-  background-color: #14171b;
-  color: aliceblue;
+  background: #11073B;
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 17px;
+  /* identical to box height, or 131% */
+  
+  letter-spacing: -0.03em;
+  
+  /* Main/white */
+  
+  color: #FFFFFF;
+  
+  
+  /* Inside auto layout */
+  
+  flex: none;
+  order: 0;
+  flex-grow: 0;
 }
 
 a {
diff --git a/src/styles/onBoarding/onBoarding.module.css b/src/styles/onBoarding/onBoarding.module.css
index e69de29..4c12bd4 100644
--- a/src/styles/onBoarding/onBoarding.module.css
+++ b/src/styles/onBoarding/onBoarding.module.css
@@ -0,0 +1,141 @@
+.nextLink{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 24px;
+    gap: 10px;
+
+    width: 94px;
+    height: 30px;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 17px;
+    
+    /* Main/white */
+    cursor: pointer;
+    color: #FFFFFF;
+    /* Main/fuksia */
+
+    background: #7D47BF;
+    /* Main/fuksia */
+
+    border: 2px solid #7D47BF;
+    border-radius: 12px;
+    z-index: 10;
+
+}
+.backLink{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 24px;
+    gap: 10px;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 17px;
+    width: 92px;
+    height: 30px;
+
+    /* Main/fuksia */
+    cursor: pointer;
+    color: #FFFFFF;
+
+    border: 2px solid #7D47BF;
+    border-radius: 12px;
+    z-index: 10;
+}
+.h{
+    font-weight: 600;
+    font-size: 34px;
+    line-height: 40px;
+    /* or 118% */
+
+    text-align: center;
+    text-transform: uppercase;
+
+    /* Main/white */
+
+    color: #FFFFFF;
+}
+.hc{
+    font-weight: 600;
+    font-size: 34px;
+    line-height: 40px;
+    /* or 118% */
+
+    text-align: center;
+    text-transform: uppercase;
+
+    /* Main/fuksia */
+
+    color: #7D47BF;
+
+
+    /* Inside auto layout */
+
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.mainWrapper{
+   display: flex;
+   flex-direction: column;
+   gap:50px;
+   align-items: center;
+   justify-content: center;
+    width: 100%;
+    height: 100vh;
+}
+
+.union{
+    width: 80%;
+    position: absolute;
+    bottom:100px;
+    right: 0px;
+    z-index: 1;
+
+}
+
+.inp1{
+    margin-top: 10px;
+    width: 300px;
+}
+
+.linkWrapper{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap:50px
+}
+
+.powerWrapper{
+    display: flex;
+    flex-direction: column;
+    gap:20px;
+    align-items: center;
+    justify-content: center;
+}
+
+.inpFile{
+    
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 32px 16px;
+    gap: 36px;
+    width: 166px;
+    height: 30px;
+    left: calc(50% - 166px/2);
+    top: 494px;
+
+    /* Main/fuksia */
+
+    background: #7D47BF;
+    border-radius: 12px;
+}
\ No newline at end of file