diff --git a/package-lock.json b/package-lock.json
index f8b2902..4fb58fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,10 @@
       "name": "high-card-bootcamp",
       "version": "0.1.0",
       "dependencies": {
+        "bootstrap": "^5.2.3",
         "gh-pages": "^3.2.3",
         "react": "^18.1.0",
+        "react-bootstrap": "^2.7.4",
         "react-dom": "^18.1.0",
         "react-scripts": "5.0.1"
       }
@@ -1765,11 +1767,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
+      "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.11"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2867,6 +2869,57 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz",
+      "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==",
+      "dependencies": {
+        "@swc/helpers": "^0.4.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz",
+      "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.3.tgz",
+      "integrity": "sha512-7HM5aiSWvJBWr+FghZj/n3PSuH2kUrOPiu/D92aIv1zTL8IBwFoQ3oz/f76svoN5v2PKaP6pQbg6vTcIiSffzg==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3185,6 +3238,14 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
+      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -3388,6 +3449,11 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz",
       "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
     "node_modules/@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -3403,6 +3469,24 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
+    "node_modules/@types/react": {
+      "version": "18.2.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz",
+      "integrity": "sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3416,6 +3500,11 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+    },
     "node_modules/@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -3451,6 +3540,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -4644,6 +4738,24 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4900,6 +5012,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
@@ -5595,6 +5712,11 @@
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5707,6 +5829,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -5838,6 +5968,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -8176,6 +8315,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -12936,6 +13083,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -13111,6 +13275,35 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz",
+      "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.3",
+        "@types/react-transition-group": "^4.4.5",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -13250,6 +13443,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -13330,6 +13528,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -13393,9 +13606,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.0",
@@ -14984,6 +15197,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -15162,6 +15389,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -17212,11 +17447,11 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.17.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
-      "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
+      "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.11"
       }
     },
     "@babel/runtime-corejs3": {
@@ -17978,6 +18213,43 @@
         "source-map": "^0.7.3"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
+    },
+    "@react-aria/ssr": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz",
+      "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==",
+      "requires": {
+        "@swc/helpers": "^0.4.14"
+      }
+    },
+    "@restart/hooks": {
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz",
+      "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.3.tgz",
+      "integrity": "sha512-7HM5aiSWvJBWr+FghZj/n3PSuH2kUrOPiu/D92aIv1zTL8IBwFoQ3oz/f76svoN5v2PKaP6pQbg6vTcIiSffzg==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -18172,6 +18444,14 @@
         "loader-utils": "^2.0.0"
       }
     },
+    "@swc/helpers": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
+      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -18369,6 +18649,11 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz",
       "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw=="
     },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
     "@types/q": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -18384,6 +18669,24 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
+    "@types/react": {
+      "version": "18.2.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz",
+      "integrity": "sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -18397,6 +18700,11 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
+    "@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
+    },
     "@types/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -18432,6 +18740,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -19315,6 +19628,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -19491,6 +19810,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
@@ -19982,6 +20306,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -20062,6 +20391,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+    },
     "destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -20163,6 +20497,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -21857,6 +22200,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -25167,6 +25518,22 @@
         }
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -25284,6 +25651,25 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-bootstrap": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz",
+      "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.3",
+        "@types/react-transition-group": "^4.4.5",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -25389,6 +25775,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -25449,6 +25840,17 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -25499,9 +25901,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
       "version": "0.15.0",
@@ -26680,6 +27082,17 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -26815,6 +27228,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
diff --git a/package.json b/package.json
index 9e1db91..be77be4 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,12 @@
   "name": "high-card-bootcamp",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://rocketacademy.github.io/high-card-bootcamp",
+  "homepage": "https://ryanlerler.github.io/high-card-bootcamp",
   "dependencies": {
+    "bootstrap": "^5.2.3",
     "gh-pages": "^3.2.3",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.7.4",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"
   },
diff --git a/src/App.js b/src/App.js
index 689d13a..5c8ffd1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,14 @@
+// ToDo:
+// FIXED:
+// Overall game score is not updating if player 1 current score differs by 1 from player 2 current score
+// 1 of the players' overall game score increases when it's a draw (no matter if the draw condition is specified in updateGameScores function or not)
+
 import React from "react";
-import "./App.css";
-import { makeShuffledDeck } from "./utils.js";
+import "./styles/App.css";
+import { makeShuffledDeck } from "./utils/utils.js";
+import Button from "react-bootstrap/Button";
+import Container from "react-bootstrap/Container";
+import PlayingCard from "./components/PlayingCard";
 
 class App extends React.Component {
   constructor(props) {
@@ -11,33 +19,179 @@ class App extends React.Component {
       cardDeck: makeShuffledDeck(),
       // currCards holds the cards from the current round
       currCards: [],
+      player1CurrentScore: 0,
+      player2CurrentScore: 0,
+      player1GameScore: 0,
+      player2GameScore: 0,
     };
   }
 
+  updateGameScores = () => {
+    console.log("updateGameScores is running");
+
+    const { cardDeck, player1CurrentScore, player2CurrentScore } = this.state;
+    console.log("decklength" + cardDeck.length);
+
+    console.log(`player1 score:${player1CurrentScore}`);
+    console.log(`player2 score:${player2CurrentScore}`);
+
+    if (cardDeck.length === 0 && player1CurrentScore > player2CurrentScore) {
+      console.log("player1 +1");
+      this.setState((state) => ({
+        player1GameScore: state.player1GameScore + 1,
+      }));
+    } else if (
+      cardDeck.length === 0 &&
+      player1CurrentScore < player2CurrentScore
+    ) {
+      console.log("player2 +1");
+
+      this.setState((state) => ({
+        player2GameScore: state.player2GameScore + 1,
+      }));
+    }
+  };
+
+  // The overall game scores depend on the current scores and the current scores must have been updated only then the updateGameScores method should be invoked. So the updateGameScores method has to be passed as a callback function to the setState() method inside the updateCurrentScore method after the state has been updated.
+
+  //If the ranks were equal, the current scores were not updated, and consequently, the updateGameScores function was not called. The updateGameScores function, on the other hand, was responsible for updating the game scores and checking if the card deck length reached 0. If updateGameScores was only called from updateCurrentScores when the ranks were different, it was not invoked when the ranks were equal.By adding the else block in updateCurrentScores to handle the case where the ranks are equal, we ensure that updateGameScores is called regardless of whether the ranks are equal or different. This allows the game scores and the card deck length to be updated correctly in all scenarios. In summary, the else block ensures that updateGameScores is always invoked after updating the current scores, regardless of the card ranks. This ensures the game scores are correctly updated and the card deck length is accurately checked for reaching 0.
+  
+  updateCurrentScores = () => {
+    const { currCards } = this.state;
+    if (currCards.length === 2 && currCards[0].rank > currCards[1].rank) {
+      this.setState(
+        (state) => ({
+          player1CurrentScore: state.player1CurrentScore + 1,
+        }),
+        () => this.updateGameScores()
+      );
+    } else if (
+      currCards.length === 2 &&
+      currCards[0].rank < currCards[1].rank
+    ) {
+      this.setState(
+        (state) => ({
+          player2CurrentScore: state.player2CurrentScore + 1,
+        }),
+        () => this.updateGameScores()
+      );
+    } else {
+      this.updateGameScores();
+    }
+  };
+
+  /*
+  The setState method is using the functional form, which means it accepts a function as an argument. The function is called with the PREVIOUS state as its parameter. Since it's a function and not a method of the component, we don't need to use this to access the component's state.
+
+  This approach is useful when the new state depends on the previous state to ensure we're working with the most up-to-date state values and avoid potential issues caused by relying on this.state directly.
+  */
   dealCards = () => {
-    this.setState((state) => ({
+    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),
+      }),
+      () => {
+        this.updateCurrentScores();
+      }
+    );
+  };
+
+  /* The cardDeck is extracted from the state using destructuring assignment (const { cardDeck } = this.state;). Then, setState is called with an object directly accessing cardDeck from this.state and using it to update cardDeck and currCards. However, this.state may not always reflect the most up-to-date state.
+
+  In React, state updates may be asynchronous and batched for performance optimizations. When we call setState, React may batch multiple state updates together. This means that when we directly reference this.state to derive new state values, we may be working with stale or outdated state data.
+
+  The tick function in World Clock exercise calls this.setState() which accepts an object of new Date() as argument. Using new Date() generates a new instance of the Date object representing the current date and time. It doesn't depend on any information from the previous state, so there is no need to access the previous state or perform calculations based on it.
+
+  dealCards = () => {
+    const { cardDeck } = this.state;
+    this.setState({
       // Remove last 2 cards from cardDeck
-      cardDeck: state.cardDeck.slice(0, -2),
+      cardDeck: cardDeck.slice(0, -2),
       // Deal last 2 cards to currCards
-      currCards: state.cardDeck.slice(-2),
-    }));
+      currCards: cardDeck.slice(-2),
+    });
+  };
+  */
+
+  determineWinnerEachGame = () => {
+    const { cardDeck, player1CurrentScore, player2CurrentScore } = this.state;
+    const isGameOver = cardDeck.length === 0;
+    if (isGameOver && player1CurrentScore > player2CurrentScore) {
+      return "Player 1 wins the current game!!!";
+    } else if (isGameOver && player1CurrentScore < player2CurrentScore) {
+      return "Player 2 wins the current game!!!";
+    } else if (isGameOver && player1CurrentScore === player2CurrentScore) {
+      return "The current game is a draw!!!";
+    }
+  };
+
+  declareUltimateWinner = () => {
+    const { cardDeck, player1GameScore, player2GameScore } = this.state;
+    const isGameOver = cardDeck.length === 0;
+    if (isGameOver && player1GameScore > player2GameScore) {
+      return "Out of cards! Player 1 is the OVERALL WINNER!!!";
+    } else if (isGameOver && player1GameScore < player2GameScore) {
+      return "Out of cards! Player 2 is the OVERALL WINNER!!!";
+    } else if (isGameOver && player1GameScore === player2GameScore) {
+      return "Out of cards! It's a BIG FAT DRAW OVERALL!!!";
+    }
+  };
+
+  resetGame = () => {
+    this.setState({
+      // Set default value of card deck to new shuffled deck
+      cardDeck: makeShuffledDeck(),
+      // currCards holds the cards from the current round
+      currCards: [],
+      player1CurrentScore: 0,
+      player2CurrentScore: 0,
+    });
   };
 
   render() {
-    const currCardElems = this.state.currCards.map(({ name, suit }) => (
-      // Give each list element a unique key
-      <div key={`${name}${suit}`}>
-        {name} of {suit}
-      </div>
-    ));
+    const {
+      cardDeck,
+      currCards,
+      player1CurrentScore,
+      player2CurrentScore,
+      player1GameScore,
+      player2GameScore,
+    } = this.state;
+    const currentWinner = this.determineWinnerEachGame();
+    const roundCount = cardDeck.length / 2;
+    const ultimateWinner = this.declareUltimateWinner();
+    const isGameOver = cardDeck.length === 0;
 
     return (
       <div className="App">
         <header className="App-header">
-          <h3>High Card 🚀</h3>
-          {currCardElems}
-          <br />
-          <button onClick={this.dealCards}>Deal</button>
+          <Container>
+            <h3>High Card 🚀</h3>
+            <PlayingCard currCards={currCards} />
+            <Button
+              variant="secondary"
+              onClick={isGameOver ? this.resetGame : this.dealCards}
+            >
+              {isGameOver ? "Continue Playing" : "Deal"}
+            </Button>
+            <h4>{isGameOver && currentWinner}</h4>
+            <h4>
+              {(player1CurrentScore > 0 || player2CurrentScore > 0) &&
+                `Player 1's current score: ${player1CurrentScore} | Player 2's current score: ${player2CurrentScore}`}
+            </h4>
+            <h4>
+              {roundCount !== 0 &&
+                `${roundCount} more rounds before the card deck is depleted!`}
+            </h4>
+            <h4>
+              {isGameOver &&
+                `Player 1's overall score: ${player1GameScore} | Player 2's overall score: ${player2GameScore}`}
+            </h4>
+            <h4>{ultimateWinner}</h4>
+          </Container>
         </header>
       </div>
     );
diff --git a/src/assets/10_of_clubs.png b/src/assets/10_of_clubs.png
new file mode 100644
index 0000000..18af741
Binary files /dev/null and b/src/assets/10_of_clubs.png differ
diff --git a/src/assets/10_of_clubs.png:Zone.Identifier b/src/assets/10_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/10_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/10_of_diamonds.png b/src/assets/10_of_diamonds.png
new file mode 100644
index 0000000..3bbc4e0
Binary files /dev/null and b/src/assets/10_of_diamonds.png differ
diff --git a/src/assets/10_of_diamonds.png:Zone.Identifier b/src/assets/10_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/10_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/10_of_hearts.png b/src/assets/10_of_hearts.png
new file mode 100644
index 0000000..3eb83d7
Binary files /dev/null and b/src/assets/10_of_hearts.png differ
diff --git a/src/assets/10_of_hearts.png:Zone.Identifier b/src/assets/10_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/10_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/10_of_spades.png b/src/assets/10_of_spades.png
new file mode 100644
index 0000000..0b3d294
Binary files /dev/null and b/src/assets/10_of_spades.png differ
diff --git a/src/assets/10_of_spades.png:Zone.Identifier b/src/assets/10_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/10_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/2_of_clubs.png b/src/assets/2_of_clubs.png
new file mode 100644
index 0000000..291ed97
Binary files /dev/null and b/src/assets/2_of_clubs.png differ
diff --git a/src/assets/2_of_clubs.png:Zone.Identifier b/src/assets/2_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/2_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/2_of_diamonds.png b/src/assets/2_of_diamonds.png
new file mode 100644
index 0000000..4deee7c
Binary files /dev/null and b/src/assets/2_of_diamonds.png differ
diff --git a/src/assets/2_of_diamonds.png:Zone.Identifier b/src/assets/2_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/2_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/2_of_hearts.png b/src/assets/2_of_hearts.png
new file mode 100644
index 0000000..75a014f
Binary files /dev/null and b/src/assets/2_of_hearts.png differ
diff --git a/src/assets/2_of_hearts.png:Zone.Identifier b/src/assets/2_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/2_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/2_of_spades.png b/src/assets/2_of_spades.png
new file mode 100644
index 0000000..1ce0ffe
Binary files /dev/null and b/src/assets/2_of_spades.png differ
diff --git a/src/assets/2_of_spades.png:Zone.Identifier b/src/assets/2_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/2_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/3_of_clubs.png b/src/assets/3_of_clubs.png
new file mode 100644
index 0000000..076ab31
Binary files /dev/null and b/src/assets/3_of_clubs.png differ
diff --git a/src/assets/3_of_clubs.png:Zone.Identifier b/src/assets/3_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/3_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/3_of_diamonds.png b/src/assets/3_of_diamonds.png
new file mode 100644
index 0000000..8ee0b4b
Binary files /dev/null and b/src/assets/3_of_diamonds.png differ
diff --git a/src/assets/3_of_diamonds.png:Zone.Identifier b/src/assets/3_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/3_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/3_of_hearts.png b/src/assets/3_of_hearts.png
new file mode 100644
index 0000000..8e74673
Binary files /dev/null and b/src/assets/3_of_hearts.png differ
diff --git a/src/assets/3_of_hearts.png:Zone.Identifier b/src/assets/3_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/3_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/3_of_spades.png b/src/assets/3_of_spades.png
new file mode 100644
index 0000000..f9e06b4
Binary files /dev/null and b/src/assets/3_of_spades.png differ
diff --git a/src/assets/3_of_spades.png:Zone.Identifier b/src/assets/3_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/3_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/4_of_clubs.png b/src/assets/4_of_clubs.png
new file mode 100644
index 0000000..8be9e08
Binary files /dev/null and b/src/assets/4_of_clubs.png differ
diff --git a/src/assets/4_of_clubs.png:Zone.Identifier b/src/assets/4_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/4_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/4_of_diamonds.png b/src/assets/4_of_diamonds.png
new file mode 100644
index 0000000..70e82e8
Binary files /dev/null and b/src/assets/4_of_diamonds.png differ
diff --git a/src/assets/4_of_diamonds.png:Zone.Identifier b/src/assets/4_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/4_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/4_of_hearts.png b/src/assets/4_of_hearts.png
new file mode 100644
index 0000000..ceecbfe
Binary files /dev/null and b/src/assets/4_of_hearts.png differ
diff --git a/src/assets/4_of_hearts.png:Zone.Identifier b/src/assets/4_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/4_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/4_of_spades.png b/src/assets/4_of_spades.png
new file mode 100644
index 0000000..95abe3e
Binary files /dev/null and b/src/assets/4_of_spades.png differ
diff --git a/src/assets/4_of_spades.png:Zone.Identifier b/src/assets/4_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/4_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/5_of_clubs.png b/src/assets/5_of_clubs.png
new file mode 100644
index 0000000..bde9777
Binary files /dev/null and b/src/assets/5_of_clubs.png differ
diff --git a/src/assets/5_of_clubs.png:Zone.Identifier b/src/assets/5_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/5_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/5_of_diamonds.png b/src/assets/5_of_diamonds.png
new file mode 100644
index 0000000..bb92525
Binary files /dev/null and b/src/assets/5_of_diamonds.png differ
diff --git a/src/assets/5_of_diamonds.png:Zone.Identifier b/src/assets/5_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/5_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/5_of_hearts.png b/src/assets/5_of_hearts.png
new file mode 100644
index 0000000..d923456
Binary files /dev/null and b/src/assets/5_of_hearts.png differ
diff --git a/src/assets/5_of_hearts.png:Zone.Identifier b/src/assets/5_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/5_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/5_of_spades.png b/src/assets/5_of_spades.png
new file mode 100644
index 0000000..53a1aad
Binary files /dev/null and b/src/assets/5_of_spades.png differ
diff --git a/src/assets/5_of_spades.png:Zone.Identifier b/src/assets/5_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/5_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/6_of_clubs.png b/src/assets/6_of_clubs.png
new file mode 100644
index 0000000..a9660a0
Binary files /dev/null and b/src/assets/6_of_clubs.png differ
diff --git a/src/assets/6_of_clubs.png:Zone.Identifier b/src/assets/6_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/6_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/6_of_diamonds.png b/src/assets/6_of_diamonds.png
new file mode 100644
index 0000000..78a80ad
Binary files /dev/null and b/src/assets/6_of_diamonds.png differ
diff --git a/src/assets/6_of_diamonds.png:Zone.Identifier b/src/assets/6_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/6_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/6_of_hearts.png b/src/assets/6_of_hearts.png
new file mode 100644
index 0000000..361643e
Binary files /dev/null and b/src/assets/6_of_hearts.png differ
diff --git a/src/assets/6_of_hearts.png:Zone.Identifier b/src/assets/6_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/6_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/6_of_spades.png b/src/assets/6_of_spades.png
new file mode 100644
index 0000000..40242a7
Binary files /dev/null and b/src/assets/6_of_spades.png differ
diff --git a/src/assets/6_of_spades.png:Zone.Identifier b/src/assets/6_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/6_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/7_of_clubs.png b/src/assets/7_of_clubs.png
new file mode 100644
index 0000000..9d6b545
Binary files /dev/null and b/src/assets/7_of_clubs.png differ
diff --git a/src/assets/7_of_clubs.png:Zone.Identifier b/src/assets/7_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/7_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/7_of_diamonds.png b/src/assets/7_of_diamonds.png
new file mode 100644
index 0000000..6ad5f15
Binary files /dev/null and b/src/assets/7_of_diamonds.png differ
diff --git a/src/assets/7_of_diamonds.png:Zone.Identifier b/src/assets/7_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/7_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/7_of_hearts.png b/src/assets/7_of_hearts.png
new file mode 100644
index 0000000..19b89a2
Binary files /dev/null and b/src/assets/7_of_hearts.png differ
diff --git a/src/assets/7_of_hearts.png:Zone.Identifier b/src/assets/7_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/7_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/7_of_spades.png b/src/assets/7_of_spades.png
new file mode 100644
index 0000000..b9f1b93
Binary files /dev/null and b/src/assets/7_of_spades.png differ
diff --git a/src/assets/7_of_spades.png:Zone.Identifier b/src/assets/7_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/7_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/8_of_clubs.png b/src/assets/8_of_clubs.png
new file mode 100644
index 0000000..cec743c
Binary files /dev/null and b/src/assets/8_of_clubs.png differ
diff --git a/src/assets/8_of_clubs.png:Zone.Identifier b/src/assets/8_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/8_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/8_of_diamonds.png b/src/assets/8_of_diamonds.png
new file mode 100644
index 0000000..ed12951
Binary files /dev/null and b/src/assets/8_of_diamonds.png differ
diff --git a/src/assets/8_of_diamonds.png:Zone.Identifier b/src/assets/8_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/8_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/8_of_hearts.png b/src/assets/8_of_hearts.png
new file mode 100644
index 0000000..fb39723
Binary files /dev/null and b/src/assets/8_of_hearts.png differ
diff --git a/src/assets/8_of_hearts.png:Zone.Identifier b/src/assets/8_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/8_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/8_of_spades.png b/src/assets/8_of_spades.png
new file mode 100644
index 0000000..b6b3b38
Binary files /dev/null and b/src/assets/8_of_spades.png differ
diff --git a/src/assets/8_of_spades.png:Zone.Identifier b/src/assets/8_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/8_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/9_of_clubs.png b/src/assets/9_of_clubs.png
new file mode 100644
index 0000000..2174db5
Binary files /dev/null and b/src/assets/9_of_clubs.png differ
diff --git a/src/assets/9_of_clubs.png:Zone.Identifier b/src/assets/9_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/9_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/9_of_diamonds.png b/src/assets/9_of_diamonds.png
new file mode 100644
index 0000000..0b933fb
Binary files /dev/null and b/src/assets/9_of_diamonds.png differ
diff --git a/src/assets/9_of_diamonds.png:Zone.Identifier b/src/assets/9_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/9_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/9_of_hearts.png b/src/assets/9_of_hearts.png
new file mode 100644
index 0000000..7b196d6
Binary files /dev/null and b/src/assets/9_of_hearts.png differ
diff --git a/src/assets/9_of_hearts.png:Zone.Identifier b/src/assets/9_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/9_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/9_of_spades.png b/src/assets/9_of_spades.png
new file mode 100644
index 0000000..3c3b5ff
Binary files /dev/null and b/src/assets/9_of_spades.png differ
diff --git a/src/assets/9_of_spades.png:Zone.Identifier b/src/assets/9_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/9_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/ace_of_clubs.png b/src/assets/ace_of_clubs.png
new file mode 100644
index 0000000..42bf5ec
Binary files /dev/null and b/src/assets/ace_of_clubs.png differ
diff --git a/src/assets/ace_of_clubs.png:Zone.Identifier b/src/assets/ace_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/ace_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/ace_of_diamonds.png b/src/assets/ace_of_diamonds.png
new file mode 100644
index 0000000..79cd3b8
Binary files /dev/null and b/src/assets/ace_of_diamonds.png differ
diff --git a/src/assets/ace_of_diamonds.png:Zone.Identifier b/src/assets/ace_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/ace_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/ace_of_hearts.png b/src/assets/ace_of_hearts.png
new file mode 100644
index 0000000..b422124
Binary files /dev/null and b/src/assets/ace_of_hearts.png differ
diff --git a/src/assets/ace_of_hearts.png:Zone.Identifier b/src/assets/ace_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/ace_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/ace_of_spades.png b/src/assets/ace_of_spades.png
new file mode 100644
index 0000000..103f56d
Binary files /dev/null and b/src/assets/ace_of_spades.png differ
diff --git a/src/assets/ace_of_spades.png:Zone.Identifier b/src/assets/ace_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/ace_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/jack_of_clubs.png b/src/assets/jack_of_clubs.png
new file mode 100644
index 0000000..5e003be
Binary files /dev/null and b/src/assets/jack_of_clubs.png differ
diff --git a/src/assets/jack_of_clubs.png:Zone.Identifier b/src/assets/jack_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/jack_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/jack_of_diamonds.png b/src/assets/jack_of_diamonds.png
new file mode 100644
index 0000000..131a977
Binary files /dev/null and b/src/assets/jack_of_diamonds.png differ
diff --git a/src/assets/jack_of_diamonds.png:Zone.Identifier b/src/assets/jack_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/jack_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/jack_of_hearts.png b/src/assets/jack_of_hearts.png
new file mode 100644
index 0000000..bf342bc
Binary files /dev/null and b/src/assets/jack_of_hearts.png differ
diff --git a/src/assets/jack_of_hearts.png:Zone.Identifier b/src/assets/jack_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/jack_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/jack_of_spades.png b/src/assets/jack_of_spades.png
new file mode 100644
index 0000000..f539c19
Binary files /dev/null and b/src/assets/jack_of_spades.png differ
diff --git a/src/assets/jack_of_spades.png:Zone.Identifier b/src/assets/jack_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/jack_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/king_of_clubs.png b/src/assets/king_of_clubs.png
new file mode 100644
index 0000000..68e5774
Binary files /dev/null and b/src/assets/king_of_clubs.png differ
diff --git a/src/assets/king_of_clubs.png:Zone.Identifier b/src/assets/king_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/king_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/king_of_diamonds.png b/src/assets/king_of_diamonds.png
new file mode 100644
index 0000000..e21d6a0
Binary files /dev/null and b/src/assets/king_of_diamonds.png differ
diff --git a/src/assets/king_of_diamonds.png:Zone.Identifier b/src/assets/king_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/king_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/king_of_hearts.png b/src/assets/king_of_hearts.png
new file mode 100644
index 0000000..1d3c468
Binary files /dev/null and b/src/assets/king_of_hearts.png differ
diff --git a/src/assets/king_of_hearts.png:Zone.Identifier b/src/assets/king_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/king_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/king_of_spades.png b/src/assets/king_of_spades.png
new file mode 100644
index 0000000..2edbbc1
Binary files /dev/null and b/src/assets/king_of_spades.png differ
diff --git a/src/assets/king_of_spades.png:Zone.Identifier b/src/assets/king_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/king_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/logo.png b/src/assets/logo.png
similarity index 100%
rename from src/logo.png
rename to src/assets/logo.png
diff --git a/src/assets/queen_of_clubs.png b/src/assets/queen_of_clubs.png
new file mode 100644
index 0000000..7be5f9a
Binary files /dev/null and b/src/assets/queen_of_clubs.png differ
diff --git a/src/assets/queen_of_clubs.png:Zone.Identifier b/src/assets/queen_of_clubs.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/queen_of_clubs.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/queen_of_diamonds.png b/src/assets/queen_of_diamonds.png
new file mode 100644
index 0000000..928f650
Binary files /dev/null and b/src/assets/queen_of_diamonds.png differ
diff --git a/src/assets/queen_of_diamonds.png:Zone.Identifier b/src/assets/queen_of_diamonds.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/queen_of_diamonds.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/queen_of_hearts.png b/src/assets/queen_of_hearts.png
new file mode 100644
index 0000000..21839e6
Binary files /dev/null and b/src/assets/queen_of_hearts.png differ
diff --git a/src/assets/queen_of_hearts.png:Zone.Identifier b/src/assets/queen_of_hearts.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/queen_of_hearts.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/assets/queen_of_spades.png b/src/assets/queen_of_spades.png
new file mode 100644
index 0000000..7983d03
Binary files /dev/null and b/src/assets/queen_of_spades.png differ
diff --git a/src/assets/queen_of_spades.png:Zone.Identifier b/src/assets/queen_of_spades.png:Zone.Identifier
new file mode 100644
index 0000000..82afca9
--- /dev/null
+++ b/src/assets/queen_of_spades.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Ryan Ler\Downloads\PNG-cards-1.3.zip
diff --git a/src/components/PlayingCard.js b/src/components/PlayingCard.js
new file mode 100644
index 0000000..4f0a7c0
--- /dev/null
+++ b/src/components/PlayingCard.js
@@ -0,0 +1,50 @@
+import React from "react";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+
+const images = importAll(
+  require.context("../assets/", false, /\.(png|jpe?g|svg)$/)
+);
+
+// Helper function to import all images
+function importAll(r) {
+  let images = {};
+  r.keys().forEach((key) => {
+    images[key] = r(key);
+  });
+  return images;
+}
+
+export default class PlayingCard extends React.Component {
+  render() {
+    const { currCards } = this.props;
+    const currCardElems = (
+      <Row className="justify-content-md-center">
+        {currCards.map(({ name, suit }, index) => (
+          // Give each list element a unique key
+          <Col key={`${name}${suit}`} md="auto">
+            {index === 0 ? (
+              <div>
+                <p>Player 1:</p>
+                <img src={images[`./${name}_of_${suit}.png`]} alt="" />
+                <p>
+                  {name} of {suit}
+                </p>
+              </div>
+            ) : (
+              <div>
+                <p>Player 2:</p>
+                <img src={images[`./${name}_of_${suit}.png`]} alt="" />
+                <p>
+                  {name} of {suit}
+                </p>
+              </div>
+            )}
+          </Col>
+        ))}
+      </Row>
+    );
+
+    return currCardElems;
+  }
+}
diff --git a/src/index.js b/src/index.js
index 31508db..f7be86d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
+import "./styles/index.css";
 import App from "./App";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
diff --git a/src/App.css b/src/styles/App.css
similarity index 86%
rename from src/App.css
rename to src/styles/App.css
index 97b7c57..494566b 100644
--- a/src/App.css
+++ b/src/styles/App.css
@@ -17,3 +17,8 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
+
+img {
+  max-height: 50%;
+  max-width: 50%;
+}
diff --git a/src/index.css b/src/styles/index.css
similarity index 100%
rename from src/index.css
rename to src/styles/index.css
diff --git a/src/utils.js b/src/utils/utils.js
similarity index 93%
rename from src/utils.js
rename to src/utils/utils.js
index e3102aa..4e2f251 100644
--- a/src/utils.js
+++ b/src/utils/utils.js
@@ -23,7 +23,7 @@ const makeDeck = () => {
   // Initialise an empty deck array
   const newDeck = [];
   // Initialise an array of the 4 suits in our deck. We will loop over this array.
-  const suits = ["Hearts", "Diamonds", "Clubs", "Spades"];
+  const suits = ["hearts", "diamonds", "clubs", "spades"];
 
   // Loop over the suits array
   for (let suitIndex = 0; suitIndex < suits.length; suitIndex += 1) {
@@ -40,15 +40,15 @@ const makeDeck = () => {
 
       // If rank is 1, 11, 12, or 13, set cardName to the ace or face card's name
       if (cardName === "1") {
-        cardName = "Ace";
+        cardName = "ace";
         // Ace has higher rank than all other cards
         cardRank = 14;
       } else if (cardName === "11") {
-        cardName = "Jack";
+        cardName = "jack";
       } else if (cardName === "12") {
-        cardName = "Queen";
+        cardName = "queen";
       } else if (cardName === "13") {
-        cardName = "King";
+        cardName = "king";
       }
 
       // Create a new card with the current name, suit, and rank