diff --git a/src/app/components/player/skin-part-image.tsx b/src/app/components/player/skin-part-image.tsx
index b1224c7..85cbe09 100644
--- a/src/app/components/player/skin-part-image.tsx
+++ b/src/app/components/player/skin-part-image.tsx
@@ -83,13 +83,13 @@ export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImag
               </DialogTitle>
               <DialogDescription>See the skin part below.</DialogDescription>
             </DialogHeader>
-            <div className="flex items-center flex-row w-full divide-x text-muted-foreground">
+            <div className="flex items-center w-max flex-col divide-y md:flex-row md:divide-x md:divide-y-0 text-muted-foreground">
               {skinPartOverlay.map((overlay, index) => {
                 return (
                   <div key={index} className="p-2 text-center font-semibold flex flex-col gap-2">
                     <p>{overlay.title}</p>
                     <img
-                      className="h-[256px]"
+                      className="h-[256px] w-max"
                       src={url + (overlay.overlays ? "?overlays=true" : "")}
                       alt={`The player's ${partName}`}
                       loading="lazy"