diff --git a/src/pages-templates/clients/loyalty/index.tsx b/src/pages-templates/clients/loyalty/index.tsx
index 864b29b..7404cee 100644
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/src/pages-templates/clients/loyalty/index.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { Check, Percent } from 'lucide-react';
+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 { Card, CardContent } from '@/shared/shadcn-ui/card';
 
+// import LoyaltyLevels from '@/widgets/clients/loyalty/ui/loyalty-levels';
 import { CtaSection } from '@/widgets/cta-section';
 
 import ProgrammImg from '../../../../public/clients/loyatly/03a771e7-5d76-4111-a516-801aa925659f.jpg';
@@ -177,157 +177,7 @@ export function LoyaltyPage() {
           </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>
+        {/* <LoyaltyLevels /> */}
 
         <CtaSection />
       </main>
diff --git a/src/widgets/clients/loyalty/ui/loyalty-levels.tsx b/src/widgets/clients/loyalty/ui/loyalty-levels.tsx
new file mode 100644
index 0000000..fcb4897
--- /dev/null
+++ b/src/widgets/clients/loyalty/ui/loyalty-levels.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { Check } from 'lucide-react';
+
+import { Container } from '@/shared/components/container';
+import { useTextController } from '@/shared/language';
+import { Card, CardContent } from '@/shared/shadcn-ui/card';
+
+const loyaltyLevels = [
+  {
+    id: 'card-1',
+    borderColor: 'gray-400',
+    title: 'clients.loyalty.works.levels.card-1.title',
+    percent: 'clients.loyalty.works.levels.card-1.percent',
+    bonuses: [
+      'clients.loyalty.works.levels.card-1.bonus-1',
+      'clients.loyalty.works.levels.card-1.bonus-2',
+      'clients.loyalty.works.levels.card-1.bonus-3',
+    ],
+  },
+  {
+    id: 'card-2',
+    borderColor: 'yellow-500',
+    title: 'clients.loyalty.works.levels.card-2.title',
+    percent: 'clients.loyalty.works.levels.card-2.percent',
+    bonuses: [
+      'clients.loyalty.works.levels.card-2.bonus-1',
+      'clients.loyalty.works.levels.card-2.bonus-2',
+      'clients.loyalty.works.levels.card-2.bonus-3',
+      'clients.loyalty.works.levels.card-2.bonus-4',
+    ],
+  },
+  {
+    id: 'card-3',
+    borderColor: 'red-600',
+    title: 'clients.loyalty.works.levels.card-3.title',
+    percent: 'clients.loyalty.works.levels.card-3.percent',
+    bonuses: [
+      'clients.loyalty.works.levels.card-3.bonus-1',
+      'clients.loyalty.works.levels.card-3.bonus-2',
+      'clients.loyalty.works.levels.card-3.bonus-3',
+      'clients.loyalty.works.levels.card-3.bonus-4',
+      'clients.loyalty.works.levels.card-3.bonus-5',
+    ],
+  },
+];
+
+const LoyaltyLevels = () => {
+  const { t } = useTextController();
+
+  return (
+    <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'>
+        {loyaltyLevels.map((level) => (
+          <Card
+            key={level.id}
+            data-aos='flip-left'
+            data-aos-duration='500'
+            className={`overflow-hidden border-t-4 border-t-${level.borderColor} transition-all hover:shadow-lg`}
+          >
+            <CardContent className='p-6'>
+              <h3 className='mb-4 text-center text-2xl font-bold'>
+                {t(level.title)}
+              </h3>
+              <div className='mb-6 text-center'>
+                <span className='text-4xl font-bold'>{t(level.percent)}</span>
+                <p className='text-sm text-gray-600'>
+                  {t('clients.loyalty.works.levels.card.mark')}
+                </p>
+              </div>
+              <ul className='space-y-2'>
+                {level.bonuses.map((bonus, index) => (
+                  <li
+                    key={`${level.id}-bonus-${index}`}
+                    className='flex items-center'
+                  >
+                    <Check className='mr-2 h-5 w-5 text-green-500' />
+                    <span>{t(bonus)}</span>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </Container>
+  );
+};
+
+export default LoyaltyLevels;