diff --git a/app/main/payments.py b/app/main/payments.py
index b2ea76f..946d2ea 100644
--- a/app/main/payments.py
+++ b/app/main/payments.py
@@ -140,6 +140,7 @@ def sanatizeRequest(payments_request):
     del payments_request['houseNumberOrName']
     del payments_request['postalCode']
     del payments_request['street']
+    del payments_request['stateOrProvince']
 
 
 
diff --git a/app/static/css/application.css b/app/static/css/application.css
index 8476c37..ada3f5d 100644
--- a/app/static/css/application.css
+++ b/app/static/css/application.css
@@ -367,9 +367,25 @@ a:hover {
   margin-right: 24px;
 }
 
+/* resest button start */
+.resetStyle {
+  color: #fff;
+  justify-content: center;
+  background: #00112c !important;
+  border-radius: 6px !important;
+  border: none;
+  width: 110px;
+  height: 30px;
+}
+
+.resetStyle:focus {
+  outline-color: #36bf52;
+}
+/* reset button end */
+
 .country-selector {
   align-items: center;
-  background: #e5eaef;
+  background: #fff;
   border: 1px solid #b9c4c9;
   border-radius: 6px;
   display: flex;
@@ -377,9 +393,10 @@ a:hover {
   margin: 0;
   outline: none;
   padding: 0 0 0 12px;
-  position: relative;
+  position: absolute;
   font-size: var(--small-text);
   width: 10px;
+  bottom:0px;
 }
 
 @media (min-width: 768px) {
@@ -395,6 +412,7 @@ a:hover {
 }
 
 .country-selector__select {
+  position: relative;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -425,7 +443,7 @@ a:hover {
 /* font selector styling */
 .font-selector {
   align-items: center;
-  background: #e5eaef;
+  background: #fff;
   border: 1px solid #b9c4c9;
   border-radius: 6px;
   display: flex;
@@ -433,8 +451,9 @@ a:hover {
   margin: auto 0 auto auto;
   outline: none;
   padding: 0 0 0 12px;
-  position: relative;
+  position: absolute;
   width: 100%;
+  bottom: 0px;
 }
 
 @media (min-width: 768px) {
@@ -451,7 +470,7 @@ a:hover {
   border: 0;
   cursor: pointer;
   flex: 1;
-
+  position: relative;
   height: 100%;
   margin: 0 -12px 0 -42px;
   outline: none;
@@ -477,7 +496,7 @@ a:hover {
 /* text align selector styling */
 .text-alignment {
   align-items: center;
-  background: #e5eaef;
+  background: #fff;
   border: 1px solid #b9c4c9;
   border-radius: 6px;
   display: flex;
@@ -485,10 +504,23 @@ a:hover {
   margin: auto 0 auto auto;
   outline: none;
   padding: 0 0 0 12px;
-  position: relative;
+  position: absolute;
   width: 100%;
+  bottom: 0px;
 }
 
+/* .left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  text-align: right;
+} */
+
 @media (min-width: 768px) {
   .text-alignment {
     width: 200px;
@@ -496,6 +528,7 @@ a:hover {
 }
 
 .textalign-selector__select {
+  position: relative;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -523,8 +556,8 @@ a:hover {
 }
 
 .italicImage img {
-  width: 20px;
-  height: 20px;
+  width: 15px;
+  height: 15px;
 }
 
 .italicImage .btn {
@@ -533,15 +566,19 @@ a:hover {
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
-  padding: 0.4cm 0.6cm;
-  border: none;
+  border: var(--italic-selected);
   cursor: pointer;
-  border-radius: 0px;
+  border-radius: 50%;
+  width: 25px;
+  height:25px;
+  box-shadow: none;
+  top: 12.5px;
+
 }
 
 .boldImage img {
-  width: 20px;
-  height: 20px;
+  width: 15px;
+  height: 15px;
 }
 
 .boldImage .btn {
@@ -550,10 +587,13 @@ a:hover {
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
-  padding: 0.4cm 0.6cm;
-  border: none;
+  border: var(--bold-selected);
   cursor: pointer;
-  border-radius: 0px;
+  border-radius: 50%;
+  width: 25px;
+  height:25px;
+  box-shadow: none;
+  top: 12.5px;
 }
 
 /* Test card selector*/
@@ -632,6 +672,7 @@ a:hover {
 #payment-page .checkout {
   margin-top: 100px;
   background: var(--bg-color) !important;
+  margin-bottom: 100px;
 }
 
 #payment-page .settings {
@@ -662,6 +703,7 @@ a:hover {
   height: 100vh;
 }
 
+
 /* Adyen Components */
 .payment {
   width: 100%;
@@ -931,16 +973,15 @@ a:hover {
 :root {
   --background-color: #00112c;
   --font-options: "Segoe UI", sans-serif, Helvetica, Arial;
-  --background-color: #00112c;
   --dropin-width: 500px;
   --dropin-font: 17px;
   --button-edges: 10px;
   --body-edges: 0px;
   --border-off: 1px solid #e6e9eb;
   --active-background: #f7f8f9;
-  --bg-color: white;
+  --bg-color: #ffffff;
   --dropin-color: #f7f8f9;
-  --dropin-tab-color: white;
+  --dropin-tab-color: #ffffff;
   --main-green: #0abf53;
   --main-grey: #f3f5f9;
   --main-text: #00112c;
@@ -958,6 +999,7 @@ a:hover {
   --topedges-right: 12px;
   --bottomedges-left: 12px;
   --bottomedges-right: 12px;
+  /* --text-color: #00112c; */
 }
 
 .card-visited .card__back {
@@ -1079,7 +1121,8 @@ a:hover {
   border-radius: 20px;
   height: 25px;
   width: 25px;
-  border: 2px solid #36bf52;
+  border: 1px solid #36bf52;
+  background-color: #36bf52;
   outline: none;
   -webkit-appearance: none;
 }
diff --git a/app/static/js/adyen-implementation.js b/app/static/js/adyen-implementation.js
index e877f82..181ed12 100644
--- a/app/static/js/adyen-implementation.js
+++ b/app/static/js/adyen-implementation.js
@@ -1,34 +1,40 @@
-let r = document.querySelector(":root")
 const clientKey = JSON.parse(document.getElementById("client-key").innerHTML)
 const storedCountry = document.getElementById("country-code")
-const currentPM = document.getElementById("pay-methods")
-// let country = "GB";
-let countrySettings = "NL"
 
-// Used to retrieve country value from url
-const urlCountryParams = new URLSearchParams(window.location.search)
-const countryURL = urlCountryParams.get("country")
-console.log(countryURL)
-
-let payMethods =[];
-let payArray = Object.values(payMethods);
 
 /**
  * Global configuration variables
- * 
- */ 
+ * @param {HTMLHtmlElement} r - Identifies root of document for css variables
+ * @param {boolean} openFirst - Status of "Open first payment method" toggle
+ * @param {boolean} billAdd - Status of "Add billing address" toggle
+ * @param {boolean} onlyStored - Status of "Add card holder name" toggle
+ * @param {boolean} holderName - Status of "Show only stored payment methods" toggle
+ * @param {boolean} showPayMethod - Status of "Show stored payment methods" toggle
+ * @param {boolean} hideCVC - Status of "Hide CVC field" toggle
+ * @param {boolean} placeholderData - Status of "Include placeholder data" toggle
+ * @param {Array} instantArray - Instant Payment Methods "Enable" toggle - populate array if active = true
+ * @param {Array} payMethods - Payment methods included in the array will be "blocked"
+ * @param {Array} payArray - Payment methods values to include in the blockedPaymentMethods array
+ * @param {string} countrySettings - Value of the currently selected shopper's country
+ *
+ */
+let r = document.querySelector(":root")
 let openFirst = true
 let billAdd = false
-let onlyStored = true
+let onlyStored = false
 let holderName = false
 let showPayMethod = true
 let hideCVC = false
 let placeholderData = false
+let instantArray = []
+let payMethods =[];
+let payArray = Object.values(payMethods);
+let countrySettings = "NL"
 
 /**
  * Hiding toggles of local payment methods not supported for NL (initial page load)
- * 
- */ 
+ *
+ */
 document.getElementById('trustlyCol').style.display = "none"
 document.getElementById('trustlyBox').style.display = "none"
 document.getElementById('trustlyToggle').style.display = "none"
@@ -91,7 +97,7 @@ const countryVariables = [
 /**
  * Country dropdown changes the flag image and reloads the dropin with new country values
  * Calls /paymentMethods to retrieve available txvariants for that country
- * @param {*} el 
+ * @param {*} el
  */
 async function changeSelect(el) {
   // let countryPM = getConfiguration();
@@ -193,9 +199,9 @@ document
     const oldDiv = document.getElementById("dropin-container")
     const newDiv = document.createElement("div")
     if (this.querySelector("input").checked) {
-      onlyStored = false
-    } else {
       onlyStored = true
+    } else {
+      onlyStored = false
     }
     oldDiv.replaceWith(newDiv)
     newDiv.setAttribute("id", "dropin-container")
@@ -285,10 +291,6 @@ if (storedCountry) {
   const selectedCountry = JSON.parse(storedCountry.innerHTML)
   countrySettings = getCountryData(selectedCountry)
 }
-if (countryURL) {
-  const selectedCountry = countryURL
-  countrySettings = getCountryData(selectedCountry)
-}
 
 function getCountryData(countrySettings) {
   return countryVariables.find(
@@ -416,6 +418,7 @@ async function initCheckout() {
         resolve()
         reject()
       },
+      instantPaymentTypes: instantArray
     })
     .mount("#dropin-container")
     return await checkout
@@ -425,6 +428,22 @@ async function initCheckout() {
   }
 }
 
+
+function showInstantPay(){
+  const instantPayState = document.getElementById('instantPay').checked;
+  const oldDiv = document.getElementById("dropin-container")
+  const newDiv = document.createElement("div")
+	if (instantPayState == true) {
+    instantArray = ['paywithgoogle']
+	} else {
+		instantArray = []
+	}
+  oldDiv.replaceWith(newDiv)
+  newDiv.setAttribute("id", "dropin-container")
+  newDiv.setAttribute("class", "payment p-5")
+  initCheckout()
+}
+
 async function unmountDropin() {
   const checkout = await initCheckout()
   checkout.unmount("#dropin-container")
@@ -771,6 +790,38 @@ function dropinColor() {
   r.style.setProperty("--dropin-color", dropinColor)
   updateStyleCode()
 }
+/**
+ * @function updateColorPickers - Gets current colour value to show on colour pickers
+ */
+function updateColorPickers() {
+  // font color
+  let fontColorInput = document.getElementById("textColorPick")
+  let fontColor = getComputedStyle(r).getPropertyValue("--text-color")
+  let fontColorNoSpace = fontColor.replace(/\s/g, '');
+  fontColorInput.value = fontColorNoSpace
+  // website background
+  let bgColorInput = document.getElementById("bgColorPick")
+  let bgColor = getComputedStyle(r).getPropertyValue("--bg-color")
+  let bgColorNoSpace = bgColor.replace(/\s/g, '');
+  bgColorInput.value = bgColorNoSpace
+  // active payment method background
+  let activeColorInput = document.getElementById("dropinColorPick")
+  let activeColor = getComputedStyle(r).getPropertyValue("--dropin-color")
+  let activeColorNoSpace = activeColor.replace(/\s/g, '');
+  activeColorInput.value = activeColorNoSpace
+  // collapsed payment methods
+  let tabColorInput = document.getElementById("dropinTabColorPick")
+  let tabColor = getComputedStyle(r).getPropertyValue("--dropin-tab-color")
+  let tabColorNoSpace = tabColor.replace(/\s/g, '');
+  tabColorInput.value = tabColorNoSpace
+  // pay button
+  let buttonColorInput = document.getElementById("buttonColorPick")
+  let buttonColor = getComputedStyle(r).getPropertyValue("--background-color")
+  let buttonColorNoSpace = buttonColor.replace(/\s/g, '');
+  buttonColorInput.value = buttonColorNoSpace
+  //
+}
+// console.log(tabColorNoSpace.constructor)
 /** @function dropinTabColor - Changes collapsed payment methods' colours */
 function dropinTabColor() {
   let dropinTabColor = document.getElementById("dropinTabColorPick").value
@@ -855,14 +906,34 @@ function makeItalic() {
     ) {
       document.getElementById("makeItalic").classList.remove("italic-active")
       r.style.setProperty("--text-italic", null)
+      r.style.setProperty("--italic-selected", null)
       updateStyleCode()
     } else {
       document.getElementById("makeItalic").classList.add("italic-active")
       r.style.setProperty("--text-italic", "italic")
+      r.style.setProperty("--italic-selected", "1px solid #36bf52")
       updateStyleCode()
     }
   }
-  
+
+
+// make text bold
+function makeBold() {
+  if (
+    document.getElementById("makeBold").classList.contains("bold-active")
+  ) {
+    document.getElementById("makeBold").classList.remove("bold-active")
+    r.style.setProperty("--text-bold", null)
+    r.style.setProperty("--bold-selected", null)
+    updateStyleCode()
+  } else {
+    document.getElementById("makeBold").classList.add("bold-active")
+    r.style.setProperty("--text-bold", "bold")
+    r.style.setProperty("--bold-selected", "1px solid #36bf52")
+    updateStyleCode()
+  }
+}
+
   //drop down selector for the different font styles
   function changeFont() {
     r.style.setProperty("--font-options", null)
@@ -874,7 +945,7 @@ function makeItalic() {
 
 // Reset CSS values to default Drop-in
 function resetDynamicCSS() {
-    r.style.setProperty("--background-color", null)
+    r.style.setProperty("--background-color", '#00112c')
     r.style.setProperty("--dropin-width", null)
     r.style.setProperty("--body-edges", null)
     r.style.setProperty("--selectedBody-edges", null)
@@ -883,11 +954,11 @@ function resetDynamicCSS() {
     r.style.setProperty("--bottomedges-left", null)
     r.style.setProperty("--bottomedges-right", null)
     r.style.setProperty("--button-edges", null)
-    r.style.setProperty("--bg-color", null)
-    r.style.setProperty("--dropin-color", null)
-    r.style.setProperty("--dropin-tab-color", null)
+    r.style.setProperty("--bg-color", '#ffffff')
+    r.style.setProperty("--dropin-color", '#f7f8f9')
+    r.style.setProperty("--dropin-tab-color", '#ffffff')
     r.style.setProperty("--dropin-font", null)
-    r.style.setProperty("--text-color", null)
+    r.style.setProperty("--text-color", '#00112c')
     r.style.setProperty("--text-bold", null)
     r.style.setProperty("--text-italic", null)
     r.style.setProperty("--text-align", null)
@@ -895,6 +966,9 @@ function resetDynamicCSS() {
     r.style.setProperty("--payments-spacing", null)
     r.style.setProperty("--paymentselected-margin", null)
     r.style.setProperty("--font-options", null)
+    r.style.setProperty("--bold-selected", null)
+    r.style.setProperty("--italic-selected", null)
+    updateColorPickers()
   }
 
 // logging configuration object to UI
@@ -1023,4 +1097,6 @@ function restartDropin() {
   successDiv.style.display = "none"
 }
 
+updateColorPickers()
+
 initCheckout()
diff --git a/app/templates/component.html b/app/templates/component.html
index 167c6e7..95b8aed 100644
--- a/app/templates/component.html
+++ b/app/templates/component.html
@@ -29,7 +29,7 @@
     />
     <style>
       @import url("https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap");
-      @import url("https://fonts.googleapis.com/css2?family=Engagement&family=Lato:ital@1&family=Roboto+Condensed:wght@300&display=swap");
+      @import url('https://fonts.googleapis.com/css2?family=Engagement&family=PT+Sans+Caption&family=Roboto+Condensed:wght@300&display=swap');
     </style>
 
     <!-- local CSS -->
@@ -570,6 +570,45 @@
                   <!-- line - section end -->
                   <hr class="mt-4 mb-4" />
 
+                  <!-- section titile "Instant Payment Methods" -->
+                  <div class="row mt-3">
+                    <div class="col flex-fill section-title">
+                      <p class="mb-1 titleFonts">Instant Payment Methods</p>
+                    </div>
+
+                    <!-- text -->
+                    <div class="col-6">
+                      <p class="textFonts">
+                        Show instant payment methods at the top
+                      </p>
+                    </div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Enable
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="instantPay"
+                          data-toggle="toggle"
+                          onchange="showInstantPay()"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="instantPay"
+                        ></label>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- line - section end -->
+                  <hr class="mt-4 mb-4" />
+
                   <!-- section titile "Payment Method Behaviour" -->
                   <div class="row mt-3">
                     <div class="col flex-fill section-title">
@@ -611,7 +650,7 @@
                     <!-- title -->
                     <div class="col-3">
                       <p class="textFonts text-left ml-3">
-                        Hide stored payment methods
+                        Show stored payment methods
                       </p>
                     </div>
                     <!-- toggle -->
@@ -784,10 +823,9 @@
                           autocomplete="off"
                         >
                           <option
-                            value="Segoe UI, sans-serif, Helvetica, Arial"
+                            value="Segoe UI, sans-serif"
                             style="
-                              font-family: 'Segoe UI', sans-serif, Helvetica,
-                                Arial;
+                              font-family: 'Segoe UI', sans-serif;
                             "
                           >
                             Segoe UI
@@ -802,23 +840,43 @@
                           </option>
                           <option
                             value="Engagement, cursive"
-                            style="font-family: 'Engagement', cursive"
+                            style="font-family: 'Engagement', cursive;"
                           >
                             Engagement
                           </option>
                           <option
-                            value="Lato, sans-serif"
-                            style="font-family: 'Lato', sans-serif"
+                            value="Verdana, sans-serif"
+                            style="font-family: 'Verdana', sans-serif;"
                           >
-                            Lato
+                            Verdana
                           </option>
+                           <option
+                            value="Courier New, monospace"
+                            style="font-family: 'Courier New', monospace;"
+                          >
+                            Courier New
+                          </option>
+                           <option
+                            value="'Trebuchet MS, sans-serif"
+                            style="font-family: 'Trebuchet MS', sans-serif;"
+                          >
+                            Trebuchet MS
+                          </option> 
                           <option
-                            value="Times New Roman, Times, serif"
+                            value="Tahoma, sans-serif"
                             style="
-                              font-family: 'Times New Roman', Times, serif;
+                              font-family: 'Tahoma', sans-serif;
                             "
                           >
-                            Times New Roman
+                            Tahoma
+                          </option>
+                          <option
+                          value="PT Sans Caption, sans-serif"
+                          style="
+                            font-family: 'PT Sans Caption', sans-serif;
+                          "
+                          >
+                            PT Sans Caption
                           </option>
                           <option
                             value="Arial, Helvetica, sans-serif"
@@ -829,10 +887,9 @@
                             Arial
                           </option>
                           <option
-                            value="Lucida Console, 'Courier New', monospace"
+                            value="Lucida Console, monospace"
                             style="
-                              font-family: 'Lucida Console', 'Courier New',
-                                monospace;
+                              font-family: 'Lucida Console', monospace;
                             "
                           >
                             Lucida
@@ -890,14 +947,15 @@
                           <option
                             selected
                             value="left"
-                            style="text-align: left"
                           >
                             Left
                           </option>
-                          <option value="center" style="text-align: center">
+                          <option value="center"
+                          >
                             Center
                           </option>
-                          <option value="right" style="text-align: right">
+                          <option value="right"
+                          >
                             Right
                           </option>
                         </select>
@@ -1216,7 +1274,7 @@
                   <hr class="mt-4 mb-4" />
 
                   <div>
-                    <button type="button" onclick="resetDynamicCSS()">
+                    <button type="button" class="resetStyle" onclick="resetDynamicCSS()">
                       Reset Style
                     </button>
                   </div>