diff --git a/client/src/Trade.css b/client/src/Trade.css
index e969076..e71d59d 100644
--- a/client/src/Trade.css
+++ b/client/src/Trade.css
@@ -120,15 +120,55 @@
   display: flex;
   flex-direction: row;
   justify-items: flex-start;
+  margin: 0.25rem 0;
 }
 
 .Trade .Transfers .GiveGet {
   display: flex;
+  position: relative;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   font-weight: bold;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
+  margin: 0 0.5rem;
+  min-width: 3rem;
+}
+
+
+.Trade .Transfers .GiveGet div:nth-child(1) {
+  position: absolute;
+  top: 0;
+  border: 1px solid white;
+  background-color: rgb(36, 148, 46);
+  color: white;
+  border-radius: 0.25rem;
+  min-width: 2.5rem;
+  text-align: center;
+  padding: 0.25rem;
+}
+
+.Trade .Transfers .GiveGet div:nth-child(2) {
+  position: absolute;
+  top: 7.5rem;
+  border: 1px solid white;
+  background-color: rgb(36, 148, 46);
+  color: white;
+  border-radius: 0.25rem;
+  min-width: 2.5rem;
+  text-align: center;
+  padding: 0.25rem;
+}
+
+.Trade .Transfers .GiveGet div:last-child {
+  position: absolute;
+  border: 1px solid #f0f0f0;
+  background-color: #444;
+  color: white;
+  font-size: 1rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+  bottom: 0.125rem;
 }
 
 .Trade .TradeLine {
diff --git a/client/src/Trade.js b/client/src/Trade.js
index 1563133..d9f5b2b 100644
--- a/client/src/Trade.js
+++ b/client/src/Trade.js
@@ -338,14 +338,18 @@ const Trade = ({table}) => {
     } else {
       source = item;
     }
-    const _gets = source.gets.length ? source.gets.map((get, index) => <>
-      { get.type === 'bank' && <span key={`get-bank-${index}`}><b>4</b> of any resource </span>}
-      { get.type !== 'bank' && <Resource key={`get-${get.type}-${index}`} disabled label type={get.type} count={get.count}/> }
-    </>) : 'nothing',
-      _gives = source.gives.length ? source.gives.map((give, index) => <>
-        { give.type === '*' && <span key={`give-bank-${index}`}><b>1</b> of any resource </span>}
-        { give.type !== '*' && <Resource key={`give-${give.type}-${index}`} disabled label type={give.type} count={give.count}/> }
-    </>) : 'nothing';
+    const _gets = source.gets.length ? source.gets.map((get, index) => {
+        if (get.type === 'bank') {
+          return <span key={`get-bank-${index}`}><b>4</b> of any resource </span>;
+        }
+        return <Resource key={`get-${get.type}-${index}`} disabled label type={get.type} count={get.count}/>;
+      }) : 'nothing';
+    const _gives = source.gives.length ? source.gives.map((give, index) => {
+        if (give.type === '*') {
+          return <span key={`give-bank-${index}`}><b>1</b> of any resource </span>;
+        }
+        return <Resource key={`give-${give.type}-${index}`} disabled label type={give.type} count={give.count}/>;
+      }) : 'nothing';
   
     return (
       <div className="TradeLine" key={`player-${item.name}-${index}`}>
@@ -441,7 +445,7 @@ const Trade = ({table}) => {
 
         { player.haveResources && 
           <div className="Transfers">
-            <div className="GiveGet"><div>Give</div><div>Get</div></div>
+            <div className="GiveGet"><div>Give</div><div>Get</div><div>Have</div></div>
             { transfers }
           </div>
         }