diff --git a/ui/src/elements.tsx b/ui/src/elements.tsx
index 049f929..b371d47 100644
--- a/ui/src/elements.tsx
+++ b/ui/src/elements.tsx
@@ -266,7 +266,10 @@ export function Game(props: {wasm: GameWasm, settings: Settings}) {
 
         }}>{confirmedScorePoints > -1 ? `Score ${confirmedScorePoints} points ✅` : "Check"}</button>
         <button
-            onClick={(e) => {setIsTileExchangeOpen(true);}}
+            onClick={(e) => {
+                trayDispatch({action: TileDispatchActionType.RETURN}); // want all tiles back on tray for tile exchange
+                setIsTileExchangeOpen(true);
+            }}
         >Open Tile Exchange</button>
         <button onClick={(e) => {
             trayDispatch({action: TileDispatchActionType.RETURN});
@@ -538,6 +541,10 @@ function TilesExchangedTray(props: {
 }){
 
     const divContent = [];
+    for(let i=0; i<props.trayLength; i++) {
+        divContent.push(<span key={i} />); // empty tile elements
+    }
+
     for(let i = 0; i<props.trayLength; i++){
         const tileData = props.tray[i];
 
@@ -547,11 +554,9 @@ function TilesExchangedTray(props: {
         }
 
         if(tileData != null){
-            divContent.push(
-                <DummyExchangeTile key={i} letter={tileData} isSelected={props.selectedArray[i]} onClick={toggleFunction}/>
-            );
-        } else{
-            divContent.push(<span key={i} />);
+            divContent[tileData.index] =
+                <DummyExchangeTile key={tileData.index} letter={tileData} isSelected={props.selectedArray[i]} onClick={toggleFunction}/>;
+
         }
     }