diff --git a/components/post.tsx b/components/post.tsx
index aed6488..0170a7b 100644
--- a/components/post.tsx
+++ b/components/post.tsx
@@ -4,32 +4,25 @@ import clsx from 'clsx'
 import React from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
-import dynamic from 'next/dynamic'
 import { ShareTwo } from '@icon-park/react'
-import { genConfig } from 'react-nice-avatar'
 import { Bookmark, Heart, MessageCircle } from 'lucide-react'
 
 import { IPost } from '~/helpers/interfaces'
 import { Button } from '~/components/ui/button'
 import { Reaction } from '~/helpers/emoji-helpers'
 import { formatTimeDifference } from '~/helpers/format-time-diff'
-import { defaultAvatarStyle } from '~/constant/default-avatar-style'
 import { convertHashtagsToLinks } from '~/helpers/convert-hashtags-to-link'
 
 import { Hashtag } from './hashtag'
 import { Carousel } from './carousel'
 import { ReactionButton } from './reaction-button'
 
-const ReactNiceAvatar = dynamic(async () => await import('react-nice-avatar'), { ssr: false })
-
 type PostProps = {
   post: IPost
   isAuthor: boolean
 }
 
 export const Post = ({ post, isAuthor }: PostProps): JSX.Element => {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  const myConfig = genConfig(defaultAvatarStyle as any)
   const user = post.user
   const mediaFiles = post.mediaFiles
   const postHashtags = post.postHashtags
@@ -58,12 +51,12 @@ export const Post = ({ post, isAuthor }: PostProps): JSX.Element => {
       <section className="flex flex-col items-start gap-x-3 gap-y-2 sm:flex-row">
         {/* User Avatar */}
         <Link href={`/@${user?.username}`} className="outline-primary">
-          <ReactNiceAvatar
-            className={clsx(
-              'rounded-full border-[3px] border-white outline-4',
-              'h-14 w-14 shrink-0 shadow'
-            )}
-            {...myConfig}
+          <Image
+            src={post.user?.imageUrl}
+            width={55}
+            height={55}
+            className="rounded-full border-[3px] border-white shadow outline-4"
+            alt="User Profile"
           />
         </Link>
         <div className="relative flex w-full max-w-lg flex-col space-y-1">
diff --git a/components/suggested-user-item.tsx b/components/suggested-user-item.tsx
index 455d15b..8829461 100644
--- a/components/suggested-user-item.tsx
+++ b/components/suggested-user-item.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
-import ReactNiceAvatar from 'react-nice-avatar'
+import Image from 'next/image'
 
-import { cn } from '~/lib/utils'
 import { IUser } from '~/helpers/interfaces'
 import { Button } from '~/components/ui/button'
 
@@ -11,22 +10,23 @@ type SuggestedUserItemProps = {
 }
 
 export const SuggestedUserItem = (props: SuggestedUserItemProps): JSX.Element => {
-  const { username, displayName } = props.user
+  const { username, imageUrl, displayName } = props.user
 
   return (
     <li className="flex items-center justify-between">
       <Link href={`/@${username}`} className="flex items-center gap-x-2">
-        <ReactNiceAvatar
-          className={cn(
-            'rounded-full border-[3px] border-white outline-4',
-            'h-12 w-12 shrink-0 shadow'
-          )}
+        <Image
+          src={imageUrl}
+          width={48}
+          height={48}
+          className="rounded-full border-[3px] border-white shadow outline-4"
+          alt="User Profile"
         />
         <div className="leading-none">
           <h2 className="line-clamp-1 w-[140px] text-sm font-semibold text-core-secondary hover:underline">
             {username}
           </h2>
-          <span className="text-xs text-core-secondary-100">{displayName}</span>
+          <span className="text-xs text-core-secondary-200">{displayName}</span>
         </div>
       </Link>
       <Button
diff --git a/helpers/interfaces.ts b/helpers/interfaces.ts
index 98a0cb5..e15cc2a 100644
--- a/helpers/interfaces.ts
+++ b/helpers/interfaces.ts
@@ -13,6 +13,7 @@ export interface IPost {
     displayName: string
     email: string
     username: string
+    imageUrl: string
   }
   postHashtags: {
     [x: string]: any
@@ -33,6 +34,7 @@ export interface IUser {
   email: string
   displayName: string
   username: string
+  imageUrl: string
   role: string
   _count: {
     followers: number
diff --git a/server/api/routers/post.ts b/server/api/routers/post.ts
index a43613c..6f394dc 100644
--- a/server/api/routers/post.ts
+++ b/server/api/routers/post.ts
@@ -63,7 +63,8 @@ export const postRouter = createTRPCRouter({
               id: true,
               displayName: true,
               email: true,
-              username: true
+              username: true,
+              imageUrl: true
             }
           },
           postHashtags: {