diff --git a/package-lock.json b/package-lock.json
index f8b2902..2909ed7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "gh-pages": "^3.2.3",
-        "react": "^18.1.0",
-        "react-dom": "^18.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-scripts": "5.0.1"
       }
     },
@@ -13085,9 +13085,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
-      "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -13229,15 +13229,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
-      "integrity": "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.22.0"
+        "scheduler": "^0.23.0"
       },
       "peerDependencies": {
-        "react": "^18.1.0"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-error-overlay": {
@@ -13807,9 +13807,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.22.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz",
-      "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -25264,9 +25264,9 @@
       }
     },
     "react": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
-      "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -25371,12 +25371,12 @@
       }
     },
     "react-dom": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
-      "integrity": "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.22.0"
+        "scheduler": "^0.23.0"
       }
     },
     "react-error-overlay": {
@@ -25773,9 +25773,9 @@
       }
     },
     "scheduler": {
-      "version": "0.22.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz",
-      "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "requires": {
         "loose-envify": "^1.1.0"
       }
diff --git a/package.json b/package.json
index 9e1db91..5890b9f 100644
--- a/package.json
+++ b/package.json
@@ -2,11 +2,11 @@
   "name": "high-card-bootcamp",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://rocketacademy.github.io/high-card-bootcamp",
+  "homepage": "https://Snowlyst.github.io/high-card-bootcamp",
   "dependencies": {
     "gh-pages": "^3.2.3",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index 689d13a..6a64b6b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from "react";
 import "./App.css";
 import { makeShuffledDeck } from "./utils.js";
+import vibingcat from "./vibingcat.gif";
 
 class App extends React.Component {
   constructor(props) {
@@ -11,33 +12,147 @@ class App extends React.Component {
       cardDeck: makeShuffledDeck(),
       // currCards holds the cards from the current round
       currCards: [],
+      playerScore: 0,
+      computerScore: 0,
+      setWinner: null,
+      playerRoundScore: 0,
+      computerRoundScore: 0,
+      activeGame: false,
     };
   }
+  prepareSet = () => {
+    let perRoundWinner;
+    if (this.state.playerScore > this.state.computerScore) {
+      perRoundWinner = "Player";
+    } else if (this.state.computerScore > this.state.playerScore) {
+      perRoundWinner = "Computer";
+    }
 
+    this.setState((state) => ({
+      cardDeck: makeShuffledDeck(),
+      currCards: [],
+      playerRoundScore:
+        perRoundWinner === "Player"
+          ? state.playerRoundScore + 1
+          : state.playerRoundScore,
+      computerRoundScore:
+        perRoundWinner === "Computer"
+          ? state.computerRoundScore + 1
+          : state.computerRoundScore,
+      setWinner: null,
+      playerScore: 0,
+      computerScore: 0,
+      activeGame: false,
+    }));
+  };
   dealCards = () => {
+    const drawnCards = this.state.cardDeck.slice(-2);
+    let winner = "draw";
+    if (drawnCards[0].rank > drawnCards[1].rank) {
+      winner = "player";
+    } else if (drawnCards[1].rank > drawnCards[0].rank) {
+      winner = "computer";
+    }
+
     this.setState((state) => ({
-      // Remove last 2 cards from cardDeck
       cardDeck: state.cardDeck.slice(0, -2),
-      // Deal last 2 cards to currCards
-      currCards: state.cardDeck.slice(-2),
+      setWinner: winner,
+      currCards: drawnCards,
+      playerScore:
+        winner === "player"
+          ? this.state.playerScore + 1
+          : this.state.playerScore,
+      computerScore:
+        winner === "computer"
+          ? this.state.computerScore + 1
+          : this.state.computerScore,
+      activeGame: true,
     }));
   };
 
   render() {
-    const currCardElems = this.state.currCards.map(({ name, suit }) => (
+    const currCardElems = this.state.currCards.map(({ name, suit }, index) => (
       // Give each list element a unique key
       <div key={`${name}${suit}`}>
-        {name} of {suit}
+        {index === 0 ? "Player " : "Computer "}Card: {name} of {suit}
       </div>
     ));
+    let roundWinnerMessage;
+    let currentSetWinner;
+    if (this.state.setWinner === "player") {
+      currentSetWinner = <div>The Player has won this Set!</div>;
+    } else if (this.state.setWinner === "computer") {
+      currentSetWinner = <div>The Computer has won this Set!</div>;
+    } else {
+      currentSetWinner = <div>No One had won this round! It is a Draw!</div>;
+    }
+    let scoresScenario;
+    if (this.state.playerScore === this.state.computerScore) {
+      scoresScenario = <div>The Scores are currently tied!</div>;
+      roundWinnerMessage = <div>It is a Draw!</div>;
+    } else if (this.state.playerScore > this.state.computerScore) {
+      scoresScenario = <div>The Player is currently leading!</div>;
+      roundWinnerMessage = <div>The Player has won the round!</div>;
+    } else {
+      scoresScenario = <div>The Computer is currently Leading!</div>;
+      roundWinnerMessage = <div>The Computer has won the round!</div>;
+    }
+    let gameScoreDisplay = (
+      <h4>
+        Game Score:
+        <br />
+        Player: {this.state.playerScore} | Computer: {this.state.computerScore}
+        <br />
+        {scoresScenario}
+      </h4>
+    );
+    const cardsLeft = (
+      <h4>
+        There are {this.state.cardDeck.length} cards until the end of the round!
+      </h4>
+    );
 
     return (
       <div className="App">
         <header className="App-header">
-          <h3>High Card 🚀</h3>
-          {currCardElems}
+          <h4>
+            <img src={vibingcat} alt=""></img>
+            <br />
+            Abel's Variant of High Card
+          </h4>
+          {this.state.cardDeck.length !== 0 ? currCardElems : undefined}
           <br />
-          <button onClick={this.dealCards}>Deal</button>
+          {this.state.cardDeck.length !== 0 ? (
+            <button onClick={this.dealCards}>Deal!</button>
+          ) : (
+            <button onClick={this.prepareSet}>Onto the Next Set!</button>
+          )}
+          {this.state.activeGame && this.state.cardDeck.length !== 0
+            ? currentSetWinner
+            : undefined}
+          {this.state.activeGame && this.state.cardDeck.length !== 0
+            ? gameScoreDisplay
+            : undefined}
+          {this.state.activeGame && this.state.cardDeck.length !== 0
+            ? cardsLeft
+            : undefined}
+          {this.state.cardDeck.length === 0 ? (
+            <div>
+              The round has concluded! {currentSetWinner}
+              {gameScoreDisplay}
+              {roundWinnerMessage}
+            </div>
+          ) : null}
+          {this.state.playerRoundScore >= 1 ||
+          this.state.computerRoundScore >= 1 ? (
+            <div>
+              Overall Game Score!
+              <br />
+              Player: {this.state.playerRoundScore}
+              <br />
+              Computer: {this.state.computerRoundScore}
+            </div>
+          ) : null}
         </header>
       </div>
     );
diff --git a/src/high-card-bootcamp.code-workspace b/src/high-card-bootcamp.code-workspace
new file mode 100644
index 0000000..bdfd6fa
--- /dev/null
+++ b/src/high-card-bootcamp.code-workspace
@@ -0,0 +1,8 @@
+{
+  "folders": [
+	{
+		"path": ".."
+	}
+],
+  "settings": {}
+}
diff --git a/src/vibingcat.gif b/src/vibingcat.gif
new file mode 100644
index 0000000..9a0df94
Binary files /dev/null and b/src/vibingcat.gif differ