diff --git a/src/app/components/player/skin-part-image.tsx b/src/app/components/player/skin-part-image.tsx
index 85cbe09..a20aa36 100644
--- a/src/app/components/player/skin-part-image.tsx
+++ b/src/app/components/player/skin-part-image.tsx
@@ -76,20 +76,20 @@ export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImag
               }}
             />
           </DialogTrigger>
-          <DialogContent className="w-fit min-w-72 h-fit">
+          <DialogContent className="w-fit h-fit">
             <DialogHeader>
               <DialogTitle>
                 {playerName}&apos;s {partName}
               </DialogTitle>
               <DialogDescription>See the skin part below.</DialogDescription>
             </DialogHeader>
-            <div className="flex items-center w-max flex-col divide-y md:flex-row md:divide-x md:divide-y-0 text-muted-foreground">
+            <div className="flex items-center w-full 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">
+                  <div key={index} className="p-2 text-center items-center font-semibold flex flex-col gap-2">
                     <p>{overlay.title}</p>
                     <img
-                      className="h-[256px] w-max"
+                      className="h-[200px] md:h-[256px]"
                       src={url + (overlay.overlays ? "?overlays=true" : "")}
                       alt={`The player's ${partName}`}
                       loading="lazy"