diff --git a/src/backend/forgotPassword.js b/src/backend/forgotPassword.js
new file mode 100644
index 0000000..cf56c99
--- /dev/null
+++ b/src/backend/forgotPassword.js
@@ -0,0 +1,12 @@
+import axios from "axios";
+
+export const forgotPassword = (url, data, setState, unsetState) => {
+  axios
+    .post(url, data)
+    .then((res) => {
+      setState(res);
+    })
+    .catch(() => {
+      unsetState(false);
+    });
+};
diff --git a/src/backend/sendRequest.js b/src/backend/sendRequest.js
index 71315a6..430685e 100644
--- a/src/backend/sendRequest.js
+++ b/src/backend/sendRequest.js
@@ -25,7 +25,7 @@ export const sendRequest = (url, token, data, setState, setLoader) => {
   axios
     .post(`${url}?token=${token}`, form)
     .then((res) => {
-      setState(res.data);
+      setState(res);
       if (setLoader) {
         setLoader(false);
       }
diff --git a/src/components/CreditStages/CreditStage6.js b/src/components/CreditStages/CreditStage6.js
index ed9a45f..c984a24 100644
--- a/src/components/CreditStages/CreditStage6.js
+++ b/src/components/CreditStages/CreditStage6.js
@@ -10,7 +10,13 @@ import next_reverse from "../../icons/next-reverse.svg";
 import { sendRequest } from "../../backend/sendRequest";
 import { getUserInfo } from "../../backend/getUserInfo";
 
-const CreditStage6 = ({ setStage, data, setModalOpen, setLoader }) => {
+const CreditStage6 = ({
+  setStage,
+  data,
+  setModalOpen,
+  setLoader,
+  setSuccess,
+}) => {
   const { setUser } = useContext(UserContext);
   const token = localStorage.getItem("userToken");
   const postUrl = "http://95.85.124.85:8000/api/online_credit";
@@ -111,7 +117,20 @@ const CreditStage6 = ({ setStage, data, setModalOpen, setLoader }) => {
           onClick={() => {
             setModalOpen(false);
             setLoader(true);
-            sendRequest(postUrl, token, data, () => null, setLoader);
+            sendRequest(
+              postUrl,
+              token,
+              data,
+              (res) => {
+                if (res.headers.status === "200") {
+                  setSuccess(true);
+                  setTimeout(() => {
+                    setSuccess(false);
+                  }, 2000);
+                }
+              },
+              setLoader
+            );
             getUserInfo(getUrl, token, setUser, () => null);
           }}
         >
diff --git a/src/components/credits/CreditModal.js b/src/components/credits/CreditModal.js
index ded8c8d..89fe065 100644
--- a/src/components/credits/CreditModal.js
+++ b/src/components/credits/CreditModal.js
@@ -28,6 +28,7 @@ const CreditModal = ({
   stage,
   setStage,
   setLoader,
+  setSuccess,
 }) => {
   const window = useRef();
   const [data, setData] = useState({});
@@ -176,6 +177,7 @@ const CreditModal = ({
                   setData={setData}
                   setModalOpen={setModalOpen}
                   setLoader={setLoader}
+                  setSuccess={setSuccess}
                 />
               ) : (
                 ""
diff --git a/src/components/global/Success.js b/src/components/global/Success.js
new file mode 100644
index 0000000..63bc6e5
--- /dev/null
+++ b/src/components/global/Success.js
@@ -0,0 +1,18 @@
+// IMPORT MODULES
+import React from "react";
+
+// IMPORT IMAGES
+import { ReactComponent as Check } from "../../icons/check.svg";
+
+const Success = ({ message }) => {
+  return (
+    <div className="success">
+      <div className="wrapper">
+        <Check />
+      </div>
+      <h1>{message}</h1>
+    </div>
+  );
+};
+
+export default Success;
diff --git a/src/components/passwordRec/Stage1.js b/src/components/passwordRec/Stage1.js
index 87e71c4..0198691 100644
--- a/src/components/passwordRec/Stage1.js
+++ b/src/components/passwordRec/Stage1.js
@@ -7,7 +7,7 @@ import Next from "../../icons/arrow-circle-right.svg";
 // IMPORT HELPER
 import { ValidateEmail } from "../../validators/ValidateEmail";
 
-const Stage1 = ({ setRecStage }) => {
+const Stage1 = ({ setRecStage, data, setData }) => {
   const [inputValid, setInputValid] = useState({
     email: false,
   });
@@ -15,7 +15,11 @@ const Stage1 = ({ setRecStage }) => {
   const [validate, setValidate] = useState(false);
   return (
     <div className="recovery-block recovery-1">
-      <form>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
         <h2 className="form-title">Восстановление пароля</h2>
         <div className="reg-input-block rec-input">
           <label htmlFor="mail">
@@ -33,7 +37,7 @@ const Stage1 = ({ setRecStage }) => {
               if (ValidateEmail(e.target.value)) {
                 setInputValid({
                   ...inputValid,
-                  email: true,
+                  email: e.target.value,
                 });
               } else {
                 setInputValid({
@@ -57,6 +61,7 @@ const Stage1 = ({ setRecStage }) => {
             type="button"
             className="sign-btn"
             onClick={() => {
+              setData({ ...data, email: inputValid.email });
               setRecStage((prevStage) => prevStage + 1);
             }}
           >
diff --git a/src/components/passwordRec/Stage2.js b/src/components/passwordRec/Stage2.js
index 3bea713..76fd9a8 100644
--- a/src/components/passwordRec/Stage2.js
+++ b/src/components/passwordRec/Stage2.js
@@ -1,21 +1,25 @@
 // IMPORT MODULES
 import React, { useState, useEffect } from "react";
 
+// IMPORT COMPONENTS
+import Success from "../global/Success";
+
 // IMPORT IMAGES
 import Next from "../../icons/arrow-circle-right.svg";
 
 // IMPORT HELPERS
 import { ValidatePassword } from "../../validators/ValidatePassword";
+import { forgotPassword } from "../../backend/forgotPassword";
 
-const Stage2 = ({ setRecoveryOpen, setRecStage }) => {
+const Stage2 = ({ setRecoveryOpen, setRecStage, data, setData, setLoader }) => {
   const [inputValid, setInputValid] = useState({
     newPassword: false,
     confirm: false,
     match: false,
   });
-
+  const form = new FormData();
+  const [success, setSuccess] = useState(false);
   const [valid, setValid] = useState(false);
-
   const [input, setInput] = useState({
     new: "",
     confirm: "",
@@ -38,9 +42,16 @@ const Stage2 = ({ setRecoveryOpen, setRecStage }) => {
     }
   }, [input]);
 
+  const postUrl = "http://95.85.124.85:8000/api/me";
+
   return (
     <div className="recovery-block recovery-2">
-      <form>
+      {success ? <Success message={"Пароль успешно изменен"} /> : null}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
         <h2 className="form-title">Новый пароль</h2>
         <div className="reg-input-block rec-input">
           <label htmlFor="new-pass">
@@ -58,7 +69,7 @@ const Stage2 = ({ setRecoveryOpen, setRecStage }) => {
               if (ValidatePassword(e.target.value)) {
                 setInputValid({
                   ...inputValid,
-                  newPassword: true,
+                  newPassword: e.target.value,
                 });
               } else {
                 setInputValid({
@@ -123,12 +134,26 @@ const Stage2 = ({ setRecoveryOpen, setRecStage }) => {
             disabled={!btnEnabled}
             type="button"
             className="sign-btn"
-            onClick={(e) => {
-              e.preventDefault();
-              setRecoveryOpen(false);
-              setTimeout(() => {
-                setRecStage(1);
-              }, 400);
+            onClick={() => {
+              setData({ ...data, password: inputValid.newPassword });
+              setLoader(true);
+              form.append("email", data.email);
+              form.append("password", data.password);
+              form.append("password_confirmation", data.password);
+              forgotPassword(
+                postUrl,
+                form,
+                () => {
+                  setSuccess(true);
+                  setTimeout(() => {
+                    setSuccess(false);
+                  }, 2000);
+                  setRecoveryOpen(false);
+                  setRecStage(1);
+                  setLoader(false);
+                },
+                setLoader
+              );
             }}
           >
             <div>
diff --git a/src/components/sign/PasswordRec.js b/src/components/sign/PasswordRec.js
index bf20502..3bff240 100644
--- a/src/components/sign/PasswordRec.js
+++ b/src/components/sign/PasswordRec.js
@@ -1,40 +1,39 @@
 // IMPORT MODULES
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useRef } from "react";
 
 // IMPORT PERSONAL COMPONENTS
 import Stage1 from "../passwordRec/Stage1";
 import Stage2 from "../passwordRec/Stage2";
 
+// IMPORT COMPONENTS
+import Loader from "../global/Loader";
+
 const PasswordRec = ({ recoveryOpen, setRecoveryOpen }) => {
   const [recStage, setRecStage] = useState(1);
+  const [data, setData] = useState({});
+  const [loader, setLoader] = useState(false);
   const ref = useRef();
-  useEffect(() => {
-    if (!recoveryOpen) {
-      document.body.style.overflowY = "visible";
-    } else {
-      document.body.style.overflowY = "hidden";
-    }
-    window.addEventListener("mousedown", (e) => {
-      if (recoveryOpen && ref.current && !ref.current.contains(e.target)) {
-        setRecoveryOpen(false);
-      }
-    });
-
-    return () => {
-      window.removeEventListener("mousedown", () => {});
-    };
-  }, [recoveryOpen, setRecoveryOpen]);
-
   return (
-    <section className={recoveryOpen ? "recovery active" : "recovery"}>
+    <section
+      className={recoveryOpen ? "recovery active" : "recovery"}
+      onClick={(e) => {
+        if (e.target.contains(ref.current)) {
+          setRecoveryOpen(false);
+        }
+      }}
+    >
       <div className="recovery-container">
         <div className="recovery-inner" ref={ref}>
+          {loader ? <Loader /> : null}
           {recStage === 1 ? (
-            <Stage1 setRecStage={setRecStage} />
+            <Stage1 setRecStage={setRecStage} data={data} setData={setData} />
           ) : recStage === 2 ? (
             <Stage2
               setRecoveryOpen={setRecoveryOpen}
               setRecStage={setRecStage}
+              data={data}
+              setData={setData}
+              setLoader={setLoader}
             />
           ) : (
             ""
diff --git a/src/icons/check.svg b/src/icons/check.svg
new file mode 100644
index 0000000..e7605c1
--- /dev/null
+++ b/src/icons/check.svg
@@ -0,0 +1,5 @@
+  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 98.5 98.5" enable-background="new 0 0 98.5 98.5" xml:space="preserve">
+  <path class="checkmark" fill="none" stroke-width="8" stroke-miterlimit="10" d="M81.7,17.8C73.5,9.3,62,4,49.2,4
+	C24.3,4,4,24.3,4,49.2s20.3,45.2,45.2,45.2s45.2-20.3,45.2-45.2c0-8.6-2.4-16.6-6.5-23.4l0,0L45.6,68.2L24.7,47.3"/>
+</svg>
\ No newline at end of file
diff --git a/src/pages/Base.js b/src/pages/Base.js
index 4d05592..eee15de 100644
--- a/src/pages/Base.js
+++ b/src/pages/Base.js
@@ -37,63 +37,23 @@ const Base = () => {
                   <th>Статус</th>
                   <th>Действие</th>
                 </tr>
+                {user
+                  ? user.online_credit.length !== 0
+                    ? user.online_credit.map((el, i) => {
+                        return (
+                          <tr key={i}>
+                            <td>#{el.id}</td>
+                            <td>{el.type}</td>
+                            <td>{el.date}</td>
+                            <td>--status</td>
+                            <td>--action</td>
+                          </tr>
+                        );
+                      })
+                    : null
+                  : null}
                 {user ? (
-                  user.online_credit !== [] ? (
-                    user.online_credit.map((el, i) => {
-                      return (
-                        <tr key={i}>
-                          <td>#{el.id}</td>
-                          <td>{el.type}</td>
-                          <td>{el.date}</td>
-                          <td>--status</td>
-                          <td>--action</td>
-                        </tr>
-                      );
-                    })
-                  ) : user ? (
-                    user.online_card !== [] ? (
-                      ""
-                    ) : (
-                      <tr>
-                        <td>Заявок нет</td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                      </tr>
-                    )
-                  ) : (
-                    <tr>
-                      <td>Заявок нет</td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                  )
-                ) : user ? (
-                  user.online_card !== [] ? (
-                    ""
-                  ) : (
-                    <tr>
-                      <td>Заявок нет</td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                  )
-                ) : (
-                  <tr>
-                    <td>Заявок нет</td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                )}
-                {user ? (
-                  user.online_card !== [] ? (
+                  user.online_card.length !== 0 ? (
                     user.online_card.map((el, i) => {
                       return (
                         <tr key={i}>
diff --git a/src/pages/Cards.js b/src/pages/Cards.js
index 8c0e546..ec0ba8b 100644
--- a/src/pages/Cards.js
+++ b/src/pages/Cards.js
@@ -68,21 +68,19 @@ const Cards = () => {
                   <th>Действие</th>
                 </tr>
                 {user ? (
-                  user.online_card !== [] ? (
+                  user.online_card.length !== 0 ? (
                     user.online_card.map((el, i) => {
-                      return (
-                        <tr key={i}>
-                          <td>#{el.id}</td>
-                          <td>{el.selected_card}</td>
-                          <td>{el.date}</td>
-                          <td>--status</td>
-                          <td>--action</td>
-                        </tr>
-                      );
+                      <tr key={i}>
+                        <td>#{el.id}</td>
+                        <td>{el.selected_card}</td>
+                        <td>{el.date}</td>
+                        <td>--status</td>
+                        <td>--action</td>
+                      </tr>;
                     })
                   ) : (
                     <tr>
-                      <td>Заявок на карту нет</td>
+                      <td>Заявок на карты нет</td>
                       <td></td>
                       <td></td>
                       <td></td>
@@ -91,7 +89,7 @@ const Cards = () => {
                   )
                 ) : (
                   <tr>
-                    <td>Заявок на карту нет</td>
+                    <td>Заявок на карты нет</td>
                     <td></td>
                     <td></td>
                     <td></td>
diff --git a/src/pages/Credits.js b/src/pages/Credits.js
index 8fbd62e..beffc46 100644
--- a/src/pages/Credits.js
+++ b/src/pages/Credits.js
@@ -6,12 +6,14 @@ import { UserContext } from "../backend/UserContext";
 import Breadcrumb from "../components/global/Breadcrumb";
 import CreditModal from "../components/credits/CreditModal";
 import Loader from "../components/global/Loader";
+import Success from "../components/global/Success";
 
 // IMPORT IMAGES
 import credit from "../icons/credit-black.svg";
 import add from "../icons/add.svg";
 
 const Credits = () => {
+  const [success, setSuccess] = useState(false);
   const { user } = useContext(UserContext);
   const [modalOpen, setModalOpen] = useState(false);
   const [stage, setStage] = useState(1);
@@ -26,6 +28,7 @@ const Credits = () => {
 
   return (
     <section className="cards">
+      {success ? <Success message={"ASDASDASD"} /> : null}
       <Breadcrumb image={credit} link={"/home/credits"} linkTitle={"Кредиты"} />
       <CreditModal
         setModalOpen={setModalOpen}
@@ -34,6 +37,7 @@ const Credits = () => {
         setStage={setStage}
         loader={loader}
         setLoader={setLoader}
+        setSuccess={setSuccess}
       />
       {loader ? <Loader /> : null}
       <div className="container">
@@ -65,21 +69,19 @@ const Credits = () => {
                   <th>Действие</th>
                 </tr>
                 {user ? (
-                  user.online_credit !== [] ? (
+                  user.online_credit.length !== 0 ? (
                     user.online_credit.map((el, i) => {
-                      return (
-                        <tr key={i}>
-                          <td>#{el.id}</td>
-                          <td>{el.type}</td>
-                          <td>{el.date}</td>
-                          <td>--status</td>
-                          <td>--action</td>
-                        </tr>
-                      );
+                      <tr key={i}>
+                        <td>#{el.id}</td>
+                        <td>{el.type}</td>
+                        <td>{el.date}</td>
+                        <td>--status</td>
+                        <td>--action</td>
+                      </tr>;
                     })
                   ) : (
                     <tr>
-                      <td>Заявок на карту нет</td>
+                      <td>Заявок на кредиты нет</td>
                       <td></td>
                       <td></td>
                       <td></td>
@@ -88,7 +90,7 @@ const Credits = () => {
                   )
                 ) : (
                   <tr>
-                    <td>Заявок на карту нет</td>
+                    <td>Заявок на кредиты нет</td>
                     <td></td>
                     <td></td>
                     <td></td>
diff --git a/src/styles/_sing-in.scss b/src/styles/_sing-in.scss
index 5a4573b..eec5c24 100644
--- a/src/styles/_sing-in.scss
+++ b/src/styles/_sing-in.scss
@@ -171,6 +171,17 @@
   }
 }
 
+.recovery-inner {
+  position: relative;
+  .loader {
+    border-radius: 0.5rem;
+    background-color: rgba(255, 255, 255, 0.8);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .recovery-container {
   width: 100%;
   max-width: 58rem;
diff --git a/src/styles/_success.scss b/src/styles/_success.scss
new file mode 100644
index 0000000..ce2b6d2
--- /dev/null
+++ b/src/styles/_success.scss
@@ -0,0 +1,40 @@
+.success {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 5rem;
+  position: fixed;
+  background: #fff;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 9000;
+
+  h1 {
+    font-size: 4rem;
+    color: $base-green;
+  }
+}
+
+.wrapper {
+  width: 100px;
+  margin: 4em auto 0;
+}
+
+.checkmark {
+  stroke: $base-green;
+  stroke-dashoffset: 745.74853515625;
+  stroke-dasharray: 745.74853515625;
+  animation: dash 2s ease-out forwards infinite;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 745.74853515625;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index e3b628b..a36235d 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -21,3 +21,4 @@
 @import "./profile";
 @import "./modal-form";
 @import "./credit-modal";
+@import "./success.scss";