diff --git a/src/backend/getData.js b/src/backend/getData.js
new file mode 100644
index 0000000..cca0a53
--- /dev/null
+++ b/src/backend/getData.js
@@ -0,0 +1,12 @@
+import axios from "axios";
+import { dataDestination } from "../destinationUrl";
+export const getCardData = (isMounted, setState) => {
+  axios
+    .get(`${dataDestination}/card_data`)
+    .then((res) => {
+      if (isMounted) {
+        setState(res.data);
+      }
+    })
+    .catch();
+};
diff --git a/src/components/CreditStages/CreditStage1.js b/src/components/CreditStages/CreditStage1.js
index b855656..91b681a 100644
--- a/src/components/CreditStages/CreditStage1.js
+++ b/src/components/CreditStages/CreditStage1.js
@@ -1,5 +1,5 @@
 // IMPORT MODULES
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 // IMPORT COMPONENTS
 import CustomSelect from "../global/CustomSelect";
@@ -8,19 +8,29 @@ import CustomSelect from "../global/CustomSelect";
 import arrow from "../../icons/arrow.svg";
 import next from "../../icons/next.svg";
 
-const CreditStage1 = ({ setStage, data, setData }) => {
+const CreditStage1 = ({ setStage, data, setData, creditData, id, setId }) => {
   const [input, setInput] = useState(data.type ? data.type : null);
   const [dropdown, setDropdown] = useState({
     one: true,
     two: false,
   });
+
+  useEffect(() => {
+    if (input !== "" && creditData) {
+      creditData.data.map((el) => {
+        if (Object.values(el).includes(input)) {
+          setId(el.id);
+        }
+      });
+    }
+  }, [input]);
   return (
     <section className="cs-1">
       <form>
         <div className="cs-1-top">
           <label htmlFor="credit-type">Выберите вид кредита</label>
           <CustomSelect
-            items={["Кредит для молодоженов"]}
+            items={creditData ? creditData.data.map((el) => el.name) : [""]}
             customId={"credit-type"}
             name={"credit-type"}
             blockName={"cs-1-top-block"}
@@ -53,30 +63,61 @@ const CreditStage1 = ({ setStage, data, setData }) => {
             >
               <div className="dropdown-inner bottom">
                 <h6>Срок</h6>
-                <h2>до 3 лет</h2>
+                <h2>
+                  до{" "}
+                  {creditData
+                    ? creditData.data.map((el) => (el.id === id ? el.term : ""))
+                    : ""}{" "}
+                  лет
+                </h2>
               </div>
               <div className="dropdown-inner left right bottom">
                 <h6>Сумма кредита</h6>
-                <h2>до 6000 манат</h2>
+                <h2>
+                  {creditData
+                    ? creditData.data.map((el) => (el.id === id ? el.sum : ""))
+                    : ""}
+                </h2>
               </div>
               <div className="dropdown-inner bottom">
                 <h6>Ставка</h6>
-                <h2>1 %</h2>
+                <h2>
+                  {creditData
+                    ? creditData.data.map((el) => (el.id === id ? el.bet : ""))
+                    : ""}{" "}
+                  %
+                </h2>
               </div>
               <div className="dropdown-inner ">
                 <h6>Обеспечение возврата кредита</h6>
-                <h2>2 поручителя</h2>
+                <h2>
+                  {creditData
+                    ? creditData.data.map((el) =>
+                        el.id === id ? el.securing_return : ""
+                      )
+                    : ""}
+                </h2>
               </div>
               <div className="dropdown-inner left right">
                 <h6>Источник погашения кредита</h6>
                 <h2>
-                  50% от зарплаты заемщика и поручителя для погашения кредита и
-                  процентов по нему (или 50% от общего семейного)
+                  {creditData
+                    ? creditData.data.map((el) =>
+                        el.id === id ? el.source_of_repayment : ""
+                      )
+                    : ""}
                 </h2>
               </div>
               <div className="dropdown-inner">
                 <h6>Способ погашения</h6>
-                <h2>Наличным или безналичным способом</h2>
+                <h2>
+                  {" "}
+                  {creditData
+                    ? creditData.data.map((el) =>
+                        el.id === id ? el.repayment_method : ""
+                      )
+                    : ""}
+                </h2>
               </div>
             </div>
           </div>
diff --git a/src/components/CreditStages/CreditStage2.js b/src/components/CreditStages/CreditStage2.js
index 2964cb7..aff8033 100644
--- a/src/components/CreditStages/CreditStage2.js
+++ b/src/components/CreditStages/CreditStage2.js
@@ -12,29 +12,44 @@ import logo from "../../icons/logo-transp.svg";
 // IMPORT IMAGES
 import next_reverse from "../../icons/next-reverse.svg";
 
-const CreditStage2 = ({ setStage, data, setData, cardData }) => {
-  const [inputValue, setInputValue] = useState(
-    data.inputValue ? data.inputValue : 3000
-  );
+const CreditStage2 = ({ setStage, data, setData, creditData, id }) => {
+  const [max, setMax] = useState(6000);
+  const [bet, setBet] = useState(1);
+  const [inputValue, setInputValue] = useState(max / 2);
   const [radio, setRadio] = useState(1);
   const [monthlyPayment, setMonthlyPayment] = useState(
     (
       inputValue / (radio * 12) +
-      (inputValue / (radio * 12)) * cardData.card1.percent
+      (inputValue / (radio * 12)) * (bet / 100)
     ).toFixed(2)
   );
   useEffect(() => {
     setMonthlyPayment(
       (
         inputValue / (radio * 12) +
-        (inputValue / (radio * 12)) * cardData.card1.percent
+        (inputValue / (radio * 12)) * (bet / 100)
       ).toFixed(2)
     );
   }, [inputValue, radio]);
 
+  useEffect(() => {
+    setInputValue(max / 2);
+  }, [max]);
+
   useEffect(() => {
     input.current.value = inputValue;
   }, [inputValue]);
+
+  useEffect(() => {
+    if (creditData) {
+      creditData.data.map((el) => {
+        if (el.id === id) {
+          setBet(el.bet);
+          setMax(el.sum);
+        }
+      });
+    }
+  }, [creditData]);
   const input = useRef();
   return (
     <section className="cs-2">
@@ -69,7 +84,7 @@ const CreditStage2 = ({ setStage, data, setData, cardData }) => {
                 type="range"
                 id="sum"
                 min="100"
-                max="6000"
+                max={max}
                 defaultValue={inputValue}
                 ref={input}
                 onChange={(e) => {
@@ -120,19 +135,6 @@ const CreditStage2 = ({ setStage, data, setData, cardData }) => {
                   }}
                 />
               </label>
-              <label htmlFor="term1" className={radio === 4 ? "active" : ""}>
-                4 года
-                <input
-                  type="radio"
-                  name="term"
-                  id="term1"
-                  onClick={(e) => {
-                    if (e.target.checked === true) {
-                      setRadio(4);
-                    }
-                  }}
-                />
-              </label>
             </div>
           </div>
           <div className="card-button cs-2-bottom">
@@ -186,12 +188,12 @@ const CreditStage2 = ({ setStage, data, setData, cardData }) => {
                   onClick={() => {
                     if (
                       ((parseInt(monthlyPayment) - 1) * radio * 12) /
-                        (1 + cardData.card1.percent) >
+                        (1 + bet / 100) >
                       100
                     ) {
                       setInputValue(
                         ((parseInt(monthlyPayment) - 1) * radio * 12) /
-                          (1 + cardData.card1.percent)
+                          (1 + bet / 100)
                       );
                     }
                   }}
@@ -204,12 +206,12 @@ const CreditStage2 = ({ setStage, data, setData, cardData }) => {
                   onClick={() => {
                     if (
                       ((parseInt(monthlyPayment) + 1) * radio * 12) /
-                        (1 + cardData.card1.percent) <
-                      6000
+                        (1 + bet / 100) <
+                      max
                     ) {
                       setInputValue(
                         ((parseInt(monthlyPayment) + 1) * radio * 12) /
-                          (1 + cardData.card1.percent)
+                          (1 + bet / 100)
                       );
                     }
                   }}
@@ -219,18 +221,14 @@ const CreditStage2 = ({ setStage, data, setData, cardData }) => {
               </div>
               <div className="percent">
                 <h6>Процентная ставка</h6>
-                <h5>{cardData.card1.percent * 100} %</h5>
+                <h5>{bet} %</h5>
               </div>
             </div>
             <div className="cs-2-right-middle">
               <div className="cs-2-right-middle-content">
                 <h6>Процентный платеж</h6>
                 <h5>
-                  {(
-                    (inputValue / (radio * 12)) *
-                    cardData.card1.percent
-                  ).toFixed(2)}{" "}
-                  TMT
+                  {((inputValue / (radio * 12)) * (bet / 100)).toFixed(2)} TMT
                 </h5>
               </div>
               <div className="cs-2-right-middle-content">
diff --git a/src/components/credits/CreditModal.js b/src/components/credits/CreditModal.js
index 0e2ad82..3e15208 100644
--- a/src/components/credits/CreditModal.js
+++ b/src/components/credits/CreditModal.js
@@ -27,17 +27,11 @@ const CreditModal = ({
   setLoader,
   setSuccess,
   setError,
+  creditData,
 }) => {
   const window = useRef();
   const [data, setData] = useState({});
-  const [
-    cardData,
-    //  setCardData
-  ] = useState({
-    card1: {
-      percent: 0.01,
-    },
-  });
+  const [id, setId] = useState(1);
   return (
     <section
       className={modalOpen ? "modal credit-modal active" : "modal credit-modal"}
@@ -146,13 +140,17 @@ const CreditModal = ({
                   setStage={setStage}
                   data={data}
                   setData={setData}
+                  creditData={creditData}
+                  id={id}
+                  setId={setId}
                 />
               ) : stage === 2 ? (
                 <CreditStage2
                   setStage={setStage}
                   data={data}
                   setData={setData}
-                  cardData={cardData}
+                  creditData={creditData}
+                  id={id}
                 />
               ) : stage === 3 ? (
                 <CreditStage3
diff --git a/src/components/global/LoggedNav.js b/src/components/global/LoggedNav.js
index e66efac..6074e5e 100644
--- a/src/components/global/LoggedNav.js
+++ b/src/components/global/LoggedNav.js
@@ -45,7 +45,7 @@ const LoggedNav = ({ sideOpen, setSideOpen, animator, setAnimator }) => {
                 setSideOpen(!sideOpen);
               }}
             >
-              <div className={sideOpen ? "line-block active" : "line-block"}>
+              <div className={sideOpen ? "lines-block active" : "lines-block"}>
                 <div className="lines line-1"></div>
                 <div className="lines line-2"></div>
                 <div className="lines line-3"></div>
diff --git a/src/destinationUrl.js b/src/destinationUrl.js
index a0acfbd..e813fe3 100644
--- a/src/destinationUrl.js
+++ b/src/destinationUrl.js
@@ -1 +1,3 @@
 export const destination = "https://shahsyotag.halkbank.gov.tm/app/api";
+
+export const dataDestination = "https://shahsyotag.halkbank.gov.tm/app/api/v1";
diff --git a/src/pages/Credits.js b/src/pages/Credits.js
index b5cbf8a..b328587 100644
--- a/src/pages/Credits.js
+++ b/src/pages/Credits.js
@@ -1,6 +1,7 @@
 // IMPORT MODULES
 import React, { useState, useEffect, useContext } from "react";
 import { UserContext } from "../backend/UserContext";
+import axios from "axios";
 
 // IMPORT COMPONENTS
 import Breadcrumb from "../components/global/Breadcrumb";
@@ -9,6 +10,9 @@ import Loader from "../components/global/Loader";
 import Success from "../components/global/Success";
 import Error from "../components/global/Error";
 
+// IMPORT HELPERS
+import { dataDestination } from "../destinationUrl";
+
 // IMPORT IMAGES
 import credit from "../icons/credit-black.svg";
 import add from "../icons/add.svg";
@@ -22,6 +26,7 @@ const Credits = () => {
   const [modalOpen, setModalOpen] = useState(false);
   const [stage, setStage] = useState(1);
   const [loader, setLoader] = useState(false);
+  const [creditData, setCreditData] = useState();
   useEffect(() => {
     if (modalOpen) {
       document.body.style.overflowY = "hidden";
@@ -30,6 +35,21 @@ const Credits = () => {
     }
   }, [modalOpen]);
 
+  useEffect(() => {
+    let isMounted = true;
+    axios
+      .get(`${dataDestination}/credit_data`)
+      .then((res) => {
+        if (isMounted) {
+          setCreditData(res.data);
+        }
+      })
+      .catch();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
   return (
     <section className="cards">
       {success ? <Success message={"Ваш запрос успешно отправлен!"} /> : null}
@@ -44,6 +64,7 @@ const Credits = () => {
         setLoader={setLoader}
         setSuccess={setSuccess}
         setError={setError}
+        creditData={creditData}
       />
       {loader ? <Loader /> : null}
       <div className="container">
diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss
index 1a007a2..ef30618 100644
--- a/src/styles/_nav.scss
+++ b/src/styles/_nav.scss
@@ -1,4 +1,4 @@
-.line-block {
+.lines-block {
   position: relative;
   width: 3rem;
   height: 2rem;
@@ -51,6 +51,7 @@
     &::after {
       opacity: 1;
       left: -48%;
+      top: 0.9rem;
       transform: rotate(-90deg);
       transition: all 0.3s ease;
     }