diff --git a/src/app/components/player/player-view.tsx b/src/app/components/player/player-view.tsx
index 39c5212..da7c7d3 100644
--- a/src/app/components/player/player-view.tsx
+++ b/src/app/components/player/player-view.tsx
@@ -1,11 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import { CachedPlayer, SkinPart } from "mcutils-library";
-import Image from "next/image";
 import { ReactElement } from "react";
 import { Card } from "../card";
 import { CodeDialog } from "../code-dialog";
 import { Separator } from "../ui/separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { SkinPartImage } from "./skin-part-image";
 
 type PlayerViewProps = {
@@ -31,15 +29,8 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
           </CodeDialog>
         </div>
 
-        <div className="flex justify-center xs:justify-start">
-          <Image
-            className="w-[96px] h-[96px]"
-            src={player.skin.parts.head}
-            width={96}
-            height={96}
-            quality={100}
-            alt="The player's skin"
-          />
+        <div>
+          <SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />
         </div>
 
         <div className="flex flex-col gap-2">
@@ -56,18 +47,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
               {Object.entries(player.skin.parts)
                 .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
                 .map(([part, url]) => {
-                  return (
-                    <Tooltip key={part}>
-                      <TooltipTrigger>
-                        <SkinPartImage playerName={player.username} part={part as SkinPart} url={url} />
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>
-                          Click to view {player.username}&apos;s {part}
-                        </p>
-                      </TooltipContent>
-                    </Tooltip>
-                  );
+                  return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
                 })}
             </div>
           </div>
diff --git a/src/app/components/player/skin-part-image.tsx b/src/app/components/player/skin-part-image.tsx
index 2f2e938..2726156 100644
--- a/src/app/components/player/skin-part-image.tsx
+++ b/src/app/components/player/skin-part-image.tsx
@@ -13,6 +13,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../ui/dialog";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 type SkinPartImageProps = {
   /**
@@ -29,30 +30,46 @@ type SkinPartImageProps = {
    * The URL to the skin part.
    */
   url: string;
+
+  /**
+   * The size to display the skin part.
+   */
+  size?: number;
 };
 
-export function SkinPartImage({ playerName, part, url }: SkinPartImageProps): ReactElement {
+export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImageProps): ReactElement {
+  const partName = capitalizeFirstLetter(part);
+
   return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
-      </DialogTrigger>
-      <DialogContent className="w-fit min-w-72 h-fit">
-        <DialogHeader>
-          <DialogTitle>
-            {playerName}&apos;s {capitalizeFirstLetter(part)}
-          </DialogTitle>
-          <DialogDescription>See the skin part below.</DialogDescription>
-        </DialogHeader>
-        <div className="flex items-center flex-col w-full">
-          <img className="h-[256px]" src={url} alt={`The player's ${part}`} loading="lazy" />
-        </div>
-        <DialogFooter>
-          <Link href={url}>
-            <Button>Open in new tab</Button>
-          </Link>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <Tooltip>
+      <TooltipTrigger>
+        <Dialog>
+          <DialogTrigger asChild>
+            <img className={`h-[${size}px]`} src={url} alt={`The player's ${part}`} loading="lazy" />
+          </DialogTrigger>
+          <DialogContent className="w-fit min-w-72 h-fit">
+            <DialogHeader>
+              <DialogTitle>
+                {playerName}&apos;s {partName}
+              </DialogTitle>
+              <DialogDescription>See the skin part below.</DialogDescription>
+            </DialogHeader>
+            <div className="flex items-center flex-col w-full">
+              <img className="h-[256px]" src={url} alt={`The player's ${partName}`} loading="lazy" />
+            </div>
+            <DialogFooter>
+              <Link href={url}>
+                <Button>Open in new tab</Button>
+              </Link>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          Click to view {playerName}&apos;s {partName}
+        </p>
+      </TooltipContent>
+    </Tooltip>
   );
 }