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