diff --git a/src/components/screens/MatchmakingScreen.tsx b/src/components/screens/MatchmakingScreen.tsx
index 6860ad5..df781f5 100644
--- a/src/components/screens/MatchmakingScreen.tsx
+++ b/src/components/screens/MatchmakingScreen.tsx
@@ -126,14 +126,14 @@ export function MatchmakingScreen() {
           </>
         )}
 
-        <div className="grid grid-cols-4 gap-3 mt-8">
+        <div className="grid grid-cols-4 gap-2 sm:gap-3 mt-8 w-full max-w-xs">
           {slots.map((i) => {
             const p = mm.players[i];
             return (
               <div
                 key={i}
                 className={
-                  "w-16 h-20 rounded-2xl flex flex-col items-center justify-center gap-1 transition " +
+                  "h-20 w-full rounded-2xl flex flex-col items-center justify-center gap-1 transition " +
                   (p ? "glass gold-border" : "border border-dashed border-navy-700/60 bg-navy-900/30")
                 }
               >
diff --git a/src/components/screens/ProfileScreen.tsx b/src/components/screens/ProfileScreen.tsx
index 141fe55..80e5c68 100644
--- a/src/components/screens/ProfileScreen.tsx
+++ b/src/components/screens/ProfileScreen.tsx
@@ -174,11 +174,11 @@ export function ProfileScreen() {
               key={a.id}
               onClick={() => updateProfile({ avatar: a.id })}
               className={cn(
-                "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition",
+                "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition overflow-hidden",
                 profile.avatar === a.id ? "gold-border ring-2 ring-gold-400/60" : "border border-transparent hover:bg-navy-800"
               )}
             >
-              {a.emoji}
+              <Avatar id={a.id} size={40} />
             </button>
           ))}
         </div>