diff --git a/src/components/player/atoms/WatchPartyStatus.tsx b/src/components/player/atoms/WatchPartyStatus.tsx
index 5f04ed68..edcb82c1 100644
--- a/src/components/player/atoms/WatchPartyStatus.tsx
+++ b/src/components/player/atoms/WatchPartyStatus.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Button } from "@/components/buttons/Button";
 import { Icon, Icons } from "@/components/Icon";
 import { useWatchPartySync } from "@/hooks/useWatchPartySync";
+import { useAuthStore } from "@/stores/auth";
 import { getProgressPercentage } from "@/stores/progress";
 import { useWatchPartyStore } from "@/stores/watchParty";
 
@@ -13,6 +14,7 @@ export function WatchPartyStatus() {
   const [expanded, setExpanded] = useState(false);
   const [showNotification, setShowNotification] = useState(false);
   const [lastUserCount, setLastUserCount] = useState(1);
+  const account = useAuthStore((s) => s.account);
 
   const {
     roomUsers,
@@ -43,6 +45,14 @@ export function WatchPartyStatus() {
     setExpanded(!expanded);
   };
 
+  // Get display name for a user (nickname if it's the current user, otherwise truncated userId)
+  const getDisplayName = (userId: string) => {
+    if (account?.userId === userId && account?.nickname) {
+      return account.nickname;
+    }
+    return `${userId.substring(0, 12)}...`;
+  };
+
   return (
     <div
       className={`absolute top-4 right-4 z-50 p-2 bg-mediaCard-shadow bg-opacity-70 backdrop-blur-sm rounded-md text-white text-xs 
@@ -106,7 +116,7 @@ export function WatchPartyStatus() {
                     className={`w-3 h-3 ${user.isHost ? "text-onboarding-best" : ""}`}
                   />
                   <span className={user.isHost ? "text-onboarding-best" : ""}>
-                    {user.userId.substring(0, 8)}...
+                    {getDisplayName(user.userId)}
                   </span>
                 </span>
                 <span className="text-type-secondary">
diff --git a/src/components/player/atoms/settings/WatchPartyView.tsx b/src/components/player/atoms/settings/WatchPartyView.tsx
index d10b0eab..78297eb4 100644
--- a/src/components/player/atoms/settings/WatchPartyView.tsx
+++ b/src/components/player/atoms/settings/WatchPartyView.tsx
@@ -34,6 +34,14 @@ export function WatchPartyView({ id }: { id: string }) {
   const [validationError, setValidationError] = useState<string | null>(null);
   const account = useAuthStore((s) => s.account);
 
+  // Get display name for a user (nickname if it's the current user, otherwise truncated userId)
+  const getDisplayName = (userId: string) => {
+    if (account?.userId === userId && account?.nickname) {
+      return account.nickname;
+    }
+    return `${userId.substring(0, 8)}...`;
+  };
+
   const backendMeta = useAsync(async () => {
     if (!backendUrl) return;
     return getBackendMeta(backendUrl);
@@ -322,7 +330,7 @@ export function WatchPartyView({ id }: { id: string }) {
                                       : "text-type-secondary"
                                   }
                                 >
-                                  {user.userId.substring(0, 8)}...
+                                  {getDisplayName(user.userId)}
                                 </span>
                               </span>
                               <span className="text-type-secondary">