diff --git a/app/components/ui/banner.tsx b/app/components/ui/banner.tsx
index 02c3e7a..f278da7 100644
--- a/app/components/ui/banner.tsx
+++ b/app/components/ui/banner.tsx
@@ -2,7 +2,7 @@ import { Link } from 'react-router'
 
 import { APP } from '~/data/meta'
 
-export default function Banner() {
+export const Banner = () => {
   return (
     <div className="min-h-[65px] sm:mx-10">
       <div className="relative">
diff --git a/app/components/ui/breadcrumb.tsx b/app/components/ui/breadcrumb.tsx
index f77b4c3..64ee087 100644
--- a/app/components/ui/breadcrumb.tsx
+++ b/app/components/ui/breadcrumb.tsx
@@ -5,7 +5,7 @@ interface BreadcrumbProperty {
   slug: string
 }
 
-const Breadcrumb = (property: BreadcrumbProperty) => {
+export const Breadcrumb = (property: BreadcrumbProperty) => {
   const { slug } = property
   return (
     <div className="flex items-center gap-2">
@@ -20,5 +20,3 @@ const Breadcrumb = (property: BreadcrumbProperty) => {
     </div>
   )
 }
-
-export default Breadcrumb
diff --git a/app/components/ui/social-share.tsx b/app/components/ui/social-share.tsx
index e297d1e..7095ebc 100644
--- a/app/components/ui/social-share.tsx
+++ b/app/components/ui/social-share.tsx
@@ -40,7 +40,7 @@ const dataSocialMedia = [
   },
 ]
 
-const IconsSocial: FC<SocialMediaProperties> = ({ className }) => {
+export const IconsSocial: FC<SocialMediaProperties> = ({ className }) => {
   return (
     <div className={twMerge('flex gap-2', className)}>
       {dataSocialMedia.map(({ url, icon: Icon }, index) => (
@@ -56,5 +56,3 @@ const IconsSocial: FC<SocialMediaProperties> = ({ className }) => {
     </div>
   )
 }
-
-export default IconsSocial
diff --git a/app/layouts/news/default.tsx b/app/layouts/news/default.tsx
index d231cd5..8ba81f9 100644
--- a/app/layouts/news/default.tsx
+++ b/app/layouts/news/default.tsx
@@ -2,9 +2,9 @@ import { type PropsWithChildren } from 'react'
 
 import { PopupModal } from '~/components/popup/modal'
 import { SuccessModal } from '~/components/popup/success-modal'
-import Banner from '~/components/ui/banner'
+import { Banner } from '~/components/ui/banner'
 import { useNewsContext } from '~/contexts/news'
-import FormForgotPassword from '~/layouts/news/form-forgot-password'
+import { FormForgotPassword } from '~/layouts/news/form-forgot-password'
 import { FormLogin } from '~/layouts/news/form-login'
 import { FormRegister } from '~/layouts/news/form-register'
 
diff --git a/app/layouts/news/form-forgot-password.tsx b/app/layouts/news/form-forgot-password.tsx
index 6277010..a465631 100644
--- a/app/layouts/news/form-forgot-password.tsx
+++ b/app/layouts/news/form-forgot-password.tsx
@@ -1,6 +1,6 @@
 import { Button } from '~/components/ui/button'
 
-export default function FormForgotPassword() {
+export const FormForgotPassword = () => {
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="w-full max-w-md">
diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx
index 27f4943..30fc0ea 100644
--- a/app/pages/news-detail/index.tsx
+++ b/app/pages/news-detail/index.tsx
@@ -1,7 +1,7 @@
-import Breadcrumb from '~/components/ui/breadcrumb'
+import { Breadcrumb } from '~/components/ui/breadcrumb'
 import { Card } from '~/components/ui/card'
 import { Carousel } from '~/components/ui/carousel'
-import IconsSocial from '~/components/ui/social-share'
+import { IconsSocial } from '~/components/ui/social-share'
 
 import { BERITA, CONTENT } from './data'