diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
deleted file mode 100644
index 8176665..0000000
--- a/src/components/Card/Card.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.card-row {
-    display: flex;
-    flex-flow: column nowrap;
-    margin: 2rem;
-    width: 80vw;
-}
-  
-.card-row-cards-visible {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 100%;
-    justify-content: space-around;
-}
-  
-.card {
-    width: 25%;
-}
-  
-.tier-1 {
-    background-color: green;
-}
-  
-.tier-2 {
-    background-color: yellow;
-    color: black;
-}
-  
-.tier-3 {
-    background-color: blue;
-}
\ No newline at end of file
diff --git a/src/components/Card/CardRow.scss b/src/components/Card/CardRow.scss
index e69de29..23d04f9 100644
--- a/src/components/Card/CardRow.scss
+++ b/src/components/Card/CardRow.scss
@@ -0,0 +1,30 @@
+.card-row {
+    display: flex;
+    flex-flow: column nowrap;
+    margin: 2rem;
+    width: 80vw;
+
+    .card-row-cards-visible {
+        display: flex;
+        flex-flow: row nowrap;
+        width: 100%;
+        justify-content: space-around;
+    }
+}
+  
+.card {
+    width: 25%;
+}
+  
+.tier-1 {
+    background-color: green;
+}
+  
+.tier-2 {
+    background-color: yellow;
+    color: black;
+}
+  
+.tier-3 {
+    background-color: blue;
+}
\ No newline at end of file
diff --git a/src/components/Card/CardRow.tsx b/src/components/Card/CardRow.tsx
index 713975e..e54a90f 100644
--- a/src/components/Card/CardRow.tsx
+++ b/src/components/Card/CardRow.tsx
@@ -3,7 +3,7 @@ import { CardData } from "../../util/types"
 import Card from "../Card/Card"
 import { v4 } from 'uuid';
 import cardTierToKey from '../../util/cardTierToKey';
-import "./Card.scss";
+import "./CardRow.scss";
 
 export default function CardRow({tier, state, setState}: CardRowProps) {
     const typedTier = cardTierToKey(tier);
diff --git a/src/components/Player/Player.scss b/src/components/Gameboard/Gameboard.scss
similarity index 100%
rename from src/components/Player/Player.scss
rename to src/components/Gameboard/Gameboard.scss
diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx
index c154356..073821e 100644
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/src/components/Gameboard/Gameboard.tsx
@@ -1,19 +1,19 @@
 // types, data, utils
-import { AppState, PlayerData, ResourceCost } from '../../util/types';
 import { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import initializeBoard, { setCardRows } from '../../util/initializeBoard';
+import { AppState, PlayerData, ResourceCost } from '../../util/types';
 import { getChipsActions } from '../Player/ActionMethods';
 import { StateProps } from '../../util/propTypes';
-import { Link } from 'react-router-dom';
+import './Gameboard.scss';
 
 // components
 import Nobles from '../Nobles/Nobles';
-import initializeBoard, { setCardRows } from '../../util/initializeBoard';
 import AvailableChips from '../Resources/AvailableChips';
 import AllPlayers from '../Player/AllPlayers';
 import CardRow from '../Card/CardRow';
 import SelectionView from '../Resources/SelectionView';
 import { useCurrentPlayer } from '../../hooks/useCurrentPlayer';
-import getTotalBuyingPower from '../../util/getTotalBuyingPower';
 import usePreviousPlayer from '../../hooks/usePreviousPlayer';
 const { validateChips } = getChipsActions;
 
@@ -47,35 +47,26 @@ export default function Gameboard({ state, setState }: StateProps) {
     }, [state]);
 
     // util functions, setup on mount
-    useEffect(() => {
-        initializeBoard(state, setState);
-    }, [])
+    useEffect(() => initializeBoard(state, setState), [])
 
     useEffect(() => {
         setCardRows(state);
     }, [state])
 
-    useEffect(() => {
-        if (state.actions.buyCard.active) {
-            const currentPlayer = useCurrentPlayer(state);
-            currentPlayer && console.log(getTotalBuyingPower(currentPlayer));
-        }
-    }, [state.actions])
-
+    // endgame logic: once triggered, sets "endgame" to the player who triggered the effect
     useEffect(() => {
         const previousPlayer = usePreviousPlayer(state);
         if (previousPlayer && previousPlayer.points >= 15) setEndgame(previousPlayer);
     }, [state])
 
+    // endgame logic: determines the player with highest score after remaining allowed turns
     useEffect(() => {
         if (endgame) {
-            console.log('endgame!');
-
+            let winner: PlayerData;
             const currentPlayer = useCurrentPlayer(state);
             if (!currentPlayer) return;
 
             if (currentPlayer.id <= endgame.id) {
-                let winner: PlayerData;
                 const winnerData = state.players;
                 winner = winnerData.sort((x,y) => x.points - y.points)[0];
                 console.log(winner.name + ' wins!');
@@ -83,7 +74,7 @@ export default function Gameboard({ state, setState }: StateProps) {
         }
     }, [state, endgame])
 
-    // displays state of board if data is populated, otherwise points to game constructor
+    // rendering: displays state of board if data is populated, otherwise points to game constructor
     useEffect(() => {
         if (!state.players.length) {
             setView(
@@ -108,6 +99,5 @@ export default function Gameboard({ state, setState }: StateProps) {
         }
     }, [state]);
 
-    // render
     return view
 }
\ No newline at end of file
diff --git a/src/components/Player/AllPlayers.scss b/src/components/Player/AllPlayers.scss
index 19579b1..fe0daf9 100644
--- a/src/components/Player/AllPlayers.scss
+++ b/src/components/Player/AllPlayers.scss
@@ -1,9 +1,22 @@
+@import '../../sass/helper/mixins';
+
 .all-players {
     display: flex;
     background-color: rgb(237, 213, 156);
     color: black;
-}
+    .player-ui {
+        p {
+            margin: 1rem;
+        }
+        .subheader {
+            font-weight: bold;
+        }
 
-.all-players p {
-    margin: 1rem;
+        .resources {
+            .player-chips-enum {
+                display: flex;
+                @include map-gem-values(".player-chip");
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index 1c065fc..47159f4 100644
--- a/src/components/Player/Player.tsx
+++ b/src/components/Player/Player.tsx
@@ -57,11 +57,7 @@ export default function Player({ player, state, setState }: PlayerProps) {
 
     return (
         <div className="player-ui" key={v4()}>
-            {/* Static Data */}
-            <section className="player-constants">
-                <p>Name: {player.name}</p>
-                <p>Is {player.starter || "not"} round starter</p>
-            </section>
+            <p className="subheader">Name: {player.name} {player.starter && "(round starter)"}</p>
 
             {/* Dynamic data from state */}
             <section className="turn-and-action-based">
@@ -90,13 +86,19 @@ export default function Player({ player, state, setState }: PlayerProps) {
             </section>
 
             <section className="resources">
-                <strong>{dynamic?.name}'s Resources</strong>
+                <p className="subheader">{dynamic?.name}'s Resources</p>
 
                 <div className="player-chips">
                     <p>Chips:</p>
-                    { dynamic && Object.entries(dynamic.inventory).map(([key,value]) => {
-                        return value > 0 && <p key={v4()}>{key}: {value}</p>
-                    })}
+                    <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>
+                            )
+                        })}
+                    </div>
                 </div>
 
                 <div className="player-cards">
diff --git a/src/components/Resources/AvailableChips.scss b/src/components/Resources/AvailableChips.scss
index 28281f0..4c47bd8 100644
--- a/src/components/Resources/AvailableChips.scss
+++ b/src/components/Resources/AvailableChips.scss
@@ -1,10 +1,14 @@
+@import "../../sass/helper/mixins";
+
 .available-chips {
     display: flex;
     flex-flow: row nowrap;
     background-color: rgb(236, 238, 186);
     color: black;
-}
 
-.available-chips p {
-    margin: 1rem;
+    p {
+        margin: 1rem;
+    }
+
+    @include map-gem-values(".chips");
 }
\ No newline at end of file
diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx
index e0fd510..bdd99de 100644
--- a/src/components/Resources/AvailableChips.tsx
+++ b/src/components/Resources/AvailableChips.tsx
@@ -5,22 +5,22 @@ import "./AvailableChips.scss"
 
 export default function AvailableChips({ state, liftSelection }: ResourceProps) {
     return (
-        <div className="available-chips">
+        <div className={state.actions.getChips.active ? 'available-chips' : 'hidden'}>
             {
                 Object.keys(state.gameboard.tradingResources).map((key: string) => {
                     const typedKey = key as keyof ResourceCost;
+
                     return (
-                        <div key={v4()} className={`chips-${key}`}>
-                            <button
-                                key={v4()}
-                                value={key}
-                                // @ts-ignore
-                                disabled={state.gameboard.tradingResources[typedKey] <= 0}
-                                onClick={() => liftSelection(typedKey)}
-                                >
-                                {key}: {state.gameboard.tradingResources[typedKey]}
-                            </button>
-                        </div>
+                        <button
+                            key={v4()}
+                            value={key}
+                            className={`chips-${key}`}
+                            // @ts-ignore
+                            disabled={state.gameboard.tradingResources[typedKey] <= 0}
+                            onClick={() => liftSelection(typedKey)}
+                            >
+                            {key}: {state.gameboard.tradingResources[typedKey]}
+                        </button>
                     )
                 })
             }
diff --git a/src/components/Resources/SelectionView.scss b/src/components/Resources/SelectionView.scss
new file mode 100644
index 0000000..2de8189
--- /dev/null
+++ b/src/components/Resources/SelectionView.scss
@@ -0,0 +1,16 @@
+@import "../../sass/helper/mixins";
+
+.selection-view {
+    .current-selections {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        @include map-gem-values(".selection-value");
+        
+        p {
+            margin: 1rem;
+            padding: 0.5rem;
+            border-radius: 25%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/Resources/SelectionView.tsx b/src/components/Resources/SelectionView.tsx
index 935a474..2e08708 100644
--- a/src/components/Resources/SelectionView.tsx
+++ b/src/components/Resources/SelectionView.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { StateProps } from "../../util/propTypes";
 import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
 import { GetChipsHTML, ReserveCardHTML } from "./ViewHTML";
+import './SelectionView.scss';
 
 export default function SelectionView({ state, setState }: StateProps) {
     const [currentPlayer, setCurrentPlayer] = useState(useCurrentPlayer(state));
diff --git a/src/components/Resources/ViewHTML.tsx b/src/components/Resources/ViewHTML.tsx
index 17a90d9..68a9ad8 100644
--- a/src/components/Resources/ViewHTML.tsx
+++ b/src/components/Resources/ViewHTML.tsx
@@ -28,7 +28,7 @@ export const GetChipsHTML = ({ state, setState }: StateProps) => {
             <div className="current-selections">
                 {
                     state.actions.getChips.active &&
-                    state.actions.getChips.selection?.map((each: keyof ResourceCost) => <p key={v4()}>{each}</p>)
+                    state.actions.getChips.selection?.map((each: keyof ResourceCost) => <p className={`selection-value-${each}`} key={v4()}>{each}</p>)
                 }
             </div>
             {
diff --git a/src/sass/App.scss b/src/sass/App.scss
index bdc90c8..ac7a180 100644
--- a/src/sass/App.scss
+++ b/src/sass/App.scss
@@ -1,4 +1,10 @@
+@import './helper/placeholders';
+
 #root {
+    .hidden {
+        @extend %hidden;
+    }
+
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/sass/helper/_mixins.scss b/src/sass/helper/_mixins.scss
index e69de29..91174b5 100644
--- a/src/sass/helper/_mixins.scss
+++ b/src/sass/helper/_mixins.scss
@@ -0,0 +1,26 @@
+@mixin map-gem-values($parentClass) {
+    #{$parentClass} {
+        &-emerald {
+            background-color: green;
+        }
+        &-diamond {
+            background-color: white;
+            color: black;
+        }
+        &-onyx {
+            background-color: black;
+            color: white;
+        }
+        &-sapphire {
+            background-color: blue;
+            color: white;
+        }
+        &-ruby {
+            background-color: red;
+        }
+        &-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
new file mode 100644
index 0000000..d35b7bb
--- /dev/null
+++ b/src/sass/helper/_placeholders.scss
@@ -0,0 +1,3 @@
+%hidden {
+    display: none;
+}
\ No newline at end of file