diff --git a/public/images/best-yacht-bg.jpg b/public/images/best-yacht-bg.jpg
new file mode 100644
index 0000000..10f2721
Binary files /dev/null and b/public/images/best-yacht-bg.jpg differ
diff --git a/public/images/rod.png b/public/images/services/service1.png
similarity index 100%
rename from public/images/rod.png
rename to public/images/services/service1.png
diff --git a/public/images/services/service2.png b/public/images/services/service2.png
new file mode 100644
index 0000000..01f15fe
Binary files /dev/null and b/public/images/services/service2.png differ
diff --git a/public/images/services/service3.png b/public/images/services/service3.png
new file mode 100644
index 0000000..2308f43
Binary files /dev/null and b/public/images/services/service3.png differ
diff --git a/public/images/services/service4.png b/public/images/services/service4.png
new file mode 100644
index 0000000..79f31e2
Binary files /dev/null and b/public/images/services/service4.png differ
diff --git a/public/images/services/service5.jpg b/public/images/services/service5.jpg
new file mode 100644
index 0000000..6630ae5
Binary files /dev/null and b/public/images/services/service5.jpg differ
diff --git a/src/app/components/FeaturedYacht.tsx b/src/app/components/FeaturedYacht.tsx
new file mode 100644
index 0000000..b56dbfa
--- /dev/null
+++ b/src/app/components/FeaturedYacht.tsx
@@ -0,0 +1,194 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { DatePicker } from "@/components/ui/date-picker";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import Image from "next/image";
+import Icon from "@/components/ui/icon";
+
+const yacht = {
+    name: "Яхта",
+    length: "12 метров",
+    price: "от 18 000 ₽",
+    perTime: "/ час",
+    feet: "7 Футов",
+    mainImage: "/images/yacht.jpg",
+    thumbnails: [
+        "/images/yacht.jpg",
+        "/images/another-yacht.jpg",
+        "/images/yacht.jpg",
+        "/images/another-yacht.jpg",
+        "/images/yacht.jpg",
+    ],
+    isPromoted: true,
+    totalPrice: "0 ₽",
+};
+
+export default function FeaturedYacht() {
+    return (
+        <div className="mb-10">
+            <Card className="overflow-hidden bg-white text-gray-900">
+                <CardContent className="p-0">
+                    <div className="flex flex-col lg:flex-row gap-11 px-6 py-10">
+                        {/* Left side - Yacht details and images */}
+                        <div className="flex-1">
+                            {/* Header with yacht name and length */}
+                            <div className="flex items-center justify-between mb-6">
+                                <h2 className="text-3xl font-bold">
+                                    {yacht.name}
+                                </h2>
+                                <div className="flex items-center gap-2 text-gray-600">
+                                    <Icon size={16} name="width" />
+                                    <span className="text-lg">
+                                        {yacht.length}
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* Main yacht image */}
+                            <div className="relative mb-6">
+                                <Image
+                                    src={yacht.mainImage}
+                                    alt={yacht.name}
+                                    width={600}
+                                    height={400}
+                                    className="w-full h-80 object-cover rounded-lg"
+                                />
+                            </div>
+
+                            {/* Thumbnail images */}
+                            <div className="flex gap-3 mb-6 overflow-x-auto">
+                                {yacht.thumbnails.map(
+                                    (thumb, idx) => (
+                                        <div
+                                            key={idx}
+                                            className="relative flex-shrink-0"
+                                        >
+                                            <Image
+                                                src={thumb}
+                                                alt={`${
+                                                    yacht.name
+                                                } view ${idx + 1}`}
+                                                width={80}
+                                                height={60}
+                                                className={`w-20 h-16 object-cover rounded cursor-pointer border-2 transition-all ${
+                                                    idx === 0
+                                                        ? "border-blue-500"
+                                                        : "border-gray-200 hover:border-gray-400"
+                                                }`}
+                                            />
+                                        </div>
+                                    )
+                                )}
+                            </div>
+
+                            {/* Promoted badge */}
+                            {yacht.isPromoted && (
+                                <div className="flex items-center gap-2 text-sm text-gray-600">
+                                    <div className="w-3 h-3 bg-blue-500 rounded-full flex-shrink-0"></div>
+                                    <span>
+                                        Это объявление продвигается.{" "}
+                                        <span className="underline cursor-pointer">
+                                            Хотите так же?
+                                        </span>
+                                    </span>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* Right side - Booking form */}
+                        <div className="min-w-[296px] flex flex-col justify-between">
+                            <div>
+                                {/* Promoted banner */}
+                                <div
+                                    className="text-white flex items-center justify-center py-2 rounded-full text-center mb-6 relative"
+                                    style={{
+                                        backgroundImage:
+                                            "url(/images/badge-bg.jpg)",
+                                        backgroundSize: "cover",
+                                        backgroundPosition: "center",
+                                        backgroundRepeat: "no-repeat",
+                                    }}
+                                >
+                                    <span className="text-xs font-medium relative z-10">
+                                        Заметнее других — бронируют
+                                        быстрее
+                                    </span>
+                                </div>
+
+                                <div className="border rounded-[16px] p-6 pb-8 border-gray-200 pt-6">
+                                    {/* Price */}
+                                    <div className="mb-6">
+                                        <p className="text-3xl font-bold">
+                                            {yacht.price}
+                                            <span className="text-sm font-normal text-gray-500">
+                                                {yacht.perTime}
+                                            </span>
+                                        </p>
+                                    </div>
+
+                                    {/* Booking form */}
+                                    <div className="space-y-5 mb-8">
+                                        <div>
+                                            <DatePicker />
+                                        </div>
+                                        <div>
+                                            <DatePicker />
+                                        </div>
+                                        <div>
+                                            <Select>
+                                                <SelectTrigger className="w-full h-[64px]">
+                                                    <SelectValue placeholder="1 гость" />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    <SelectItem value="1">
+                                                        1 гость
+                                                    </SelectItem>
+                                                    <SelectItem value="2">
+                                                        2 гостя
+                                                    </SelectItem>
+                                                    <SelectItem value="3">
+                                                        3 гостя
+                                                    </SelectItem>
+                                                    <SelectItem value="4">
+                                                        4 гостя
+                                                    </SelectItem>
+                                                    <SelectItem value="5+">
+                                                        5+ гостей
+                                                    </SelectItem>
+                                                </SelectContent>
+                                            </Select>
+                                        </div>
+                                    </div>
+
+                                    {/* Book button */}
+                                    <Button
+                                        variant="gradient"
+                                        className="font-bold text-white h-[64px] w-full px-8"
+                                    >
+                                        Забронировать
+                                    </Button>
+
+                                    {/* Total price */}
+                                    <div className="flex justify-between items-center text-l mt-6 font-bold text-gray-800">
+                                        <span className="font-normal">
+                                            Итого:
+                                        </span>
+                                        <span>
+                                            {yacht.totalPrice}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}
diff --git a/src/app/components/Services.tsx b/src/app/components/Services.tsx
index 18b2474..d9094bc 100644
--- a/src/app/components/Services.tsx
+++ b/src/app/components/Services.tsx
@@ -40,7 +40,7 @@ export default function Services() {
                                     <CarouselItem>
                                         <div className="relative group">
                                             <Image
-                                                src="/images/rod.png"
+                                                src="/images/services/service1.png"
                                                 alt="Морская рыбалка в Балаклаве"
                                                 width={600}
                                                 height={500}
@@ -51,7 +51,7 @@ export default function Services() {
                                     <CarouselItem>
                                         <div className="relative group">
                                             <Image
-                                                src="/images/rod.png"
+                                                src="/images/services/service1.png"
                                                 alt="Морская рыбалка в Балаклаве"
                                                 width={600}
                                                 height={500}
@@ -85,7 +85,7 @@ export default function Services() {
                                     <CarouselItem>
                                         <div className="relative group">
                                             <Image
-                                                src="/images/rod.png"
+                                                src="/images/services/service2.png"
                                                 alt="Прогулка на парусной яхте"
                                                 width={600}
                                                 height={500}
@@ -119,11 +119,11 @@ export default function Services() {
                         <Card className="overflow-hidden">
                             <div className="relative group">
                                 <Image
-                                    src="/images/rod.png"
+                                    src="/images/services/service3.png"
                                     alt="Вечеринка на яхте"
                                     width={400}
-                                    height={300}
-                                    className="w-full h-[300px] object-cover"
+                                    height={200}
+                                    className="w-full h-[200px] object-cover"
                                 />
                                 <div className="absolute top-4 right-4">
                                     <Icon
@@ -138,6 +138,7 @@ export default function Services() {
                             <h3 className="text-l font-semibold text-black">
                                 Вечеринка на яхте
                             </h3>
+                            <p className="text-sm text-gray-500">Свадьба, девичник/мальчишник, день рождения</p>
                         </div>
                     </div>
 
@@ -145,11 +146,11 @@ export default function Services() {
                         <Card className="overflow-hidden">
                             <div className="relative group">
                                 <Image
-                                    src="/images/rod.png"
+                                    src="/images/services/service4.png"
                                     alt="Корпоративная прогулка на яхте"
                                     width={400}
-                                    height={300}
-                                    className="w-full h-[300px] object-cover"
+                                    height={200}
+                                    className="w-full h-[200px] object-cover"
                                 />
                                 <div className="absolute top-4 right-4">
                                     <Icon
@@ -171,11 +172,11 @@ export default function Services() {
                         <Card className="overflow-hidden">
                             <div className="relative group">
                                 <Image
-                                    src="/images/rod.png"
+                                    src="/images/services/service5.jpg"
                                     alt="Морские прогулки на яхте"
                                     width={400}
-                                    height={300}
-                                    className="w-full h-[300px] object-cover"
+                                    height={200}
+                                    className="w-full h-[200px] object-cover"
                                 />
                                 <div className="absolute top-4 right-4">
                                     <Icon
@@ -188,7 +189,7 @@ export default function Services() {
                         </Card>
                         <div className="px-2">
                             <h3 className="text-l font-semibold text-black">
-                                Морские прогулки на яхте в Бал...
+                                Морская прогулка на яхте или катере
                             </h3>
                         </div>
                     </div>
diff --git a/src/app/components/YachtGrid.tsx b/src/app/components/YachtGrid.tsx
index 256e0a0..1563855 100644
--- a/src/app/components/YachtGrid.tsx
+++ b/src/app/components/YachtGrid.tsx
@@ -1,15 +1,8 @@
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { DatePicker } from "@/components/ui/date-picker";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select";
 import Image from "next/image";
 import Icon from "@/components/ui/icon";
+import FeaturedYacht from "./FeaturedYacht";
 
 const yachts = [
     {
@@ -18,7 +11,7 @@ const yachts = [
         price: "от 12 500 ₽ / час",
         feet: "7 Футов",
         img: "/images/yachts/yacht1.jpg",
-        badge: "Быстрая бронь",
+        bestOfferText: "🔥 Лучшее предложение",
     },
     {
         name: "Яхта",
@@ -26,7 +19,7 @@ const yachts = [
         price: "от 26 400 ₽ / час",
         feet: "7 Футов",
         img: "/images/yachts/yacht2.jpg",
-        badge: "По запросу",
+        bestOfferText: "🍷 Идеальна для заката с бокалом вина",
     },
     {
         name: "Яхта",
@@ -34,7 +27,7 @@ const yachts = [
         price: "от 48 000 ₽ / час",
         feet: "7 Футов",
         img: "/images/yachts/yacht3.jpg",
-        badge: "По запросу",
+        bestOfferText: "⌛ Часто бронируется — успей",
     },
     {
         name: "Яхта",
@@ -62,24 +55,6 @@ const yachts = [
     },
 ];
 
-const featuredYacht = {
-    name: "Яхта",
-    length: "12 метров",
-    price: "от 18 000 ₽",
-    perTime: "/ час",
-    feet: "7 Футов",
-    mainImage: "/images/yacht.jpg",
-    thumbnails: [
-        "/images/yacht.jpg",
-        "/images/another-yacht.jpg",
-        "/images/yacht.jpg",
-        "/images/another-yacht.jpg",
-        "/images/yacht.jpg",
-    ],
-    isPromoted: true,
-    totalPrice: "0 ₽",
-};
-
 export default function YachtGrid() {
     return (
         <section className="text-white">
@@ -102,212 +77,79 @@ export default function YachtGrid() {
                 </div>
 
                 {/* Featured Yacht Block */}
-                <div className="mb-10">
-                    <Card className="overflow-hidden bg-white text-gray-900 shadow-lg">
-                        <CardContent className="p-0">
-                            <div className="flex flex-col lg:flex-row gap-11 px-6 py-10">
-                                {/* Left side - Yacht details and images */}
-                                <div className="flex-1">
-                                    {/* Header with yacht name and length */}
-                                    <div className="flex items-center justify-between mb-6">
-                                        <h2 className="text-3xl font-bold">
-                                            {featuredYacht.name}
-                                        </h2>
-                                        <div className="flex items-center gap-2 text-gray-600">
-                                            <Icon size={16} name="width" />
-                                            <span className="text-lg">
-                                                {featuredYacht.length}
-                                            </span>
-                                        </div>
-                                    </div>
-
-                                    {/* Main yacht image */}
-                                    <div className="relative mb-6">
-                                        <Image
-                                            src={featuredYacht.mainImage}
-                                            alt={featuredYacht.name}
-                                            width={600}
-                                            height={400}
-                                            className="w-full h-80 object-cover rounded-lg"
-                                        />
-                                    </div>
-
-                                    {/* Thumbnail images */}
-                                    <div className="flex gap-3 mb-6 overflow-x-auto">
-                                        {featuredYacht.thumbnails.map(
-                                            (thumb, idx) => (
-                                                <div
-                                                    key={idx}
-                                                    className="relative flex-shrink-0"
-                                                >
-                                                    <Image
-                                                        src={thumb}
-                                                        alt={`${
-                                                            featuredYacht.name
-                                                        } view ${idx + 1}`}
-                                                        width={80}
-                                                        height={60}
-                                                        className={`w-20 h-16 object-cover rounded cursor-pointer border-2 transition-all ${
-                                                            idx === 0
-                                                                ? "border-blue-500"
-                                                                : "border-gray-200 hover:border-gray-400"
-                                                        }`}
-                                                    />
-                                                </div>
-                                            )
-                                        )}
-                                    </div>
-
-                                    {/* Promoted badge */}
-                                    {featuredYacht.isPromoted && (
-                                        <div className="flex items-center gap-2 text-sm text-gray-600">
-                                            <div className="w-3 h-3 bg-blue-500 rounded-full flex-shrink-0"></div>
-                                            <span>
-                                                Это объявление продвигается.{" "}
-                                                <span className="text-blue-500 underline cursor-pointer">
-                                                    Хотите так же?
-                                                </span>
-                                            </span>
-                                        </div>
-                                    )}
-                                </div>
-
-                                {/* Right side - Booking form */}
-                                <div className="min-w-[296px] flex flex-col justify-between">
-                                    <div>
-                                        {/* Promoted banner */}
-                                        <div
-                                            className="text-white flex items-center justify-center py-2 rounded-full text-center mb-6 relative"
-                                            style={{
-                                                backgroundImage:
-                                                    "url(/images/badge-bg.jpg)",
-                                                backgroundSize: "cover",
-                                                backgroundPosition: "center",
-                                                backgroundRepeat: "no-repeat",
-                                            }}
-                                        >
-                                            <span className="text-xs font-medium relative z-10">
-                                                Заметнее других — бронируют
-                                                быстрее
-                                            </span>
-                                        </div>
-
-                                        <div className="border rounded-[16px] p-6 pb-8 border-gray-200 pt-6">
-                                            {/* Price */}
-                                            <div className="mb-6">
-                                                <p className="text-3xl font-bold">
-                                                    {featuredYacht.price}
-                                                    <span className="text-sm font-normal text-gray-500">
-                                                        {featuredYacht.perTime}
-                                                    </span>
-                                                </p>
-                                            </div>
-
-                                            {/* Booking form */}
-                                            <div className="space-y-5 mb-8">
-                                                <div>
-                                                    <DatePicker />
-                                                </div>
-                                                <div>
-                                                    <DatePicker />
-                                                </div>
-                                                <div>
-                                                    <Select>
-                                                        <SelectTrigger className="w-full h-[64px]">
-                                                            <SelectValue placeholder="1 гость" />
-                                                        </SelectTrigger>
-                                                        <SelectContent>
-                                                            <SelectItem value="1">
-                                                                1 гость
-                                                            </SelectItem>
-                                                            <SelectItem value="2">
-                                                                2 гостя
-                                                            </SelectItem>
-                                                            <SelectItem value="3">
-                                                                3 гостя
-                                                            </SelectItem>
-                                                            <SelectItem value="4">
-                                                                4 гостя
-                                                            </SelectItem>
-                                                            <SelectItem value="5+">
-                                                                5+ гостей
-                                                            </SelectItem>
-                                                        </SelectContent>
-                                                    </Select>
-                                                </div>
-                                            </div>
-
-                                            {/* Book button */}
-                                            <Button
-                                                variant="gradient"
-                                                className="font-bold text-white h-[64px] w-full px-8"
-                                            >
-                                                Забронировать
-                                            </Button>
-
-                                            {/* Total price */}
-                                            <div className="flex justify-between items-center text-l mt-6 font-bold text-gray-800">
-                                                <span className="font-normal">
-                                                    Итого:
-                                                </span>
-                                                <span>
-                                                    {featuredYacht.totalPrice}
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card>
-                </div>
+                <FeaturedYacht />
 
                 {/* Yacht Grid */}
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                     {yachts.map((yacht, idx) => (
-                        <Card
-                            key={idx}
-                            className="overflow-hidden bg-white text-gray-900"
-                        >
-                            <CardHeader className="p-0 relative">
-                                <div className="relative">
-                                    <Image
-                                        src={yacht.img}
-                                        alt={yacht.name}
-                                        width={400}
-                                        height={250}
-                                        className="w-full h-48 object-cover"
-                                    />
-                                    {/* Badge Overlay */}
-                                    <div className="absolute top-3 left-3">
-                                        <div className="flex items-center justify-center bg-black/40 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-1">
-                                            <Icon size={16} name="restart" />
-                                            <span>{yacht.badge}</span>
+                        <div key={idx} className="relative">
+                            <Card className="overflow-hidden bg-white text-gray-900">
+                                <CardHeader className="p-0 relative">
+                                    <div className="relative">
+                                        {/* Best Offer Badge - над карточкой */}
+                                        {yacht.bestOfferText && (
+                                            <div className="w-full flex justify-center">
+                                                <div
+                                                    className="flex w-full items-center justify-center text-white px-4 py-2 text-sm font-medium bg-cover bg-center bg-no-repeat"
+                                                    style={{
+                                                        backgroundImage: "url('/images/best-yacht-bg.jpg')",
+                                                    }}
+                                                >
+                                                    <span>
+                                                        {yacht.bestOfferText}
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        )}
+                                        <Image
+                                            src={yacht.img}
+                                            alt={yacht.name}
+                                            width={400}
+                                            height={250}
+                                            className="w-full h-48 object-cover"
+                                        />
+                                        {/* Badge Overlay */}
+                                        {yacht.badge && (
+                                            <>
+                                                <div className="absolute top-3 left-3">
+                                                    <div className="flex items-center justify-center bg-black/40 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-1">
+                                                        <Icon
+                                                            size={16}
+                                                            name="restart"
+                                                        />
+                                                        <span>
+                                                            {yacht.badge}
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </>
+                                        )}
+                                    </div>
+                                </CardHeader>
+                                <CardContent className="p-4">
+                                    <div className="flex justify-between items-start mb-1">
+                                        <h3 className="font-bold text-l">
+                                            {yacht.name}
+                                        </h3>
+                                        <div className="text-right">
+                                            <p className="text-l">
+                                                {yacht.price}
+                                            </p>
                                         </div>
                                     </div>
-                                </div>
-                            </CardHeader>
-                            <CardContent className="p-4">
-                                <div className="flex justify-between items-start mb-1">
-                                    <h3 className="font-bold text-l">
-                                        {yacht.name}
-                                    </h3>
-                                    <div className="text-right">
-                                        <p className="text-l">{yacht.price}</p>
+                                    <div className="flex items-center justify-between text-gray-600">
+                                        <div className="flex items-center gap-1">
+                                            <Icon size={16} name="width" />
+                                            <span>{yacht.length}</span>
+                                        </div>
+                                        <div className="flex items-center gap-1">
+                                            <Icon size={16} name="anchor" />
+                                            <span>{yacht.feet}</span>
+                                        </div>
                                     </div>
-                                </div>
-                                <div className="flex items-center justify-between text-gray-600">
-                                    <div className="flex items-center gap-1">
-                                        <Icon size={16} name="width" />
-                                        <span>{yacht.length}</span>
-                                    </div>
-                                    <div className="flex items-center gap-1">
-                                        <Icon size={16} name="anchor" />
-                                        <span>{yacht.feet}</span>
-                                    </div>
-                                </div>
-                            </CardContent>
-                        </Card>
+                                </CardContent>
+                            </Card>
+                        </div>
                     ))}
                 </div>