diff --git a/app/components/inventory.tsx b/app/components/inventory.tsx
index 36d7d07..e801f55 100644
--- a/app/components/inventory.tsx
+++ b/app/components/inventory.tsx
@@ -13,6 +13,10 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
     const [weapons, setWeapons] = useState<Array<WeaponInfo>>([]);
     const { notify } = useNotification();
 
+    const setWeapon = (index:number, newWeapon:WeaponInfo) => {
+        setWeapons(weapons.map((v,i) => (i===index ? newWeapon: v)))
+    }
+
     useEffect(() => {
         const fetch_weapons = async () => {
             let response = await fetch(
@@ -141,19 +145,22 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                     <div className="flex gap-2">
                         {knife && (
                             <SkinTile
-                                skinInfo={knife}
+                                skin={knife}
+                                setSkin={(newSkin) => setKnife(newSkin as WeaponInfo)}
                                 side={side}
                             ></SkinTile>
                         )}
                         {gloves && (
                             <SkinTile
-                                skinInfo={gloves}
+                                skin={gloves}
+                                setSkin={(newSkin) => setGloves(newSkin as WeaponInfo)}
                                 side={side}
                             ></SkinTile>
                         )}
                         {agent && (
                             <SkinTile
-                                skinInfo={agent}
+                                skin={agent}
+                                setSkin={(newSkin) => setAgent(newSkin as AgentInfo)}
                                 side={side}
                             ></SkinTile>
                         )}
@@ -167,7 +174,8 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                         {weapons.map((v, i) => (
                             <SkinTile
                                 key={i}
-                                skinInfo={v}
+                                skin={v}
+                                setSkin={(newWeapon) => setWeapon(i, newWeapon as WeaponInfo)}
                                 side={side}
                             />
                         ))}
diff --git a/app/components/skin_selector.tsx b/app/components/skin_selector.tsx
index d2288d7..fe8a67a 100644
--- a/app/components/skin_selector.tsx
+++ b/app/components/skin_selector.tsx
@@ -17,7 +17,7 @@ export function SkinSelector({
     setIsOpen,
     skin,
     setSkin,
-    side
+    side,
 }: {
     isOpen: boolean;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
@@ -32,7 +32,7 @@ export function SkinSelector({
         if (skin instanceof WeaponInfo) {
             const newSkin = new WeaponInfo(skin);
             newSkin.paint_index = v.paint_index;
-            newSkin.display = newSkin.display.split("|")[0] + " | " + v.display;
+            newSkin.display = v.display === "" ? newSkin.display : newSkin.display.split("|")[0] + " | " + v.display;
             newSkin.min_float = v.min_float;
             newSkin.max_float = v.max_float;
             newSkin.color = v.color;
@@ -70,6 +70,7 @@ export function SkinSelector({
             fetchSkins();
         }
     }, [isOpen]);
+
     return (
         <Modal isOpen={isOpen}>
             <Modal.Backdrop
@@ -79,7 +80,7 @@ export function SkinSelector({
                     return true;
                 }}
             >
-                <Modal.Container size="lg">
+                <Modal.Container size="cover">
                     <Modal.Dialog>
                         <Modal.CloseTrigger
                             onPress={() => {
@@ -87,7 +88,7 @@ export function SkinSelector({
                             }}
                         />
                         <Modal.Body className="mt-6">
-                            <div className="flex flex-col gap-2">
+                            <div className="grid grid-cols-4 gap-2">
                                 {skins &&
                                     skins.map((v, i) => (
                                         <Button
@@ -95,7 +96,10 @@ export function SkinSelector({
                                                 setPaint(v);
                                                 setIsOpen(false);
                                             }}
-                                            className="flex flex-col w-full h-fit items-center justify-start"
+                                            className="flex flex-col w-full h-fit items-center justify-start rounded-none p-0"
+                                            style={{
+                                                background: `linear-gradient(to bottom, #1f2937, ${v.color}64)`,
+                                            }}
                                         >
                                             <img
                                                 key={i}
@@ -106,6 +110,12 @@ export function SkinSelector({
                                             <Typography.Heading level={3}>
                                                 {v.display}
                                             </Typography.Heading>
+                                            <div
+                                                className="h-1 w-full"
+                                                style={{
+                                                    backgroundColor: v.color,
+                                                }}
+                                            ></div>
                                         </Button>
                                     ))}
                             </div>
diff --git a/app/components/skin_tile.tsx b/app/components/skin_tile.tsx
index bc0a3e5..198dc32 100644
--- a/app/components/skin_tile.tsx
+++ b/app/components/skin_tile.tsx
@@ -1,18 +1,19 @@
 import { Button, Typography } from "@heroui/react";
 import { Float } from "./float";
-import { useState } from "react";
+import { useState, type Dispatch, type SetStateAction } from "react";
 import { SkinDialog } from "./skin_dialog";
 import { WeaponInfo, AgentInfo } from "~/types/skin";
 
 export function SkinTile({
-    skinInfo,
+    skin,
+    setSkin,
     side,
 }: {
-    skinInfo: WeaponInfo | AgentInfo;
+    skin: WeaponInfo | AgentInfo;
+    setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>
     side: "T" | "CT";
 }) {
     const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [skin, setSkin] = useState(skinInfo);
     const acolor = `${skin.color}64`;
     return (
         <>