diff --git a/public/SummerPixel22Regular-jE0W7.ttf b/public/SummerPixel22Regular-jE0W7.ttf
new file mode 100644
index 0000000..c11e2e5
Binary files /dev/null and b/public/SummerPixel22Regular-jE0W7.ttf differ
diff --git a/src/index.js b/src/index.js
index 39e3ea1..ef4357d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -27,7 +27,7 @@ const { connectors } = getDefaultWallets({
 });
 
 const wagmiClient = createClient({
-  autoConnect: false,
+  autoConnect: true,
   connectors,
   provider,
   webSocketProvider
diff --git a/src/styles/main.css b/src/styles/main.css
index d057cc0..64c17ec 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,5 +1,11 @@
+@font-face {
+    font-family: 'SummerPixel';
+    src: url('../../public/SummerPixel22Regular-jE0W7.ttf');
+}
+
+
 * {
-    font-family: 'Times New Roman', Times, serif;
+    font-family: 'SummerPixel';
     font-weight: 400;
     font-style: normal;
 }
diff --git a/src/styles/sections.css b/src/styles/sections.css
index ad90ad7..7b00737 100644
--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -19,8 +19,8 @@
 }
   
 #heroText {
-    padding-top: 12vh;
-    font-size: 4em;
+    padding-top: 14vh;
+    font-size: 3.5em;
     width: 80%;
     text-align: center;
     margin: 0 auto;
@@ -28,7 +28,7 @@
 
 #heroImage {
     max-width: 240px;
-    margin: 1em auto;
+    margin: .5em auto;
     animation: fadeIn 4s ease-in;
 }
 
diff --git a/src/template/Sections.jsx b/src/template/Sections.jsx
index e0aedde..d28625d 100644
--- a/src/template/Sections.jsx
+++ b/src/template/Sections.jsx
@@ -86,15 +86,38 @@ class GenerateBombOverlay extends React.Component {
             }
             bombCoords.push(o);
         }
-        this.state = {coords: bombCoords};
+        this.state = {coords: bombCoords, color: this.props.color};
     }
 
     render() {
-        return this.state.coords.map((obj) => <div className="dots" style={{top: obj.y, left: obj.x, backgroundColor: this.props.color}} />)
+        return this.state.coords.map((obj) => <div className="dots" style={{top: obj.y, left: obj.x, backgroundColor: this.state.color}} />)
     }
 }
 
-export function Section3() {
+class GameMap extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <>
+                <h1 id="gameMapTitle">Game Map</h1>
+                <div className="map">
+                    <img src={Map} />
+                    {/* show active bombs held by other players */}
+                    <GenerateBombOverlay amount={this.props.bombSupply - this.props.bombBalance - this.props.bombsExploded} color={'white'} />
+                    {/* show bombs that have exploded */}
+                    <GenerateBombOverlay amount={this.props.bombsExploded} color={'red'} />
+                    {/* show player bombs */}
+                    <GenerateBombOverlay amount={this.props.bombBalance} color={'yellow'} />
+                </div>
+            </>
+        )
+    }
+}
+
+function Section3() {
     const [boomerAmount, setBoomerAmount] = useState(1);
     const [bombAmount, setBombAmount] = useState(1);
     const [sendBombAmount, setSendBombAmount] = useState(1);
@@ -104,7 +127,7 @@ export function Section3() {
     const [bombBalance, setBombBalance] = useState(0);
     const [bombSupply, setBombSupply] = useState(0);
     const [boomerSupply, setBoomerSupply] = useState(0);
-    const [bombExploded, setBombExploded] = useState(0);
+    const [bombsExploded, setBombsExploded] = useState(0);
     const [boomerKillCount, setBoomerKillCount] = useState(0);
     const { isConnected, address } = useAccount();
     useContractReads({
@@ -161,7 +184,6 @@ export function Section3() {
             }
         ],
         watch: true,
-        cacheTime: 5000,
         onSuccess(data) {
             setBoomerPrice(data[0].toString());
             setBombPrice(data[1].toString());
@@ -169,7 +191,7 @@ export function Section3() {
             setBombBalance(data[3].toString());
             setBoomerSupply(data[4].toString());
             setBombSupply(data[5].toString());
-            setBombExploded(data[6].toString());
+            setBombsExploded(data[6].toString());
             setBoomerKillCount(data[7].toString());
         }
     });
@@ -208,50 +230,47 @@ export function Section3() {
     return (
         <section className="section">
             {isConnected &&
-            <div className="mintContainer">
-                <div className="mintItem">
-                    <h1>Radicalize a Boomer</h1>
-                    <p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Web3 Unaboomers.</p>
-                    <p>You have {boomerBalance} BOOMR</p>
-                    <img src={Boomer} alt="" width="120px" />
-                    <p>
-                        <AwesomeButton type="secondary" ripple={true} disabled={!radicalizeBoomersWrite.write} onPress={() => radicalizeBoomersWrite.write?.()}>
-                            {radicalizeBoomersWrite.isLoading && <>minting {boomerAmount}</> || <>mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)</>}
-                        </AwesomeButton>
-                    </p>
-                    <Slider className="slider" min={1} max={30} onChange={v => debounce(setBoomerAmount(v), 500)} />
-                </div>
-                <div className="mintItem">
-                    <h1>Assemble Bombs</h1>
-                    <p>Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb to send to random Unaboomers to kill them.</p>
-                    <p>You have {bombBalance} BOMB</p>
-                    <img src={Bomb} alt="" width="100px" />
-                    <p>
-                        <AwesomeButton type="secondary" ripple={true} disabled={!assembleBombsWrite.write} onPress={() => assembleBombsWrite.write?.()}>
-                            {assembleBombsWrite.isLoading && <>minting {bombAmount}</> || <>mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)</>}
-                        </AwesomeButton>
-                    </p>
-                    <Slider className="slider" min={1} max={30} onChange={v => setBombAmount(v)} />
-                </div>
-                <div className="mintItem">
-                    <h1>Send Bombs</h1>
-                    <p>Sending bombs will burn your BOMB token and kill a BOOMR token at random. Be careful not to kill yourself in the process.</p>
-                    <p>There are {boomerSupply - boomerKillCount} BOOMR available to kill</p>
-                    <img src={Explosion} alt="" width="120px" />
-                    <p>
-                        <AwesomeButton type="secondary" ripple={true} disabled={!sendBombsWrite.write} onPress={() => sendBombsWrite.write?.()}>
-                            send {sendBombAmount} (~0 Ξ)
-                        </AwesomeButton>
-                    </p>
-                    <Slider className="slider" min={1} max={30} onChange={v => setSendBombAmount(v)} />
+            <>
+                <div className="mintContainer">
+                    <div className="mintItem">
+                        <h1>Radicalize a Boomer</h1>
+                        <p>Radicalizing a boomer will mint ERC-721 BOOMR tokens with images of a pixel art Web3 Unaboomers.</p>
+                        <p>You have {boomerBalance} BOOMR</p>
+                        <img src={Boomer} alt="" width="120px" />
+                        <p>
+                            <AwesomeButton type="secondary" ripple={true} disabled={!radicalizeBoomersWrite.write} onPress={() => radicalizeBoomersWrite.write?.()}>
+                                {radicalizeBoomersWrite.isLoading && <>minting {boomerAmount}</> || <>mint {boomerAmount} ({ethers.utils.formatEther((boomerPrice * boomerAmount).toString())} Ξ)</>}
+                            </AwesomeButton>
+                        </p>
+                        <Slider className="slider" min={1} max={30} onChange={v => debounce(setBoomerAmount(v), 500)} />
+                    </div>
+                    <div className="mintItem">
+                        <h1>Assemble Bombs</h1>
+                        <p>Assembling bombs will mint ERC-1155 BOMB tokens with an image of a pixel art bomb to send to random Unaboomers to kill them.</p>
+                        <p>You have {bombBalance} BOMB</p>
+                        <img src={Bomb} alt="" width="100px" />
+                        <p>
+                            <AwesomeButton type="secondary" ripple={true} disabled={!assembleBombsWrite.write} onPress={() => assembleBombsWrite.write?.()}>
+                                {assembleBombsWrite.isLoading && <>minting {bombAmount}</> || <>mint {bombAmount} ({ethers.utils.formatEther((bombPrice * bombAmount).toString())} Ξ)</>}
+                            </AwesomeButton>
+                        </p>
+                        <Slider className="slider" min={1} max={30} onChange={v => setBombAmount(v)} />
+                    </div>
+                    <div className="mintItem">
+                        <h1>Send Bombs</h1>
+                        <p>Sending bombs will burn your BOMB token and kill a BOOMR token at random. Be careful not to kill yourself in the process.</p>
+                        <p>There are {boomerSupply - boomerKillCount} BOOMR available to kill</p>
+                        <img src={Explosion} alt="" width="120px" />
+                        <p>
+                            <AwesomeButton type="secondary" ripple={true} disabled={!sendBombsWrite.write} onPress={() => sendBombsWrite.write?.()}>
+                                send {sendBombAmount} (~0 Ξ)
+                            </AwesomeButton>
+                        </p>
+                        <Slider className="slider" min={1} max={30} onChange={v => setSendBombAmount(v)} />
+                    </div>
                 </div>
-                <div className="map">
-                    <img src={Map} />
-                    <GenerateBombOverlay amount={bombSupply - bombBalance - bombExploded} color={'white'} />
-                    <GenerateBombOverlay amount={bombExploded} color={'red'} />
-                    <GenerateBombOverlay amount={bombBalance} color={'yellow'} />
-                </div>
-            </div>
+                <GameMap bombSupply={bombSupply} bombBalance={bombBalance} bombsExploded={bombsExploded} />
+            </>
             ||
             <div id="heroText">
                 <h1>connect your wallet to play</h1>