diff --git a/src/app/clients/page.tsx b/src/app/clients/page.tsx
index a4deb55..c394c1f 100644
--- a/src/app/clients/page.tsx
+++ b/src/app/clients/page.tsx
@@ -1,17 +1,7 @@
-import { ArrowRight, CreditCard, Gift, Percent, Wallet } from 'lucide-react';
 import Image from 'next/image';
-import Link from 'next/link';
-
-import { Button } from '@/shared/shadcn-ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/shared/shadcn-ui/card';
 
+import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
+import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
 import { CtaSection } from '@/widgets/cta-section';
 
 export const metadata = {
@@ -51,202 +41,8 @@ export default function ClientsPage() {
           </div>
         </section>
 
-        {/* Services Overview */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
-            <div className='mb-12 text-center'>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                Наши услуги для клиентов
-              </h2>
-              <p className='mx-auto max-w-2xl text-gray-600'>
-                Мы стремимся сделать обслуживание на наших заправках максимально
-                удобным и выгодным для вас
-              </p>
-            </div>
-
-            <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-4'>
-              <Card className='overflow-hidden transition-all hover:shadow-lg'>
-                <CardHeader className='pb-3'>
-                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
-                    <Percent className='h-6 w-6 text-red-600' />
-                  </div>
-                  <CardTitle>Программа лояльности</CardTitle>
-                  <CardDescription>
-                    Накапливайте баллы и получайте скидки
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className='text-sm text-gray-600'>
-                  <p>
-                    Наша программа лояльности позволяет накапливать баллы за
-                    каждую покупку и обменивать их на скидки и подарки.
-                  </p>
-                </CardContent>
-                <CardFooter>
-                  <Link href='/clients/loyalty'>
-                    <Button variant='outline' className='w-full'>
-                      Подробнее <ArrowRight className='ml-2 h-4 w-4' />
-                    </Button>
-                  </Link>
-                </CardFooter>
-              </Card>
-
-              <Card className='overflow-hidden transition-all hover:shadow-lg'>
-                <CardHeader className='pb-3'>
-                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
-                    <CreditCard className='h-6 w-6 text-red-600' />
-                  </div>
-                  <CardTitle>Топливная карта</CardTitle>
-                  <CardDescription>
-                    Удобный способ оплаты топлива
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className='text-sm text-gray-600'>
-                  <p>
-                    Топливные карты для физических и юридических лиц.
-                    Контролируйте расходы и получайте дополнительные
-                    преимущества.
-                  </p>
-                </CardContent>
-                <CardFooter>
-                  <Link href='/clients/fuel-card'>
-                    <Button variant='outline' className='w-full'>
-                      Подробнее <ArrowRight className='ml-2 h-4 w-4' />
-                    </Button>
-                  </Link>
-                </CardFooter>
-              </Card>
-
-              <Card className='overflow-hidden transition-all hover:shadow-lg'>
-                <CardHeader className='pb-3'>
-                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
-                    <Gift className='h-6 w-6 text-red-600' />
-                  </div>
-                  <CardTitle>Сертификаты</CardTitle>
-                  <CardDescription>
-                    Подарочные сертификаты на топливо и услуги
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className='text-sm text-gray-600'>
-                  <p>
-                    Подарите близким или партнерам сертификат на топливо или
-                    услуги нашей сети. Идеальный подарок для автовладельцев.
-                  </p>
-                </CardContent>
-                <CardFooter>
-                  <Link href='/clients/certificates'>
-                    <Button variant='outline' className='w-full'>
-                      Подробнее <ArrowRight className='ml-2 h-4 w-4' />
-                    </Button>
-                  </Link>
-                </CardFooter>
-              </Card>
-
-              <Card className='overflow-hidden transition-all hover:shadow-lg'>
-                <CardHeader className='pb-3'>
-                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
-                    <Wallet className='h-6 w-6 text-red-600' />
-                  </div>
-                  <CardTitle>Способы оплаты</CardTitle>
-                  <CardDescription>
-                    Различные способы оплаты на наших заправках
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className='text-sm text-gray-600'>
-                  <p>
-                    Мы предлагаем различные способы оплаты: наличные, банковские
-                    карты, мобильные платежи и топливные карты.
-                  </p>
-                </CardContent>
-                <CardFooter>
-                  <Link href='/clients/payment'>
-                    <Button variant='outline' className='w-full'>
-                      Подробнее <ArrowRight className='ml-2 h-4 w-4' />
-                    </Button>
-                  </Link>
-                </CardFooter>
-              </Card>
-            </div>
-          </div>
-        </section>
-
-        {/* Benefits Section */}
-        <section className='bg-gray-50 py-16'>
-          <div className='container mx-auto'>
-            <div className='grid items-center gap-12 md:grid-cols-2'>
-              <div className='order-2 md:order-1'>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <Percent className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  Преимущества для клиентов
-                </h2>
-                <p className='mb-6 text-gray-600'>
-                  Став клиентом GasNetwork, вы получаете множество преимуществ,
-                  которые делают заправку вашего автомобиля более выгодной и
-                  удобной.
-                </p>
-
-                <div className='space-y-4'>
-                  <div className='flex items-start'>
-                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
-                      <span className='text-xs text-white'>✓</span>
-                    </div>
-                    <div className='ml-3'>
-                      <h3 className='text-lg font-medium'>Экономия</h3>
-                      <p className='text-gray-600'>
-                        Скидки и бонусы для постоянных клиентов
-                      </p>
-                    </div>
-                  </div>
-                  <div className='flex items-start'>
-                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
-                      <span className='text-xs text-white'>✓</span>
-                    </div>
-                    <div className='ml-3'>
-                      <h3 className='text-lg font-medium'>Удобство</h3>
-                      <p className='text-gray-600'>
-                        Быстрая оплата и обслуживание
-                      </p>
-                    </div>
-                  </div>
-                  <div className='flex items-start'>
-                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
-                      <span className='text-xs text-white'>✓</span>
-                    </div>
-                    <div className='ml-3'>
-                      <h3 className='text-lg font-medium'>Качество</h3>
-                      <p className='text-gray-600'>
-                        Гарантированно высокое качество топлива
-                      </p>
-                    </div>
-                  </div>
-                  <div className='flex items-start'>
-                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
-                      <span className='text-xs text-white'>✓</span>
-                    </div>
-                    <div className='ml-3'>
-                      <h3 className='text-lg font-medium'>
-                        Дополнительные услуги
-                      </h3>
-                      <p className='text-gray-600'>
-                        Кафе, магазины и другие услуги на наших заправках
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'>
-                <Image
-                  src='/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
-                  alt='Преимущества для клиентов'
-                  fill
-                  className='object-cover'
-                />
-              </div>
-            </div>
-          </div>
-        </section>
-
+        <ServicesOverviewSection />
+        <BenefitsSection />
         <CtaSection />
       </main>
     </div>
diff --git a/src/widgets/clients/ui/benefits-section.tsx b/src/widgets/clients/ui/benefits-section.tsx
new file mode 100644
index 0000000..17a5c39
--- /dev/null
+++ b/src/widgets/clients/ui/benefits-section.tsx
@@ -0,0 +1,74 @@
+import { Percent } from 'lucide-react';
+import Image from 'next/image';
+
+interface Benefit {
+  title: string;
+  description: string;
+}
+
+const benefits: Array<Benefit> = [
+  {
+    title: 'Экономия',
+    description: 'Скидки и бонусы для постоянных клиентов',
+  },
+  {
+    title: 'Удобство',
+    description: 'Быстрая оплата и обслуживание',
+  },
+  {
+    title: 'Качество',
+    description: 'Гарантированно высокое качество топлива',
+  },
+  {
+    title: 'Дополнительные услуги',
+    description: 'Кафе, магазины и другие услуги на наших заправках',
+  },
+];
+
+export const BenefitsSection = () => {
+  return (
+    <section className='bg-gray-50 py-16'>
+      <div className='container mx-auto'>
+        <div className='grid items-center gap-12 md:grid-cols-2'>
+          <div className='order-2 md:order-1'>
+            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+              <Percent className='h-6 w-6 text-red-600' />
+            </div>
+            <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
+              Преимущества для клиентов
+            </h2>
+            <p className='mb-6 text-gray-600'>
+              Став клиентом GasNetwork, вы получаете множество преимуществ,
+              которые делают заправку вашего автомобиля более выгодной и
+              удобной.
+            </p>
+
+            <div className='space-y-4'>
+              {benefits.map(({ title, description }) => {
+                return (
+                  <div key={title} className='flex items-start'>
+                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
+                      <span className='text-xs text-white'>✓</span>
+                    </div>
+                    <div className='ml-3'>
+                      <h3 className='text-lg font-medium'>{title}</h3>
+                      <p className='text-gray-600'>{description}</p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          <div className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'>
+            <Image
+              src='/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
+              alt='Преимущества для клиентов'
+              fill
+              className='object-cover'
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/widgets/clients/ui/services-overview-section.tsx b/src/widgets/clients/ui/services-overview-section.tsx
new file mode 100644
index 0000000..77a9b82
--- /dev/null
+++ b/src/widgets/clients/ui/services-overview-section.tsx
@@ -0,0 +1,83 @@
+import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/shared/shadcn-ui/card';
+
+interface ServiceOverview {
+  title: string;
+  description: string;
+  contentText: string;
+  Icon: ForwardRefExoticComponent<
+    Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>
+  >;
+}
+
+const servicesOverview: Array<ServiceOverview> = [
+  {
+    title: 'Программа лояльности',
+    description: 'Накапливайте баллы и получайте скидки',
+    contentText:
+      'Наша программа лояльности позволяет накапливать баллы за каждую покупку и обменивать их на скидки и подарки.',
+    Icon: Percent,
+  },
+  {
+    title: 'Топливная карта',
+    description: 'Удобный способ оплаты топлива',
+    contentText:
+      'Топливные карты для физических и юридических лиц. Контролируйте расходы и получайте дополнительные преимущества.',
+    Icon: CreditCard,
+  },
+  {
+    title: 'Способы оплаты',
+    description: 'Различные способы оплаты на наших заправках',
+    contentText:
+      'Мы предлагаем различные способы оплаты: наличные, банковские карты, мобильные платежи и топливные карты.',
+    Icon: Wallet,
+  },
+];
+
+export const ServicesOverviewSection = () => {
+  return (
+    <section className='py-16'>
+      <div className='container mx-auto'>
+        <div className='mb-12 text-center'>
+          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+            Наши услуги для клиентов
+          </h2>
+          <p className='mx-auto max-w-2xl text-gray-600'>
+            Мы стремимся сделать обслуживание на наших заправках максимально
+            удобным и выгодным для вас
+          </p>
+        </div>
+
+        <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
+          {servicesOverview.map(({ description, Icon, contentText, title }) => {
+            return (
+              <Card
+                key={title}
+                className='overflow-hidden transition-all hover:shadow-lg'
+              >
+                <CardHeader className='pb-3'>
+                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
+                    <Icon className='h-6 w-6 text-red-600' />
+                  </div>
+                  <CardTitle>{title}</CardTitle>
+                  <CardDescription>{description}</CardDescription>
+                </CardHeader>
+                <CardContent className='text-sm text-gray-600'>
+                  <p>{contentText}</p>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};