diff --git a/src/app/page.tsx b/src/app/page.tsx
index 27150e14..96d906d4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,6 @@ import { Ellipse } from '@/components/Layout/Ellipse';
 import { AvailablesSlider } from '@/components/pages/MainPage/Availables/AvailablesSlider';
 import { Calculator } from '@/components/pages/MainPage/Calculator/Calculator';
 import { Clients } from '@/components/pages/MainPage/Clients';
-import { Demoversions } from '@/components/pages/MainPage/Demoversions';
 import { IntegrationsSlider } from '@/components/pages/MainPage/Integrations/IntegrationsSlider';
 import { Motivation } from '@/components/pages/MainPage/Motivation';
 import { ProjectManagment } from '@/components/pages/MainPage/ProjectManagment';
@@ -10,7 +9,7 @@ import { Projects } from '@/components/pages/MainPage/Projects';
 import { Reviews } from '@/components/pages/MainPage/Reviews';
 import { Showreel } from '@/components/pages/MainPage/Showreel';
 import { Statistics } from '@/components/pages/MainPage/Statistics';
-import { Technology } from '@/components/pages/MainPage/Technology';
+import { Streaming } from '@/components/pages/MainPage/Streaming';
 import { Winners } from '@/components/pages/MainPage/Winners';
 
 export default function Home() {
@@ -61,8 +60,8 @@ export default function Home() {
           },
         ]}
       />
-      <Technology />
-      <Demoversions />
+      <Streaming />
+      {/* <Demoversions /> */}
       <ProjectManagment />
       <Calculator />
       <Reviews />
diff --git a/src/components/pages/MainPage/Clients.tsx b/src/components/pages/MainPage/Clients.tsx
index 16e13bfa..859f7757 100644
--- a/src/components/pages/MainPage/Clients.tsx
+++ b/src/components/pages/MainPage/Clients.tsx
@@ -1,14 +1,13 @@
 import { clients } from '@/consts/clients';
-import Image from 'next/image';
 
 export function Clients() {
   return (
-    <div className="space-y-6">
-      <div className="flex items-center overflow-hidden w-screen sm:-mx-6 mt-10 min-h-[117px]">
+    <div className="space-y-8">
+      <div className="flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 mt-10 min-h-[117px]">
         <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
         <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
       </div>
-      <div className="flex items-center overflow-hidden w-screen sm:-mx-6 min-h-[117px]">
+      <div className="flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 min-h-[117px]">
         <MarqueeHalf
           reversed
           items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
@@ -18,7 +17,7 @@ export function Clients() {
           items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
         />
       </div>
-      <div className="border-b border-[#3D425C] flex items-center overflow-hidden w-screen sm:-mx-6 min-h-[117px] pb-16">
+      <div className="border-b border-[#3D425C] flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 min-h-[117px] pb-16">
         <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
         <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
       </div>
@@ -36,18 +35,24 @@ function MarqueeHalf({
   return (
     <div
       className={
-        'flex flex-nowrap overflow-clip items-center py-2 [flex:0_0_auto] animate-infinite-scroll ' +
-        (reversed ? '[animation-direction:reverse]' : '')
+        'flex flex-nowrap ' +
+        (reversed
+          ? '[animation:infinite-scroll_45s_linear_infinite_reverse]'
+          : 'animate-infinite-scroll')
       }
     >
       {items.map(client => (
-        <Image
+        <div
           key={client.src}
-          src={client.src}
-          alt={client.src}
-          fill
-          className="max-w-full h-auto !relative object-covesr mx-12"
-        />
+          className="border-l border-[#3D425C] w-[312px] h-[124px] flex justify-center items-center relative"
+        >
+          <img
+            key={client.src}
+            src={client.src}
+            alt={client.src}
+            className="!relative"
+          />
+        </div>
       ))}
     </div>
   );
diff --git a/src/components/pages/MainPage/ProjectManagment.tsx b/src/components/pages/MainPage/ProjectManagment.tsx
index 75aa73a4..980c67bd 100644
--- a/src/components/pages/MainPage/ProjectManagment.tsx
+++ b/src/components/pages/MainPage/ProjectManagment.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 
 export function ProjectManagment() {
   return (
-    <div className="mb-40">
+    <div className="mb-40 pt-[200px]">
       <Title className="mb-20">
         Cобираем данные о пользователе и его поведении, для прогнозирования
         спроса{' '}
diff --git a/src/components/pages/MainPage/Streaming.tsx b/src/components/pages/MainPage/Streaming.tsx
new file mode 100644
index 00000000..3e50f3b3
--- /dev/null
+++ b/src/components/pages/MainPage/Streaming.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { api } from '@/api';
+import { ArrowMoreIcon } from '@/components/icons/ArrowMoreIcon';
+import { IProject } from '@/types/IProject';
+import { MiniTitle } from '@/ui/MiniTitle';
+import { Title } from '@/ui/Title';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+
+export function Streaming() {
+  const [streamingProjects, setSteramingProjects] = useState<IProject[]>([]);
+
+  useEffect(() => {
+    getStreamingProjects();
+  }, []);
+
+  async function getStreamingProjects() {
+    try {
+      const projects: IProject[] = await api.get('projects').json();
+      setSteramingProjects(
+        projects.filter(project => project.devices.includes('stream')),
+      );
+    } catch (error) {
+      alert(`Error: ${error}`);
+    }
+  }
+
+  return (
+    <div className="pt-[200px] space-y-20">
+      <Title>
+        Уникальная технология удаленной демонстрации{' '}
+        <span className="text-gradient">
+          дает возможность презентовать объект покупателю из любой точки мира
+        </span>
+      </Title>
+      <div className="grid grid-cols-12 grid-rows-[repeat(2,fit)]">
+        <div className="pt-10 pb-6 flex flex-col justify-between col-start-1 col-span-3 border-y border-r border-[#3D425C]">
+          <p className="accent font-medium">
+            <span className="text-gradient">Graff.estate stream</span> доступен
+            на любых устройствах.
+          </p>
+          <p className="m-text">
+            Высокий уровень графики и полное погружение покупателя в процесс
+            выбора квартиры
+          </p>
+        </div>
+        <div className="py-4 pl-4 w-full col-start-4 col-span-full border-y border-[#3D425C]">
+          <video
+            src="/videos/pages/home/technology.mp4"
+            autoPlay
+            muted
+            loop
+            className="aspect-[1160/652]"
+          />
+        </div>
+        <div className="pt-10 pb-8 flex flex-col justify-between row-start-2 col-span-3 border-y border-r border-[#3D425C]">
+          <MiniTitle text="Демоверсии" />
+          <p className="m-text">
+            Местоположение и устройство не имеют значения. Нужен только интернет
+          </p>
+        </div>
+        <div className="p-4 grid grid-cols-3 gap-4 col-start-4 col-span-full border-y border-[#3D425C]">
+          {streamingProjects.map(streamingProject => (
+            <StreamingProject {...streamingProject} key={streamingProject.id} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StreamingProject({ city, name, image }: IProject) {
+  return (
+    <div className="flex flex-col justify-between gap-y-12 p-6 [background:center/cover_url(/img/pages/home/stats/highlight.svg)_no-repeat,#14161F] col-span-1">
+      <Image
+        src={process.env.NEXT_PUBLIC_API + '/upload/' + image}
+        width={164}
+        height={164}
+        alt={''}
+        className="object-cover object-center max-w-[164px] max-h-[164px]"
+      />
+      <div className="flex justify-between items-end">
+        {' '}
+        <div className="space-y-1">
+          <h4 className="h4 font-medium">{name}</h4>
+          <p className="m-text">Россия, {city}</p>
+        </div>
+        <ArrowMoreIcon />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/pages/MainPage/Technology.tsx b/src/components/pages/MainPage/Technology.tsx
deleted file mode 100644
index f98aad54..00000000
--- a/src/components/pages/MainPage/Technology.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-'use client';
-
-import { ArrowMoreIcon } from '@/components/icons/ArrowMoreIcon';
-import { PauseIcon } from '@/components/icons/PauseIcon';
-import { PlayIcon } from '@/components/icons/PlayIcon';
-import { PlusIcon } from '@/components/icons/PlusIcon';
-import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
-import Link from 'next/link';
-import { useRef, useState } from 'react';
-
-export function Technology() {
-  const [playing, setPlaying] = useState(true);
-
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  return (
-    <div className="flex flex-col items-center m-auto border-y border-[#3D425C]">
-      <div className="h-[172px] flex flex-col items-center mb-[76px]">
-        <div className="w-px bg-[#3D425C] flex-1" />
-        <PlusIcon />
-      </div>
-      <div className="grid grid-cols-12 gap-x-4 grid-rows-[repeat(min-content,3)] -mx-6">
-        <div className="col-start-1 col-span-3 row-start-2 py-3 relative flex">
-          <div className="self-center flex items-center w-2/3">
-            <div className="h-px bg-[#3D425C] flex-1" />
-          </div>
-          <div className="absolute w-full aspect-square self-center rounded-full border border-[#3D425C] left-[3.625vw] flex justify-center items-center">
-            <PlusIcon />
-          </div>
-        </div>
-        <div className="col-start-10 col-span-3 row-start-2 py-3 relative flex justify-end">
-          <div className="self-center flex items-center w-2/3">
-            <div className="h-px bg-[#3D425C] flex-1" />
-          </div>
-          <div className="absolute w-full aspect-square self-center rounded-full border border-[#3D425C] right-[3.625vw] flex justify-center items-center">
-            <PlusIcon />
-          </div>
-        </div>
-        <p className="accent mb-16 font-medium col-start-4 col-span-6">
-          Уникальная технология удаленной демонстрации дает возможность
-          презентовать объект покупателю из любой точки мира
-        </p>
-        <div className="col-start-4 col-span-6 group rounded-lg [box-shadow:1.04px_1.04px_4.18px_0px_rgba(45,79,0,0.3)] border-[7.31px] [border-image:linear-gradient(252.25deg,#FFFFFF_-0.3%,#14161F_100%)_3] relative flex justify-center items-center">
-          <video
-            ref={videoRef}
-            src="/videos/pages/home/technology.mp4"
-            autoPlay
-            loop
-            muted
-            className="border-[6.27px] [border-image:linear-gradient(72.18deg,#282A33_1.53%,#32343D_98.43%)_3]"
-          />
-          <button
-            className="absolute z-10 p-8 rounded-full border hidden group-hover:block"
-            onClick={() => {
-              playing ? videoRef.current?.pause() : videoRef.current?.play();
-              setPlaying(prev => !prev);
-            }}
-          >
-            <ClassNameWrapper
-              className="w-8 h-8"
-              element={playing ? <PauseIcon /> : <PlayIcon />}
-            />
-          </button>
-        </div>
-        <div className="flex justify-between items-start col-start-4 col-span-6 mt-10">
-          <h4 className="h4 font-medium w-2/3">
-            Высокий уровень графики и полное погружение покупателя в процесс
-            выбора квартиры
-          </h4>
-          <Link href={'/'} className="flex gap-1 items-center">
-            <p className="btn-text font-medium text-[#9299BD]">О технологии</p>
-            <ClassNameWrapper
-              className="text-[#9299BD]"
-              element={<ArrowMoreIcon />}
-            />
-          </Link>
-        </div>
-      </div>
-      <div className="h-[172px] flex flex-col items-center mt-[76px]">
-        <PlusIcon />
-        <div className="w-px bg-[#3D425C] flex-1" />
-      </div>
-    </div>
-  );
-}
diff --git a/src/ui/MiniTitle.tsx b/src/ui/MiniTitle.tsx
new file mode 100644
index 00000000..ebd10ca2
--- /dev/null
+++ b/src/ui/MiniTitle.tsx
@@ -0,0 +1,21 @@
+import { CubeIcon } from '../components/icons/CubeIcon';
+
+export function MiniTitle({
+  text,
+  className = '',
+}: {
+  text: string;
+  className?: string;
+}) {
+  return (
+    <h2
+      className={
+        'flex gap-1 items-start self-start uppercase opacity-60 font-medium link xl:w-full ' +
+        className
+      }
+    >
+      <CubeIcon />
+      {text}
+    </h2>
+  );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index bc76a54d..ecf860e4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,7 @@ const config: Config = {
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
       animation: {
-        'infinite-scroll': 'infinite-scroll 25s linear infinite',
+        'infinite-scroll': 'infinite-scroll 35s linear infinite',
         'highlight-product': 'highlight-product 0.1s ease-in 0s',
       },
       keyframes: {