diff --git a/frontend/pronunciationAppFront/src/App.jsx b/frontend/pronunciationAppFront/src/App.jsx
index f7e601fb1..3bcc203e2 100644
--- a/frontend/pronunciationAppFront/src/App.jsx
+++ b/frontend/pronunciationAppFront/src/App.jsx
@@ -1,12 +1,15 @@
 import './App.css'
 import Cards from "./Cards.jsx"
-import Header from "./Hero.jsx";
+import Header from "./Header.jsx";
+import UserAvatar from './UserAvatar.jsx';
 
-function App() {
+export default function App() {
 
 
   return (
     <>
+      <UserAvatar />
+      
       <h2>Welcome to PronunciationApp</h2>
 
       <Header />
@@ -14,6 +17,4 @@ function App() {
       <Cards />
     </>
   );
-}
-
-export default App
+}
\ No newline at end of file
diff --git a/frontend/pronunciationAppFront/src/Hero.jsx b/frontend/pronunciationAppFront/src/Header.jsx
similarity index 93%
rename from frontend/pronunciationAppFront/src/Hero.jsx
rename to frontend/pronunciationAppFront/src/Header.jsx
index 1d889fc1c..57e3dac3b 100644
--- a/frontend/pronunciationAppFront/src/Hero.jsx
+++ b/frontend/pronunciationAppFront/src/Header.jsx
@@ -1,4 +1,4 @@
-export default function HeroSection(){
+export default function HeaderSection(){
 
 
 return (
diff --git a/frontend/pronunciationAppFront/src/UserAvatar.jsx b/frontend/pronunciationAppFront/src/UserAvatar.jsx
new file mode 100644
index 000000000..e4a11aa5c
--- /dev/null
+++ b/frontend/pronunciationAppFront/src/UserAvatar.jsx
@@ -0,0 +1,26 @@
+import { Avatar } from "@mui/material";
+import { fetchUser } from "./data-api";
+import { useState, useEffect } from "react";
+
+export default function UserAvatar() {
+    const [user, setUser] = useState({});
+
+    useEffect(() => {
+        const getUser = async () => {
+            try {
+                const data = await fetchUser ();
+                setUser(data);
+            } catch (error) {
+                console.error("Failed to fetch user:", error);
+            }
+        };
+
+        getUser();
+    }, []);
+
+    return(
+        <>
+            <Avatar sx={{ width: 56, height: 56 }} >{user.name}</Avatar>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/frontend/pronunciationAppFront/src/data-api.js b/frontend/pronunciationAppFront/src/data-api.js
index acb9e606d..6c63b177a 100644
--- a/frontend/pronunciationAppFront/src/data-api.js
+++ b/frontend/pronunciationAppFront/src/data-api.js
@@ -1,7 +1,7 @@
 // api.js
 import axios from "axios";
 
-const BASE_URL = "https://a387bb02-2aa0-41a6-b8f7-9cc5247b9d5f.mock.pstmn.io";
+const BASE_URL = "https://c6e298f1-9bc6-4008-b85e-684c309e8250.mock.pstmn.io";
 
 export const fetchWords = async () => {
   try {
@@ -12,3 +12,13 @@ export const fetchWords = async () => {
     throw error;
   }
 };
+
+export const fetchUser = async () => {
+  try {
+    const response = await axios.get(`${BASE_URL}/user`);
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching user:", error);
+    throw error;
+  }
+}
\ No newline at end of file