diff --git a/app/components/skin_dialog.tsx b/app/components/skin_dialog.tsx
new file mode 100644
index 0000000..76bfdf9
--- /dev/null
+++ b/app/components/skin_dialog.tsx
@@ -0,0 +1,101 @@
+import { Button, Modal, Surface, Typography } from "@heroui/react";
+import type { Dispatch, SetStateAction } from "react";
+import { AgentInfo, WeaponInfo } from "~/types/skin";
+import { Float } from "./float";
+
+export function SkinDialog({
+    isOpen,
+    setIsOpen,
+    skin,
+}: {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    skin: WeaponInfo | AgentInfo;
+}) {
+    const acolor = `${skin.color}64`;
+    return (
+        <Modal isOpen={isOpen}>
+            <Modal.Backdrop
+                variant="blur"
+                shouldCloseOnInteractOutside={(_element) => {
+                    setIsOpen(false);
+                    return true;
+                }}
+            >
+                <Modal.Container size="lg">
+                    <Modal.Dialog>
+                        <Modal.CloseTrigger
+                            onPress={() => {
+                                setIsOpen(false);
+                            }}
+                        />
+                        <Modal.Body>
+                            <div className="flex flex-col gap-2">
+                                <Typography.Heading
+                                    level={4}
+                                    className="py-1 text-wrap"
+                                >
+                                    {skin.display}
+                                </Typography.Heading>
+                                <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 w-full h-full relative"
+                                            style={{
+                                                background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
+                                            }}
+                                        >
+                                            <img
+                                                src={`/skins/${skin.name}_${skin instanceof WeaponInfo ? skin.paint_index : 0}.png`}
+                                                className="pointer-events-none object-contain object-bottom h-full"
+                                                alt="Weapon image"
+                                            />
+                                            <Surface className="rounded-full w-fit h-fit p-2 absolute bottom-2 right-2" variant="secondary">
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    fill="none"
+                                                    viewBox="0 0 24 24"
+                                                    strokeWidth={1.5}
+                                                    stroke="currentColor"
+                                                    className="size-6 m-0"
+                                                >
+                                                    <path
+                                                        strokeLinecap="round"
+                                                        strokeLinejoin="round"
+                                                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+                                                    />
+                                                </svg>
+                                            </Surface>
+                                        </div>
+                                        <div
+                                            className={`h-1 w-full`}
+                                            style={{
+                                                background: `${skin.color}`,
+                                            }}
+                                        ></div>
+                                    </div>
+                                </Button>
+                                {skin instanceof WeaponInfo && (
+                                    <>
+                                        <Typography.Paragraph>
+                                            Float: {skin.float}
+                                        </Typography.Paragraph>
+                                        <Float float={skin.float} />
+                                    </>
+                                )}
+                                {skin instanceof WeaponInfo && (
+                                    <Typography.Paragraph>
+                                        Pattern: {skin.pattern}
+                                    </Typography.Paragraph>
+                                )}
+                                <Typography.Code>
+                                    Transaction id: {skin.id}
+                                </Typography.Code>
+                            </div>
+                        </Modal.Body>
+                    </Modal.Dialog>
+                </Modal.Container>
+            </Modal.Backdrop>
+        </Modal>
+    );
+}