diff --git a/app/components/weapon.tsx b/app/components/weapon.tsx
index 38f6a55..3f4483b 100644
--- a/app/components/weapon.tsx
+++ b/app/components/weapon.tsx
@@ -18,24 +18,24 @@ export function Weapon({
 }) {
     const acolor = `${color}64`;
     return (
-        <Button className="bg-mist-700 flex flex-col h-fit w-fit p-0 rounded-none gap-0 hover:bg-indigo-800 active:bg-indigo-900">
-            <div className="flex flex-col">
+        <Button className="bg-mist-700 flex flex-col h-full p-0 rounded-none gap-0 hover:bg-indigo-800 active:bg-indigo-900">
+            <div className="flex flex-col w-full h-full">
                 <div
-                    className="bg-linear-to-b pointer-events-none"
+                    className="bg-linear-to-b pointer-events-none w-full h-full"
                     style={{
                         background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
                     }}
                 >
                     <img
                         src={`/skins/${weapon_id}_${paint_index}.png`}
-                        className="pointer-events-none"
+                        className="pointer-events-none object-contain object-bottom h-full"
                     />
                 </div>
                 <div
                     className={`h-1 w-full`}
                     style={{ background: `${color}` }}
                 ></div>
-                <Typography.Heading level={6} className="px-2">
+                <Typography.Heading level={6} className="px-2 text-wrap">
                     {display}
                 </Typography.Heading>
                 <Float float={float} />