diff --git a/onlinetichu-counter.js b/onlinetichu-counter.js
index a0b5d9a..06893a7 100644
--- a/onlinetichu-counter.js
+++ b/onlinetichu-counter.js
@@ -16,18 +16,52 @@ function injectCounter() {
   var myStyles = `
     #playedHigh {
       position: absolute;
-      top: 620px;
-      width: 850px;
+      top: 45px;
+      left: 5px;
+      width: 935px;
       height: 120px;
     }
 
     #playedLow {
       position: absolute;
-      top: 750px;
-      width: 850px;
+      top: 170px;
+      left: 5px;
+      width: 935px;
       height: 120px;
     }
 
+    #counterField {
+      position: absolute;
+      width: 945px;
+      height: 300px;
+      top: 635px;
+      border: 1px solid black;
+      box-shadow: 1px 1px 1px #555;
+      background: #88CC00;
+    }
+
+    #controlBar {
+      position: absolute;
+      min-height: 32px;
+      width: 925px;
+      top: 5px;
+      left: 5px;
+      border-radius: 20px;
+      background: #000000;
+    }
+
+    #controlButtonsLeft {
+      position: absolute;
+      top: 4px;
+      left: 15px;
+    }
+
+    #controlButtonsRight {
+      position: absolute;
+      top: 4px;
+      right: 15px;
+    }
+
     .playedCardsLayout {
       position: absolute;
       height: 125px;
@@ -54,6 +88,46 @@ function injectCounter() {
   console.log(styleSheet);
   document.head.appendChild(styleSheet);
 
+  var controlBar = document.createElement('div');
+  controlBar.id = 'controlBar';
+
+  var controlButtonsLeft = document.createElement('div');
+  controlButtonsLeft.className = 'btn-group';
+  controlButtonsLeft.id = 'controlButtonsLeft';
+
+  var controlButtonsRight = document.createElement('div');
+  controlButtonsRight.className = 'btn-group';
+  controlButtonsRight.id = 'controlButtonsRight';
+
+  var davidProtectionButton = document.createElement('button');
+  davidProtectionButton.className = "btn btn-success btn-xs";
+  davidProtectionButton.id = "davidProtection";
+  davidProtectionButton.type = "button";
+  davidProtectionButton.innerHTML = 'David protection: <span id="davidProtectionValue" data-on="On" data-off="Off">Yes</span>';
+
+  var showRemainingButton = document.createElement('button');
+  showRemainingButton.className = "btn btn-info btn-xs";
+  showRemainingButton.id = "showRemaining";
+  showRemainingButton.type = "button";
+  showRemainingButton.innerHTML = 'Show: <span id="showRemainingValue" data-on="Remaining" data-off="Played">Remaining</span>';
+
+  var showCountedCardsButton = document.createElement('button');
+  showCountedCardsButton.className = "btn btn-success btn-xs";
+  showCountedCardsButton.id = "showCountedCards";
+  showCountedCardsButton.type = "button";
+  showCountedCardsButton.innerHTML = 'Show cards: <span id="showCountedCardsValue" data-on="Yes" data-off="No">No</span>';
+
+  controlButtonsRight.appendChild(showRemainingButton);
+  controlButtonsRight.appendChild(showCountedCardsButton);
+  controlButtonsLeft.appendChild(davidProtectionButton);
+
+  controlBar.appendChild(controlButtonsLeft);
+  controlBar.appendChild(controlButtonsRight);
+
+  var counterField = document.createElement("div");
+  counterField.id = 'counterField';
+  counterField.appendChild(controlBar);
+
   // add an extra field where we will put down the played cards
   var cardsField = document.createElement('div');
   cardsField.id = 'cardsField';
@@ -71,9 +145,11 @@ function injectCounter() {
   playedLow.className = 'row';
   playedLow.hidden = true;
 
+  counterField.appendChild(playedHigh);
+  counterField.appendChild(playedLow);
+
   tableIG = document.getElementById('gameField').parentNode;
-  tableIG.appendChild(playedHigh);
-  tableIG.appendChild(playedLow);
+  tableIG.appendChild(counterField);
 
   var createCardPlace = function(value, shift, node) {
     var playedCards = document.createElement('ul');
@@ -83,7 +159,7 @@ function injectCounter() {
     playedCards.className = 'playedCardsLayout list-unstyled';
     playedCards.style.width = '160px';
     playedCards.style.marginLeft = '25px';
-    playedCards.style.left = shift*129 + 'px';
+    playedCards.style.left = shift*127 + 'px';
 
     node.appendChild(playedCards);
   }
@@ -102,23 +178,16 @@ function injectCounter() {
   smartFoldButton.className = "btn btn-danger btn-xs";
   smartFoldButton.id = "smartFold";
   smartFoldButton.type = "button";
-  smartFoldButton.innerHTML = 'Smart fold: <span id="smartFoldValue" data-on="Yes" data-off="No">Yes</span>';
+  smartFoldButton.innerHTML = 'Smart fold: <span id="smartFoldValue" data-on="On" data-off="Off">Yes</span>';
 
-  var showPlayedButton = document.createElement('button');
-  showPlayedButton.className = "btn btn-primary btn-xs";
-  showPlayedButton.id = "showPlayed";
-  showPlayedButton.type = "button";
-  showPlayedButton.innerHTML = 'Show counted cards: <span id="showPlayedValue" data-on="Yes" data-off="No">No</span>';
-
-  var showRemainingButton = document.createElement('button');
-  showRemainingButton.className = "btn btn-info btn-xs";
-  showRemainingButton.id = "showRemaining";
-  showRemainingButton.type = "button";
-  showRemainingButton.innerHTML = 'Show: <span id="showRemainingValue" data-on="Remaining" data-off="Played">Remaining</span>';
+  var showCardCounterButton = document.createElement('button');
+  showCardCounterButton.className = "btn btn-primary btn-xs";
+  showCardCounterButton.id = "showCardCounter";
+  showCardCounterButton.type = "button";
+  showCardCounterButton.innerHTML = 'Card Counter: <span id="showCardCounterValue" data-on="On" data-off="Off">No</span>';
 
   buttons = document.getElementById('statusButtons');
-  buttons.insertBefore(showRemainingButton, document.getElementById('autoFold'));
-  buttons.insertBefore(showPlayedButton, document.getElementById('autoFold'));
+  buttons.insertBefore(showCardCounterButton, document.getElementById('autoFold'));
   buttons.insertBefore(smartFoldButton, document.getElementById('autoFold'));
 
   // playedCards.
@@ -129,12 +198,17 @@ function injectCounter() {
     $playedCards: {},
     $smartFold: $('#smartFold'),
     $smartFoldValue: $('#smartFoldValue'),
-    $showPlayed: $('#showPlayed'),
-    $showPlayedValue: $('#showPlayedValue'),
+    $showCardCounter: $('#showCardCounter'),
+    $showCardCounterValue: $('#showCardCounterValue'),
     $showRemaining: $('#showRemaining'),
     $showRemainingValue: $('#showRemainingValue'),
+    $showCountedCards: $('#showCountedCards'),
+    $showCountedCardsValue: $('#showCountedCardsValue'),
+    $davidProtection: $('#davidProtection'),
+    $davidProtectionValue: $('#davidProtectionValue'),
     $playedHigh: $('#playedHigh'),
     $playedLow: $('#playedLow'),
+    $counterField: $('#counterField'),
 
     allCards: {},
     playedCards: {},
@@ -142,9 +216,12 @@ function injectCounter() {
     exchangedTo: {},
     exchangedFrom: {},
     smartFold: true,
-    showPlayed: false,
+    showCardCounter: false,
     showRemaining: true,
+    showCountedCards: false,
     bombAfterFold: null,
+    davidProtection: false,
+    davidProtectionTriggered: true,
 
     util: {
       displayCardsHtmlString: function(cards) {
@@ -254,7 +331,7 @@ function injectCounter() {
     window.otc = OnlineTichuCounter;
   }
 
-  otc.$showRemaining.hide();
+  otc.$counterField.hide();
 
   // add functionality to smartFold button
   otc.$smartFold.click(function () {
@@ -267,18 +344,36 @@ function injectCounter() {
   });
 
   // add functionality to show button
-  otc.$showPlayed.click(function () {
-    otc.showPlayed = !otc.showPlayed;
-    if (otc.showPlayed) {
-      otc.$showPlayedValue.text(otc.$showPlayedValue.data('on'));
+  otc.$showCardCounter.click(function () {
+    otc.showCardCounter = !otc.showCardCounter;
+    if (otc.showCardCounter) {
+      otc.$showCardCounterValue.text(otc.$showCardCounterValue.data('on'));
+      otc.$counterField.show();
+    } else {
+      otc.$showCardCounterValue.text(otc.$showCardCounterValue.data('off'));
+      otc.$counterField.hide();
+    }
+  });
+
+  otc.$showCountedCards.click(function () {
+    otc.showCountedCards = !otc.showCountedCards;
+    if (otc.showCountedCards) {
+      otc.$showCountedCardsValue.text(otc.$showCountedCardsValue.data('on'));
       otc.$playedHigh.show();
       otc.$playedLow.show();
-      otc.$showRemaining.show();
     } else {
-      otc.$showPlayedValue.text(otc.$showPlayedValue.data('off'));
+      otc.$showCountedCardsValue.text(otc.$showCountedCardsValue.data('off'));
       otc.$playedHigh.hide();
       otc.$playedLow.hide();
-      otc.$showRemaining.hide();
+    }
+  });
+
+  otc.$davidProtection.click(function () {
+    otc.davidProtection = !otc.davidProtection;
+    if (otc.davidProtection) {
+      otc.$davidProtectionValue.text(otc.$davidProtectionValue.data('on'));
+    } else {
+      otc.$davidProtectionValue.text(otc.$davidProtectionValue.data('off'));
     }
   });
 
@@ -299,6 +394,26 @@ function injectCounter() {
   otc.action.resetPlayedCards();
   otc.util.populateAllCards();
 
+  // overwrite functionality of fold button
+  ot.$fold.unbind();
+  ot.$fold.click()(function () {
+    if (otc.davidProtection) {
+      if(ot.$passCards.length != 0 && !otc.davidProtectionTriggered) {
+        ot.$gameMessage.text("You have selected cards to play but folded. Are you sure? Press fold again to fold");
+        otc.davidProtectionTriggered = true;
+        return;
+      }
+    }
+    ot.action.fold();
+    otc.davidProtectionTriggered = false;
+		$(this).hide();
+  });
+
+	ot.$fold.hide().click(function () {
+		ot.action.Fold();
+		$(this).hide();
+	});
+
   MyTableState = (function() {
     var cachedFunction = ot.reaction.TableState;