diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 0889fbf..6f1a75f 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -13,31 +13,35 @@ export default function Card({ data, state, setState }: CardProps) {
 
     return (
         <div className="card" key={v4()}>
-            <div className="top-row">
-                <p>Counts as: {data.gemValue}</p>
-                <p>Point value: {data.points || 0}</p>
-                <p>Cost:</p>
-                {
-                    Object.keys(data.resourceCost).map((key: keyof ResourceCost | string) => {
-                        // @ts-ignore
-                        return (data.resourceCost[key as keyof ResourceCost] > 0) && <p key={v4()}>{key}: {data.resourceCost[key as keyof ResourceCost]}</p>
-                    })
-                }
-                { state.actions.buyCard.active &&
-                    <button
-                        onClick={() => buyCard(state, setState, data)}
-                        disabled={tooExpensive(data, state)}>
-                        Buy This Card
-                    </button>
-                }
-                { state.actions.reserveCard.active &&
-                    <button
-                        onClick={() => reserveCard(state, setState, data)}
-                        disabled={hasMaxReserved(currentPlayer)}>
-                        Reserve This Card
-                    </button>
-                }
+            <p>Counts as: {data.gemValue}</p>
+            <p>Point value: {data.points || 0}</p>
+            <p>Cost:</p>
+            <div className="total-card-cost">
+            {
+                Object.keys(data.resourceCost).map((key: keyof ResourceCost | string) => {
+                    // @ts-ignore
+                    return (data.resourceCost[key as keyof ResourceCost] > 0) && (
+                        <p key={v4()} className={`card-cost-${key}`}>
+                            {data.resourceCost[key as keyof ResourceCost]}
+                        </p>
+                    )
+                })
+            }
             </div>
+            { state.actions.buyCard.active &&
+                <button
+                    onClick={() => buyCard(state, setState, data)}
+                    disabled={tooExpensive(data, state)}>
+                    Buy This Card
+                </button>
+            }
+            { state.actions.reserveCard.active &&
+                <button
+                    onClick={() => reserveCard(state, setState, data)}
+                    disabled={hasMaxReserved(currentPlayer)}>
+                    Reserve This Card
+                </button>
+            }
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/Card/CardRow.scss b/src/components/Card/CardRow.scss
index 23d04f9..d2f44fe 100644
--- a/src/components/Card/CardRow.scss
+++ b/src/components/Card/CardRow.scss
@@ -1,3 +1,6 @@
+@import "../../sass/helper/mixins";
+@import "../../sass/helper/placeholders";
+
 .card-row {
     display: flex;
     flex-flow: column nowrap;
@@ -10,21 +13,36 @@
         width: 100%;
         justify-content: space-around;
     }
+    
+    .card {
+        width: 25%;
+        border: 2px solid black;
+        > * {
+            margin: 1rem;
+        }
+
+        .total-card-cost {
+            display: flex;
+            justify-content: center;
+
+            @include map-gem-values(".card-cost");
+            p {
+                @extend %chip-design;
+            }
+        }
+    }
 }
   
-.card {
-    width: 25%;
-}
   
 .tier-1 {
-    background-color: green;
+    background-color: rgb(9, 67, 9);
 }
   
 .tier-2 {
-    background-color: yellow;
+    background-color: rgb(174, 174, 32);
     color: black;
 }
   
 .tier-3 {
-    background-color: blue;
+    background-color: rgb(35, 35, 167);
 }
\ No newline at end of file
diff --git a/src/components/Player/AllPlayers.scss b/src/components/Player/AllPlayers.scss
index fe0daf9..8e07ea2 100644
--- a/src/components/Player/AllPlayers.scss
+++ b/src/components/Player/AllPlayers.scss
@@ -1,4 +1,5 @@
 @import '../../sass/helper/mixins';
+@import '../../sass/helper/placeholders';
 
 .all-players {
     display: flex;
@@ -15,7 +16,11 @@
         .resources {
             .player-chips-enum {
                 display: flex;
+                justify-content: center;
                 @include map-gem-values(".player-chip");
+                p {
+                    @extend %chip-design;
+                }
             }
         }
     }
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index 47159f4..c8b984b 100644
--- a/src/components/Player/Player.tsx
+++ b/src/components/Player/Player.tsx
@@ -93,9 +93,7 @@ export default function Player({ player, state, setState }: PlayerProps) {
                     <div className="player-chips-enum">
                         { dynamic && Object.entries(dynamic.inventory).map(([key,value]) => {
                             return value > 0 && (
-                                <p key={v4()} className={`player-chip-${key}`}>
-                                    {key}: {value}
-                                </p>
+                                <p key={v4()} className={`player-chip-${key}`}>{value}</p>
                             )
                         })}
                     </div>
diff --git a/src/sass/helper/_mixins.scss b/src/sass/helper/_mixins.scss
index 91174b5..cb2c1a4 100644
--- a/src/sass/helper/_mixins.scss
+++ b/src/sass/helper/_mixins.scss
@@ -2,6 +2,7 @@
     #{$parentClass} {
         &-emerald {
             background-color: green;
+            color: white;
         }
         &-diamond {
             background-color: white;
@@ -17,10 +18,12 @@
         }
         &-ruby {
             background-color: red;
+            color: black;
         }
         &-gold {
             background-color: gold;
             color: black;
         }
+
     }
 }
\ No newline at end of file
diff --git a/src/sass/helper/_placeholders.scss b/src/sass/helper/_placeholders.scss
index d35b7bb..da16b58 100644
--- a/src/sass/helper/_placeholders.scss
+++ b/src/sass/helper/_placeholders.scss
@@ -1,3 +1,15 @@
 %hidden {
     display: none;
+}
+
+// designed to extend a "p" element
+%chip-design {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 5px;
+    padding: 8px;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
 }
\ No newline at end of file