diff --git a/app/layouts/admin/navbar.tsx b/app/layouts/admin/navbar.tsx
index 72ab2b3..2b38350 100644
--- a/app/layouts/admin/navbar.tsx
+++ b/app/layouts/admin/navbar.tsx
@@ -25,16 +25,16 @@ export const Navbar = () => {
       </Link>
       <div className="flex items-center gap-x-8">
         <Popover className="relative">
-          <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between focus:outline-none">
-            <div className="flex items-center">
-              {staffData?.profile_picture === '' ? (
-                <ProfileIcon className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
-              ) : (
+          <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between rounded-xl p-2 ring-2 ring-[#707FDD]/10 hover:shadow focus:outline-none">
+            <div className="flex items-center space-x-3">
+              {staffData?.profile_picture ? (
                 <img
                   src={staffData?.profile_picture}
                   alt={staffData?.name}
-                  className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
+                  className="h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
                 />
+              ) : (
+                <ProfileIcon className="h-8 w-8 rounded-full bg-[#C4C4C4]" />
               )}
 
               <span className="text-xs">{staffData?.name}</span>
diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx
index 6542ff8..632796e 100644
--- a/app/pages/news-detail/index.tsx
+++ b/app/pages/news-detail/index.tsx
@@ -2,6 +2,7 @@ import htmlParse from 'html-react-parser'
 import { useRouteLoaderData } from 'react-router'
 
 import type { TTagResponse } from '~/apis/common/get-tags'
+import { ProfileIcon } from '~/components/icons/profile'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { IconsSocial } from '~/components/ui/social-share'
@@ -14,10 +15,9 @@ export const NewsDetailPage = () => {
     'routes/_news.detail.$slug',
   )
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { newsDetailData }: any = loaderData
+  const { newsDetailData } = loaderData || {}
   const { title, content, featured_image, slug, author, live_at, tags } =
-    newsDetailData
+    newsDetailData || {}
 
   return (
     <div className="sm-max:mx-5 relative">
@@ -27,22 +27,31 @@ export const NewsDetailPage = () => {
             {title}
           </h2>
 
-          {/* next planing create component for this section */}
+          {/* START TODO: create component for this section */}
           <div className="my-5 w-full items-center justify-between gap-2 align-middle sm:flex">
             <div className="mb-2 flex items-center gap-2 align-middle">
-              <img
-                src={'https://placehold.co/50x50.png'}
-                alt={title}
-                className="h-12 w-12 rounded-full"
-              />
+              {author?.profile_picture ? (
+                <img
+                  src={author?.profile_picture}
+                  alt={author?.name}
+                  className="h-12 w-12 rounded-full bg-[#C4C4C4] object-cover"
+                />
+              ) : (
+                <ProfileIcon className="h-12 w-12 rounded-full bg-[#C4C4C4]" />
+              )}
+
               <div>
-                <h4 className="text-md">{author.name}</h4>
-                <p className="text-sm">{formatDate(live_at)} . 5 min read </p>
+                <h4 className="text-md">{author?.name}</h4>
+                <p className="flex gap-1 text-sm">
+                  <span>{live_at && `${formatDate(live_at)}`}</span>
+                  <span>·</span>
+                  <span>5 min read</span>
+                </p>
               </div>
             </div>
             <IconsSocial className="flex-row" />
           </div>
-          {/* end next planing create component for this section */}
+          {/* END TODO: create component for this section */}
           <div className="w-full bg-amber-200">
             <img
               src={featured_image}
@@ -53,7 +62,7 @@ export const NewsDetailPage = () => {
 
           <div className="mt-8 flex items-center justify-center">
             <article className="prose prose-stone">
-              {htmlParse(content)}
+              {content && htmlParse(content)}
             </article>
           </div>
           <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">