diff --git a/src/features/map/ui/gas-station-map.tsx b/src/features/map/ui/gas-station-map.tsx
index 8de342c..45a99df 100644
--- a/src/features/map/ui/gas-station-map.tsx
+++ b/src/features/map/ui/gas-station-map.tsx
@@ -56,7 +56,7 @@ interface StationListPanelProps {
   selectedStation: number | null;
   activeFilters: string[];
   activeCities: string[];
-  setSelectedStation: (id: number | null) => void;
+  handleMapStationClick: (id: number) => void;
   filterToFieldMap: { [key: string]: keyof Stations[number] };
   allFilters: string[];
   resetFilters: () => void;
@@ -205,7 +205,7 @@ function StationListPanel({
   selectedStation,
   activeFilters,
   activeCities,
-  setSelectedStation,
+  handleMapStationClick,
   filterToFieldMap,
   allFilters,
   resetCities,
@@ -275,7 +275,7 @@ function StationListPanel({
                       ? 'border-blue-500 bg-blue-50'
                       : 'border-gray-200 hover:bg-gray-50'
                   }`}
-                  onClick={() => setSelectedStation(station.id)}
+                  onClick={() => handleMapStationClick(station.id)}
                 >
                   <div className='flex items-start justify-between'>
                     <h4 className='font-medium'>{station.name}</h4>
@@ -365,6 +365,11 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
   const [isStationListOpen, setIsStationListOpen] = useState(false);
   const [activeFilterTab, setActiveFilterTab] = useState('cities');
 
+  useEffect(() => {
+    if (selectedStation === null) return;
+    setIsStationListOpen(true);
+  }, [selectedStation]);
+
   // Все доступные фильтры
   const allFilters = [
     // 'ДТ', -> нет значения в интерфейсе - TODO: поправить
@@ -434,6 +439,16 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
     [filteredStations],
   );
 
+  const handleMapStationClick = (stationId: number) => {
+    setSelectedStation(() => {
+      if (selectedStation !== null && selectedStation === stationId) {
+        return null;
+      }
+
+      return stationId;
+    });
+  };
+
   // Переключение фильтра услуг
   const toggleFilter = (filter: string) => {
     setActiveFilters((prev) =>
@@ -494,7 +509,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
         selectedStation={selectedStation}
         activeFilters={activeFilters}
         activeCities={activeCities}
-        setSelectedStation={setSelectedStation}
+        handleMapStationClick={handleMapStationClick}
         filterToFieldMap={filterToFieldMap}
         allFilters={allFilters}
         resetFilters={resetFilters}
@@ -506,7 +521,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
         <YandexMap
           points={points}
           selectedStation={selectedStation}
-          setSelectedStation={setSelectedStation}
+          handleMapStationClick={handleMapStationClick}
         />
       </div>
 
diff --git a/src/features/map/ui/yandex-map.tsx b/src/features/map/ui/yandex-map.tsx
index 590f0f5..d36aeca 100644
--- a/src/features/map/ui/yandex-map.tsx
+++ b/src/features/map/ui/yandex-map.tsx
@@ -7,7 +7,7 @@ import { Point } from '../model';
 type YandexMapProps = {
   points: Point[];
   selectedStation: number | null;
-  setSelectedStation: Dispatch<SetStateAction<number | null>>;
+  handleMapStationClick: (id: number) => void;
 };
 
 const mapCenter = [38.53575, 68.77905];
@@ -15,7 +15,7 @@ const mapCenter = [38.53575, 68.77905];
 export const YandexMap = ({
   points,
   selectedStation,
-  setSelectedStation,
+  handleMapStationClick,
 }: YandexMapProps) => {
   return (
     <YMaps
@@ -39,30 +39,25 @@ export const YandexMap = ({
         }}
         className='h-full max-h-[500px] w-full overflow-hidden rounded-md shadow-lg'
       >
-        {points.map((point) => (
-          <Placemark
-            key={point.id}
-            geometry={point.coordinates}
-            options={{
-              iconLayout: 'default#image',
-              iconImageHref:
-                !selectedStation || selectedStation === point.id
-                  ? '/map/oriyo-marker.png'
-                  : '/map/oriyo-inactive-marker.png',
-              iconImageSize: selectedStation === point.id ? [70, 70] : [64, 64],
-              iconImageOffset: [-24, -36],
-            }}
-            onClick={() =>
-              setSelectedStation(() => {
-                if (selectedStation !== null && selectedStation === point.id) {
-                  return null;
-                }
-
-                return point.id;
-              })
-            }
-          />
-        ))}
+        {points.map((point) => {
+          const isSelectedStation = selectedStation === point.id;
+          return (
+            <Placemark
+              key={point.id}
+              geometry={point.coordinates}
+              options={{
+                iconLayout: 'default#image',
+                iconImageHref:
+                  !selectedStation || isSelectedStation
+                    ? '/map/oriyo-marker.png'
+                    : '/map/oriyo-inactive-marker.png',
+                iconImageSize: isSelectedStation ? [70, 70] : [64, 64],
+                iconImageOffset: isSelectedStation ? [-28, -40] : [-24, -36],
+              }}
+              onClick={() => handleMapStationClick(point.id)}
+            />
+          );
+        })}
       </Map>
     </YMaps>
   );
diff --git a/src/pages-templates/about/index.tsx b/src/pages-templates/about/index.tsx
index c13ee99..7d911d9 100644
--- a/src/pages-templates/about/index.tsx
+++ b/src/pages-templates/about/index.tsx
@@ -6,10 +6,9 @@ import Image from 'next/image';
 import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';
 
 import AnimatedCounter from '@/shared/components/animated-counter';
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
-import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';
 
 import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
 import { StationGallery } from '@/widgets/about-page/station-gallery';
@@ -62,63 +61,59 @@ export default function AboutPage({ content }: AboutPageProps) {
 
         {/* Company Overview */}
         <Container>
-          <section className='py-16'>
-            <div className='container mx-auto'>
-              <div className='grid items-center gap-12 md:grid-cols-2'>
-                <div data-aos='fade-right'>
-                  <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                    <Fuel className='h-6 w-6 text-red-600' />
-                  </div>
-                  <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-                    {t('about.overview.title')}
-                  </h2>
-                  <p className='mb-6 text-gray-600'>
-                    {t('about.overview.description1')}
-                  </p>
-                  <p className='mb-6 text-gray-600'>
-                    {t('about.overview.description2')}
-                  </p>
-                  <p className='mb-6 text-gray-600'>
-                    {t('about.overview.description3')}
-                  </p>
+          <div className='grid items-center gap-12 md:grid-cols-2'>
+            <div data-aos='fade-right'>
+              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                <Fuel className='h-6 w-6 text-red-600' />
+              </div>
+              <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
+                {t('about.overview.title')}
+              </h2>
+              <p className='mb-6 text-gray-600'>
+                {t('about.overview.description1')}
+              </p>
+              <p className='mb-6 text-gray-600'>
+                {t('about.overview.description2')}
+              </p>
+              <p className='mb-6 text-gray-600'>
+                {t('about.overview.description3')}
+              </p>
 
-                  <div className='mb-6 grid grid-cols-1 gap-4 md:grid-cols-2'>
-                    {[0, 1, 2, 3].map((index) => (
-                      <div key={index} 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'>
-                            {t(`about.overview.benefits.${index}.title`)}
-                          </h3>
-                          <p className='text-gray-600'>
-                            {t(`about.overview.benefits.${index}.description`)}
-                          </p>
-                        </div>
-                      </div>
-                    ))}
+              <div className='mb-6 grid grid-cols-1 gap-4 md:grid-cols-2'>
+                {[0, 1, 2, 3].map((index) => (
+                  <div key={index} 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'>
+                        {t(`about.overview.benefits.${index}.title`)}
+                      </h3>
+                      <p className='text-gray-600'>
+                        {t(`about.overview.benefits.${index}.description`)}
+                      </p>
+                    </div>
                   </div>
-                </div>
-                <div
-                  data-aos='zoom-out-right'
-                  className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
-                >
-                  <Image
-                    src='/placeholder.svg?height=500&width=600&text=Главный+офис'
-                    alt={t('about.overview.imageAlt')}
-                    fill
-                    className='object-cover'
-                  />
-                </div>
+                ))}
               </div>
             </div>
-          </section>
+            <div
+              data-aos='zoom-out-right'
+              className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
+            >
+              <Image
+                src='/placeholder.svg?height=500&width=600&text=Главный+офис'
+                alt={t('about.overview.imageAlt')}
+                fill
+                className='object-cover'
+              />
+            </div>
+          </div>
         </Container>
 
         {/* Stats Section */}
-        <section className='bg-red-600 py-16 text-white'>
-          <div className='container mx-auto'>
+        <section className='bg-red-600 text-white'>
+          <Container>
             <div className='mb-12 text-center'>
               <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                 {t('about.stats.title')}
@@ -147,200 +142,176 @@ export default function AboutPage({ content }: AboutPageProps) {
                 </div>
               ))}
             </div>
-          </div>
+          </Container>
         </section>
 
         {/* Our History */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
-            <Container>
-              <div className='mb-12 flex flex-col items-center justify-center text-center'>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <History className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  {t('about.history.title')}
-                </h2>
-                <p className='max-w-2xl text-gray-600'>
-                  {t('about.history.subtitle')}
-                </p>
-              </div>
-            </Container>
-
-            <Container>
-              <CompanyTimeline timeline={content.history} />
-            </Container>
+        <Container>
+          <div className='mb-12 flex flex-col items-center justify-center text-center'>
+            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+              <History className='h-6 w-6 text-red-600' />
+            </div>
+            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('about.history.title')}
+            </h2>
+            <p className='max-w-2xl text-gray-600'>
+              {t('about.history.subtitle')}
+            </p>
           </div>
-        </section>
+        </Container>
+
+        <Container>
+          <CompanyTimeline timeline={content.history} />
+        </Container>
 
         {/* Our Stations */}
-        <Container>
-          <section className='bg-gray-50 py-16'>
-            <div className='container mx-auto'>
-              <div className='mb-12 flex flex-col items-center justify-center text-center'>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <MapPin className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  {t('about.stations.title')}
-                </h2>
-                <p className='max-w-2xl text-gray-600'>
-                  {t('about.stations.subtitle')}
-                </p>
-              </div>
-
-              <StationGallery stations={content.stations} />
-
-              <div className='mt-12 text-center'>
-                <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
-                  {t('about.stations.description')}
-                </p>
-                <Button className='bg-red-600 hover:bg-red-700'>
-                  {t('about.stations.buttonText')}{' '}
-                  <MapPin className='ml-2 h-4 w-4' />
-                </Button>
+        <section className='bg-gray-50'>
+          <Container>
+            <div className='mb-12 flex flex-col items-center justify-center text-center'>
+              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                <MapPin className='h-6 w-6 text-red-600' />
               </div>
+              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                {t('about.stations.title')}
+              </h2>
+              <p className='max-w-2xl text-gray-600'>
+                {t('about.stations.subtitle')}
+              </p>
             </div>
-          </section>
-        </Container>
+            <StationGallery stations={content.stations} />
+            <div className='mt-12 text-center'>
+              <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
+                {t('about.stations.description')}
+              </p>
+              {/* <Button className='bg-red-600 hover:bg-red-700'>
+                    {t('about.stations.buttonText')}{' '}
+                    <MapPin className='ml-2 h-4 w-4' />
+                  </Button> */}
+            </div>
+          </Container>
+        </section>
 
         {/* Our Values */}
         <Container>
-          <section className='py-16'>
-            <div className='container mx-auto'>
-              <div className='mb-12 flex flex-col items-center justify-center text-center'>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <Target className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  {t('about.values.title')}
-                </h2>
-                <p className='max-w-2xl text-gray-600'>
-                  {t('about.values.subtitle')}
-                </p>
-              </div>
-
-              <div
-                data-aos='flip-up'
-                data-aos-duration='600'
-                className='grid gap-8 md:grid-cols-3'
-              >
-                {[0, 1, 2].map((index) => (
-                  <Card
-                    key={index}
-                    className='overflow-hidden transition-all hover:shadow-lg'
-                  >
-                    <CardContent className='p-6'>
-                      <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
-                        <Star className='h-6 w-6 text-red-600' />
-                      </div>
-                      <h3 className='mb-2 text-xl font-bold'>
-                        {t(`about.values.items.${index}.title`)}
-                      </h3>
-                      <p className='text-gray-600'>
-                        {t(`about.values.items.${index}.description`)}
-                      </p>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
+          <div className='mb-12 flex flex-col items-center justify-center text-center'>
+            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+              <Target className='h-6 w-6 text-red-600' />
             </div>
-          </section>
+            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('about.values.title')}
+            </h2>
+            <p className='max-w-2xl text-gray-600'>
+              {t('about.values.subtitle')}
+            </p>
+          </div>
+
+          <div
+            data-aos='flip-up'
+            data-aos-duration='600'
+            className='grid gap-8 md:grid-cols-3'
+          >
+            {[0, 1, 2].map((index) => (
+              <Card
+                key={index}
+                className='overflow-hidden transition-all hover:shadow-lg'
+              >
+                <CardContent className='p-6'>
+                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
+                    <Star className='h-6 w-6 text-red-600' />
+                  </div>
+                  <h3 className='mb-2 text-xl font-bold'>
+                    {t(`about.values.items.${index}.title`)}
+                  </h3>
+                  <p className='text-gray-600'>
+                    {t(`about.values.items.${index}.description`)}
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
         </Container>
 
         {/* Our Team */}
-        <Container>
-          <section className='bg-gray-50 py-16'>
-            <div className='container mx-auto px-2'>
-              <div className='mb-12 flex flex-col items-center justify-center text-center'>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <Users className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  {t('about.team.title')}
-                </h2>
-                <p className='max-w-2xl text-gray-600'>
-                  {t('about.team.subtitle')}
-                </p>
-              </div>
-
-              <div
-                data-aos='flip-down'
-                data-aos-duration='600'
-                className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'
-              >
-                {content.team.map((member, index) => (
-                  <div
-                    key={index}
-                    className='overflow-hidden rounded-lg bg-white shadow-md transition-transform hover:scale-105'
-                  >
-                    <div className='relative h-64 w-full'>
-                      {member.photo && (
-                        <Image
-                          src={member.photo}
-                          alt={t(`about.team.members.${index}.name`)}
-                          fill
-                          className='object-cover'
-                        />
-                      )}
-                    </div>
-                    <div className='p-4 text-center'>
-                      <h3 className='text-lg font-bold'>{member.name}</h3>
-                      <p className='text-gray-600'>{member.profession}</p>
-                    </div>
-                  </div>
-                ))}
+        <section className='bg-gray-50'>
+          <Container>
+            <div className='mb-12 flex flex-col items-center justify-center text-center'>
+              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                <Users className='h-6 w-6 text-red-600' />
               </div>
+              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                {t('about.team.title')}
+              </h2>
+              <p className='max-w-2xl text-gray-600'>
+                {t('about.team.subtitle')}
+              </p>
             </div>
-          </section>
-        </Container>
+            <div
+              data-aos='flip-down'
+              data-aos-duration='600'
+              className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'
+            >
+              {content.team.map((member, index) => (
+                <div
+                  key={index}
+                  className='overflow-hidden rounded-lg bg-white shadow-md transition-transform hover:scale-105'
+                >
+                  <div className='relative h-64 w-full'>
+                    {member.photo && (
+                      <Image
+                        src={member.photo}
+                        alt={t(`about.team.members.${index}.name`)}
+                        fill
+                        className='object-cover'
+                      />
+                    )}
+                  </div>
+                  <div className='p-4 text-center'>
+                    <h3 className='text-lg font-bold'>{member.name}</h3>
+                    <p className='text-gray-600'>{member.profession}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </Container>
+        </section>
 
         {/* Testimonials */}
         <Container>
-          <section className='py-16'>
-            <div className='container mx-auto'>
-              <div className='mb-12 flex flex-col items-center justify-center text-center'>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <Star className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  {t('about.testimonials.title')}
-                </h2>
-                <p className='max-w-2xl text-gray-600'>
-                  {t('about.testimonials.subtitle')}
-                </p>
-              </div>
-
-              <div
-                data-aos='zoom-out-right'
-                className='grid gap-8 md:grid-cols-3'
-              >
-                {content.reviews.map((review, index) => (
-                  <Card
-                    key={index}
-                    className='overflow-hidden transition-all hover:shadow-lg'
-                  >
-                    <CardContent className='p-6'>
-                      <div className='mb-4 flex'>
-                        {Array(5)
-                          .fill(0)
-                          .map((_, i) => (
-                            <Star
-                              key={i}
-                              className={`h-5 w-5 ${i < Number(review.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
-                            />
-                          ))}
-                      </div>
-                      <p className='mb-4 text-gray-600 italic'>
-                        "{review.review}"
-                      </p>
-                      <p className='font-semibold'>{review.fullname}</p>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
+          <div className='mb-12 flex flex-col items-center justify-center text-center'>
+            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+              <Star className='h-6 w-6 text-red-600' />
             </div>
-          </section>
+            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('about.testimonials.title')}
+            </h2>
+            <p className='max-w-2xl text-gray-600'>
+              {t('about.testimonials.subtitle')}
+            </p>
+          </div>
+
+          <div data-aos='zoom-out-right' className='grid gap-8 md:grid-cols-3'>
+            {content.reviews.map((review, index) => (
+              <Card
+                key={index}
+                className='overflow-hidden transition-all hover:shadow-lg'
+              >
+                <CardContent className='p-6'>
+                  <div className='mb-4 flex'>
+                    {Array(5)
+                      .fill(0)
+                      .map((_, i) => (
+                        <Star
+                          key={i}
+                          className={`h-5 w-5 ${i < Number(review.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
+                        />
+                      ))}
+                  </div>
+                  <p className='mb-4 text-gray-600 italic'>"{review.review}"</p>
+                  <p className='font-semibold'>{review.fullname}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
         </Container>
 
         <CtaSection />
diff --git a/src/pages-templates/charity/index.tsx b/src/pages-templates/charity/index.tsx
index 66b4353..5f44818 100644
--- a/src/pages-templates/charity/index.tsx
+++ b/src/pages-templates/charity/index.tsx
@@ -10,16 +10,14 @@ import {
 } from 'lucide-react';
 import Image from 'next/image';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
-import { Button } from '@/shared/shadcn-ui/button';
 import {
   Card,
   CardContent,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';
 
 import { CtaSection } from '@/widgets/cta-section';
 
@@ -29,6 +27,32 @@ export const metadata = {
     'Благотворительные проекты и инициативы Ориё. Мы помогаем обществу и заботимся о будущем.',
 };
 
+const events = [
+  {
+    title: 'Благотворительный марафон',
+    description:
+      'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
+    date: '15 июня 2023',
+    location: 'Парк Рудаки, Душанбе',
+    image: '/placeholder.svg?height=200&width=300&text=Марафон',
+  },
+  {
+    title: 'Экологическая акция',
+    description: 'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
+    date: '22 июля 2023',
+    location: 'Река Варзоб, Душанбе',
+    image: '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
+  },
+  {
+    title: 'Сбор школьных принадлежностей',
+    description:
+      'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
+    date: '1-20 августа 2023',
+    location: 'Все заправки GasNetwork',
+    image: '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
+  },
+];
+
 export function CharityPage() {
   const { t } = useTextController();
 
@@ -47,23 +71,17 @@ export function CharityPage() {
               priority
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <Container>
-                <div
-                  data-aos='fade-down'
-                  data-aos-duration='800'
-                  className='container mx-auto'
-                >
-                  <div className='max-w-2xl space-y-6 text-white'>
-                    <div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
-                      <Heart className='size-6 text-red-500' />
-                    </div>
-                    <h1 className='text-3xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
-                      {t('charity.hero.title')}
-                    </h1>
-                    <p className='text-lg text-gray-200 sm:text-xl'>
-                      {t('charity.hero.subtitle')}
-                    </p>
+              <Container data-aos='fade-down' data-aos-duration='800'>
+                <div className='max-w-2xl space-y-6 text-white'>
+                  <div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
+                    <Heart className='size-6 text-red-500' />
                   </div>
+                  <h1 className='text-3xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
+                    {t('charity.hero.title')}
+                  </h1>
+                  <p className='text-lg text-gray-200 sm:text-xl'>
+                    {t('charity.hero.subtitle')}
+                  </p>
                 </div>
               </Container>
             </div>
@@ -72,235 +90,190 @@ export function CharityPage() {
 
         {/* Mission Section */}
         <Container>
-          <section className='py-16'>
-            <div className='container mx-auto'>
-              <div className='grid items-center gap-12 md:grid-cols-2'>
-                <div>
-                  <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                    <Heart className='h-6 w-6 text-red-600' />
-                  </div>
-                  <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
-                    {t('charity.mission.title')}
-                  </h2>
-                  <p className='mb-6 text-gray-600'>
-                    {t('charity.mission.description1')}
-                  </p>
-                  <p className='mb-6 text-gray-600'>
-                    {t('charity.mission.description2')}
-                  </p>
-
-                  <div className='space-y-4'>
-                    {[0, 1, 2].map((index) => (
-                      <div
-                        data-aos='fade-right'
-                        key={index}
-                        className='flex items-start'
-                      >
-                        <CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
-                        <div>
-                          <h3 className='text-lg font-medium'>
-                            {t(`charity.mission.principles.${index}.title`)}
-                          </h3>
-                          <p className='text-gray-600'>
-                            {t(
-                              `charity.mission.principles.${index}.description`,
-                            )}
-                          </p>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-                <div
-                  data-aos='fade-right'
-                  className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
-                >
-                  <Image
-                    src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
-                    alt={t('charity.mission.imageAlt')}
-                    fill
-                    className='object-cover'
-                  />
-                </div>
+          <div className='grid items-center gap-12 md:grid-cols-2'>
+            <div>
+              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+                <Heart className='h-6 w-6 text-red-600' />
               </div>
-            </div>
-          </section>
-        </Container>
-
-        {/* Key Figures */}
-        <section className='bg-red-600 py-16 text-white'>
-          <div className='container mx-auto'>
-            <div className='mb-12 text-center'>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                {t('charity.stats.title')}
+              <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
+                {t('charity.mission.title')}
               </h2>
-              <p className='mx-auto max-w-2xl text-white/80'>
-                {t('charity.stats.subtitle')}
+              <p className='mb-6 text-gray-600'>
+                {t('charity.mission.description1')}
+              </p>
+              <p className='mb-6 text-gray-600'>
+                {t('charity.mission.description2')}
               </p>
-            </div>
-            <div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
-              {[0, 1, 2].map((index) => (
-                <div key={index} className='space-y-2'>
-                  <h3 className='text-4xl font-bold'>
-                    {t(`charity.stats.items.${index}.value`)}
-                  </h3>
-                  <p className='text-white/80'>
-                    {t(`charity.stats.items.${index}.label`)}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </section>
 
-        {/* Upcoming Events */}
-        <Container>
-          <section className='bg-gray-50 py-16'>
-            <div className='container mx-auto'>
-              <div className='mb-12 text-center'>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <Calendar className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  {t('charity.events.title')}
-                </h2>
-                <p className='mx-auto max-w-2xl text-gray-600'>
-                  {t('charity.events.subtitle')}
-                </p>
-              </div>
-
-              <div className='grid gap-6 md:grid-cols-3'>
-                {[
-                  {
-                    title: 'Благотворительный марафон',
-                    description:
-                      'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
-                    date: '15 июня 2023',
-                    location: 'Парк Рудаки, Душанбе',
-                    image: '/placeholder.svg?height=200&width=300&text=Марафон',
-                  },
-                  {
-                    title: 'Экологическая акция',
-                    description:
-                      'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
-                    date: '22 июля 2023',
-                    location: 'Река Варзоб, Душанбе',
-                    image:
-                      '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
-                  },
-                  {
-                    title: 'Сбор школьных принадлежностей',
-                    description:
-                      'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
-                    date: '1-20 августа 2023',
-                    location: 'Все заправки Ориё',
-                    image:
-                      '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
-                  },
-                ].map((event, index) => (
-                  <Card
-                    data-aos='zoom-in-up'
+              <div className='space-y-4'>
+                {[0, 1, 2].map((index) => (
+                  <div
+                    data-aos='fade-right'
                     key={index}
-                    className='flex flex-col justify-between overflow-hidden'
+                    className='flex items-start'
                   >
+                    <CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
                     <div>
-                      <div className='relative h-48 w-full'>
-                        <Image
-                          src={event.image || '/placeholder.svg'}
-                          alt={event.title}
-                          fill
-                          className='object-cover'
-                        />
-                      </div>
-                      <CardHeader>
-                        <CardTitle className='text-xl lg:text-2xl'>
-                          {event.title}
-                        </CardTitle>
-                      </CardHeader>
-                      <CardContent className='space-y-4'>
-                        <p className='text-gray-600'>{event.description}</p>
-                        <div className='flex items-center text-sm text-gray-500'>
-                          <Calendar className='mr-2 h-4 w-4' />
-                          {event.date}
-                        </div>
-                        <div className='flex items-center text-sm text-gray-500'>
-                          <MapPin className='mr-2 h-4 w-4' />
-                          {event.location}
-                        </div>
-                      </CardContent>
+                      <h3 className='text-lg font-medium'>
+                        {t(`charity.mission.principles.${index}.title`)}
+                      </h3>
+                      <p className='text-gray-600'>
+                        {t(`charity.mission.principles.${index}.description`)}
+                      </p>
                     </div>
-                    <CardFooter>
-                      <Button className='w-full bg-red-600 hover:bg-red-700'>
-                        {t(`charity.events.button`)}
-                      </Button>
-                    </CardFooter>
-                  </Card>
+                  </div>
                 ))}
               </div>
             </div>
-          </section>
+            <div
+              data-aos='fade-right'
+              className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
+            >
+              <Image
+                src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
+                alt={t('charity.mission.imageAlt')}
+                fill
+                className='object-cover'
+              />
+            </div>
+          </div>
+        </Container>
+
+        {/* Key Figures */}
+        <Container className='bg-red-600 text-white'>
+          <div className='mb-12 text-center'>
+            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('charity.stats.title')}
+            </h2>
+            <p className='mx-auto max-w-2xl text-white/80'>
+              {t('charity.stats.subtitle')}
+            </p>
+          </div>
+          <div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
+            {[0, 1, 2].map((index) => (
+              <div key={index} className='space-y-2'>
+                <h3 className='text-4xl font-bold'>
+                  {t(`charity.stats.items.${index}.value`)}
+                </h3>
+                <p className='text-white/80'>
+                  {t(`charity.stats.items.${index}.label`)}
+                </p>
+              </div>
+            ))}
+          </div>
+        </Container>
+
+        {/* Upcoming Events */}
+        <Container className='bg-gray-50'>
+          <div className='mb-12 text-center'>
+            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+              <Calendar className='h-6 w-6 text-red-600' />
+            </div>
+            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('charity.events.title')}
+            </h2>
+            <p className='mx-auto max-w-2xl text-gray-600'>
+              {t('charity.events.subtitle')}
+            </p>
+          </div>
+
+          <div className='grid gap-6 md:grid-cols-3'>
+            {events.map((event, index) => (
+              <Card
+                data-aos='zoom-in-up'
+                key={index}
+                className='flex flex-col justify-between overflow-hidden'
+              >
+                <div>
+                  <div className='relative h-48 w-full'>
+                    <Image
+                      src={event.image || '/placeholder.svg'}
+                      alt={event.title}
+                      fill
+                      className='object-cover'
+                    />
+                  </div>
+                  <CardHeader>
+                    <CardTitle className='text-xl lg:text-2xl'>
+                      {event.title}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className='space-y-4'>
+                    <p className='text-gray-600'>{event.description}</p>
+                    <div className='flex items-center text-sm text-gray-500'>
+                      <Calendar className='mr-2 h-4 w-4' />
+                      {event.date}
+                    </div>
+                    <div className='flex items-center text-sm text-gray-500'>
+                      <MapPin className='mr-2 h-4 w-4' />
+                      {event.location}
+                    </div>
+                  </CardContent>
+                </div>
+                {/* <CardFooter>
+                  <Button className='w-full bg-red-600 hover:bg-red-700'>
+                    {t(`charity.events.button`)}
+                  </Button>
+                </CardFooter> */}
+              </Card>
+            ))}
+          </div>
         </Container>
 
         {/* How to Help */}
         <Container>
-          <section className='py-16'>
-            <div className='container mx-auto'>
-              <div className='mb-12 text-center'>
-                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                  <Users className='h-6 w-6 text-red-600' />
-                </div>
-                <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                  {t('charity.help.title')}
-                </h2>
-                <p className='mx-auto max-w-2xl text-gray-600'>
-                  {t('charity.help.subtitle')}
-                </p>
-              </div>
-
-              <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
-                {[
-                  {
-                    title: 'Сделать пожертвование',
-                    description:
-                      'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
-                    icon: <Landmark className='h-10 w-10 text-red-600' />,
-                  },
-                  {
-                    title: 'Стать волонтером',
-                    description:
-                      'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
-                    icon: <Users className='h-10 w-10 text-red-600' />,
-                  },
-                  {
-                    title: 'Участвовать в мероприятиях',
-                    description:
-                      'Принимайте участие в наших благотворительных мероприятиях и акциях.',
-                    icon: <Calendar className='h-10 w-10 text-red-600' />,
-                  },
-                  {
-                    title: 'Распространять информацию',
-                    description:
-                      'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
-                    icon: <Heart className='h-10 w-10 text-red-600' />,
-                  },
-                ].map((item, index) => (
-                  <Card data-aos='zoom-in' key={index} className='text-center'>
-                    <CardHeader>
-                      <div className='mb-4 flex justify-center'>
-                        {item.icon}
-                      </div>
-                      <CardTitle className='break-words hyphens-auto'>
-                        {item.title}
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                      <p className='text-gray-600'>{item.description}</p>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
+          <div className='mb-12 text-center'>
+            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+              <Users className='h-6 w-6 text-red-600' />
             </div>
-          </section>
+            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('charity.help.title')}
+            </h2>
+            <p className='mx-auto max-w-2xl text-gray-600'>
+              {t('charity.help.subtitle')}
+            </p>
+          </div>
+
+          <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
+            {[
+              {
+                title: 'Сделать пожертвование',
+                description:
+                  'Ваше пожертвование поможет нам реализовать больше проектов и помочь большему количеству людей.',
+                icon: <Landmark className='h-10 w-10 text-red-600' />,
+              },
+              {
+                title: 'Стать волонтером',
+                description:
+                  'Присоединяйтесь к нашей команде волонтеров и помогайте нам в реализации благотворительных проектов.',
+                icon: <Users className='h-10 w-10 text-red-600' />,
+              },
+              {
+                title: 'Участвовать в мероприятиях',
+                description:
+                  'Принимайте участие в наших благотворительных мероприятиях и акциях.',
+                icon: <Calendar className='h-10 w-10 text-red-600' />,
+              },
+              {
+                title: 'Распространять информацию',
+                description:
+                  'Расскажите о нашем фонде и его деятельности своим друзьям и знакомым.',
+                icon: <Heart className='h-10 w-10 text-red-600' />,
+              },
+            ].map((item, index) => (
+              <Card data-aos='zoom-in' key={index} className='text-center'>
+                <CardHeader>
+                  <div className='mb-4 flex justify-center'>{item.icon}</div>
+                  <CardTitle className='break-words hyphens-auto'>
+                    {item.title}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className='text-gray-600'>{item.description}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
         </Container>
         <CtaSection />
       </main>
diff --git a/src/pages-templates/clients/certificates/index.tsx b/src/pages-templates/clients/certificates/index.tsx
index 5c93793..8b6ae63 100644
--- a/src/pages-templates/clients/certificates/index.tsx
+++ b/src/pages-templates/clients/certificates/index.tsx
@@ -3,10 +3,10 @@
 import { Download, Eye } from 'lucide-react';
 import Image from 'next/image';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';
 
 export function CertificatesPage() {
   const { t } = useTextController();
@@ -67,8 +67,8 @@ export function CertificatesPage() {
   certificates.length = 0;
 
   return (
-    <Container>
-      <main className='container mx-auto py-10'>
+    <main>
+      <Container>
         <div className='mb-10 text-center'>
           <h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1>
           <p className='mx-auto max-w-2xl text-lg text-gray-600'>
@@ -125,7 +125,7 @@ export function CertificatesPage() {
             </Card>
           ))}
         </div>
-      </main>
-    </Container>
+      </Container>
+    </main>
   );
 }
diff --git a/src/pages-templates/clients/index.tsx b/src/pages-templates/clients/index.tsx
index 96c6b7b..e230e10 100644
--- a/src/pages-templates/clients/index.tsx
+++ b/src/pages-templates/clients/index.tsx
@@ -2,8 +2,8 @@
 
 import Image from 'next/image';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
-import Container from '@/shared/shadcn-ui/conteiner';
 
 import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
 import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
@@ -33,7 +33,7 @@ export function ClientsPage() {
               priority
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <Container>
+              <Container className='py-0'>
                 <div
                   data-aos='fade-down'
                   data-aos-duration='1000'
diff --git a/src/pages-templates/clients/loyalty/index.tsx b/src/pages-templates/clients/loyalty/index.tsx
index 3ed56cc..2265272 100644
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/src/pages-templates/clients/loyalty/index.tsx
@@ -3,9 +3,9 @@
 import { Check, Percent } from 'lucide-react';
 import Image from 'next/image';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';
 
 import { CtaSection } from '@/widgets/cta-section';
 
@@ -35,323 +35,304 @@ export function LoyaltyPage() {
               priority
             />
             <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
-              <Container>
-                <div
-                  data-aos='fade-down'
-                  data-aos-duration='800'
-                  className='container mx-auto'
-                >
-                  <div className='max-w-2xl space-y-4 text-white'>
-                    <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
-                      {t('clients.loyalty.title')}
-                    </h1>
-                    <p className='text-lg text-gray-200'>
-                      {t('clients.loyalty.description')}
-                    </p>
-                  </div>
+              <Container data-aos='fade-down' data-aos-duration='800'>
+                <div className='max-w-2xl space-y-4 text-white'>
+                  <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
+                    {t('clients.loyalty.title')}
+                  </h1>
+                  <p className='text-lg text-gray-200'>
+                    {t('clients.loyalty.description')}
+                  </p>
                 </div>
               </Container>
             </div>
           </div>
         </section>
 
+        {/* Program Overview */}
         <Container>
-          {/* Program Overview */}
-          <section className='py-16'>
-            <div className='container mx-auto'>
-              <div className='grid items-center gap-12 md:grid-cols-2'>
-                <div data-aos='fade-right'>
-                  <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'>
-                    {t('clients.loyalty.programm.about')}
-                  </h2>
-                  <p className='mb-6 text-gray-600'>
-                    {t('clients.loyalty.programm.about-description')}
-                  </p>
-                  <p className='mb-6 text-gray-600'>
-                    {t('clients.loyalty.programm.about-description-2')}
-                  </p>
+          <div className='grid items-center gap-12 md:grid-cols-2'>
+            <div data-aos='fade-right'>
+              <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'>
+                {t('clients.loyalty.programm.about')}
+              </h2>
+              <p className='mb-6 text-gray-600'>
+                {t('clients.loyalty.programm.about-description')}
+              </p>
+              <p className='mb-6 text-gray-600'>
+                {t('clients.loyalty.programm.about-description-2')}
+              </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'>
-                          {t('clients.loyalty.programm.conditions-1')}
-                        </h3>
-                        <p className='text-gray-600'>
-                          {t(
-                            'clients.loyalty.programm.conditions.description-1',
-                          )}
-                        </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'>
-                          {t('clients.loyalty.programm.conditions-2')}
-                        </h3>
-                        <p className='text-gray-600'>
-                          {t(
-                            'clients.loyalty.programm.conditions.description-2',
-                          )}
-                        </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'>
-                          {t('clients.loyalty.programm.conditions-3')}
-                        </h3>
-                        <p className='text-gray-600'>
-                          {t(
-                            'clients.loyalty.programm.conditions.description-3',
-                          )}
-                        </p>
-                      </div>
-                    </div>
+              <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'>
+                      {t('clients.loyalty.programm.conditions-1')}
+                    </h3>
+                    <p className='text-gray-600'>
+                      {t('clients.loyalty.programm.conditions.description-1')}
+                    </p>
                   </div>
                 </div>
-                <div
-                  data-aos='fade-up'
-                  className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
-                >
-                  <Image
-                    src={ProgrammImg}
-                    alt='Программа лояльности'
-                    fill
-                    className='w-full object-contain p-2.5'
-                    priority
-                  />
+                <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'>
+                      {t('clients.loyalty.programm.conditions-2')}
+                    </h3>
+                    <p className='text-gray-600'>
+                      {t('clients.loyalty.programm.conditions.description-2')}
+                    </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'>
+                      {t('clients.loyalty.programm.conditions-3')}
+                    </h3>
+                    <p className='text-gray-600'>
+                      {t('clients.loyalty.programm.conditions.description-3')}
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
-          </section>
+            <div
+              data-aos='fade-up'
+              className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
+            >
+              <Image
+                src={ProgrammImg}
+                alt='Программа лояльности'
+                fill
+                className='w-full object-contain p-2.5'
+                priority
+              />
+            </div>
+          </div>
+        </Container>
 
-          {/* How It Works */}
-          <section className='bg-gray-50 px-2 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'>
-                  {t('clients.loyalty.works.title')}
-                </h2>
-                <p className='mx-auto max-w-2xl text-gray-600'>
-                  {t('clients.loyalty.works.description')}
+        {/* How It Works */}
+        <section className='bg-gray-50'>
+          <Container>
+            <div className='mb-12 text-center'>
+              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+                {t('clients.loyalty.works.title')}
+              </h2>
+              <p className='mx-auto max-w-2xl text-gray-600'>
+                {t('clients.loyalty.works.description')}
+              </p>
+            </div>
+            <div className='grid gap-8 sm:grid-cols-2 lg:grid-cols-4'>
+              <div data-aos='zoom-in-up' className='text-center'>
+                <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
+                  1
+                </div>
+                <h3 className='mb-2 text-xl font-bold'>
+                  {t('clients.loyalty.works.stage-1')}
+                </h3>
+                <p className='text-gray-600'>
+                  {t('clients.loyalty.works.stage.description-1')}
                 </p>
               </div>
-
-              <div className='grid gap-8 sm:grid-cols-2 lg:grid-cols-4'>
-                <div data-aos='zoom-in-up' className='text-center'>
-                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
-                    1
-                  </div>
-                  <h3 className='mb-2 text-xl font-bold'>
-                    {t('clients.loyalty.works.stage-1')}
-                  </h3>
-                  <p className='text-gray-600'>
-                    {t('clients.loyalty.works.stage.description-1')}
-                  </p>
+              <div data-aos='zoom-in-up' className='text-center'>
+                <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
+                  2
                 </div>
-                <div data-aos='zoom-in-up' className='text-center'>
-                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
-                    2
-                  </div>
-                  <h3 className='mb-2 text-xl font-bold'>
-                    {t('clients.loyalty.works.stage-2')}
-                  </h3>
-                  <p className='text-gray-600'>
-                    {t('clients.loyalty.works.stage.description-2')}
-                  </p>
-                </div>
-                <div data-aos='zoom-in-up' className='text-center'>
-                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
-                    3
-                  </div>
-                  <h3 className='mb-2 text-xl font-bold'>
-                    {t('clients.loyalty.works.stage-3')}
-                  </h3>
-                  <p className='text-gray-600'>
-                    {t('clients.loyalty.works.stage.description-3')}
-                  </p>
-                </div>
-                <div data-aos='zoom-in-up' className='text-center'>
-                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
-                    4
-                  </div>
-                  <h3 className='mb-2 text-xl font-bold'>
-                    {t('clients.loyalty.works.stage-4')}
-                  </h3>
-                  <p className='text-gray-600'>
-                    {t('clients.loyalty.works.stage.description-4')}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </section>
-
-          {/* Loyalty Levels */}
-          <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'>
-                  {t('clients.loyalty.works.levels.title')}
-                </h2>
-                <p className='mx-auto max-w-2xl text-gray-600'>
-                  {t('clients.loyalty.works.levels.description')}
+                <h3 className='mb-2 text-xl font-bold'>
+                  {t('clients.loyalty.works.stage-2')}
+                </h3>
+                <p className='text-gray-600'>
+                  {t('clients.loyalty.works.stage.description-2')}
                 </p>
               </div>
-
-              <div className='grid gap-8 md:grid-cols-3'>
-                <Card
-                  data-aos='flip-left'
-                  data-aos-duration='500'
-                  className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'
-                >
-                  <CardContent className='p-6'>
-                    <h3 className='mb-4 text-center text-2xl font-bold'>
-                      {t('clients.loyalty.works.levels.card-1.title')}
-                    </h3>
-                    <div className='mb-6 text-center'>
-                      <span className='text-4xl font-bold'>
-                        {t('clients.loyalty.works.levels.card-1.percent')}
-                      </span>
-                      <p className='text-sm text-gray-600'>
-                        {t('clients.loyalty.works.levels.card.mark')}
-                      </p>
-                    </div>
-                    <ul className='space-y-2'>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-1.bonus-1')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-1.bonus-2')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-1.bonus-3')}
-                        </span>
-                      </li>
-                    </ul>
-                  </CardContent>
-                </Card>
-
-                <Card
-                  data-aos='flip-left'
-                  data-aos-duration='500'
-                  className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'
-                >
-                  <CardContent className='p-6'>
-                    <h3 className='mb-4 text-center text-2xl font-bold'>
-                      {t('clients.loyalty.works.levels.card-2.title')}
-                    </h3>
-                    <div className='mb-6 text-center'>
-                      <span className='text-4xl font-bold'>
-                        {t('clients.loyalty.works.levels.card-2.percent')}
-                      </span>
-                      <p className='text-sm text-gray-600'>
-                        {t('clients.loyalty.works.levels.card.mark')}
-                      </p>
-                    </div>
-                    <ul className='space-y-2'>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-2.bonus-1')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-2.bonus-2')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-2.bonus-3')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-2.bonus-4')}
-                        </span>
-                      </li>
-                    </ul>
-                  </CardContent>
-                </Card>
-
-                <Card
-                  data-aos='flip-left'
-                  data-aos-duration='500'
-                  className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'
-                >
-                  <CardContent className='p-6'>
-                    <h3 className='mb-4 text-center text-2xl font-bold'>
-                      {t('clients.loyalty.works.levels.card-3.title')}
-                    </h3>
-                    <div className='mb-6 text-center'>
-                      <span className='text-4xl font-bold'>
-                        {t('clients.loyalty.works.levels.card-3.percent')}
-                      </span>
-                      <p className='text-sm text-gray-600'>
-                        {t('clients.loyalty.works.levels.card.mark')}
-                      </p>
-                    </div>
-                    <ul className='space-y-2'>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-3.bonus-1')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-3.bonus-2')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-3.bonus-3')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-3.bonus-4')}
-                        </span>
-                      </li>
-                      <li className='flex items-center'>
-                        <Check className='mr-2 h-5 w-5 text-green-500' />
-                        <span>
-                          {t('clients.loyalty.works.levels.card-3.bonus-5')}
-                        </span>
-                      </li>
-                    </ul>
-                  </CardContent>
-                </Card>
+              <div data-aos='zoom-in-up' className='text-center'>
+                <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
+                  3
+                </div>
+                <h3 className='mb-2 text-xl font-bold'>
+                  {t('clients.loyalty.works.stage-3')}
+                </h3>
+                <p className='text-gray-600'>
+                  {t('clients.loyalty.works.stage.description-3')}
+                </p>
+              </div>
+              <div data-aos='zoom-in-up' className='text-center'>
+                <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
+                  4
+                </div>
+                <h3 className='mb-2 text-xl font-bold'>
+                  {t('clients.loyalty.works.stage-4')}
+                </h3>
+                <p className='text-gray-600'>
+                  {t('clients.loyalty.works.stage.description-4')}
+                </p>
               </div>
             </div>
-          </section>
+          </Container>
+        </section>
+
+        {/* Loyalty Levels */}
+        <Container>
+          <div className='mb-12 text-center'>
+            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('clients.loyalty.works.levels.title')}
+            </h2>
+            <p className='mx-auto max-w-2xl text-gray-600'>
+              {t('clients.loyalty.works.levels.description')}
+            </p>
+          </div>
+
+          <div className='grid gap-8 md:grid-cols-3'>
+            <Card
+              data-aos='flip-left'
+              data-aos-duration='500'
+              className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'
+            >
+              <CardContent className='p-6'>
+                <h3 className='mb-4 text-center text-2xl font-bold'>
+                  {t('clients.loyalty.works.levels.card-1.title')}
+                </h3>
+                <div className='mb-6 text-center'>
+                  <span className='text-4xl font-bold'>
+                    {t('clients.loyalty.works.levels.card-1.percent')}
+                  </span>
+                  <p className='text-sm text-gray-600'>
+                    {t('clients.loyalty.works.levels.card.mark')}
+                  </p>
+                </div>
+                <ul className='space-y-2'>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-1.bonus-1')}
+                    </span>
+                  </li>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-1.bonus-2')}
+                    </span>
+                  </li>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-1.bonus-3')}
+                    </span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+
+            <Card
+              data-aos='flip-left'
+              data-aos-duration='500'
+              className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'
+            >
+              <CardContent className='p-6'>
+                <h3 className='mb-4 text-center text-2xl font-bold'>
+                  {t('clients.loyalty.works.levels.card-2.title')}
+                </h3>
+                <div className='mb-6 text-center'>
+                  <span className='text-4xl font-bold'>
+                    {t('clients.loyalty.works.levels.card-2.percent')}
+                  </span>
+                  <p className='text-sm text-gray-600'>
+                    {t('clients.loyalty.works.levels.card.mark')}
+                  </p>
+                </div>
+                <ul className='space-y-2'>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-2.bonus-1')}
+                    </span>
+                  </li>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-2.bonus-2')}
+                    </span>
+                  </li>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-2.bonus-3')}
+                    </span>
+                  </li>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-2.bonus-4')}
+                    </span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+
+            <Card
+              data-aos='flip-left'
+              data-aos-duration='500'
+              className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'
+            >
+              <CardContent className='p-6'>
+                <h3 className='mb-4 text-center text-2xl font-bold'>
+                  {t('clients.loyalty.works.levels.card-3.title')}
+                </h3>
+                <div className='mb-6 text-center'>
+                  <span className='text-4xl font-bold'>
+                    {t('clients.loyalty.works.levels.card-3.percent')}
+                  </span>
+                  <p className='text-sm text-gray-600'>
+                    {t('clients.loyalty.works.levels.card.mark')}
+                  </p>
+                </div>
+                <ul className='space-y-2'>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-3.bonus-1')}
+                    </span>
+                  </li>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-3.bonus-2')}
+                    </span>
+                  </li>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-3.bonus-3')}
+                    </span>
+                  </li>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-3.bonus-4')}
+                    </span>
+                  </li>
+                  <li className='flex items-center'>
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>
+                      {t('clients.loyalty.works.levels.card-3.bonus-5')}
+                    </span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+          </div>
         </Container>
 
         <CtaSection />
diff --git a/src/pages-templates/login/index.tsx b/src/pages-templates/login/index.tsx
index 8b30644..9086aab 100644
--- a/src/pages-templates/login/index.tsx
+++ b/src/pages-templates/login/index.tsx
@@ -8,6 +8,7 @@ import { Suspense } from 'react';
 
 import { LoginForm } from '@/features/auth/login-form';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import {
@@ -17,7 +18,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';
 import {
   Tabs,
   TabsContent,
@@ -134,40 +134,35 @@ export default function LoginPage() {
   const { t } = useTextController();
 
   return (
-    <Container>
-      <div className='flex min-h-screen flex-col items-center justify-center'>
-        <main className='flex-1'>
-          <div className='container max-w-6xl py-16'>
-            <div className='mb-12 flex flex-col items-center text-center'>
-              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                <Fuel className='h-6 w-6 text-red-600' />
-              </div>
-              <h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                {t('auth.title')}
-              </h1>
-              <p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
+    <main className='flex min-h-screen flex-col items-center justify-center'>
+      <div className='flex-1'>
+        <Container className='max-w-6xl'>
+          <div className='mb-12 flex flex-col items-center text-center'>
+            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
+              <Fuel className='h-6 w-6 text-red-600' />
             </div>
+            <h1 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('auth.title')}
+            </h1>
+            <p className='max-w-2xl text-gray-600'>{t('auth.description')}</p>
+          </div>
 
-            <div data-aos='zoom-in' className='mx-auto max-w-lg'>
-              <Suspense>
-                <LoginPageTabs />
-              </Suspense>
+          <div data-aos='zoom-in' className='mx-auto max-w-lg'>
+            <Suspense>
+              <LoginPageTabs />
+            </Suspense>
 
-              <div className='mt-8 text-center text-sm text-gray-500'>
-                <p>
-                  {t('auth.loginIssues')}{' '}
-                  <Link
-                    href='/contact'
-                    className='text-red-600 hover:underline'
-                  >
-                    {t('auth.contactLink')}
-                  </Link>
-                </p>
-              </div>
+            <div className='mt-8 text-center text-sm text-gray-500'>
+              <p>
+                {t('auth.loginIssues')}{' '}
+                <Link href='/contact' className='text-red-600 hover:underline'>
+                  {t('auth.contactLink')}
+                </Link>
+              </p>
             </div>
           </div>
-        </main>
+        </Container>
       </div>
-    </Container>
+    </main>
   );
 }
diff --git a/src/shared/components/container.tsx b/src/shared/components/container.tsx
new file mode 100644
index 0000000..8e73e5b
--- /dev/null
+++ b/src/shared/components/container.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { ComponentProps } from 'react';
+
+import { cn } from '../lib/utils';
+
+interface ContainerProps extends ComponentProps<'div'> {}
+
+export function Container({ children, className, ...props }: ContainerProps) {
+  return (
+    <div
+      className={cn('container mx-auto px-2.5 py-8 sm:py-16', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/shared/shadcn-ui/conteiner.tsx b/src/shared/shadcn-ui/conteiner.tsx
deleted file mode 100644
index 43ea538..0000000
--- a/src/shared/shadcn-ui/conteiner.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-"use client"
-
-interface ContainerProps {
-    children: React.ReactNode
-}
-export default function Container({children}: ContainerProps) {
-    return (
-        <div className="container mx-auto px-2.5 py-1">{children}</div>
-    )
-}
\ No newline at end of file
diff --git a/src/widgets/about-section.tsx b/src/widgets/about-section.tsx
index 56681cb..bdb3368 100644
--- a/src/widgets/about-section.tsx
+++ b/src/widgets/about-section.tsx
@@ -4,14 +4,15 @@ import { Users } from 'lucide-react';
 import Image from 'next/image';
 
 import AboutCounter from '@/shared/components/about-counter';
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
 export const AboutSection = () => {
   const { t } = useTextController();
 
   return (
-    <section id='about' className='px-2 py-8 sm:py-16'>
-      <div className='container mx-auto'>
+    <section id='about'>
+      <Container>
         <div className='grid items-center gap-12 md:grid-cols-2'>
           <div>
             <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
@@ -38,7 +39,7 @@ export const AboutSection = () => {
             />
           </div>
         </div>
-      </div>
+      </Container>
     </section>
   );
 };
diff --git a/src/widgets/charity-section.tsx b/src/widgets/charity-section.tsx
index 056a1d2..af9d502 100644
--- a/src/widgets/charity-section.tsx
+++ b/src/widgets/charity-section.tsx
@@ -4,6 +4,7 @@ import { ChevronRight, Heart } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 
@@ -11,8 +12,8 @@ export const CharitySection = () => {
   const { t } = useTextController();
 
   return (
-    <section id='charity' className='px-2 py-8 sm:py-16'>
-      <div className='container mx-auto'>
+    <section id='charity'>
+      <Container>
         <div className='grid items-center gap-12 md:grid-cols-2'>
           <div
             className='relative order-2 h-[400px] w-full overflow-hidden rounded-xl shadow-xl md:order-1'
@@ -59,7 +60,7 @@ export const CharitySection = () => {
             </Link>
           </div>
         </div>
-      </div>
+      </Container>
     </section>
   );
 };
diff --git a/src/widgets/clients/ui/benefits-section.tsx b/src/widgets/clients/ui/benefits-section.tsx
index 2fa88b0..b539939 100644
--- a/src/widgets/clients/ui/benefits-section.tsx
+++ b/src/widgets/clients/ui/benefits-section.tsx
@@ -3,8 +3,8 @@
 import { Percent } from 'lucide-react';
 import Image from 'next/image';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
-import Container from '@/shared/shadcn-ui/conteiner';
 
 interface Benefit {
   title: string;
@@ -34,55 +34,52 @@ export const BenefitsSection = () => {
   const { t } = useTextController();
 
   return (
-    <Container>
-      <section className='bg-gray-50 py-16'>
-        <div className='container mx-auto'>
-          <div className='grid items-center gap-12 md:grid-cols-2'>
-            <div
-              data-aos='fade-right'
-              data-aos-duration='4000'
-              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'>
-                {t('clients.benefits.title')}
-              </h2>
-              <p className='mb-6 text-gray-600'>
-                {t('clients.benefits.subtitle')}
-              </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>
+    <section className='bg-gray-50'>
+      <Container>
+        <div className='grid items-center gap-12 md:grid-cols-2'>
+          <div
+            data-aos='fade-right'
+            data-aos-duration='4000'
+            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>
-            <div
-              data-aos='fade-up'
-              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'
-              />
+            <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
+              {t('clients.benefits.title')}
+            </h2>
+            <p className='mb-6 text-gray-600'>
+              {t('clients.benefits.subtitle')}
+            </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
+            data-aos='fade-up'
+            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>
-      </section>
-    </Container>
+      </Container>
+    </section>
   );
 };
diff --git a/src/widgets/clients/ui/services-overview-section.tsx b/src/widgets/clients/ui/services-overview-section.tsx
index faa7e4f..401c0ee 100644
--- a/src/widgets/clients/ui/services-overview-section.tsx
+++ b/src/widgets/clients/ui/services-overview-section.tsx
@@ -3,6 +3,7 @@
 import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
 import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import {
   Card,
@@ -11,7 +12,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/shared/shadcn-ui/card';
-import Container from '@/shared/shadcn-ui/conteiner';
 
 interface ServiceOverview {
   title: string;
@@ -50,41 +50,42 @@ export const ServicesOverviewSection = () => {
   const { t } = useTextController();
 
   return (
-    <Container>
-      <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'>
-              {t('clients.services.title')}
-            </h2>
-            <p className='mx-auto max-w-2xl text-gray-600'>
-              {t('clients.services.subtitle')}
-            </p>
-          </div>
-
-          <div data-aos='flip-up' data-aos-duration='600' 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>
+    <section>
+      <Container>
+        <div className='mb-12 text-center'>
+          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
+            {t('clients.services.title')}
+          </h2>
+          <p className='mx-auto max-w-2xl text-gray-600'>
+            {t('clients.services.subtitle')}
+          </p>
         </div>
-      </section>
-    </Container>
+        <div
+          data-aos='flip-up'
+          data-aos-duration='600'
+          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>
+      </Container>
+    </section>
   );
 };
diff --git a/src/widgets/cta-section.tsx b/src/widgets/cta-section.tsx
index 2da2761..0dd263f 100644
--- a/src/widgets/cta-section.tsx
+++ b/src/widgets/cta-section.tsx
@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 
@@ -9,8 +10,8 @@ export const CtaSection = () => {
   const { t } = useTextController();
 
   return (
-    <section className='bg-red-600 px-2 py-8 text-white sm:py-16'>
-      <div className='container mx-auto'>
+    <section className='bg-red-600 text-white'>
+      <Container>
         <div className='flex flex-col items-center text-center'>
           <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
             {t('home.cta.title')}
@@ -24,7 +25,7 @@ export const CtaSection = () => {
             </Link>
           </div>
         </div>
-      </div>
+      </Container>
     </section>
   );
 };
diff --git a/src/widgets/map-section.tsx b/src/widgets/map-section.tsx
index 656d2c6..1176227 100644
--- a/src/widgets/map-section.tsx
+++ b/src/widgets/map-section.tsx
@@ -6,6 +6,7 @@ import { Stations } from '@/app/api-utlities/@types';
 
 import { GasStationMap } from '@/features/map';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
 interface MapSectionProps {
@@ -16,8 +17,8 @@ export const MapSection = ({ stations }: MapSectionProps) => {
   const { t } = useTextController();
 
   return (
-    <section id='stations' className='bg-gray-50 px-2 py-8 sm:py-16'>
-      <div className='container mx-auto'>
+    <section id='stations' className='bg-gray-50'>
+      <Container>
         <div className='mb-12 flex flex-col items-center justify-center text-center'>
           <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
             <MapPin className='h-6 w-6 text-red-600' />
@@ -35,7 +36,7 @@ export const MapSection = ({ stations }: MapSectionProps) => {
         >
           <GasStationMap stations={stations} />
         </div>
-      </div>
+      </Container>
     </section>
   );
 };
diff --git a/src/widgets/promotions-section.tsx b/src/widgets/promotions-section.tsx
index e0d0268..de661ab 100644
--- a/src/widgets/promotions-section.tsx
+++ b/src/widgets/promotions-section.tsx
@@ -4,6 +4,7 @@ import { Gift } from 'lucide-react';
 
 import { Discounts } from '@/app/api-utlities/@types/index';
 
+import { Container } from '@/shared/components/container';
 import PromotionSlider from '@/shared/components/promotion-slider';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
@@ -15,8 +16,8 @@ export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
   const { t } = useTextController();
 
   return (
-    <section id='promotions' className='bg-gray-50 px-2 py-8 sm:py-16'>
-      <div className='container mx-auto'>
+    <section id='promotions' className='bg-gray-50'>
+      <Container>
         <div className='mb-12 flex flex-col items-center justify-center text-center'>
           <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
             <Gift className='h-6 w-6 text-red-600' />
@@ -29,7 +30,7 @@ export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
           </p>
         </div>
         <PromotionSlider discounts={discounts} />
-      </div>
+      </Container>
     </section>
   );
 };
diff --git a/src/widgets/stats-section.tsx b/src/widgets/stats-section.tsx
index 1c47423..f63db3f 100644
--- a/src/widgets/stats-section.tsx
+++ b/src/widgets/stats-section.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
 import AnimatedCounter from '../shared/components/animated-counter';
@@ -36,11 +37,8 @@ export function StatsSection() {
   }, []);
 
   return (
-    <section
-      ref={sectionRef}
-      className='bg-red-600 px-2 py-6 text-white sm:py-12'
-    >
-      <div className='container mx-auto'>
+    <section ref={sectionRef} className='bg-red-600 text-white'>
+      <Container>
         <div className='grid grid-cols-2 gap-4 text-center sm:gap-8 md:grid-cols-4'>
           <div className='space-y-2'>
             <h3 className='text-3xl font-bold'>
@@ -67,7 +65,7 @@ export function StatsSection() {
             <p className='text-sm text-white/80'>{t('home.stats.mode')}</p>
           </div>
         </div>
-      </div>
+      </Container>
     </section>
   );
 }
diff --git a/src/widgets/vacancies-section.tsx b/src/widgets/vacancies-section.tsx
index 0e48e98..186b894 100644
--- a/src/widgets/vacancies-section.tsx
+++ b/src/widgets/vacancies-section.tsx
@@ -4,6 +4,7 @@ import { Briefcase } from 'lucide-react';
 
 import { Jobs } from '@/app/api-utlities/@types/index';
 
+import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { cn } from '@/shared/lib/utils';
 import { Badge } from '@/shared/shadcn-ui/badge';
@@ -37,8 +38,8 @@ export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
   const jobsTabsTitle = [allVacancies, ...Array.from(jobsByType.keys())];
 
   return (
-    <section id='vacancies' className='px-2 py-8 sm:py-16'>
-      <div className='container mx-auto'>
+    <section id='vacancies'>
+      <Container>
         <div className='mb-12 flex flex-col items-center justify-center text-center'>
           <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
             <Briefcase className='h-6 w-6 text-red-600' />
@@ -88,7 +89,7 @@ export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
             </TabsContent>
           ))}
         </Tabs>
-      </div>
+      </Container>
     </section>
   );
 };