diff --git a/app/components/float.tsx b/app/components/float.tsx
new file mode 100644
index 0000000..221532d
--- /dev/null
+++ b/app/components/float.tsx
@@ -0,0 +1,16 @@
+export function Float({ float }: { float: number }) {
+    return (
+        <>
+            <div className="w-full flex justify-center">
+                <div className="absolute mx-2 h-4 w-1 mt-1 rounded-xl bg-white" style={{left: `calc(${float}*100% - var(--spacing))`}}></div>
+                <div className="w-full h-2 flex my-2 px-2">
+                    <div className="w-7/100 h-full rounded-l-xl bg-green-800"></div>
+                    <div className="w-8/100 h-full bg-green-500"></div>
+                    <div className="w-23/100 h-full bg-lime-400"></div>
+                    <div className="w-7/100 h-full bg-orange-400"></div>
+                    <div className="w-55/100 h-full rounded-r-xl bg-red-400"></div>
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/app/components/weapon.tsx b/app/components/weapon.tsx
index a50cd31..8217830 100644
--- a/app/components/weapon.tsx
+++ b/app/components/weapon.tsx
@@ -1,24 +1,46 @@
-import { Button } from "@heroui/react";
+import { Button, Surface, Typography } from "@heroui/react";
+import { Float } from "./float";
 
 export function Weapon({
     weapon_id,
     color,
+    display = "Weapon",
+    float = 0,
+    pattern = 0,
     paint_index = 0,
 }: {
     weapon_id: string;
     color: string;
+    display?: string;
+    float?: number;
+    pattern?: number;
     paint_index?: number;
 }) {
-    const acolor = `${color}64`
+    const acolor = `${color}64`;
     return (
-        <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="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>
-        </Button>
+        <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>
+                </div>
+            </Button>
+        </Surface>
     );
 }