diff --git a/Blackjack-table-top-view.jpg b/Blackjack-table-top-view.jpg
new file mode 100644
index 00000000..cee157e0
Binary files /dev/null and b/Blackjack-table-top-view.jpg differ
diff --git a/Blackjack.js b/Blackjack.js
new file mode 100644
index 00000000..cc10d281
--- /dev/null
+++ b/Blackjack.js
@@ -0,0 +1,418 @@
+/*    Next line Display    */
+var BREAKONELINE = "<br>";
+var BREAKTWOLINE = BREAKONELINE + "<br>";
+var BREAKTHREELINE = BREAKTWOLINE + "<br>";
+
+/*    Deck Calculation    */
+var dealerSum = 0;
+var playerSum = 0;
+var dealerAceCount = 0;
+var playerAceCount = 0;
+// var dealerKQJCount = 0;
+// var playerKQJCount = 0;
+
+/*    Deck Creation    */
+var hidden;
+var deck = [];
+
+/*    Point Documentation    */
+var bet = 0;
+var balance = 5000;
+var beginnerPrice = 5000;
+
+/*    Button Shortcuts    */
+var dealButton = document.querySelector("#deal");
+var hitButton = document.querySelector("#hit");
+var standButton = document.querySelector("#stand");
+var doubleButton = document.querySelector("#double");
+var surrenderButton = document.querySelector("#surrender");
+var shuffleButton = document.querySelector("#shuffle");
+
+/*    Display Shortcuts    */
+var displayChart = document.getElementById("output-div");
+
+/*    Textbox Shortcuts    */
+var cashInputText = document.getElementById("cash-text");
+var winningInputText = document.getElementById("Winning-text");
+var wagerInputText = document.getElementById("Wager-text");
+
+/*    Message Display    */
+var welcomeMSG =
+  "Greetings, " +
+  BREAKONELINE +
+  "#1: You are encash with " +
+  balance +
+  " points. " +
+  BREAKONELINE +
+  '#2: Select your bets into "Wage" box.' +
+  BREAKONELINE +
+  "#3: Once bets are made, you will not be allow to change." +
+  BREAKONELINE +
+  '#4: You are only allow to "Double Down" first round & double your wage.' +
+  BREAKONELINE +
+  '#5: You may also "Surrender" & loss 1/2 of your bets.' +
+  BREAKONELINE +
+  "#7: No insurance in the game. " +
+  BREAKONELINE +
+  'Click "Deal" to start game!';
+
+var continueBetMSG =
+  'Click "Clear" to clear cards.' +
+  BREAKTWOLINE +
+  ' And place your new bets in the wage box & hit "deal"  to continue.';
+
+/*    Main Program Flow    */
+var FLOWCONTROLSEQUENCE_ONE = "SEQUENCE_ONE";
+var FLOWCONTROLSEQUENCE_TWO = "SEQUENCE_TWO";
+var FLOWSEQUENCECONTROL = FLOWCONTROLSEQUENCE_ONE;
+
+/*    Game Outcome    */
+var dealer = "DEALER";
+var player = "PLAYER";
+var tie = "TIE";
+var backJack = "BLACKJACK";
+var Surrender = "SURRENDER";
+/*  END OF DECLARATION*/
+
+main();
+
+// window.onload = function () {
+//   buildDeck();
+//   shuffleDeck();
+// };
+
+function main() {
+  switch (FLOWSEQUENCECONTROL) {
+    case FLOWCONTROLSEQUENCE_ONE:
+      FLOWCONTROLSEQUENCEONE();
+    //break;
+    case FLOWCONTROLSEQUENCE_TWO:
+      FLOWCONTROLSEQUENCETWO();
+    //break;
+
+    default:
+      null;
+  }
+}
+
+function FLOWCONTROLSEQUENCEONE() {
+  cashInputText.value = balance;
+  displayChart.innerHTML = welcomeMSG;
+  dealButton.addEventListener("click", deal);
+  function deal() {
+    document.getElementById("deck").src = "./Cards/BACK.png";
+    buildDeck();
+    shuffleDeck();
+    bet = Number(wagerInputText.value);
+    if (isNaN(bet) == true || bet == "") {
+      displayChart.innerHTML = "Its not a number";
+    } else {
+      dealButton.disabled = true;
+      wagerInputText.disabled = true;
+      hitButton.disabled = false;
+      standButton.disabled = false;
+      doubleButton.disabled = false;
+      surrenderButton.disabled = false;
+      displayChart.innerHTML =
+        BREAKTHREELINE +
+        "You have bet " +
+        bet +
+        " points in the game." +
+        BREAKTWOLINE +
+        "Enjoy the game~";
+      startGame();
+      FLOWSEQUENCECONTROL = FLOWCONTROLSEQUENCE_TWO;
+    }
+  }
+}
+
+function FLOWCONTROLSEQUENCETWO() {
+  hitButton.addEventListener("click", hit);
+  standButton.addEventListener("click", stand);
+  doubleButton.addEventListener("click", double);
+  surrenderButton.addEventListener("click", surrender);
+  shuffleButton.addEventListener("click", shuffle);
+
+  function hit() {
+    cardPoping(player);
+    doubleButton.disabled = true;
+    console.log("dealerSum  " + dealerSum);
+    console.log("PlayerSum  " + reduceAce(playerSum, playerAceCount));
+    if (reduceAce(playerSum, playerAceCount) > 21) {
+      decisionJudgement(dealer);
+      displayChart.innerHTML =
+        "Bust: " +
+        "You lose " +
+        bet +
+        " points." +
+        BREAKTWOLINE +
+        continueBetMSG;
+      FLOWSEQUENCECONTROL = FLOWCONTROLSEQUENCE_ONE;
+    }
+  }
+  function stand() {
+    while (dealerSum < 17) {
+      cardPoping(dealer);
+    }
+    dealerSum = reduceAce(dealerSum, dealerAceCount);
+    playerSum = reduceAce(playerSum, playerAceCount);
+    document.getElementById("hidden").src = "./Cards/" + hidden + ".png";
+
+    // next target: Add in 1) blackjack & 2) doubledown & 3) surrender
+    if (playerSum > 21) {
+      decisionJudgement(dealer);
+      displayChart.innerHTML =
+        BREAKTHREELINE +
+        "Bust" +
+        BREAKTWOLINE +
+        "You lose " +
+        bet +
+        " points." +
+        BREAKTWOLINE +
+        'Place your new bets in the wage box & hit "deal" button to continue.';
+    } else if (dealerSum > 21) {
+      decisionJudgement(player);
+      displayChart.innerHTML =
+        BREAKTHREELINE +
+        "You won! " +
+        bet +
+        " points." +
+        BREAKTWOLINE +
+        'Place your new bets in the wage box & hit "deal" button to continue.';
+    } else if (playerSum == dealerSum) {
+      decisionJudgement(tie);
+      displayChart.innerHTML =
+        BREAKTHREELINE +
+        "It's a tie " +
+        BREAKTWOLINE +
+        'Place your new bets in the wage box & hit "deal" button to continue.';
+    } else if (playerSum > dealerSum) {
+      decisionJudgement(player);
+      displayChart.innerHTML =
+        BREAKTHREELINE +
+        "You won! " +
+        bet +
+        " points." +
+        BREAKTWOLINE +
+        'Place your new bets in the wage box & hit "deal" button to continue.';
+    } else if (playerSum < dealerSum) {
+      decisionJudgement(dealer);
+      displayChart.innerHTML =
+        BREAKTHREELINE +
+        "You lose " +
+        bet +
+        " points." +
+        BREAKTWOLINE +
+        continueBetMSG;
+    }
+  }
+  function double() {
+    cardPoping(player);
+    bet = 2 * bet;
+    // wagerInputText.value = bet;
+    hitButton.disabled = true;
+    doubleButton.disabled = true;
+    surrenderButton.disabled = true;
+    displayChart.innerHTML =
+      "<b> ~ Double down ~ </b>" +
+      BREAKTWOLINE +
+      "Your new wager is " +
+      bet +
+      BREAKTWOLINE +
+      "You are not allowed to hit anymore.";
+  }
+  function surrender() {
+    decisionJudgement(Surrender);
+    displayChart.innerHTML =
+      "<b> ~ Surrender ~ </b>" + BREAKTWOLINE + continueBetMSG;
+    document.getElementById("hidden").src = "./Cards/" + hidden + ".png";
+  }
+  function shuffle() {
+    document.getElementById("deck").src = "Riffle_shuffle.gif";
+    ClearCard();
+    dealButton.disabled = false;
+    shuffleButton.disabled = true;
+    FLOWSEQUENCECONTROL = FLOWCONTROLSEQUENCE_ONE;
+  }
+}
+
+function decisionJudgement(Judgement) {
+  switch (Judgement) {
+    case player:
+      balance += bet;
+      cashInputText.value = balance;
+      winningInputText.value = balance - beginnerPrice;
+      adjustButton();
+      break;
+    case dealer:
+      balance -= bet;
+      cashInputText.value = balance;
+      winningInputText.value = balance - beginnerPrice;
+      adjustButton();
+      break;
+    case tie:
+      adjustButton();
+      break;
+    case backJack:
+      document.getElementById("hidden").src = "./Cards/" + hidden + ".png";
+      balance = balance + bet * 1.5;
+      cashInputText.value = balance;
+      winningInputText.value = balance - beginnerPrice;
+      adjustButton();
+      break;
+    case Surrender:
+      bet = bet / 2;
+      // wagerInputText.value = bet;
+      balance -= bet;
+      cashInputText.value = balance;
+      winningInputText.value = balance - beginnerPrice;
+      adjustButton();
+      break;
+  }
+}
+
+function ClearCard() {
+  document.getElementById("dealer-cards").innerHTML = "";
+  document.getElementById("player-cards").innerHTML = "";
+  dealerSum = 0;
+  playerSum = 0;
+  dealerAceCount = 0;
+  playerAceCount = 0;
+  playerKQJCount = 0;
+  dealerKQJCount = 0;
+  deck = [];
+}
+
+function buildDeck() {
+  let values = [
+    "A",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "J",
+    "Q",
+    "K",
+  ];
+  let types = ["C", "D", "H", "S"];
+
+  for (let i = 0; i < types.length; i++) {
+    for (let j = 0; j < values.length; j++) {
+      deck.push(values[j] + "-" + types[i]);
+    }
+  }
+}
+
+function shuffleDeck() {
+  for (let i = 0; i < deck.length; i++) {
+    let j = Math.floor(Math.random() * deck.length);
+    let temp = deck[i];
+    deck[i] = deck[j];
+    deck[j] = temp;
+  }
+}
+
+function startGame() {
+  hidden = deck.pop();
+  dealerSum += getValue(hidden);
+  dealerAceCount += checkAce(hidden);
+  let img = new Image();
+  img.setAttribute("id", "hidden");
+  img.src = "./Cards/BACK.png";
+  document.getElementById("dealer-cards").appendChild(img);
+
+  cardPoping(dealer);
+  for (let i = 0; i < 2; i++) {
+    cardPoping(player);
+  }
+
+  if (playerAceCount == 1 && playerSum == 21) {
+    if (dealerAceCount == 1 && dealerSum == 21) {
+      document.getElementById("hidden").src = "./Cards/" + hidden + ".png";
+      decisionJudgement(tie);
+      displayChart.innerHTML =
+        "IT's a tie match!!! " +
+        BREAKTWOLINE +
+        "You and Dealer has a pair of BLACKJACK!" +
+        BREAKONELINE +
+        continueBetMSG;
+    } else {
+      decisionJudgement(backJack);
+      displayChart.innerHTML =
+        "CONGRATULATIONS!!! 🤗" +
+        BREAKTWOLINE +
+        "You got a pair of BLACKJACK!" +
+        BREAKTWOLINE +
+        "BLACKJACK pays 3 to 2!" +
+        BREAKTWOLINE +
+        "You won total of " +
+        bet * 1.5 +
+        "!" +
+        BREAKONELINE +
+        continueBetMSG;
+    }
+  }
+}
+
+function cardPoping(OWNERCARD) {
+  let cardImg = document.createElement("img");
+  let card = deck.pop();
+  cardImg.src = "./Cards/" + card + ".png";
+  if (OWNERCARD == player) {
+    playerSum += getValue(card);
+    playerAceCount += checkAce(card);
+    document.getElementById("player-cards").append(cardImg);
+  } else if (OWNERCARD == dealer) {
+    dealerSum += getValue(card);
+    dealerAceCount += checkAce(card);
+    document.getElementById("dealer-cards").append(cardImg);
+  }
+}
+
+function getValue(card) {
+  // Split to get the value from the array "5-S" -> ["5","S"]
+  let data = card.split("-");
+  let value = data[0];
+
+  if (isNaN(value)) {
+    if (value == "A") {
+      return 11;
+    }
+    return 10;
+  }
+  return parseInt(value);
+}
+
+function checkAce(card) {
+  if (card[0] == "A") {
+    return 1;
+  }
+  return 0;
+}
+
+function reduceAce(reduceplayerSum, reduceplayerAceCount) {
+  //Ace Card is count as 1 or 11.
+  //If hand have not reach 21, it becomes 11
+  //If hand is almost 21, it becomes 1
+  while (reduceplayerSum > 21 && reduceplayerAceCount > 0) {
+    reduceplayerSum -= 10;
+    reduceplayerAceCount -= 1;
+  }
+  return reduceplayerSum;
+}
+
+function adjustButton() {
+  dealButton.disabled = true;
+  standButton.disabled = true;
+  doubleButton.disabled = true;
+  surrenderButton.disabled = true;
+  hitButton.disabled = true;
+  wagerInputText.disabled = false;
+  dealButton.disabled = true;
+  shuffleButton.disabled = false;
+}
diff --git a/BlackjackStyle.css b/BlackjackStyle.css
new file mode 100644
index 00000000..afb0a3e1
--- /dev/null
+++ b/BlackjackStyle.css
@@ -0,0 +1,253 @@
+* {
+  margin: 0;
+  padding: 0;
+  /* box-sizing: border-box; */
+}
+body {
+  background: #00763a;
+  text-align: center;
+}
+
+#background {
+  background: transparent url(Blackjack-table-top-view.jpg) 0 0 no-repeat;
+  border-radius: 5px;
+  color: #000000;
+  background-position: center;
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  font: 14px/17px Helvetica, arial, verdana, sans-serif;
+}
+
+#action {
+  position: absolute;
+  bottom: 0;
+  left: 13%;
+  text-align: center;
+  padding: 1 rem;
+  margin-bottom: 1rem;
+  /* background-color: #000000; */
+}
+
+/* Cards */
+#dealer-cards img {
+  height: 175px;
+  width: 125px;
+  margin-bottom: 30px;
+  margin-top: 50px;
+  background-color: transparent;
+  animation: fadeInAnimation ease-in 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+#player-cards img {
+  height: 175px;
+  width: 125px;
+  margin-top: 30px;
+  animation: fadeInAnimation ease 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+#deck {
+  position: absolute;
+  height: 175px;
+  width: 125x;
+  bottom: 50%;
+  right: 13%;
+  animation: fadeInAnimation ease 3s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Money */
+#money {
+  border: 1px solid #ffc926;
+  background: #333;
+  content: "";
+  opacity: 1;
+  text-align: right;
+  border-radius: 10px;
+  height: 70px;
+  position: absolute;
+  left: 1%;
+  top: 1%;
+  width: 300px;
+  padding: 10px;
+  color: #fff;
+  font: 700 18px/20px Helvetica, Arial, Verdana, Sans-serif;
+  justify-content: space-between;
+  display: inline-block;
+  margin-right: 30px;
+}
+
+#Wager-text {
+  width: 175px;
+}
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 250px;
+  background-color: black;
+  color: #fff;
+  text-align: left;
+  border-radius: 6px;
+  padding: 5px 0;
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+  top: -5px;
+  left: 105%;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+#output-div {
+  color: #000000;
+  position: absolute;
+  margin: 20px auto;
+  border-radius: 10px;
+  padding: 10px;
+  top: 26%;
+  left: 2%;
+  width: 18%;
+  height: 20%;
+  font-family: "Comic Sans MS", "Comic Sans", "cursive";
+  font-size: medium;
+}
+
+#dpBoard {
+  position: absolute;
+  bottom: 18%;
+  left: 1%;
+  max-width: 50%;
+  max-height: 65%;
+}
+
+/* Button */
+.btn,
+.btn:after {
+  width: 50px;
+  height: 76px;
+  line-height: 78px;
+  font-size: 20px;
+  font-family: "Bebas Neue", sans-serif;
+  background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
+  border: 0;
+  color: #fff;
+  letter-spacing: 3px;
+  box-shadow: 6px 0px 0px #00e6f6;
+  outline: transparent;
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.btn:after {
+  --slice-0: inset(50% 50% 50% 50%);
+  --slice-1: inset(80% -6px 0 0);
+  --slice-2: inset(50% -6px 30% 0);
+  --slice-3: inset(10% -6px 85% 0);
+  --slice-4: inset(40% -6px 43% 0);
+  --slice-5: inset(80% -6px 5% 0);
+
+  content: "BLACKJACK";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    45deg,
+    transparent 3%,
+    #00e6f6 3%,
+    #00e6f6 5%,
+    #ff013c 5%
+  );
+  text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
+  clip-path: var(--slice-0);
+}
+
+.btn:hover:after {
+  animation: 1s glitch;
+  animation-timing-function: steps(2, end);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+@keyframes glitch {
+  0% {
+    clip-path: var(--slice-1);
+    transform: translate(-20px, -10px);
+  }
+  10% {
+    clip-path: var(--slice-3);
+    transform: translate(10px, 10px);
+  }
+  20% {
+    clip-path: var(--slice-1);
+    transform: translate(-10px, 10px);
+  }
+  30% {
+    clip-path: var(--slice-3);
+    transform: translate(0px, 5px);
+  }
+  40% {
+    clip-path: var(--slice-2);
+    transform: translate(-5px, 0px);
+  }
+  50% {
+    clip-path: var(--slice-3);
+    transform: translate(5px, 0px);
+  }
+  60% {
+    clip-path: var(--slice-4);
+    transform: translate(5px, 10px);
+  }
+  70% {
+    clip-path: var(--slice-2);
+    transform: translate(-10px, 10px);
+  }
+  80% {
+    clip-path: var(--slice-5);
+    transform: translate(20px, -10px);
+  }
+  90% {
+    clip-path: var(--slice-1);
+    transform: translate(-10px, 0px);
+  }
+  100% {
+    clip-path: var(--slice-1);
+    transform: translate(0);
+  }
+}
+
+@media (min-width: 768px) {
+  .btn,
+  .btn:after {
+    width: 180px;
+    height: 86px;
+    line-height: 88px;
+  }
+}
diff --git a/Cards/10-C.png b/Cards/10-C.png
new file mode 100644
index 00000000..18af741d
Binary files /dev/null and b/Cards/10-C.png differ
diff --git a/Cards/10-D.png b/Cards/10-D.png
new file mode 100644
index 00000000..3bbc4e06
Binary files /dev/null and b/Cards/10-D.png differ
diff --git a/Cards/10-H.png b/Cards/10-H.png
new file mode 100644
index 00000000..3eb83d72
Binary files /dev/null and b/Cards/10-H.png differ
diff --git a/Cards/10-S.png b/Cards/10-S.png
new file mode 100644
index 00000000..0b3d2947
Binary files /dev/null and b/Cards/10-S.png differ
diff --git a/Cards/2-C.png b/Cards/2-C.png
new file mode 100644
index 00000000..291ed975
Binary files /dev/null and b/Cards/2-C.png differ
diff --git a/Cards/2-D.png b/Cards/2-D.png
new file mode 100644
index 00000000..4deee7cc
Binary files /dev/null and b/Cards/2-D.png differ
diff --git a/Cards/2-H.png b/Cards/2-H.png
new file mode 100644
index 00000000..75a014f3
Binary files /dev/null and b/Cards/2-H.png differ
diff --git a/Cards/2-S.png b/Cards/2-S.png
new file mode 100644
index 00000000..1ce0ffe8
Binary files /dev/null and b/Cards/2-S.png differ
diff --git a/Cards/3-C.png b/Cards/3-C.png
new file mode 100644
index 00000000..076ab318
Binary files /dev/null and b/Cards/3-C.png differ
diff --git a/Cards/3-D.png b/Cards/3-D.png
new file mode 100644
index 00000000..8ee0b4b9
Binary files /dev/null and b/Cards/3-D.png differ
diff --git a/Cards/3-H.png b/Cards/3-H.png
new file mode 100644
index 00000000..8e74673f
Binary files /dev/null and b/Cards/3-H.png differ
diff --git a/Cards/3-S.png b/Cards/3-S.png
new file mode 100644
index 00000000..f9e06b4f
Binary files /dev/null and b/Cards/3-S.png differ
diff --git a/Cards/4-C.png b/Cards/4-C.png
new file mode 100644
index 00000000..8be9e089
Binary files /dev/null and b/Cards/4-C.png differ
diff --git a/Cards/4-D.png b/Cards/4-D.png
new file mode 100644
index 00000000..70e82e83
Binary files /dev/null and b/Cards/4-D.png differ
diff --git a/Cards/4-H.png b/Cards/4-H.png
new file mode 100644
index 00000000..ceecbfe0
Binary files /dev/null and b/Cards/4-H.png differ
diff --git a/Cards/4-S.png b/Cards/4-S.png
new file mode 100644
index 00000000..95abe3e7
Binary files /dev/null and b/Cards/4-S.png differ
diff --git a/Cards/5-C.png b/Cards/5-C.png
new file mode 100644
index 00000000..bde97776
Binary files /dev/null and b/Cards/5-C.png differ
diff --git a/Cards/5-D.png b/Cards/5-D.png
new file mode 100644
index 00000000..bb925255
Binary files /dev/null and b/Cards/5-D.png differ
diff --git a/Cards/5-H.png b/Cards/5-H.png
new file mode 100644
index 00000000..d923456f
Binary files /dev/null and b/Cards/5-H.png differ
diff --git a/Cards/5-S.png b/Cards/5-S.png
new file mode 100644
index 00000000..53a1aad2
Binary files /dev/null and b/Cards/5-S.png differ
diff --git a/Cards/6-C.png b/Cards/6-C.png
new file mode 100644
index 00000000..a9660a03
Binary files /dev/null and b/Cards/6-C.png differ
diff --git a/Cards/6-D.png b/Cards/6-D.png
new file mode 100644
index 00000000..78a80ad0
Binary files /dev/null and b/Cards/6-D.png differ
diff --git a/Cards/6-H.png b/Cards/6-H.png
new file mode 100644
index 00000000..361643ef
Binary files /dev/null and b/Cards/6-H.png differ
diff --git a/Cards/6-S.png b/Cards/6-S.png
new file mode 100644
index 00000000..40242a71
Binary files /dev/null and b/Cards/6-S.png differ
diff --git a/Cards/7-C.png b/Cards/7-C.png
new file mode 100644
index 00000000..9d6b5455
Binary files /dev/null and b/Cards/7-C.png differ
diff --git a/Cards/7-D.png b/Cards/7-D.png
new file mode 100644
index 00000000..6ad5f15b
Binary files /dev/null and b/Cards/7-D.png differ
diff --git a/Cards/7-H.png b/Cards/7-H.png
new file mode 100644
index 00000000..19b89a2e
Binary files /dev/null and b/Cards/7-H.png differ
diff --git a/Cards/7-S.png b/Cards/7-S.png
new file mode 100644
index 00000000..b9f1b93d
Binary files /dev/null and b/Cards/7-S.png differ
diff --git a/Cards/8-C.png b/Cards/8-C.png
new file mode 100644
index 00000000..cec743cb
Binary files /dev/null and b/Cards/8-C.png differ
diff --git a/Cards/8-D.png b/Cards/8-D.png
new file mode 100644
index 00000000..ed129512
Binary files /dev/null and b/Cards/8-D.png differ
diff --git a/Cards/8-H.png b/Cards/8-H.png
new file mode 100644
index 00000000..fb39723c
Binary files /dev/null and b/Cards/8-H.png differ
diff --git a/Cards/8-S.png b/Cards/8-S.png
new file mode 100644
index 00000000..b6b3b381
Binary files /dev/null and b/Cards/8-S.png differ
diff --git a/Cards/9-C.png b/Cards/9-C.png
new file mode 100644
index 00000000..2174db58
Binary files /dev/null and b/Cards/9-C.png differ
diff --git a/Cards/9-D.png b/Cards/9-D.png
new file mode 100644
index 00000000..0b933fb0
Binary files /dev/null and b/Cards/9-D.png differ
diff --git a/Cards/9-H.png b/Cards/9-H.png
new file mode 100644
index 00000000..7b196d6d
Binary files /dev/null and b/Cards/9-H.png differ
diff --git a/Cards/9-S.png b/Cards/9-S.png
new file mode 100644
index 00000000..3c3b5ffb
Binary files /dev/null and b/Cards/9-S.png differ
diff --git a/Cards/A-C.png b/Cards/A-C.png
new file mode 100644
index 00000000..42bf5ec9
Binary files /dev/null and b/Cards/A-C.png differ
diff --git a/Cards/A-D.png b/Cards/A-D.png
new file mode 100644
index 00000000..79cd3b8a
Binary files /dev/null and b/Cards/A-D.png differ
diff --git a/Cards/A-H.png b/Cards/A-H.png
new file mode 100644
index 00000000..b4221240
Binary files /dev/null and b/Cards/A-H.png differ
diff --git a/Cards/A-S.png b/Cards/A-S.png
new file mode 100644
index 00000000..103f56d1
Binary files /dev/null and b/Cards/A-S.png differ
diff --git a/Cards/BACK.png b/Cards/BACK.png
new file mode 100644
index 00000000..2e02e052
Binary files /dev/null and b/Cards/BACK.png differ
diff --git a/Cards/J-B.png b/Cards/J-B.png
new file mode 100644
index 00000000..000b640b
Binary files /dev/null and b/Cards/J-B.png differ
diff --git a/Cards/J-C.png b/Cards/J-C.png
new file mode 100644
index 00000000..5e003be2
Binary files /dev/null and b/Cards/J-C.png differ
diff --git a/Cards/J-D.png b/Cards/J-D.png
new file mode 100644
index 00000000..131a9773
Binary files /dev/null and b/Cards/J-D.png differ
diff --git a/Cards/J-H.png b/Cards/J-H.png
new file mode 100644
index 00000000..bf342bcb
Binary files /dev/null and b/Cards/J-H.png differ
diff --git a/Cards/J-R.png b/Cards/J-R.png
new file mode 100644
index 00000000..55b3ef9b
Binary files /dev/null and b/Cards/J-R.png differ
diff --git a/Cards/J-S.png b/Cards/J-S.png
new file mode 100644
index 00000000..f539c19c
Binary files /dev/null and b/Cards/J-S.png differ
diff --git a/Cards/K-C.png b/Cards/K-C.png
new file mode 100644
index 00000000..68e57747
Binary files /dev/null and b/Cards/K-C.png differ
diff --git a/Cards/K-D.png b/Cards/K-D.png
new file mode 100644
index 00000000..e21d6a0a
Binary files /dev/null and b/Cards/K-D.png differ
diff --git a/Cards/K-H.png b/Cards/K-H.png
new file mode 100644
index 00000000..1d3c468d
Binary files /dev/null and b/Cards/K-H.png differ
diff --git a/Cards/K-S.png b/Cards/K-S.png
new file mode 100644
index 00000000..2edbbc14
Binary files /dev/null and b/Cards/K-S.png differ
diff --git a/Cards/Q-C.png b/Cards/Q-C.png
new file mode 100644
index 00000000..7be5f9a9
Binary files /dev/null and b/Cards/Q-C.png differ
diff --git a/Cards/Q-D.png b/Cards/Q-D.png
new file mode 100644
index 00000000..928f6501
Binary files /dev/null and b/Cards/Q-D.png differ
diff --git a/Cards/Q-H.png b/Cards/Q-H.png
new file mode 100644
index 00000000..21839e68
Binary files /dev/null and b/Cards/Q-H.png differ
diff --git a/Cards/Q-S.png b/Cards/Q-S.png
new file mode 100644
index 00000000..7983d034
Binary files /dev/null and b/Cards/Q-S.png differ
diff --git a/Clipboard.jpg b/Clipboard.jpg
new file mode 100644
index 00000000..27110fcf
Binary files /dev/null and b/Clipboard.jpg differ
diff --git a/Riffle_shuffle.gif b/Riffle_shuffle.gif
new file mode 100644
index 00000000..2f03cc48
Binary files /dev/null and b/Riffle_shuffle.gif differ
diff --git a/index.html b/index.html
index bbc7dffd..c0f4c9e0 100644
--- a/index.html
+++ b/index.html
@@ -1,155 +1,52 @@
-
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
-    <!-- Page setup configurations -->
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    <!-- Favicon configuration -->
-    <link rel="apple-touch-icon" sizes="180x180" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/apple-touch-icon.png?v=2">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-32x32.png?v=2">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-16x16.png?v=2">
-    <link rel="manifest" href="/site.webmanifest?v=2">
-    <link rel="mask-icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/safari-pinned-tab.svg?v=2" color="#e73c3e">
-    <link rel="shortcut icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon.ico?v=2">
-    <meta name="apple-mobile-web-app-title" content="Rocket Academy">
-    <meta name="application-name" content="Rocket Academy">
-    <meta name="msapplication-TileColor" content="#2b5797">
-    <meta name="theme-color" content="#ffffff">
-
-    <!-- sharing configuration -->
-    <!-- Primary Meta Tags -->
-    <title>Blackjack - Basics - Rocket Academy</title>
-    <meta name="title" content="YOURNAME's BlackJack Game!">
-    <meta name="description" content="A fun card game I made myself! 😄💪🌈">
-
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
-    <meta property="og:title" content="YOURNAME's BlackJack Game!">
-    <meta property="og:description" content="A fun card game I made myself! 😄💪🌈">
-    <meta property="og:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
-
-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
-    <meta name="twitter:title" content="YOURNAME's BlackJack Game!">
-    <meta name="twitter:description" content="A fun card game I made myself! 😄💪🌈">
-    <meta name="twitter:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
-    <meta name="twitter:site" content="@rocketacademyco">
-    <meta name="twitter:creator" content="@rocketacademyco">
-
-    <!-- fonts -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
-
-    <!-- CSS -->
-    <style>
-      * {
-        box-sizing: border-box;
-      }
-
-      body {
-        font-family: 'Open Sans', sans-serif;
-        margin-left: 30px;
-        margin-right: 30px;
-        background-color:white;
-        color: black; /* sets the font color */
-        background-image: url(""); /* The image used */
-        background-position: center; /* Center the image */
-        background-repeat: no-repeat; /* Do not repeat the image */
-        background-size: cover; /* Resize the background image to cover the entire container */
-      }
-
-      #output-div img{
-        display:block;
-        max-width:100%;
-        max-height:200px;
-      }
-      .header {
-        text-align: center;
-        font-size: 1.1rem;
-        margin-bottom: 3rem;
-      }
-
-      #container {
-        background-color: pink;
-        margin: 40px auto;
-        max-width: 800px;
-        padding: 38px 31px;
-      }
-
-      input {
-        font-size: 21px;
-        line-height: 33px;
-        margin: 0 0 23px 0;
-        padding: 0 9px;
-        width: 100%;
-      }
-
-      button {
-        font-size: 21px;
-        line-height: 33px;
-        margin: 0 0 23px 0;
-        padding: 0 6px;
-      }
-
-      #output-div {
-        background-color: lightgrey;
-        margin: 20px auto;
-        padding: 20px;
-        width: 100%;
-      }
-
-      .logo-img {
-        height: 49px;
-        position: relative;
-        top: 22px;
-      }
-
-      /* increase header font size on wider screens */
-      @media screen and (min-width: 600px) {
-        .header {
-          font-size: 2rem;
-        }
-      }
-    </style>
-
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>🎴 ♠ ♣ BlackJack ♥ ♦ 🃏</title>
+    <link rel="stylesheet" href="BlackjackStyle.css" />
   </head>
 
   <body>
-    <h1 class="header">
-      <img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
-      Rocket Academy
-      <img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
-    </h1>
-    <h1 class="header">♣️ Basics - Blackjack ♠️</h1>
-    <div id="container">
-      <p>Input:</p>
-      <input id="input-field" />
-      <br />
-      <button id="submit-button">Submit</button>
-      <p>Output:</p>
-      <div id="output-div"></div>
+    <div id="background">
+      <!-- Card on the desk -->
+      <div id="dealer-cards"></div>
+      <img src="Riffle_shuffle.gif" id="deck" />
+      <div id="player-cards"></div>
     </div>
-    <!-- Import program logic -->
-    <script src="script.js"></script>
-    <!-- Define button click functionality -->
-    <script>
-      var button = document.querySelector("#submit-button");
-      button.addEventListener("click", function () {
-        // Set result to input value
-        var input = document.querySelector("#input-field");
-        var result = main(input.value);
-
-        // Display result in output element
-        var output = document.querySelector("#output-div");
-        output.innerHTML = result;
-
-        // Reset input value
-        input.value = "";
-      });
-    </script>
+    <!-- Display message on board -->
+    <img src="Clipboard.jpg" id="dpBoard" />
+    <div id="output-div" align="left"></div>
+    <!-- Wage Section -->
+    <div id="money">
+      <div>Points : <input type="text" id="cash-text" disabled /></div>
+      <div>Winning : <input type="text" id="Winning-text" disabled /></div>
+      <!-- <div>Wager : <input type="text" id="Wager-text" value="100" /></div> -->
+      <div class="tooltip">
+        Wage:
+        <span class="tooltiptext">
+          Blue Chip = 10 points<br />Green Chip = 25 points<br />Black Chip =
+          100 points<br />Purple Chip = 500 points<br />Yellow Chip = 1000
+          points</span
+        >
+        <select name="Wage" id="Wager-text">
+          <option value="10">Blue Chip</option>
+          <option value="25">Green Chip</option>
+          <option value="100">Black Chip</option>
+          <option value="500">Purple Chip</option>
+          <option value="1000">Yellow Chip</option>
+        </select>
+      </div>
+    </div>
+    <!-- User decision -->
+    <div id="action">
+      <button id="deal" class="btn">Deal</button>
+      <button id="hit" class="btn" disabled>Hit</button>
+      <button id="stand" class="btn" disabled>Stand</button>
+      <button id="double" class="btn" disabled>Double Down</button>
+      <button id="surrender" class="btn" disabled>Surrender</button>
+      <button id="shuffle" class="btn" disabled>Clear</button>
+    </div>
+    <script src="Blackjack.js"></script>
   </body>
 </html>