diff --git a/ui/src/app/components/adventurer/DeathDialog.tsx b/ui/src/app/components/adventurer/DeathDialog.tsx
index e82e2511f..1f097ea5c 100644
--- a/ui/src/app/components/adventurer/DeathDialog.tsx
+++ b/ui/src/app/components/adventurer/DeathDialog.tsx
@@ -37,7 +37,11 @@ export const DeathDialog = () => {
     adventurersByXPdata?.adventurers ?? []
   );
 
+  console.log(adventurersByXPdata);
+  console.log(rank);
+
   const ordinalRank = getOrdinalSuffix(rank + 1 ?? 0);
+  console.log(ordinalRank);
 
   return (
     <>
@@ -56,11 +60,16 @@ export const DeathDialog = () => {
             <span className="text-lg sm:text-2xl text-terminal-yellow">
               {deathMessage}
             </span>
-            <p className="sm:text-2xl">
-              {adventurer?.name} died level {adventurer?.level} with {""}
-              {adventurer?.xp} XP, a valiant effort! Make sure to share your
-              score. Continue the journey with another adventurer:{" "}
-            </p>
+            <span className="flex flex-col gap-1 sm:text-2xl">
+              <p>
+                {adventurer?.name} died at {ordinalRank} on the leaderboard with{" "}
+                {adventurer?.xp} XP, a valiant effort!
+              </p>{" "}
+              <p>
+                Make sure to share your score. Continue the journey with another
+                adventurer.
+              </p>
+            </span>
           </div>
           <TwitterShareButton
             text={`RIP ${adventurer?.name}, who died at ${ordinalRank} place on the #LootSurvivor leaderboard.\n\nThink you can beat ${adventurer?.xp} XP? Enter here and try to survive: ${appUrl}\n\n@lootrealms #Starknet #Play2Die #LootSurvivor`}
diff --git a/ui/src/app/components/adventurer/Info.tsx b/ui/src/app/components/adventurer/Info.tsx
index b6b26e8c7..6db2537cc 100644
--- a/ui/src/app/components/adventurer/Info.tsx
+++ b/ui/src/app/components/adventurer/Info.tsx
@@ -147,10 +147,6 @@ export default function Info({
                     : 0}
                   {formatAdventurer.gold === 511 ? "Full" : ""}
                 </span>
-                {/* <span className="flex text-lg items-center sm:text-3xl">
-                <BagIcon className="self-center w-4 h-4 fill-current" />{" "}
-                {`${items.length}/${19}`}
-              </span> */}
                 <span className="flex items-center ">
                   <HeartIcon className="self-center mt-1 w-5 h-5 fill-current" />{" "}
                   <HealthCountDown health={totalHealth || 0} />
diff --git a/ui/src/app/components/adventurer/InventoryDisplay.tsx b/ui/src/app/components/adventurer/InventoryDisplay.tsx
new file mode 100644
index 000000000..c7acae021
--- /dev/null
+++ b/ui/src/app/components/adventurer/InventoryDisplay.tsx
@@ -0,0 +1,145 @@
+import LootIcon from "../icons/LootIcon";
+import Efficacyicon from "../icons/EfficacyIcon";
+import { Item } from "@/app/types";
+import {
+  getItemData,
+  processItemName,
+  calculateLevel,
+  getKeyFromValue,
+} from "@/app/lib/utils";
+import { MdClose } from "react-icons/md";
+import { Button } from "../buttons/Button";
+import useUIStore from "@/app/hooks/useUIStore";
+import { GameData } from "../GameData";
+import { useContracts } from "@/app/hooks/useContracts";
+import useAdventurerStore from "@/app/hooks/useAdventurerStore";
+import useTransactionCartStore from "@/app/hooks/useTransactionCartStore";
+
+interface InventoryDisplayProps {
+  itemsOwnedInSlot: Item[];
+  itemSlot: string;
+  setShowInventoryItems: (showInventoryItems: boolean) => void;
+  equipItems: string[];
+}
+
+export const InventoryDisplay = ({
+  itemsOwnedInSlot,
+  itemSlot,
+  setShowInventoryItems,
+  equipItems,
+}: InventoryDisplayProps) => {
+  return (
+    <div className="flex flex-row items-center justify-between w-full">
+      {itemsOwnedInSlot.length > 0 ? (
+        <div className="flex flex-row gap-1 overflow-x-auto">
+          {itemsOwnedInSlot.map((item, index) => (
+            <InventoryCard
+              itemSlot={itemSlot}
+              item={item}
+              equipItems={equipItems}
+              key={index}
+            />
+          ))}
+        </div>
+      ) : (
+        <p>No items to equip.</p>
+      )}
+      <button onClick={() => setShowInventoryItems(false)}>
+        <MdClose className="w-5 h-5" />
+      </button>
+    </div>
+  );
+};
+
+interface InventoryCardProps {
+  itemSlot: string;
+  item: Item;
+  equipItems: string[];
+}
+
+export const InventoryCard = ({
+  itemSlot,
+  item,
+  equipItems,
+}: InventoryCardProps) => {
+  const { adventurer } = useAdventurerStore();
+  const { tier, type, slot } = getItemData(item?.item ?? "");
+  const itemName = processItemName(item);
+
+  const setEquipItems = useUIStore((state) => state.setEquipItems);
+  const addToCalls = useTransactionCartStore((state) => state.addToCalls);
+  const removeEntrypointFromCalls = useTransactionCartStore(
+    (state) => state.removeEntrypointFromCalls
+  );
+
+  const { gameContract } = useContracts();
+  const gameData = new GameData();
+
+  const handleEquipItems = (item: string) => {
+    const formattedNewEquipItems = handleCheckSameSlot(slot, equipItems);
+    console.log(equipItems);
+    const newEquipItems = [
+      ...formattedNewEquipItems,
+      getKeyFromValue(gameData.ITEMS, item) ?? "",
+    ];
+    setEquipItems(newEquipItems);
+    if (gameContract) {
+      const equipItemTx = {
+        contractAddress: gameContract?.address,
+        entrypoint: "equip",
+        calldata: [
+          adventurer?.id?.toString() ?? "",
+          "0",
+          newEquipItems.length.toString(),
+          ...newEquipItems,
+        ],
+        metadata: `Equipping ${item}!`,
+      };
+      removeEntrypointFromCalls(equipItemTx.entrypoint);
+      addToCalls(equipItemTx);
+    }
+  };
+
+  const itemId = getKeyFromValue(gameData.ITEMS, item?.item ?? "") ?? "";
+
+  const handleCheckSameSlot = (itemSlot: string, equipItems: string[]) => {
+    return equipItems.filter((item) => {
+      const itemName = gameData.ITEMS[parseInt(item)];
+      const { slot } = getItemData(itemName ?? "");
+      return slot !== itemSlot;
+    });
+  };
+
+  return (
+    <div className="flex flex-row items-center justify-between w-1/2 border border-terminal-green p-1">
+      <div className="flex flex-row items-center">
+        <div className="sm:hidden flex flex-col items-center justify-center border-r-2 border-terminal-black p-1 sm:p-2 gap-2">
+          <LootIcon size={"w-3"} type={itemSlot ? itemSlot : slot} />
+          <Efficacyicon size={"w-4"} type={type} />
+        </div>
+        <div className="hidden sm:flex flex-col justify-center border-r-2 border-terminal-black p-1 sm:p-2 gap-2">
+          <LootIcon size={"w-4"} type={itemSlot ? itemSlot : slot} />
+          <Efficacyicon size={"w-4"} type={type} />
+        </div>
+        <span className="flex flex-col gap-1 whitespace-nowrap text-sm sm:text-xxs md:text-lg">
+          <div className="flex flex-row font-semibold text-xs space-x-3">
+            <span className="self-center">
+              {item &&
+                `Tier ${tier ?? 0}
+                  `}
+            </span>
+            <span>Greatness {calculateLevel(item?.xp ?? 0)}</span>
+          </div>
+          <p className="text-text-ellipsis">{itemName}</p>
+        </span>
+      </div>
+      <Button
+        size={"xxs"}
+        onClick={() => handleEquipItems(item?.item ?? "")}
+        disabled={equipItems.includes(itemId)}
+      >
+        Equip
+      </Button>
+    </div>
+  );
+};
diff --git a/ui/src/app/components/adventurer/ItemDisplay.tsx b/ui/src/app/components/adventurer/ItemDisplay.tsx
index 530471b87..f2059d99e 100644
--- a/ui/src/app/components/adventurer/ItemDisplay.tsx
+++ b/ui/src/app/components/adventurer/ItemDisplay.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Item } from "../../types";
 import LootIcon from "../icons/LootIcon";
 import Efficacyicon from "../icons/EfficacyIcon";
@@ -6,10 +6,11 @@ import { processItemName, calculateLevel, getItemData } from "../../lib/utils";
 import ItemBar from "./ItemBar";
 import { GameData } from "../GameData";
 import { getKeyFromValue, getValueFromKey } from "../../lib/utils";
-import { useMediaQuery } from "react-responsive";
 import { SwapIcon, DownArrowIcon } from "../icons/Icons";
 import { Button } from "../buttons/Button";
 import useUIStore from "@/app/hooks/useUIStore";
+import { InventoryDisplay } from "./InventoryDisplay";
+import { useQueriesStore } from "@/app/hooks/useQueryStore";
 
 interface ItemDisplayProps {
   item: Item;
@@ -30,10 +31,13 @@ export const ItemDisplay = ({
   disabled,
   handleDrop,
 }: ItemDisplayProps) => {
+  const [showInventoryItems, setShowInventoryItems] = useState(false);
   const itemType = item?.item;
 
   const itemName = processItemName(item);
+  const equipItems = useUIStore((state) => state.equipItems);
   const { tier, type, slot } = getItemData(itemType ?? "");
+  const { data } = useQueriesStore();
   const gameData = new GameData();
 
   const itemSuffix = parseInt(
@@ -42,10 +46,6 @@ export const ItemDisplay = ({
   const boost = getValueFromKey(gameData.ITEM_SUFFIX_BOOST, itemSuffix ?? 0);
 
   const screen = useUIStore((state) => state.screen);
-  const setScreen = useUIStore((state) => state.setScreen);
-  const setInventorySelected = useUIStore(
-    (state) => state.setInventorySelected
-  );
   const dropItems = useUIStore((state) => state.dropItems);
 
   const scrollableRef = React.useRef<HTMLDivElement | null>(null);
@@ -119,124 +119,154 @@ export const ItemDisplay = ({
     return dropItems.includes(getKeyFromValue(gameData.ITEMS, item) ?? "");
   };
 
+  // Handle inventory display when user selects swap
+
+  const items = data.itemsByAdventurerQuery
+    ? data.itemsByAdventurerQuery.items
+    : [];
+
+  const itemsOwnedInSlot = items.filter((ownedItem) => {
+    const { slot } = getItemData(ownedItem.item ?? "");
+    return slot === itemSlot && item.item !== ownedItem.item;
+  });
+
+  const slotEquipped = itemsOwnedInSlot.some((item) =>
+    equipItems.includes(getKeyFromValue(gameData.ITEMS, item.item ?? "") ?? "")
+  );
+
+  // Check if they have slected to equip a slot then close inventory items
+  useEffect(() => {
+    if (slotEquipped) {
+      setShowInventoryItems(false);
+    }
+  }, [slotEquipped, equipItems]);
+
   return (
-    <div
-      className={`flex flex-row items-center mb-1 text-sm sm:text-base w-full h-10 sm:h-10 md:h-full  ${
-        item.item
-          ? "bg-terminal-green text-terminal-black 2xl:overflow-x-auto 2xl:overflow-y-hidden"
-          : ""
-      }`}
-      ref={scrollableRef}
-    >
-      <div className="sm:hidden flex flex-col items-center justify-center border-r-2 border-terminal-black p-1 sm:p-2 gap-2">
-        <LootIcon size={"w-3"} type={itemSlot ? itemSlot : slot} />
-        <Efficacyicon size={"w-4"} type={type} />
-      </div>
-      <div className="hidden sm:flex flex-col justify-center border-r-2 border-terminal-black p-1 sm:p-2 gap-2">
-        <LootIcon size={"w-4"} type={itemSlot ? itemSlot : slot} />
-        <Efficacyicon size={"w-4"} type={type} />
-      </div>
-
-      {item.item ? (
-        <div className="flex flex-row justify-between w-full px-1 self-center">
-          <div className="w-full whitespace-normal">
-            <div className="flex flex-col text-xs sm:text-sm space-between">
-              <div className="flex flex-row font-semibold text-xs space-x-3">
-                <span className="self-center">
-                  {item &&
-                    `Tier ${tier ?? 0}
-                `}
-                </span>
-                <span className="whitespace-nowrap w-1/2">
-                  <ItemBar xp={item.xp ?? 0} />
-                </span>
-                <span className="text-xxs sm:text-sm">{boost}</span>
-              </div>
-              <span className="flex flex-row justify-between gap-5">
-                <span className="flex flex-row gap-1 whitespace-nowrap text-sm sm:text-xxs md:text-lg">
-                  <p>{itemName}</p>
-                  <span className="text-xxs sm:text-sm">
-                    {slot == "Neck" || slot == "Ring"
-                      ? ` [+${calculateLevel(item?.xp ?? 0)} Luck]`
-                      : ""}
-                  </span>
-                </span>
-                <span className="flex flex-row items-center gap-1">
-                  {(screen == "play" ||
-                    screen == "upgrade" ||
-                    screen == "player") && (
-                    <Button
-                      variant={"contrast"}
-                      size={"xxs"}
-                      className="p-1"
-                      onClick={() => {
-                        setScreen("inventory");
-                        setInventorySelected(
-                          parseInt(
-                            getKeyFromValue(gameData.SLOTS, slot ?? "") ?? ""
-                          ) ?? 0
-                        );
-                      }}
-                    >
-                      <SwapIcon className="w-3 h-3 lg:w-4 lg:h-4" />
-                    </Button>
-                  )}
-                  {inventory && (
-                    <>
-                      <div className="sm:hidden">
+    <>
+      {!showInventoryItems ? (
+        <div
+          className={`flex flex-row items-center mb-1 text-sm sm:text-base w-full h-10 sm:h-10 md:h-full  ${
+            item.item
+              ? "bg-terminal-green text-terminal-black 2xl:overflow-x-auto 2xl:overflow-y-hidden"
+              : ""
+          }`}
+          ref={scrollableRef}
+        >
+          <div className="sm:hidden flex flex-col items-center justify-center border-r-2 border-terminal-black p-1 sm:p-2 gap-2">
+            <LootIcon size={"w-3"} type={itemSlot ? itemSlot : slot} />
+            <Efficacyicon size={"w-4"} type={type} />
+          </div>
+          <div className="hidden sm:flex flex-col justify-center border-r-2 border-terminal-black p-1 sm:p-2 gap-2">
+            <LootIcon size={"w-4"} type={itemSlot ? itemSlot : slot} />
+            <Efficacyicon size={"w-4"} type={type} />
+          </div>
+
+          {item.item ? (
+            <div className="flex flex-row justify-between w-full px-1 self-center">
+              <div className="w-full whitespace-normal">
+                <div className="flex flex-col text-xs sm:text-sm space-between">
+                  <div className="flex flex-row font-semibold text-xs space-x-3">
+                    <span className="self-center">
+                      {item &&
+                        `Tier ${tier ?? 0}
+                  `}
+                    </span>
+                    <span className="whitespace-nowrap w-1/2">
+                      <ItemBar xp={item.xp ?? 0} />
+                    </span>
+                    <span className="text-xxs sm:text-sm">{boost}</span>
+                  </div>
+                  <span className="flex flex-row justify-between gap-5">
+                    <span className="flex flex-row gap-1 whitespace-nowrap text-sm sm:text-xxs md:text-lg">
+                      <p>{itemName}</p>
+                      <span className="text-xxs sm:text-sm">
+                        {slot == "Neck" || slot == "Ring"
+                          ? ` [+${calculateLevel(item?.xp ?? 0)} Luck]`
+                          : ""}
+                      </span>
+                    </span>
+                    <span className="flex flex-row items-center gap-1">
+                      {(screen == "play" ||
+                        screen == "upgrade" ||
+                        screen == "player") && (
                         <Button
-                          className="sm:h-6 sm:p-2"
                           variant={"contrast"}
                           size={"xxs"}
-                          onClick={equip}
-                          disabled={disabled}
+                          className="p-1"
+                          onClick={() => {
+                            setShowInventoryItems(true);
+                          }}
                         >
-                          <p className="text-xxs sm:text-sm">
-                            {equipped ? "Equipped" : "Equip"}
-                          </p>
+                          <SwapIcon className="w-3 h-3 lg:w-4 lg:h-4" />
                         </Button>
-                      </div>
-                      <div className="hidden sm:block">
+                      )}
+                      {inventory && (
+                        <>
+                          <div className="sm:hidden">
+                            <Button
+                              className="sm:h-6 sm:p-2"
+                              variant={"contrast"}
+                              size={"xxs"}
+                              onClick={equip}
+                              disabled={disabled}
+                            >
+                              <p className="text-xxs sm:text-sm">
+                                {equipped ? "Equipped" : "Equip"}
+                              </p>
+                            </Button>
+                          </div>
+                          <div className="hidden sm:block">
+                            <Button
+                              className="sm:h-6 sm:p-2"
+                              variant={"contrast"}
+                              size={"xxs"}
+                              onClick={equip}
+                              disabled={disabled}
+                            >
+                              <p className="text-xxs sm:text-sm">
+                                {equipped ? "Equipped" : "Equip"}
+                              </p>
+                            </Button>
+                          </div>
+                        </>
+                      )}
+                      {(screen == "play" ||
+                        screen == "upgrade" ||
+                        screen == "player" ||
+                        screen == "inventory") && (
                         <Button
-                          className="sm:h-6 sm:p-2"
                           variant={"contrast"}
                           size={"xxs"}
-                          onClick={equip}
-                          disabled={disabled}
+                          className="p-1"
+                          onClick={() => handleDrop(item.item ?? "")}
+                          disabled={checkDropping(item.item ?? "")}
                         >
-                          <p className="text-xxs sm:text-sm">
-                            {equipped ? "Equipped" : "Equip"}
-                          </p>
+                          <DownArrowIcon className="w-3 h-3 lg:w-4 lg:h-4" />
                         </Button>
-                      </div>
-                    </>
-                  )}
-                  {(screen == "play" ||
-                    screen == "upgrade" ||
-                    screen == "player" ||
-                    screen == "inventory") && (
-                    <Button
-                      variant={"contrast"}
-                      size={"xxs"}
-                      className="p-1"
-                      onClick={() => handleDrop(item.item ?? "")}
-                      disabled={checkDropping(item.item ?? "")}
-                    >
-                      <DownArrowIcon className="w-3 h-3 lg:w-4 lg:h-4" />
-                    </Button>
-                  )}
-                </span>
-              </span>
+                      )}
+                    </span>
+                  </span>
+                </div>
+              </div>
             </div>
-          </div>
+          ) : (
+            <div
+              className={`flex-shrink flex gap-2 p-1 sm:p-2 mb-1 text-sm sm:text-base text-terminal-green"}`}
+            >
+              <p>None Equipped</p>
+            </div>
+          )}
         </div>
       ) : (
-        <div
-          className={`flex-shrink flex gap-2 p-1 sm:p-2 mb-1 text-sm sm:text-base text-terminal-green"}`}
-        >
-          <p>None Equipped</p>
+        <div className="flex flex-row items-center mb-1 text-sm sm:text-base w-full h-10 sm:h-10 md:h-full">
+          <InventoryDisplay
+            itemsOwnedInSlot={itemsOwnedInSlot}
+            itemSlot={slot}
+            setShowInventoryItems={setShowInventoryItems}
+            equipItems={equipItems}
+          />
         </div>
       )}
-    </div>
+    </>
   );
 };
diff --git a/ui/src/app/components/intro/WalletSelect.tsx b/ui/src/app/components/intro/WalletSelect.tsx
index b5ab7ee0f..1a4ba7221 100644
--- a/ui/src/app/components/intro/WalletSelect.tsx
+++ b/ui/src/app/components/intro/WalletSelect.tsx
@@ -26,7 +26,7 @@ const WalletSelect = ({}: WalletSelectProps) => {
     );
 
   return (
-    <div className="min-h-screen container flex justify-center items-center m-auto p-4 pt-8 sm:p-8 lg:p-10 2xl:p-20">
+    <div className="min-h-screen container flex justify-center items-center m-auto p-4 pt-8 sm:w-1/2 sm:p-8 lg:p-10 2xl:p-20">
       <div className="flex flex-col justify-center h-full">
         {screen === "wallet" ? (
           <>
@@ -44,7 +44,7 @@ const WalletSelect = ({}: WalletSelectProps) => {
             </div>
 
             <div className="flex flex-col gap-2 m-auto items-center justify-center overflow-y-auto">
-              <div className="flex flex-col gap-2 sm:w-1/4">
+              <div className="flex flex-col gap-2 w-full">
                 <Button onClick={() => setScreen("tutorial")}>
                   I don&apos;t have a wallet
                 </Button>
@@ -63,7 +63,7 @@ const WalletSelect = ({}: WalletSelectProps) => {
               {arcadeConnectors().length ? (
                 <>
                   <h5 className="text-center">Arcade Accounts</h5>
-                  <div className="flex flex-col sm:flex-row gap-2 overflow-auto h-[300px] sm:h-full sm:w-1/4  sm:h-20">
+                  <div className="flex flex-col sm:flex-row gap-2 overflow-auto h-[300px] sm:h-full w-full  sm:h-20">
                     {arcadeConnectors().map((connector, index) => (
                       <Button
                         onClick={() => connect(connector)}
diff --git a/ui/src/app/containers/InventoryScreen.tsx b/ui/src/app/containers/InventoryScreen.tsx
index d65963dfb..1b70ccb6e 100644
--- a/ui/src/app/containers/InventoryScreen.tsx
+++ b/ui/src/app/containers/InventoryScreen.tsx
@@ -334,7 +334,6 @@ export default function InventoryScreen() {
                         }}
                         equipped={item.equipped}
                         disabled={
-                          singleEquipExists(item.item ?? "") ||
                           item.equipped ||
                           checkTransacting(item.item ?? "") ||
                           equipItems.includes(itemId)