diff --git a/client/public/images/cards/card_1.jpg b/client/public/images/cards/1.jpg
similarity index 100%
rename from client/public/images/cards/card_1.jpg
rename to client/public/images/cards/1.jpg
diff --git a/client/public/images/cards/card_10.jpg b/client/public/images/cards/10.jpg
similarity index 100%
rename from client/public/images/cards/card_10.jpg
rename to client/public/images/cards/10.jpg
diff --git a/client/public/images/cards/card_11.jpg b/client/public/images/cards/11.jpg
similarity index 100%
rename from client/public/images/cards/card_11.jpg
rename to client/public/images/cards/11.jpg
diff --git a/client/public/images/cards/card_12.jpg b/client/public/images/cards/12.jpg
similarity index 100%
rename from client/public/images/cards/card_12.jpg
rename to client/public/images/cards/12.jpg
diff --git a/client/public/images/cards/card_13.jpg b/client/public/images/cards/13.jpg
similarity index 100%
rename from client/public/images/cards/card_13.jpg
rename to client/public/images/cards/13.jpg
diff --git a/client/public/images/cards/card_2.jpg b/client/public/images/cards/2.jpg
similarity index 100%
rename from client/public/images/cards/card_2.jpg
rename to client/public/images/cards/2.jpg
diff --git a/client/public/images/cards/card_3.jpg b/client/public/images/cards/3.jpg
similarity index 100%
rename from client/public/images/cards/card_3.jpg
rename to client/public/images/cards/3.jpg
diff --git a/client/public/images/cards/card_4.jpg b/client/public/images/cards/4.jpg
similarity index 100%
rename from client/public/images/cards/card_4.jpg
rename to client/public/images/cards/4.jpg
diff --git a/client/public/images/cards/card_5.jpg b/client/public/images/cards/5.jpg
similarity index 100%
rename from client/public/images/cards/card_5.jpg
rename to client/public/images/cards/5.jpg
diff --git a/client/public/images/cards/card_6.jpg b/client/public/images/cards/6.jpg
similarity index 100%
rename from client/public/images/cards/card_6.jpg
rename to client/public/images/cards/6.jpg
diff --git a/client/public/images/cards/card_7.jpg b/client/public/images/cards/7.jpg
similarity index 100%
rename from client/public/images/cards/card_7.jpg
rename to client/public/images/cards/7.jpg
diff --git a/client/public/images/cards/card_8.jpg b/client/public/images/cards/8.jpg
similarity index 100%
rename from client/public/images/cards/card_8.jpg
rename to client/public/images/cards/8.jpg
diff --git a/client/public/images/cards/card_9.jpg b/client/public/images/cards/9.jpg
similarity index 100%
rename from client/public/images/cards/card_9.jpg
rename to client/public/images/cards/9.jpg
diff --git a/client/public/images/mockup.png b/client/public/images/mockup.png
new file mode 100644
index 0000000..bd47aca
Binary files /dev/null and b/client/public/images/mockup.png differ
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 1e5a2ce..5060471 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -15,6 +15,19 @@ import Map2 from "./components/Map2";
 import FeatureCard from "./components/FeatureCard";
 
 function App() {
+  function getAccel() {
+    DeviceMotionEvent.requestPermission().then((response) => {
+      if (response == "granted") {
+        console.log("accelerometer permission granted");
+        alert("1");
+      }
+    });
+  }
+
+  useEffect(() => {
+    getAccel();
+  }, []);
+
   const parallaxRef = useRef<HTMLDivElement>(null);
 
   const [fullname, setFullname] = useState<string>("");
@@ -46,7 +59,7 @@ function App() {
     if (featureImagesContainer.current) {
       featureImagesContainer.current.insertAdjacentHTML(
         "beforeend",
-        `<div data-index="${selectedFeatureImageIndex}" style="background-image: url('${featureImages[selectedFeatureImageIndex]}')" alt="" class="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat fade-in-image" />`
+        `<div data-index="${selectedFeatureImageIndex}" style="background-image: url('${featureImages[selectedFeatureImageIndex]}')" alt="" class="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat fade-in" />`
       );
 
       if (featureImagesContainer.current.children.length > 1) {
@@ -116,7 +129,7 @@ function App() {
   }, []);
 
   return (
-    <div className="bg-[#151619] text-white">
+    <div className="bg-[#131317] text-white">
       <div
         ref={parallaxRef}
         className="relative lg:container mx-auto p-4 xl:max-w-screen-2xl"
@@ -342,8 +355,12 @@ function App() {
           </div>
         </div>
 
-        <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
-          <div className="grid grid-cols-2 gap-8">
+        <div className="relative lg:container mx-auto p-4 xl:max-w-screen-2xl">
+          <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
+            <img src="/images/shapes/3.svg" alt="" />
+          </div>
+
+          <div className="relative grid grid-cols-2 gap-8">
             <div className="space-y-8">
               <div className="font-gilroy 2xl:text-7xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
                 Анализируем
@@ -368,7 +385,9 @@ function App() {
             <div className="grid grid-cols-3 gap-4">
               <div className="col-span-2 space-y-4">
                 <div className="p-8 space-y-6 bg-[#272730] rounded-lg">
-                  <p className="uppercase">Конверсия менеджеров в брони</p>
+                  <p className="text-xl uppercase tracking-wider">
+                    Конверсия менеджеров в брони
+                  </p>
                   <div className="space-y-4">
                     <div className="grid grid-cols-8 gap-4 items-center text-xl">
                       <span className="col-span-3 w-[152px] whitespace-nowrap">
@@ -401,70 +420,221 @@ function App() {
                     </div>
                   </div>
                 </div>
-                <div className="bg-red-500">2</div>
-                <div className="bg-red-500">3</div>
+
+                <div className="p-8 space-y-6 bg-[#272730] rounded-lg">
+                  <p className="text-xl uppercase tracking-wider">
+                    Популярные типы квартир, %
+                  </p>
+                  <div className="flex space-x-10">
+                    <PieChart />
+                    <div className="space-y-2.5">
+                      <div className="flex items-center space-x-2">
+                        <div className="w-4 h-4 bg-[#7A31C3] rounded-full"></div>
+                        <p className="text-xl">Студии</p>
+                      </div>
+
+                      <div className="flex items-center space-x-2">
+                        <div className="w-4 h-4 bg-[#798FFF] rounded-full"></div>
+                        <p className="text-xl">1-к. квартиры</p>
+                      </div>
+
+                      <div className="flex items-center space-x-2">
+                        <div className="w-4 h-4 bg-[#D375FF] rounded-full"></div>
+                        <p className="text-xl">2-к. квартиры</p>
+                      </div>
+
+                      <div className="flex items-center space-x-2">
+                        <div className="w-4 h-4 bg-[#8742F8] rounded-full"></div>
+                        <p className="text-xl">3-к. квартиры</p>
+                      </div>
+
+                      <div className="flex items-center space-x-2">
+                        <div className="w-4 h-4 bg-[#FB57F4] rounded-full"></div>
+                        <p className="text-xl">4-к. квартиры</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="p-8 space-y-6 bg-[#272730] rounded-lg">
+                  <p className="text-xl uppercase tracking-wider">
+                    Воронка продаж
+                  </p>
+                  <div className="space-y-4">
+                    <div className="grid grid-cols-5 gap-4 items-center text-xl">
+                      <div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
+                        <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-full h-10 rounded flex justify-center items-center">
+                          Сеансы
+                        </div>
+                      </div>
+                      <span className="col-span-1 text-right w-full">100%</span>
+                    </div>
+
+                    <div className="grid grid-cols-5 gap-4 items-center text-xl">
+                      <div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
+                        <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[90%] h-10 rounded flex justify-center items-center">
+                          В избранное
+                        </div>
+                      </div>
+                      <span className="col-span-1 text-right w-full">
+                        93,47%
+                      </span>
+                    </div>
+
+                    <div className="grid grid-cols-5 gap-4 items-center text-xl">
+                      <div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
+                        <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[50%] h-10 rounded flex justify-center items-center">
+                          Брони
+                        </div>
+                      </div>
+                      <span className="col-span-1 text-right w-full">
+                        45,68%
+                      </span>
+                    </div>
+
+                    <div className="grid grid-cols-5 gap-4 items-center text-xl">
+                      <div className="col-span-4 bg-gradient-to-bl from-[#D375FF1A] to-[#798FFF1A] rounded flex justify-center space-x-4">
+                        <div className="bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] w-[35%] h-10 rounded flex justify-center items-center">
+                          Продажи
+                        </div>
+                      </div>
+                      <span className="col-span-1 text-right w-full">
+                        29,13%
+                      </span>
+                    </div>
+                  </div>
+                </div>
               </div>
               <div className="grid grid-cols-1 space-y-4">
-                <div className="bg-red-500">1</div>
-                <div className="bg-red-500">2</div>
-                <div className="bg-red-500">3</div>
-                <div className="bg-red-500">4</div>
+                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
+                  <div className="font-gilroy text-gradient">
+                    <p className="text-6xl">12</p>
+                    <p className="text-xl font-medium">минут</p>
+                  </div>
+                  <p className="text-xl">Среднее время сеанса</p>
+                </div>
+
+                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
+                  <div className="font-gilroy text-gradient">
+                    <p className="text-6xl">856</p>
+                    {/* <p className="text-xl font-medium">минут</p> */}
+                  </div>
+                  <p className="text-xl">
+                    Коммерческих предложений сформировано
+                  </p>
+                </div>
+
+                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
+                  <div className="font-gilroy text-gradient">
+                    <p className="text-6xl">12,41%</p>
+                    {/* <p className="text-xl font-medium">минут</p> */}
+                  </div>
+                  <p className="text-xl">Конверсия из сеанса в бронь</p>
+                </div>
+
+                <div className="bg-[#272730] rounded-lg flex flex-col justify-between items-start p-8 space-y-4">
+                  <div className="font-gilroy text-gradient">
+                    <p className="text-6xl">132,1</p>
+                    <p className="text-xl font-medium">млн. р.</p>
+                  </div>
+                  <p className="text-xl">Получено через Graff.estate</p>
+                </div>
               </div>
             </div>
           </div>
         </div>
 
-        <div className="relative overflow-hidden" style={{ marginTop: 0 }}>
-          <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl ">
-            <div className="lg:grid grid-cols-2 gap-8 items-center ">
-              <div className="space-y-16">
-                <p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
+        <div className="relative">
+          <div className="absolute -top-8 right-0">
+            <img src="/images/mockup.png" alt="" />
+          </div>
+          <div className="relative lg:container mx-auto p-4 xl:max-w-screen-2xl">
+            <div className="absolute -top-8 -left-44 w-full h-full">
+              <img src="/images/shapes/4.svg" alt="" />
+            </div>
+
+            <div className="w-[52%] space-y-16">
+              <div className="space-y-14">
+                <p className="font-gilroy text-2xl uppercase tracking-wider">
                   Инструмент продаж поможет вам продавать удаленно
                 </p>
-                <div className="space-y-8">
-                  <p className="font-gilroy 2xl:text-2xl text-xl">
-                    Высокий уровень графики и полное погружение покупателя в
-                    процесс выбора квартиры.
-                  </p>
-                  <p className="2xl:text-xl lg:text-lg text-[#C5C7CE]">
-                    Покажите все преимущества вашего жилого комплекса клиенту из
-                    любого конца мира. Местоположение и устройство значения не
-                    имеют. Нужен только интернет.
-                  </p>
-                </div>
-                <button className="group 2xl:text-xl px-8 py-4 border border-[#BC75FF] text-white rounded-full flex justify-center items-center opacity-95 hover:opacity-100 transition-opacity sm:w-auto w-full">
-                  <span>Узнать больше</span>
-                  <i className="group-hover:translate-x-2 transition-transform">
-                    <svg
-                      width="28"
-                      height="28"
-                      viewBox="0 0 28 28"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M10.5 22.1668L18.6667 14.0001L10.5 5.8335"
-                        stroke="#F2F2F2"
-                        strokeWidth="2.4"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </i>
-                </button>
+                <p className="font-gilroy text-5xl font-medium">
+                  Покажите все преимущества вашего жилого комплекса клиенту из
+                  любого конца мира. Местоположение и устройство значения не
+                  имеют.
+                  <br />
+                  Нужен только интернет.
+                </p>
+                <p className="text-xl">
+                  Высокий уровень графики и полное погружение покупателя
+                  <br /> в процесс выбора квартиры.
+                </p>
               </div>
-              <div className="lg:block hidden translate-y-20">
-                <Map />
+              <div className="space-y-8">
+                <button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full">
+                  <span>Узнать больше</span>
+                  <svg
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9.00002 19L16 12L9.00002 5"
+                      stroke="#F2F2F2"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </button>
+                <button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full">
+                  <span>Узнать столько же</span>
+                  <svg
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9.00002 19L16 12L9.00002 5"
+                      stroke="#F2F2F2"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </button>
+                <button className="text-xl border border-[#BC75FF] px-6 py-3 pr-3 flex items-center space-x-2 rounded-full">
+                  <span>Узнать меньше и отупеть в край</span>
+                  <svg
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9.00002 19L16 12L9.00002 5"
+                      stroke="#F2F2F2"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
           </div>
         </div>
 
         <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
-          <div className="lg:space-y-24 space-y-12">
+          <div className="lg:space-y-20 space-y-12">
             <div className="grid lg:grid-cols-2 gap-6">
-              <div className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
-                Можем оценить
+              <div className="font-gilroy 2xl:text-7xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
+                Оцените
                 <br />
                 эффективность
                 <br />
@@ -472,9 +642,9 @@ function App() {
                 <br />
                 инструмента продаж
               </div>
-              <div className="2xl:text-xl lg:text-lg">
+              <div className="2xl:text-2xl lg:text-lg">
                 Мы изучили отраслевую аналитику на рынке продаж новых квартир и
-                на основе данных собрали калькулятор эффективности продукта
+                на основе данных собрали калькулятор эффективности продукта.
                 <br />
                 <br />
                 Когда девелопер строит жилой комплекс используя проектное
@@ -487,192 +657,22 @@ function App() {
             <Calc />
           </div>
         </div>
-        <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
-          <div className="space-y-16">
-            <div className="xl:ml-[33%]">
-              <p className="font-gilroy 2xl:text-6xl lg:text-5xl sm:text-4xl text-3xl text-gradient">
-                Релевантный опыт
-              </p>
-            </div>
-            <div className="xl:grid grid-cols-3">
-              <div
-                className="col-span-1 sticky top-0 bottom-0 left-0 overflow-hidden h-[726px] transition-all ease-in-out duration-1000 xl:block hidden"
-                style={{
-                  boxShadow: "inset 0 0 32px 64px #151619",
-                  backgroundImage: "url('/images/map2.png')",
-                  border: "1px solid #151619",
-                  backgroundSize: "2400px",
-                  backgroundPosition: mapPosition,
-                }}
-              >
-                {mapCity === "Тюмень" && (
-                  <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ ease: "easeOut", delay: 0.25 }}
-                    className="font-gilroy text-2xl absolute top-[38%] left-[33%] flex flex-col justify-center items-center space-y-2"
-                  >
-                    <span>{mapCity}</span>
-                    <div className="w-4 h-4 rounded-full bg-white border-2 border-[#BC75FF]"></div>
-                  </motion.div>
-                )}
-                {mapCity === "Екатеринбург" && (
-                  <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ ease: "easeOut", delay: 0.25 }}
-                    className="font-gilroy text-2xl absolute top-[38%] left-[33%] flex flex-col justify-center items-center space-y-2"
-                  >
-                    <span>{mapCity}</span>
-                    <div className="w-4 h-4 rounded-full bg-white border-2 border-[#BC75FF]"></div>
-                  </motion.div>
-                )}
-                {mapCity === "Санкт-Петербург" && (
-                  <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ ease: "easeOut", delay: 0.25 }}
-                    className="font-gilroy text-2xl absolute top-[38%] left-[33%] flex flex-col justify-center items-center space-y-2"
-                  >
-                    <span>{mapCity}</span>
-                    <div className="w-4 h-4 rounded-full bg-white border-2 border-[#BC75FF]"></div>
-                  </motion.div>
-                )}
-                {mapCity === "Брянск" && (
-                  <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ ease: "easeOut", delay: 0.25 }}
-                    className="font-gilroy text-2xl absolute top-[38%] left-[33%] flex flex-col justify-center items-center space-y-2"
-                  >
-                    <span>{mapCity}</span>
-                    <div className="w-4 h-4 rounded-full bg-white border-2 border-[#BC75FF]"></div>
-                  </motion.div>
-                )}
-                {mapCity === "Нижний Тагил" && (
-                  <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ ease: "easeOut", delay: 0.25 }}
-                    className="font-gilroy text-2xl absolute top-[38%] left-[33%] flex flex-col justify-center items-center space-y-2"
-                  >
-                    <span>{mapCity}</span>
-                    <div className="w-4 h-4 rounded-full bg-white border-2 border-[#BC75FF]"></div>
-                  </motion.div>
-                )}
-              </div>
-              <div className="xl:col-span-2 space-y-4">
-                <ComplexCard
-                  image="/images/cards/card_1.jpg"
-                  name="ЖК «Life Резиденция»"
-                  location="Россия, Тюмень"
-                  handleClick={() => handleClickComplexCard("Тюмень")}
-                />
-                <ComplexCard
-                  image={"/images/cards/card_2.jpg"}
-                  name="МФК «Re:volution towers»"
-                  location="Россия, Екатеринбург"
-                  handleClick={() => handleClickComplexCard("Екатеринбург")}
-                />
-                {/* <ComplexCard
-                  image={"/images/cards/card_3.jpg"}
-                  name="Iskan Abu Dhabi"
-                  location="ОАЭ, Абу-Даби"
-                /> */}
-                <ComplexCard
-                  image={"/images/cards/card_4.jpg"}
-                  name="ЖК «Авторский квартал Машаров»"
-                  location="Россия, Тюмень"
-                  handleClick={() => handleClickComplexCard("Тюмень")}
-                />
-                <ComplexCard
-                  image={"/images/cards/card_5.jpg"}
-                  name="ЖК «Айвазовский»"
-                  location="Россия, Тюмень"
-                  handleClick={() => handleClickComplexCard("Тюмень")}
-                />
-                {isShowMoreComplexCards && (
-                  <>
-                    <ComplexCard
-                      image={"/images/cards/card_6.jpg"}
-                      name="ЖК «Графика»"
-                      location="Россия, Санкт-Петербург"
-                      handleClick={() =>
-                        handleClickComplexCard("Санкт-Петербург")
-                      }
-                    />
-                    <ComplexCard
-                      image={"/images/cards/card_7.jpg"}
-                      name="ЖК «4you»"
-                      location="Россия, Екатеринбург"
-                      handleClick={() => handleClickComplexCard("Екатеринбург")}
-                    />
-                    <ComplexCard
-                      image={"/images/cards/card_8.jpg"}
-                      name="ЖК «Уральский»"
-                      location="Россия, Екатеринбург"
-                      handleClick={() => handleClickComplexCard("Екатеринбург")}
-                    />
-                    <ComplexCard
-                      image={"/images/cards/card_9.jpg"}
-                      name="ЖК «Новая Атмосфера»"
-                      location="Россия, Брянск"
-                      handleClick={() => handleClickComplexCard("Брянск")}
-                    />
-                    <ComplexCard
-                      image={"/images/cards/card_10.jpg"}
-                      name="ЖК «Тринити»"
-                      location="Россия, Екатеринбург"
-                      handleClick={() => handleClickComplexCard("Екатеринбург")}
-                    />
-                    <ComplexCard
-                      image={"/images/cards/card_11.jpg"}
-                      name="ЖК «Дом на Опалихинской»"
-                      location="Россия, Екатеринбург"
-                      handleClick={() => handleClickComplexCard("Екатеринбург")}
-                    />
-                    <ComplexCard
-                      image={"/images/cards/card_12.jpg"}
-                      name="ЖК «Свой Круг»"
-                      location="Россия, Тюмень"
-                      handleClick={() => handleClickComplexCard("Тюмень")}
-                    />
-                    <ComplexCard
-                      image={"/images/cards/card_13.jpg"}
-                      name="ЖК «Александровский»"
-                      location="Россия, Нижний Тагил"
-                      handleClick={() => handleClickComplexCard("Нижний Тагил")}
-                    />
-                  </>
-                )}
 
-                {!isShowMoreComplexCards && (
-                  <button
-                    className="2xl:text-xl flex items-center justify-center space-x-2 opacity-95 hover:opacity-100 transition-opacity lg:w-auto w-full"
-                    onClick={() => setIsShowMoreComplexCards(true)}
-                  >
-                    <span>Показать больше</span>
-                    <svg
-                      width="29"
-                      height="29"
-                      viewBox="0 0 29 29"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M22.8 10.8L14.4 19.2L6.00001 10.8"
-                        stroke="#F2F2F2"
-                        strokeWidth="2.4"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </button>
-                )}
+        <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
+          <div className="grid grid-cols-2 gap-8">
+            <div className="bg-[#22222A] rounded-lg">
+              <div
+                className="h-[404px] bg-no-repeat bg-cover bg-center"
+                style={{ backgroundImage: `url('/images/cards/1.jpg')` }}
+              ></div>
+              <div className="p-8 space-y-2">
+                <p className="text-4xl">ЖК «Life Резиденция»</p>
+                <p className="text-[#ABABBA]">Россия, Тюмень.</p>
               </div>
             </div>
           </div>
         </div>
+
         <div className="bg-[#1C1D21]">
           <div className="lg:container mx-auto p-4 xl:max-w-screen-2xl">
             <div className="space-y-16 mt-12 mb-8">
diff --git a/client/src/components/Calc.tsx b/client/src/components/Calc.tsx
index b5f95e1..2341dc6 100644
--- a/client/src/components/Calc.tsx
+++ b/client/src/components/Calc.tsx
@@ -145,11 +145,12 @@ function Calc() {
   }, []);
 
   return (
-    <div className="lg:grid xl:grid-cols-3 lg:grid-cols-2 2xl:gap-12 lg:gap-6 lg:space-y-0 space-y-12">
-      <div className="space-y-4">
-        <p className="2xl:text-3xl md:text-2xl text-xl font-gilroy pb-2">
+    <div className="lg:grid xl:grid-cols-3 lg:grid-cols-2 2xl:gap-16 lg:gap-6 lg:space-y-0 space-y-12">
+      <div className="space-y-6">
+        <p className="2xl:text-3xl md:text-2xl text-xl font-gilroy uppercase tracking-wider">
           Данные по региону
         </p>
+
         <div className="space-y-1">
           <p className="2xl:text-base text-sm text-[#C5C7CE]">Регион</p>
           <SearchableSelect
@@ -158,8 +159,9 @@ function Calc() {
             handleSelect={(option) => selectRegion(option.id)}
           />
         </div>
-        <div className="bg-[#1C1D21] 2xl:p-6 p-4 space-y-4 rounded">
-          <div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
+
+        <div className="bg-[#272730] 2xl:p-6 p-4 space-y-4 rounded">
+          <div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#454554]">
             <p className="2xl:text-base text-sm text-[#C5C7CE]">
               Средняя площадь
               <br />
@@ -173,7 +175,7 @@ function Calc() {
             </p>
           </div>
 
-          <div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
+          <div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#454554]">
             <p className="2xl:text-base text-sm text-[#C5C7CE]">
               Средняя площадь
               <br />
@@ -187,7 +189,7 @@ function Calc() {
             </p>
           </div>
 
-          <div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#2E3038]">
+          <div className="grid grid-cols-2 gap-6 border-b-2 pb-4 border-[#454554]">
             <p className="2xl:text-base text-sm text-[#C5C7CE]">
               Средняя стоимость
               <br />
@@ -205,17 +207,22 @@ function Calc() {
             Установлены усредненные показатели по региону
             <br />
             Источник:{" "}
-            <a href="https://наш.дом.рф" target="_blank">
+            <a
+              href="https://наш.дом.рф"
+              target="_blank"
+              className="border-b border-[#73788C]"
+            >
               наш.дом.рф
             </a>
           </p>
         </div>
       </div>
 
-      <div className="space-y-4">
-        <p className="2xl:text-3xl md:text-2xl text-xl font-gilroy pb-2">
+      <div className="space-y-6">
+        <p className="2xl:text-3xl md:text-2xl text-xl font-gilroy uppercase tracking-wider">
           Статистика продаж
         </p>
+
         <div className="space-y-1">
           <p className="2xl:text-base text-sm text-[#C5C7CE]">
             Очных консультаций в месяц
@@ -223,13 +230,13 @@ function Calc() {
           <input
             type="text"
             pattern="^\d+$"
-            className="px-5 py-3.5 w-full outline-none placeholder:text-white bg-[#2E3038] rounded border border-transparent focus:border-[#BC75FF] transition-colors"
+            className="px-5 py-3.5 w-full outline-none placeholder:text-white rounded border border-transparent transition-colors bg-[#454554] focus:border-[#BC75FF]"
             value={consultsPerMonth}
             onChange={handleChangeConsultsPerMonth}
           />
         </div>
 
-        <div className="bg-[#1C1D21] 2xl:p-6 p-4 2xl:space-y-[29px] space-y-[25px] rounded">
+        <div className="bg-[#272730] 2xl:p-6 p-4 2xl:space-y-[29px] space-y-[25px] rounded">
           <div className="space-y-2">
             <div className="flex justify-between">
               <span className="2xl:text-base text-sm text-[#C5C7CE]">
@@ -237,7 +244,7 @@ function Calc() {
               </span>
               <span className="text-xl">100%</span>
             </div>
-            <div className="bg-[#23242A] rounded">
+            <div className="bg-[#454554] rounded">
               <div className="bg-gradient mx-auto h-10 rounded flex justify-center items-center">
                 <span className="text-xl">{consultsPerMonth}</span>
               </div>
@@ -251,7 +258,7 @@ function Calc() {
               </span>
               <span className="text-xl">{!isEnabled ? "30" : "48"}%</span>
             </div>
-            <div className="bg-[#23242A] rounded">
+            <div className="bg-[#454554] rounded">
               <div
                 className={[
                   "bg-gradient mx-auto h-10 rounded flex justify-center items-center transition-all",
@@ -270,7 +277,7 @@ function Calc() {
               </span>
               <span className="text-xl">{!isEnabled ? "10" : "22"}%</span>
             </div>
-            <div className="bg-[#23242A] rounded">
+            <div className="bg-[#454554] rounded">
               <div
                 className={[
                   "bg-gradient mx-auto h-10 rounded flex justify-center items-center transition-all",
@@ -284,13 +291,82 @@ function Calc() {
         </div>
       </div>
 
-      <div className="space-y-4 xl:col-span-1 col-span-2">
-        <p className="2xl:text-3xl md:text-2xl text-xl font-gilroy pb-2">
+      <div className="space-y-6 xl:col-span-1 col-span-2">
+        <p className="2xl:text-3xl md:text-2xl text-xl font-gilroy uppercase tracking-wider">
           Результаты расчета
         </p>
-        <div className="xl:space-y-4 xl:block grid lg:grid-cols-2 gap-4">
-          <div className="space-y-2 lg:border-t-2 border-[#2E3038] pt-4">
-            <p className="2xl:text-lg text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
+
+        <div className="space-y-6">
+          <div className="border-b-2 border-[#2E3038] pb-6 space-y-6">
+            <p className="text-[#C5C7CE]">Срок реализации</p>
+            <div className="grid grid-cols-2">
+              <div className="space-y-1">
+                <p
+                  className={[
+                    "font-gilroy text-7xl transition-colors",
+                    isEnabled && "text-[#D375FF]",
+                  ].join(" ")}
+                >
+                  {implementationTime}
+                </p>
+                <p className="text-xl">{implementationTimeCase}</p>
+              </div>
+              {isEnabled && (
+                <p className="text-xl fade-in">
+                  На{" "}
+                  <span className="text-[#D375FF]">
+                    {diffImplementationTime} {diffImplementationTimeCase}
+                  </span>{" "}
+                  вы сократили срок реализации проекта
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="space-y-6">
+            <p className="text-[#C5C7CE]">Месячный доход</p>
+            <div className="grid grid-cols-2">
+              <div className="space-y-1">
+                <p
+                  className={[
+                    "font-gilroy text-7xl transition-colors",
+                    isEnabled && "text-[#D375FF]",
+                  ].join(" ")}
+                >
+                  {profitPerMonth}
+                </p>
+                <p className="text-xl">млн. р.</p>
+              </div>
+              {isEnabled && (
+                <p className="text-xl fade-in">
+                  На{" "}
+                  <span className="text-[#D375FF]">
+                    {diffProfitPerMonth} млн. р.
+                  </span>{" "}
+                  в месяц вы заработали больше
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="pt-3.5">
+          <button
+            className={[
+              "w-full px-6 py-3 rounded-full",
+              isEnabled ? "bg-[#2E2E38]" : "bg-gradient",
+            ].join(" ")}
+            onClick={() => setIsEnabled(!isEnabled)}
+          >
+            {isEnabled
+              ? "Отключить себя от интернета и пойти погулять"
+              : "Использовать инсулин 💉"}
+          </button>
+        </div>
+
+        {/* <div className="xl:space-y-6 xl:block grid lg:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <p className="2xl:text-base text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
               Срок реализации
             </p>
             <div className="grid grid-cols-2">
@@ -324,7 +400,7 @@ function Calc() {
             </div>
           </div>
           <div className="space-y-2 border-t-2 border-[#2E3038] pt-4">
-            <p className="2xl:text-lg text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
+            <p className="2xl:text-base text-sm text-[#C5C7CE] 2xl:pb-2 xl:pb-4 pb-2">
               Месячный доход
             </p>
             <div className="grid grid-cols-2">
@@ -355,8 +431,9 @@ function Calc() {
               )}
             </div>
           </div>
-        </div>
-        <div className="xl:w-auto md:w-1/2 w-full">
+        </div> */}
+
+        {/* <div className="xl:w-auto md:w-1/2 w-full pt-10">
           <button
             className={[
               "w-full 2xl:text-xl py-4 px-8 rounded-full xl:mt-0 mt-10",
@@ -366,7 +443,7 @@ function Calc() {
           >
             {!isEnabled ? "Использовать инструмент" : "Отключить инструмент"}
           </button>
-        </div>
+        </div> */}
       </div>
     </div>
   );
diff --git a/client/src/components/PieChart/PieChart.css b/client/src/components/PieChart/PieChart.css
index 0015c1f..4ef68e2 100644
--- a/client/src/components/PieChart/PieChart.css
+++ b/client/src/components/PieChart/PieChart.css
@@ -9,9 +9,9 @@
       #7a31c3 0,
       #7a31c3 36%,
       #fb57f4 0,
-      #fb57f4 42%,
+      #fb57f4 43%,
       #8742f8 0,
-      #8742f8 52%,
+      #8742f8 53%,
       #d375ff 0,
       #d375ff 70%,
       #798fff 0,
diff --git a/client/src/components/PieChart/PieChart.tsx b/client/src/components/PieChart/PieChart.tsx
index 71480ff..a0179a8 100644
--- a/client/src/components/PieChart/PieChart.tsx
+++ b/client/src/components/PieChart/PieChart.tsx
@@ -3,10 +3,10 @@ import "./PieChart.css";
 
 function PieChart() {
   return (
-    <figure className="pie-chart relative text-xs sm:w-[168px] sm:h-[168px] w-[128px] h-[128px]">
+    <figure className="pie-chart relative sm:w-[180px] sm:h-[180px] w-[128px] h-[128px]">
       <span className="absolute sm:top-[40px] sm:left-[40px] top-[28px] left-[26px]">36,27%</span>
-      <span className="absolute sm:top-[38px] sm:left-[116px] top-[28px] left-[86px]">6,22%</span>
-      <span className="absolute sm:top-[66px] sm:left-[122px] top-[50px] left-[90px]">9,95%</span>
+      <span className="absolute sm:top-[35px] sm:left-[112px] top-[28px] left-[86px]">6,22%</span>
+      <span className="absolute sm:top-[64px] sm:left-[118px] top-[50px] left-[90px]">9,95%</span>
       <span className="absolute sm:top-[108px] sm:left-[108px] top-[82px] left-[76px]">17,93%</span>
       <span className="absolute sm:top-[114px] sm:left-[36px] top-[84px] left-[20px]">29,64%</span>
     </figure>
diff --git a/client/src/components/SearchableSelect.tsx b/client/src/components/SearchableSelect.tsx
index f6a6baf..93c6a45 100644
--- a/client/src/components/SearchableSelect.tsx
+++ b/client/src/components/SearchableSelect.tsx
@@ -77,7 +77,7 @@ function SearchableSelect({
     <div className="relative space-y-2">
       <div
         tabIndex={-1}
-        className="flex items-center cursor-pointer rounded overflow-hidden border border-transparent bg-[#2E3038]"
+        className="flex items-center cursor-pointer rounded overflow-hidden border border-transparent bg-[#454554]"
         onClick={() => setIsOpen(!isOpen)}
       >
         <input
diff --git a/client/src/index.css b/client/src/index.css
index 4ab96a5..478fe9e 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -61,7 +61,7 @@ body {
   @apply bg-gradient-to-bl from-[#BC75FF] to-[#798FFF] text-transparent bg-clip-text;
 }
 
-.fade-in-image {
+.fade-in {
   animation: fadeIn 0.5s;
 }