diff --git a/modules/frontend/src/App.tsx b/modules/frontend/src/App.tsx
index 2b0ffa7..6b2ee5f 100644
--- a/modules/frontend/src/App.tsx
+++ b/modules/frontend/src/App.tsx
@@ -1,39 +1,8 @@
-import React, { useEffect, useState } from "react";
-import { DefaultService } from "./api/services/DefaultService"; // adjust path if needed
-import type { User } from "./api/models/User"; // adjust path if needed
+import React from "react";
+import UserPage from "./components/UserPage/UserPage";
 
 const App: React.FC = () => {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const getUserInfo = async () => {
-      try {
-        const userInfo = await DefaultService.getUsers("1", "all");
-        setUser(userInfo);
-      } catch (err) {
-        console.error(err);
-        setError("Failed to fetch user info.");
-      } finally {
-        setLoading(false);
-      }
-    };
-    getUserInfo();
-  }, []);
-
-  if (loading) return <div>Loading...</div>;
-  if (error) return <div>{error}</div>;
-  if (!user) return <div>No user found.</div>;
-
-  return (
-    <div style={{ padding: "2rem" }}>
-      <h1>User Info</h1>
-      <p><strong>ID:</strong> {user.user_id}</p>
-      <p><strong>Name:</strong> {user.nickname}</p>
-      <p><strong>Email:</strong> {user.mail}</p>
-    </div>
-  );
+  return <UserPage />;
 };
 
 export default App;
diff --git a/modules/frontend/src/components/UserPage/UserPage.module.css b/modules/frontend/src/components/UserPage/UserPage.module.css
new file mode 100644
index 0000000..75195bf
--- /dev/null
+++ b/modules/frontend/src/components/UserPage/UserPage.module.css
@@ -0,0 +1,97 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 3rem 1rem;
+  background-color: #f5f6fa;
+  min-height: 100vh;
+  font-family: "Inter", sans-serif;
+}
+
+.card {
+  background-color: #ffffff;
+  border-radius: 1rem;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  max-width: 400px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.avatar {
+  margin-bottom: 1.5rem;
+}
+
+.avatarImg {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid #4a90e2;
+}
+
+.avatarPlaceholder {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background-color: #dcdde1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+  color: #4a4a4a;
+  font-weight: bold;
+  border: 3px solid #4a90e2;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.name {
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin: 0.25rem 0;
+  color: #2f3640;
+}
+
+.nickname {
+  font-size: 1rem;
+  color: #718093;
+  margin-bottom: 1rem;
+}
+
+.desc {
+  font-size: 1rem;
+  color: #353b48;
+  margin-bottom: 1rem;
+}
+
+.created {
+  font-size: 0.9rem;
+  color: #7f8fa6;
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80vh;
+  font-size: 1.5rem;
+  color: #4a90e2;
+}
+
+.error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80vh;
+  color: #e84118;
+  font-weight: 600;
+  font-size: 1.2rem;
+}
diff --git a/modules/frontend/src/components/UserPage/UserPage.tsx b/modules/frontend/src/components/UserPage/UserPage.tsx
new file mode 100644
index 0000000..b0db90c
--- /dev/null
+++ b/modules/frontend/src/components/UserPage/UserPage.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import { DefaultService } from "../../api/services/DefaultService"; // adjust path
+import type { User } from "../../api/models/User";
+import styles from "./UserPage.module.css";
+
+const UserPage: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const getUserInfo = async () => {
+      try {
+        const userInfo = await DefaultService.getUsers("1", "all");
+        setUser(userInfo);
+      } catch (err) {
+        console.error(err);
+        setError("Failed to fetch user info.");
+      } finally {
+        setLoading(false);
+      }
+    };
+    getUserInfo();
+  }, []);
+
+  if (loading) return <div className={styles.loader}>Loading...</div>;
+  if (error) return <div className={styles.error}>{error}</div>;
+  if (!user) return <div className={styles.error}>User not found.</div>;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles.avatar}>
+          {user.avatar_id ? (
+            <img
+              src={`/images/${user.avatar_id}.png`}
+              alt="User Avatar"
+              className={styles.avatarImg}
+            />
+          ) : (
+            <div className={styles.avatarPlaceholder}>
+              {user.disp_name?.[0] || "U"}
+            </div>
+          )}
+        </div>
+
+        <div className={styles.info}>
+          <h1 className={styles.name}>{user.disp_name || user.nickname}</h1>
+          <p className={styles.nickname}>@{user.nickname}</p>
+          {user.user_desc && <p className={styles.desc}>{user.user_desc}</p>}
+          <p className={styles.created}>
+            Joined: {new Date(user.creation_date).toLocaleDateString()}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserPage;