diff --git a/app/layouts/news/banner.tsx b/app/layouts/news/banner.tsx
index 0ba09ec..326a3b1 100644
--- a/app/layouts/news/banner.tsx
+++ b/app/layouts/news/banner.tsx
@@ -1,10 +1,12 @@
 import Autoplay from 'embla-carousel-autoplay'
 import useEmblaCarousel from 'embla-carousel-react'
-import { Link } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
-import { BANNER } from '~/data/contents'
+import type { loader } from '~/routes/_news'
 
 export const Banner = () => {
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { adsData } = loaderData || {}
   const [emblaReference] = useEmblaCarousel({ loop: true }, [Autoplay()])
 
   return (
@@ -15,7 +17,7 @@ export const Banner = () => {
           ref={emblaReference}
         >
           <div className="embla__container flex">
-            {BANNER.map(({ urlImage, alt, link }, index) => (
+            {adsData?.map(({ image_url: urlImage, url: link, id }, index) => (
               <div
                 key={index}
                 className="embla__slide max-h-[100px] min-h-[65px] w-full min-w-0 flex-none"
@@ -23,11 +25,13 @@ export const Banner = () => {
                 <Link
                   to={link}
                   className="mt-2 h-full py-2"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <img
                     src={urlImage}
-                    alt={alt}
-                    className="h-[70px] w-[100%] content-center sm:h-full"
+                    alt={id}
+                    className="h-[70px] w-[100%] object-contain object-center sm:h-full"
                   />
                 </Link>
               </div>
diff --git a/app/routes/_news.tsx b/app/routes/_news.tsx
index c0e4393..bea6b25 100644
--- a/app/routes/_news.tsx
+++ b/app/routes/_news.tsx
@@ -1,6 +1,7 @@
 import { isRouteErrorResponse, Outlet } from 'react-router'
 import { XiorError } from 'xior'
 
+import { getAds } from '~/apis/common/get-ads'
 import { getCategories } from '~/apis/common/get-categories'
 import { getSubscriptions } from '~/apis/common/get-subscriptions'
 import { getUser } from '~/apis/news/get-user'
@@ -28,11 +29,13 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   }
   const { data: subscriptionsData } = await getSubscriptions()
   const { data: categoriesData } = await getCategories()
+  const { data: adsData } = await getAds()
 
   return {
     userData,
     subscriptionsData,
     categoriesData,
+    adsData,
   }
 }