diff --git a/src/components/dice/DiceButton.js b/src/components/dice/DiceButton.js
index a7f1f69..833d5c5 100644
--- a/src/components/dice/DiceButton.js
+++ b/src/components/dice/DiceButton.js
@@ -9,7 +9,6 @@ function DiceButton({ title, children, count, onClick }) {
       title={title}
       aria-label={title}
       onClick={onClick}
-      color="hsl(210, 50%, 96%)"
       sx={{ position: "relative" }}
     >
       {children}
diff --git a/src/components/dice/DiceButtonCount.js b/src/components/dice/DiceButtonCount.js
index b18caba..4b17aac 100644
--- a/src/components/dice/DiceButtonCount.js
+++ b/src/components/dice/DiceButtonCount.js
@@ -6,9 +6,9 @@ function DiceButtonCount({ children }) {
     <Box
       sx={{
         position: "absolute",
-        left: "50%",
-        bottom: "100%",
-        transform: "translateX(-50%)",
+        top: "50%",
+        right: "90%",
+        transform: "translateY(-50%)",
         height: "14px",
         display: "flex",
         alignItems: "center",
@@ -20,7 +20,7 @@ function DiceButtonCount({ children }) {
         color="text"
         sx={{ fontSize: "10px", fontWeight: "bold" }}
       >
-        {children}×
+        {children}
       </Text>
     </Box>
   );
diff --git a/src/components/dice/DiceButtons.js b/src/components/dice/DiceButtons.js
index c2900da..d314697 100644
--- a/src/components/dice/DiceButtons.js
+++ b/src/components/dice/DiceButtons.js
@@ -51,16 +51,18 @@ function DiceButtons({
     <Flex
       sx={{
         justifyContent: "center",
-        width: "100%",
         alignItems: "center",
-        padding: "0 15px",
+        flexDirection: "column",
+        borderRadius: "4px",
       }}
+      p={2}
+      bg="overlay"
     >
       <SelectDiceButton
         onDiceChange={handleDiceChange}
         currentDice={currentDice}
       />
-      <Divider vertical color="hsl(210, 50%, 96%)" />
+      <Divider />
       <DiceButton
         title="Add D20"
         count={diceCounts.d20}
@@ -110,7 +112,7 @@ function DiceButtons({
       >
         <D100Icon />
       </DiceButton>
-      <Divider vertical color="hsl(210, 50%, 96%)" />
+      <Divider />
       <IconButton
         aria-label={
           diceTraySize === "single" ? "Expand Dice Tray" : "Shrink Dice Tray"
diff --git a/src/components/dice/DiceControls.js b/src/components/dice/DiceControls.js
index 9baabc9..e4bccf3 100644
--- a/src/components/dice/DiceControls.js
+++ b/src/components/dice/DiceControls.js
@@ -91,6 +91,7 @@ function DiceControls({
           display: "flex",
           color: "white",
           pointerEvents: "none",
+          transform: "translateX(50px)",
         }}
       >
         <DiceResults
@@ -105,8 +106,8 @@ function DiceControls({
       <div
         style={{
           position: "absolute",
-          top: "24px",
-          width: "100%",
+          top: "0",
+          left: "0",
         }}
       >
         <DiceButtons
diff --git a/src/components/dice/DiceTrayOverlay.js b/src/components/dice/DiceTrayOverlay.js
index da38cc5..99b6236 100644
--- a/src/components/dice/DiceTrayOverlay.js
+++ b/src/components/dice/DiceTrayOverlay.js
@@ -218,32 +218,64 @@ function DiceTrayOverlay({ isOpen }) {
     handleAssetLoadFinish();
   }
 
+  const [traySize, setTraySize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      const map = document.querySelector(".map");
+      const mapRect = map.getBoundingClientRect();
+
+      const availableWidth = mapRect.width - 108; // Subtract padding
+      const availableHeight = mapRect.height - 80; // Subtract paddding and open icon
+
+      let height = Math.min(availableHeight, 1000);
+      let width = diceTraySize === "single" ? height / 2 : height;
+
+      if (width > availableWidth) {
+        width = availableWidth;
+        height = diceTraySize === "single" ? width * 2 : width;
+      }
+
+      setTraySize({ width, height });
+    }
+
+    window.addEventListener("resize", handleResize);
+
+    handleResize();
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [diceTraySize]);
+
   return (
     <Box
       sx={{
-        width: diceTraySize === "single" ? "500px" : "1000px",
-        maxWidth:
-          diceTraySize === "single"
-            ? "calc(50vh - 48px)"
-            : "calc(100vh - 64px)",
-        paddingBottom: diceTraySize === "single" ? "200%" : "100%",
+        width: `${traySize.width}px`,
+        height: `${traySize.height}px`,
         borderRadius: "4px",
         display: isOpen ? "block" : "none",
         position: "relative",
-        overflow: "hidden",
+        overflow: "visible",
         pointerEvents: "all",
       }}
-      bg="background"
     >
-      <DiceInteraction
-        onSceneMount={handleSceneMount}
-        onPointerDown={() => {
-          sceneInteractionRef.current = true;
-        }}
-        onPointerUp={() => {
-          sceneInteractionRef.current = false;
-        }}
-      />
+      <Box
+        sx={{ transform: "translateX(50px)", width: "100%", height: "100%" }}
+      >
+        <DiceInteraction
+          onSceneMount={handleSceneMount}
+          onPointerDown={() => {
+            sceneInteractionRef.current = true;
+          }}
+          onPointerUp={() => {
+            sceneInteractionRef.current = false;
+          }}
+        />
+      </Box>
       <DiceControls
         diceRefs={diceRefs}
         sceneVisibleRef={sceneVisibleRef}
@@ -254,7 +286,19 @@ function DiceTrayOverlay({ isOpen }) {
         diceTraySize={diceTraySize}
         onDiceTraySizeChange={setDiceTraySize}
       />
-      {isLoading && <LoadingOverlay />}
+      {isLoading && (
+        <Box
+          sx={{
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            top: 0,
+            left: "50px",
+          }}
+        >
+          <LoadingOverlay />
+        </Box>
+      )}
     </Box>
   );
 }
diff --git a/src/components/dice/SelectDiceButton.js b/src/components/dice/SelectDiceButton.js
index 933ccee..58e7f24 100644
--- a/src/components/dice/SelectDiceButton.js
+++ b/src/components/dice/SelectDiceButton.js
@@ -24,7 +24,6 @@ function SelectDiceButton({ onDiceChange, currentDice }) {
       <IconButton
         aria-label="Select Dice Style"
         title="Select Dice Style"
-        color="hsl(210, 50%, 96%)"
         onClick={openModal}
       >
         <SelectDiceIcon />