diff --git a/frontend/app/pong/GameCard.tsx b/frontend/app/pong/GameCard.tsx
index 242cf7d4..6dd3e111 100644
--- a/frontend/app/pong/GameCard.tsx
+++ b/frontend/app/pong/GameCard.tsx
@@ -17,7 +17,7 @@ function UserCard({ user }: { user: PublicUserEntity }) {
           size="medium"
           href={`/user/${user.id}`}
           alt={user.name}
-          online={true}
+          id={user.id}
         />
       </div>
     </>
diff --git a/frontend/app/room/[id]/sidebar-item.tsx b/frontend/app/room/[id]/sidebar-item.tsx
index ea2dd41f..ba6fd317 100644
--- a/frontend/app/room/[id]/sidebar-item.tsx
+++ b/frontend/app/room/[id]/sidebar-item.tsx
@@ -110,7 +110,11 @@ export default function SidebarItem({
     <>
       <ContextMenu>
         <ContextMenuTrigger className="flex gap-2 items-center group hover:opacity-60">
-          <Avatar avatarURL={user.user.avatarURL} size="small" />
+          <Avatar
+            avatarURL={user.user.avatarURL}
+            size="small"
+            id={user.userId}
+          />
           <span className="text-muted-foreground text-sm whitespace-nowrap group-hover:text-primary">
             {truncateString(user.user.name, 15)}
             {room.accessLevel !== "DIRECT" && isUserOwner && " 👑"}
diff --git a/frontend/app/ui/room/ban-item.tsx b/frontend/app/ui/room/ban-item.tsx
index 5d3ec6db..4358ce44 100644
--- a/frontend/app/ui/room/ban-item.tsx
+++ b/frontend/app/ui/room/ban-item.tsx
@@ -39,7 +39,7 @@ export default function BanItem({
 
   return (
     <div key={user.id} className="flex items-center gap-x-2 mb-6">
-      <Avatar avatarURL={user.avatarURL} size="medium" />
+      <Avatar avatarURL={user.avatarURL} size="medium" id={user.id} />
       <div className="flex flex-col gap-y-1">
         <div className="text-xs font-semibold flex items-center gap-x-1">
           {user.name}
diff --git a/frontend/app/ui/room/invite-item.tsx b/frontend/app/ui/room/invite-item.tsx
index 9422f06c..7596d297 100644
--- a/frontend/app/ui/room/invite-item.tsx
+++ b/frontend/app/ui/room/invite-item.tsx
@@ -39,7 +39,7 @@ export default function InviteItem({
 
   return (
     <div key={user.id} className="flex items-center gap-x-2 mb-6">
-      <Avatar avatarURL={user.avatarURL} size="medium" />
+      <Avatar avatarURL={user.avatarURL} size="medium" id={user.id} />
       <div className="flex flex-col gap-y-1">
         <div className="text-xs font-semibold flex items-center gap-x-1">
           {user.name}
diff --git a/frontend/app/ui/room/message-item.tsx b/frontend/app/ui/room/message-item.tsx
index a379f7d4..e0b66662 100644
--- a/frontend/app/ui/room/message-item.tsx
+++ b/frontend/app/ui/room/message-item.tsx
@@ -21,6 +21,7 @@ export function MessageItem({
             avatarURL={message.user.avatarURL}
             size="medium"
             href={`/user/${message.user.id}`}
+            id={message.user.id}
           ></Avatar>
         </TooltipProvider>
       )}
diff --git a/frontend/app/ui/room/unban-item.tsx b/frontend/app/ui/room/unban-item.tsx
index 3d9e92c9..f631d11c 100644
--- a/frontend/app/ui/room/unban-item.tsx
+++ b/frontend/app/ui/room/unban-item.tsx
@@ -39,7 +39,7 @@ export default function UnbanItem({
 
   return (
     <div key={user.id} className="flex items-center gap-x-2 mb-6">
-      <Avatar avatarURL={user.avatarURL} size="medium" />
+      <Avatar avatarURL={user.avatarURL} size="medium" id={user.id} />
       <div className="flex flex-col gap-y-1">
         <div className="text-xs font-semibold flex items-center gap-x-1">
           {user.name}
diff --git a/frontend/app/ui/settings/avatar-form.tsx b/frontend/app/ui/settings/avatar-form.tsx
index 13354fa3..84dd8f2e 100644
--- a/frontend/app/ui/settings/avatar-form.tsx
+++ b/frontend/app/ui/settings/avatar-form.tsx
@@ -2,7 +2,13 @@ import { uploadAvatar } from "@/app/lib/actions";
 import { Avatar } from "@/app/ui/user/avatar";
 import { useRef } from "react";
 
-export default function AvatarForm({ avatarURL }: { avatarURL?: string }) {
+export default function AvatarForm({
+  avatarURL,
+  id,
+}: {
+  avatarURL?: string;
+  id?: number;
+}) {
   const inputRef = useRef<HTMLInputElement>(null);
   const submitAvatarForm = () => {
     const form = document.getElementById("avatar-form") as HTMLFormElement;
@@ -11,7 +17,7 @@ export default function AvatarForm({ avatarURL }: { avatarURL?: string }) {
   return (
     <form id="avatar-form" action={uploadAvatar}>
       <button type="button" onClick={() => inputRef.current?.click()}>
-        <Avatar avatarURL={avatarURL} size="large" />
+        <Avatar avatarURL={avatarURL} size="large" id={id} />
       </button>
       <input
         ref={inputRef}
diff --git a/frontend/app/ui/settings/profile-form.tsx b/frontend/app/ui/settings/profile-form.tsx
index 3865a074..59f9e060 100644
--- a/frontend/app/ui/settings/profile-form.tsx
+++ b/frontend/app/ui/settings/profile-form.tsx
@@ -28,7 +28,7 @@ export default function ProfileForm() {
   // Profile : the rest
   return (
     <>
-      <AvatarForm avatarURL={currentUser?.avatarURL} />
+      <AvatarForm avatarURL={currentUser?.avatarURL} id={currentUser?.id} />
       <form action={action}>
         <Stack space="space-y-4">
           <ProfileItem type="text" title="name" value={currentUser?.name} />
diff --git a/frontend/app/ui/user/avatar.tsx b/frontend/app/ui/user/avatar.tsx
index 2e71db43..0d6d83ee 100644
--- a/frontend/app/ui/user/avatar.tsx
+++ b/frontend/app/ui/user/avatar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
@@ -6,6 +8,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import Link from "next/link";
+import { useContext } from "react";
+import { OnlineContext } from "@/app/lib/hooks/useOnlineStatus";
 
 export type AvatarSize = "small" | "medium" | "large";
 
@@ -14,11 +18,16 @@ export interface Props {
   size: AvatarSize;
   href?: string;
   alt?: string;
-  online?: boolean;
+  id?: number;
 }
 
-export function Avatar({ avatarURL, size, href, alt, online }: Props) {
+export function Avatar({ avatarURL, size, href, alt, id }: Props) {
+  const onlineStatuses = useContext(OnlineContext);
+  const online = id ? onlineStatuses[id] : false;
   let sizeClass = "";
+  if (!avatarURL) {
+    return <Skeleton className={`flex-none rounded-full ${sizeClass}`} />;
+  }
   let onlineStatusClass = online ? "bg-green-500 " : "bg-gray-500 ";
   switch (size) {
     case "small":
diff --git a/frontend/app/ui/user/match-history.tsx b/frontend/app/ui/user/match-history.tsx
index 1eee8f11..de027359 100644
--- a/frontend/app/ui/user/match-history.tsx
+++ b/frontend/app/ui/user/match-history.tsx
@@ -22,6 +22,7 @@ function MatchDetailItem({
           avatarURL={detail.user.avatarURL}
           href={`/user/${detail.user.id}`}
           size="medium"
+          id={detail.user.id}
         />
         <div>{detail.user.name}</div>
         <div className={`font-bold ${textColor}`}>
diff --git a/frontend/app/ui/user/user-list.tsx b/frontend/app/ui/user/user-list.tsx
index 6368915f..9e16a38d 100644
--- a/frontend/app/ui/user/user-list.tsx
+++ b/frontend/app/ui/user/user-list.tsx
@@ -13,7 +13,6 @@ export default function UserList({
   users: PublicUserEntity[];
   avatarSize: AvatarSize;
 }) {
-  const onlineStatus = useContext(OnlineContext);
   return (
     <TooltipProvider delayDuration={0}>
       <div className="flex flex-wrap gap-2">
@@ -24,7 +23,7 @@ export default function UserList({
             size={avatarSize}
             href={`/user/${u.id}`}
             alt={u.name}
-            online={onlineStatus[u.id] === 1}
+            id={u.id}
             key={u.id}
           />
         ))}
diff --git a/frontend/app/user/[id]/page.tsx b/frontend/app/user/[id]/page.tsx
index cf7c328b..f30ab07c 100644
--- a/frontend/app/user/[id]/page.tsx
+++ b/frontend/app/user/[id]/page.tsx
@@ -47,7 +47,7 @@ export default async function FindUser({
   return (
     <div className="flex flex-col gap-4">
       <div>
-        <Avatar avatarURL={user.avatarURL} size="large" />
+        <Avatar avatarURL={user.avatarURL} size="large" id={user.id} />
       </div>
       <div className="text-3xl font-bold">{user.name}</div>
       {user.id !== currentUserId && (