diff --git a/package-lock.json b/package-lock.json
index f8b2902..c57810e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4788,21 +4788,6 @@
         "lodash.uniq": "^4.5.0"
       }
     },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001335",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001335.tgz",
-      "integrity": "sha512-ddP1Tgm7z2iIxu6QTtbZUv6HJxSaV/PZeSrWFZtbY4JZ69tOeNhBCl3HyRQgeNZKE5AOn1kpV7fhljigy0Ty3w==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        }
-      ]
-    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -19416,11 +19401,6 @@
         "lodash.uniq": "^4.5.0"
       }
     },
-    "caniuse-lite": {
-      "version": "1.0.30001335",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001335.tgz",
-      "integrity": "sha512-ddP1Tgm7z2iIxu6QTtbZUv6HJxSaV/PZeSrWFZtbY4JZ69tOeNhBCl3HyRQgeNZKE5AOn1kpV7fhljigy0Ty3w=="
-    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -27500,4 +27480,4 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 9e1db91..66e3549 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "high-card-bootcamp",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://rocketacademy.github.io/high-card-bootcamp",
+  "homepage": "https://kh-pua.github.io/high-card-bootcamp",
   "dependencies": {
     "gh-pages": "^3.2.3",
     "react": "^18.1.0",
diff --git a/public/index.html b/public/index.html
index bd66981..e987daf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@
     -->
     <title>Rocket Bootcamp Project</title>
   </head>
-  <body>
+  <body class="box-border">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.css b/src/App.css
index 97b7c57..e97153d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,19 +1,19 @@
 .App {
   text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  width: auto;
+  height: 100vh;
+  resize: both;
+  overflow: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
 }
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
diff --git a/src/App.js b/src/App.js
index 899cefc..c2ffe6f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,49 +1,292 @@
 import React from "react";
 import "./App.css";
 import { makeShuffledDeck } from "./utils.js";
+import PlayingCards from "./playingcards.js"
 
-class App extends React.Component {
+export default class App extends React.Component {
   constructor(props) {
     // Always call super with props in constructor to initialise parent class
     super(props);
+
+    //Contains all the related variable
     this.state = {
-      // Set default value of card deck to new shuffled deck
       cardDeck: makeShuffledDeck(),
-      // currCards holds the cards from the current round
       currCards: [],
+      currWinner: undefined,
+      player1Score: 0,
+      player2Score: 0,
+      player1WonMatches: 0,
+      player2WonMatches: 0,
+      gameState: "INITIALIZE",
     };
   }
 
   dealCards = () => {
+    let { cardDeck } = this.state;
+
     // this.state.cardDeck.pop() modifies this.state.cardDeck array
-    const newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()];
+    const newCurrCards = [cardDeck.pop(), cardDeck.pop()];
+    if (cardDeck.length === 0) {
+      this.setState(
+        {
+          currCards: newCurrCards,
+          gameState: "ENDS",
+        },
+        this.compareCards
+      );
+    } else {
+      this.setState(
+        {
+          currCards: newCurrCards,
+          gameState: "PROGRESS",
+        },
+        this.compareCards
+      );
+    }
+  };
+
+  compareCards = () => {
+    const suits = ["Diamonds", "Clubs", "Hearts", "Spades"];
+    const { currCards } = this.state;
+    let player1SuitObj = {};
+    let player2SuitObj = {};
+
+    //Registering player's suit object
+    for (let i = 0; i < suits.length; i++) {
+      if (suits[i] === currCards[0].suit) {
+        player1SuitObj = {
+          id: i,
+          suit: currCards[0].suit,
+        };
+      }
+
+      if (suits[i] === currCards[1].suit) {
+        player2SuitObj = {
+          id: i,
+          suit: currCards[1].suit,
+        };
+      }
+    }
+
+    //Comparing both cards
+    if (currCards[0].rank > currCards[1].rank) {
+      // player1 won
+      this.setState((prevState) => {
+        return {
+          currWinner: "Player 1",
+          player1Score: prevState.player1Score + 1,
+        };
+      }, this.calculateMatches);
+    } else if (currCards[0].rank === currCards[1].rank) {
+      if (player1SuitObj.id > player2SuitObj.id) {
+        //player1 won
+        this.setState((prevState) => {
+          return {
+            currWinner: "Player 1",
+            player1Score: prevState.player1Score + 1,
+          };
+        }, this.calculateMatches);
+      } else {
+        //player 2 won
+        this.setState((prevState) => {
+          return {
+            currWinner: "Player 2",
+            player2Score: prevState.player2Score + 1,
+          };
+        }, this.calculateMatches);
+      }
+    } else {
+      //player 2 won
+      this.setState((prevState) => {
+        return {
+          currWinner: "Player 2",
+          player2Score: prevState.player2Score + 1,
+        };
+      }, this.calculateMatches);
+    }
+  };
+
+  calculateMatches = () => {
+    let { player1Score, player2Score, gameState } = this.state;
+
+    if (gameState === "ENDS") {
+      if (player1Score > player2Score) {
+        this.setState((prevState) => {
+          return {
+            player1WonMatches: prevState.player1WonMatches + 1,
+          };
+        });
+      } else if (player1Score < player2Score) {
+        this.setState((prevState) => {
+          return {
+            player2WonMatches: prevState.player2WonMatches + 1,
+          };
+        });
+      }
+    }
+  };
+
+  restartGame = () => {
     this.setState({
-      currCards: newCurrCards,
+      cardDeck: makeShuffledDeck(),
+      currCards: [],
+      currWinner: undefined,
+      player1Score: 0,
+      player2Score: 0,
+      gameState: "INITIALIZE",
+
     });
   };
 
+  reset = () => {
+    this.setState({
+      cardDeck: makeShuffledDeck(),
+      currCards: [],
+      currWinner: undefined,
+      player1Score: 0,
+      player2Score: 0,
+      player1WonMatches: 0,
+      player2WonMatches: 0,
+      gameState: "INITIALIZE",
+    });
+  };
+
+  componentDidUpdate() {
+    // Following are issue faced (cannot use componentDidupdate to manipulate the game state)
+
+    // let { cardDeck } = this.state;
+    // if (cardDeck.length === 0) {
+    //   this.setState({
+    //     gameState: 0
+    //   });
+    // };
+    // console.log(this.state.gameState);
+  }
+
   render() {
-    // You can write JavaScript here, just don't try and set your state!
+    //In render() function, able to use or import: 
+    //A) The variable that you declared, either inside the "render" function, or brought in via "this.state"
+    //B) Functions that you declared
+
+    let {
+      cardDeck,
+      currCards,
+      currWinner,
+      player1Score,
+      player2Score,
+      player1WonMatches,
+      player2WonMatches,
+      gameState,
+    } = this.state;
+    let dealButton, restartGameButton, resetMatchButton, announcement;
 
     // You can access your current components state here, as indicated below
     const currCardElems = this.state.currCards.map(({ name, suit }) => (
       // Give each list element a unique key
-      <div key={`${name}${suit}`}>
+      <div class="text-lg" key={`${name}${suit}`}>
         {name} of {suit}
       </div>
     ));
 
+    // Define buttons
+    dealButton = <button class="py-2 px-4 w-full bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75" onClick={this.dealCards}>Deal</button>;
+    restartGameButton = (
+      <button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75" onClick={this.restartGame}>Restart Game</button>
+    );
+    resetMatchButton = <button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75" onClick={this.reset}>Reset Match</button>;
+
+
+    //Variables appearence under different state
+    if (gameState === "INITIALIZE") {
+      announcement = <p></p>;
+      restartGameButton = (
+        <button disbaled class="py-2 px-4 bg-gray-400 text-slate-800 font-semibold rounded-lg shadow-md pointer-events-none"onClick={this.restartGame}>Restart Game</button>
+      );
+
+    } else if (gameState === "PROGRESS") {
+      announcement = (
+        <div>
+          <p><span class="font-bold">{currWinner}</span> won this round !</p>
+          <p>Remaining Cards: {cardDeck.length}</p>
+        </div>
+      );
+
+    } else if (gameState === "ENDS") {
+      dealButton = (
+        <button class="py-2 px-4 w-full bg-gray-400 text-slate-800 font-semibold rounded-lg shadow-md pointer-events-none" onClick={this.dealCards} disabled>
+          Deal
+        </button>
+      );
+
+      if (player1Score > player2Score) {
+        announcement = (
+          <div>
+            <p>Deck is Empty! <span class="font-bold">Player 1</span> Wins The Game!</p>
+            <p>Do u wish to continue?</p>
+          </div>
+        );
+      } else if (player1Score < player2Score) {
+        announcement = (
+          <div>
+            <p>Deck is Empty! <span class="font-bold">Player 2</span> Wins The Game!</p>
+            <p>Do u wish to continue?</p>
+          </div>
+        );
+      } else {
+        announcement = (
+          <div>
+            <p>It's a <span class="font-bold">TIE</span> !</p>
+            <p>Do u wish to continue?</p>
+          </div>
+        )
+      }
+    }
+
     return (
       <div className="App">
-        <header className="App-header">
-          <h3>High Card 🚀</h3>
-          {currCardElems}
-          <br />
-          <button onClick={this.dealCards}>Deal</button>
-        </header>
+        <div class="h-50 w-100">
+          <div class="mx-auto">
+              <h3 class="text-4xl font-bold m-8 text-slate-100">🚀 High Card 🚀</h3>
+          </div>
+        </div>
+        <div class=" h-auto w-auto resize overflow-auto p-8 m-8 first-line:flex justify-around items-center content-center bg-slate-100 rounded-lg decoration-black">
+          <div class="mx-auto">
+            <section class="flex justify-around items-center flex-col gap-8">
+              <div class="flex justify-around items-center flex-wrap gap-10 text-xl">
+                <div class="flex justify-around items-center gap-6 flex-col">
+                  <p class="font-bold">Player 1 - {player1WonMatches}</p>
+                  <PlayingCards name={currCards[0]?.name} cardSuit={currCards[0]?.suit}></PlayingCards>
+                  {currCardElems[0]}
+                </div>
+                <div class="flex justify-center items-center content-center gap-24 flex-col">
+                  <p class="font-bold"> --- Total Matches Won --- </p>
+                  {announcement}
+                  <div>
+                    <p>Round Score</p>
+                    <p>{player1Score} - {player2Score}</p>
+                  </div>
+                </div>
+                <div class="flex justify-around items-center gap-6 flex-col">
+                  <p class="font-bold">Player 2 - {player2WonMatches}</p>
+                  <PlayingCards name={currCards[1]?.name} cardSuit={currCards[1]?.suit}></PlayingCards>
+                  {currCardElems[1]}
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+        <div className="button-container">
+          <div className="wrapper">
+            <section class="flex justify-center items-center content-center flex-col gap-3 text-base m-8">
+              {dealButton}
+              <div class="flex justify-center items-center content-center gap-3">
+                {restartGameButton}
+                {resetMatchButton}
+              </div>
+            </section>
+          </div>
+        </div>
       </div>
     );
   }
-}
-
-export default App;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 4a1df4d..9e4b1f1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
diff --git a/src/playingcards.js b/src/playingcards.js
new file mode 100644
index 0000000..e82c4db
--- /dev/null
+++ b/src/playingcards.js
@@ -0,0 +1,26 @@
+import React from "react";
+
+export default class PlayingCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      Diamonds: "https://cdn-icons-png.flaticon.com/128/458/458518.png",
+      Clubs: "https://cdn-icons-png.flaticon.com/128/220/220757.png",
+      Hearts: "https://cdn-icons-png.flaticon.com/128/833/833472.png",
+      Spades: "https://cdn-icons-png.flaticon.com/128/7408/7408604.png",
+    };
+  }
+  render() {
+    let { name, cardSuit } = this.props;
+    let cardImg = this.state;
+
+    // Render the card image.
+    return (
+      <div class="relative flex flex-col items-center justify-around w-40 h-56 border-2 rounded-lg bg-white border-slate-700 shadow-sm px-6">
+        <img src={cardImg[cardSuit]} alt={cardSuit} class="w-6 h-6 self-start border-none"/>
+        <p class="font-bold">{name}</p>
+        <img src={cardImg[cardSuit]} alt={cardSuit} class="w-6 h-6 self-end border-none"/>
+      </div>
+    );
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..5a66654
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
\ No newline at end of file
