diff --git a/apps/client/src/features/comment/components/comment-dialog.tsx b/apps/client/src/features/comment/components/comment-dialog.tsx
index 11afe732..312b89b8 100644
--- a/apps/client/src/features/comment/components/comment-dialog.tsx
+++ b/apps/client/src/features/comment/components/comment-dialog.tsx
@@ -13,6 +13,7 @@ import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
 import { useCreateCommentMutation } from "@/features/comment/queries/comment-query";
 import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
 import { useEditor } from "@tiptap/react";
+import { UserAvatar } from "@/components/ui/user-avatar.tsx";
 
 interface CommentDialogProps {
   editor: ReturnType<typeof useEditor>;
@@ -93,9 +94,12 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
     >
       <Stack gap={2}>
         <Group>
-          <Avatar size="sm" color="blue">
-            {currentUser.user.name.charAt(0)}
-          </Avatar>
+          <UserAvatar
+            color="blue"
+            size="sm"
+            avatarUrl={currentUser.user.avatarUrl}
+            name={currentUser.user.name}
+          />
           <div style={{ flex: 1 }}>
             <Group justify="space-between" wrap="nowrap">
               <Text size="sm" fw={500} lineClamp={1}>
diff --git a/apps/client/src/features/comment/queries/comment-query.ts b/apps/client/src/features/comment/queries/comment-query.ts
index 0cc6d377..52549d46 100644
--- a/apps/client/src/features/comment/queries/comment-query.ts
+++ b/apps/client/src/features/comment/queries/comment-query.ts
@@ -45,7 +45,7 @@ export function useCreateCommentMutation() {
       //queryClient.setQueryData(RQ_KEY(data.pageId), comments);
       //}
 
-      queryClient.invalidateQueries({ queryKey: RQ_KEY(data.pageId) });
+      queryClient.refetchQueries({ queryKey: RQ_KEY(data.pageId) });
       notifications.show({ message: "Comment created successfully" });
     },
     onError: (error) => {
diff --git a/apps/client/src/features/user/components/account-avatar.tsx b/apps/client/src/features/user/components/account-avatar.tsx
index 61f4b7da..f1d2e982 100644
--- a/apps/client/src/features/user/components/account-avatar.tsx
+++ b/apps/client/src/features/user/components/account-avatar.tsx
@@ -13,23 +13,18 @@ export default function AccountAvatar() {
   const [currentUser] = useAtom(currentUserAtom);
   const [, setUser] = useAtom(userAtom);
   const [file, setFile] = useState<File | null>(null);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
   const handleFileChange = async (selectedFile: File) => {
     if (!selectedFile) {
       return;
     }
 
-    if (previewUrl) {
-      URL.revokeObjectURL(previewUrl);
-    }
-
     setFile(selectedFile);
-    setPreviewUrl(URL.createObjectURL(selectedFile));
-
     try {
       setIsLoading(true);
-      await uploadAvatar(selectedFile);
+      const avatar = await uploadAvatar(selectedFile);
+
+      setUser((prev) => ({ ...prev, avatarUrl: avatar.fileName }));
     } catch (err) {
       console.log(err);
     } finally {
@@ -37,6 +32,8 @@ export default function AccountAvatar() {
     }
   };
 
+  console.log(currentUser?.user.avatarUrl);
+
   return (
     <>
       <FileButton onChange={handleFileChange} accept="image/png,image/jpeg">
@@ -47,8 +44,8 @@ export default function AccountAvatar() {
               component="button"
               radius="xl"
               size="60px"
-              avatarUrl={previewUrl || currentUser.user.avatarUrl}
-              name={currentUser.user.name}
+              avatarUrl={currentUser?.user.avatarUrl}
+              name={currentUser?.user.name}
               style={{ cursor: "pointer" }}
             />
           </Tooltip>
diff --git a/apps/client/src/features/user/services/user-service.ts b/apps/client/src/features/user/services/user-service.ts
index 3685fe37..78995655 100644
--- a/apps/client/src/features/user/services/user-service.ts
+++ b/apps/client/src/features/user/services/user-service.ts
@@ -1,5 +1,6 @@
 import api from "@/lib/api-client";
 import { ICurrentUser, IUser } from "@/features/user/types/user.types";
+import { IAttachment } from "@/lib/types.ts";
 
 export async function getMyInfo(): Promise<ICurrentUser> {
   const req = await api.post<ICurrentUser>("/users/me");
@@ -11,7 +12,7 @@ export async function updateUser(data: Partial<IUser>): Promise<IUser> {
   return req.data as IUser;
 }
 
-export async function uploadAvatar(file: File) {
+export async function uploadAvatar(file: File): Promise<any> {
   const formData = new FormData();
   formData.append("type", "avatar");
   formData.append("image", file);
@@ -21,5 +22,6 @@ export async function uploadAvatar(file: File) {
       "Content-Type": "multipart/form-data",
     },
   });
-  return req.data;
+  console.log(req);
+  return req;
 }