diff --git a/src/pages-templates/clients/loyalty/index.tsx b/src/pages-templates/clients/loyalty/index.tsx
index 7404cee..be7d878 100644
--- a/src/pages-templates/clients/loyalty/index.tsx
+++ b/src/pages-templates/clients/loyalty/index.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 
 import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { useMediaController } from '@/shared/media/hooks/use-media-controller';
 
 // import LoyaltyLevels from '@/widgets/clients/loyalty/ui/loyalty-levels';
 import { CtaSection } from '@/widgets/cta-section';
@@ -13,6 +14,9 @@ import ProgrammImg from '../../../../public/clients/loyatly/03a771e7-5d76-4111-a
 
 export function LoyaltyPage() {
   const { t } = useTextController();
+  const { m } = useMediaController();
+
+  const loyaltyProgrammMedia = m('page.loyaly.banner1');
 
   return (
     <div className='flex min-h-screen flex-col'>
@@ -107,7 +111,7 @@ export function LoyaltyPage() {
               className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
             >
               <Image
-                src={ProgrammImg}
+                src={loyaltyProgrammMedia?.photo || ProgrammImg}
                 alt='Программа лояльности'
                 fill
                 className='w-full object-contain p-2.5'
diff --git a/src/shared/assets/logo.tsx b/src/shared/assets/logo.tsx
index 9ae43ba..ed611cb 100644
--- a/src/shared/assets/logo.tsx
+++ b/src/shared/assets/logo.tsx
@@ -1,11 +1,22 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { useMediaController } from '../media/hooks/use-media-controller';
+
 export const Logo = () => {
+  const { m } = useMediaController();
+  const logo = m('logo');
+
   return (
     <Link className='flex items-center gap-2' href={'/'}>
-      <Image src='/logo-new.png' alt='oriyo-logo' width={110} height={40} />
-      {/* <span className='text-xl font-bold'>Ориё</span> */}
+      <Image
+        src={logo?.photo || '/logo-new.png'}
+        alt='oriyo-logo'
+        width={110}
+        height={40}
+      />
     </Link>
   );
 };
diff --git a/src/widgets/charity-section.tsx b/src/widgets/charity-section.tsx
index af9d502..20cd5ff 100644
--- a/src/widgets/charity-section.tsx
+++ b/src/widgets/charity-section.tsx
@@ -6,10 +6,14 @@ import Link from 'next/link';
 
 import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { useMediaController } from '@/shared/media/hooks/use-media-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 
 export const CharitySection = () => {
   const { t } = useTextController();
+  const { m } = useMediaController();
+
+  const charityMedia = m('home.charity.banner');
 
   return (
     <section id='charity'>
@@ -20,10 +24,13 @@ export const CharitySection = () => {
             data-aos='zoom-in'
           >
             <Image
-              src='/placeholder.svg?height=400&width=600'
+              src={
+                charityMedia?.photo || '/placeholder.svg?height=400&width=600'
+              }
               alt='Charity Foundation'
               fill
               className='object-cover'
+              loader={({ src }) => src}
             />
           </div>
           <div className='order-1 md:order-2'>
diff --git a/src/widgets/hero-section.tsx b/src/widgets/hero-section.tsx
index c7ea538..d3265bc 100644
--- a/src/widgets/hero-section.tsx
+++ b/src/widgets/hero-section.tsx
@@ -5,10 +5,14 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { useMediaController } from '@/shared/media/hooks/use-media-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 
 export const HeroSection = () => {
   const { t } = useTextController();
+  const { m } = useMediaController();
+
+  const banner = m('home.hero-section.banner');
 
   return (
     <section className='relative'>
@@ -21,13 +25,13 @@ export const HeroSection = () => {
             // top: -60,
             // right: 20,
           }}
-          className='sm:!top-0 sm:!right-20 sm:!h-[70vh] sm:!w-[100vh]'
+          className='sm:!-top-16 sm:-right-40 sm:!h-[70vh] sm:!w-[100vh] md:!-top-10 md:!-right-30 xl:!top-0 xl:!right-0'
         >
           <Image
-            src='/oriyo_bg.jpeg'
+            src={banner?.photo || '/oriyo_bg.jpeg'}
             alt='Oriyo Station'
             fill
-            className='object-cover'
+            className='object-cover sm:scale-110 md:scale-120 xl:scale-140'
             priority
           />
         </div>
diff --git a/src/widgets/map-section.tsx b/src/widgets/map-section.tsx
index dc42347..9c8ff3c 100644
--- a/src/widgets/map-section.tsx
+++ b/src/widgets/map-section.tsx
@@ -16,10 +16,8 @@ interface MapSectionProps {
 
 export const MapSection = ({ stations }: MapSectionProps) => {
   const { t } = useTextController();
-
   const { m } = useMediaController();
 
-  // NOTE: doesn't work
   const stationsMedia = m('stations.main');
 
   return (