diff --git a/app/static/css/application.css b/app/static/css/application.css
index cfa03fb..1b8e833 100644
--- a/app/static/css/application.css
+++ b/app/static/css/application.css
@@ -15,6 +15,15 @@ body {
   box-sizing: border-box;
 }
 
+a {
+  color: var(--main-text);
+}
+
+.nav-link.active {
+  background-color: var(--main-green) !important;
+  color: var(--main-grey) !important;
+}
+
 a,
 u {
   text-decoration: none;
@@ -47,6 +56,8 @@ a:hover {
 
 .row {
   height: 100%;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 .dropIn-UI {
@@ -925,13 +936,13 @@ a:hover {
   --text-italic: normal;
   --small-text: 12px;
   --payButton-width: 100%;
-	--payments-spacing: 0px 0;
-	--paymentselected-margin: 8px 0;
-	--selectedBody-edges: 12px;
-	--topedges-left: 12px;
-	--topedges-right: 12px;
-	--bottomedges-left: 12px;
-	--bottomedges-right: 12px;
+  --payments-spacing: 0px 0;
+  --paymentselected-margin: 8px 0;
+  --selectedBody-edges: 12px;
+  --topedges-left: 12px;
+  --topedges-right: 12px;
+  --bottomedges-left: 12px;
+  --bottomedges-right: 12px;
 }
 
 .card-visited .card__back {
@@ -960,13 +971,13 @@ a:hover {
 } */
 
 .adyen-checkout__button.adyen-checkout__button--pay {
-	width: var(--payButton-width) !important;
-	margin-right: auto;
-    margin-left: auto;
-	display: flex;
-    justify-content: center;
-	background: var(--background-color) !important;
-  	border-radius: var(--button-edges) !important;
+  width: var(--payButton-width) !important;
+  margin-right: auto;
+  margin-left: auto;
+  display: flex;
+  justify-content: center;
+  background: var(--background-color) !important;
+  border-radius: var(--button-edges) !important;
 }
 
 .form-group {
@@ -977,23 +988,22 @@ a:hover {
 }
 
 .adyen-checkout__payment-method {
-	width: var(--dropin-width) !important;
-	font-size: var(--dropin-font) !important;
-	font-family: var(--font-options) !important;
-	text-align: var(--text-align) !important;
-	border-radius: var(--body-edges) !important;
-	border: var(--border-off) !important;
-	background: var(--dropin-tab-color) !important;
-	font-weight: var(--text-bold) !important;
-	margin: var(--payments-spacing) !important;
+  width: var(--dropin-width) !important;
+  font-size: var(--dropin-font) !important;
+  font-family: var(--font-options) !important;
+  text-align: var(--text-align) !important;
+  border-radius: var(--body-edges) !important;
+  border: var(--border-off) !important;
+  background: var(--dropin-tab-color) !important;
+  font-weight: var(--text-bold) !important;
+  margin: var(--payments-spacing) !important;
 }
 
-.adyen-checkout__payment-methods-list li:nth-child(2){
-	border-top-left-radius: var(--topedges-left) !important;
-	border-top-right-radius: var(--topedges-right) !important;
+.adyen-checkout__payment-methods-list li:nth-child(2) {
+  border-top-left-radius: var(--topedges-left) !important;
+  border-top-right-radius: var(--topedges-right) !important;
 }
 
-
 .adyen-checkout__payment-methods-list li:last-child {
   border-bottom-left-radius: var(--bottomedges-left) !important;
   border-bottom-right-radius: var(--bottomedges-right) !important;
@@ -1004,10 +1014,9 @@ a:hover {
 }
 
 .adyen-checkout__payment-method--selected {
-	background: var(--dropin-color) !important;
-	margin: var(--paymentselected-margin) !important;
-	border-radius: var(--selectedBody-edges) !important;
-
+  background: var(--dropin-color) !important;
+  margin: var(--paymentselected-margin) !important;
+  border-radius: var(--selectedBody-edges) !important;
 }
 
 .adyen-checkout__payment-method__radio {
@@ -1125,18 +1134,24 @@ a:hover {
 } */
 
 pre {
-	outline: 1px solid #ccc;
-	padding: 5px;
-	margin: 5px;
-	background: #00112c;
-	color: #078F3E;
+  outline: 1px solid #ccc;
+  padding: 5px;
+  margin: 5px;
+  background: #00112c;
+  color: #078f3e;
 }
-.string { 
-	color: white; 
+.string {
+  color: white;
+}
+.number {
+  color: #0abf53;
+}
+.boolean {
+  color: #0088ff;
+}
+.null {
+  color: magenta;
+}
+.key {
+  color: #a5afbd;
 }
-.number { color: #0abf53; }
-.boolean { color: #0088FF; }
-.null { color: magenta; }
-.key { color: #A5AFBD; }
-
-
diff --git a/app/templates/component.html b/app/templates/component.html
index 746ef24..c096f68 100644
--- a/app/templates/component.html
+++ b/app/templates/component.html
@@ -15,6 +15,8 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
     />
+
+    <!-- hello -->
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
       rel="stylesheet"
@@ -45,8 +47,10 @@
       crossorigin="anonymous"
     />
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css">
-
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css"
+    />
 
     <title>Checkout Create</title>
   </head>
@@ -76,18 +80,31 @@
           <!-- Hidden status page to show on completion -->
           <div class="status-container successDiv" id="successDiv">
             <div class="status">
-                <img src="{{ url_for('static', filename='img/success.svg') }}" class="status-image"/>
-                <img src="{{ url_for('static', filename='img/thank-you.svg') }}" class="status-image-thank-you"/>
-                <p class="status-message">Your order has been successfully placed.</p>
-                <a class="button" onclick="restartDropin()">Return Home</a>
+              <img
+                src="{{ url_for('static', filename='img/success.svg') }}"
+                class="status-image"
+              />
+              <img
+                src="{{ url_for('static', filename='img/thank-you.svg') }}"
+                class="status-image-thank-you"
+              />
+              <p class="status-message">
+                Your order has been successfully placed.
+              </p>
+              <a class="button" onclick="restartDropin()">Return Home</a>
             </div>
           </div>
           <div class="status-container errorDiv">
             <div class="status">
-                <p class="status-message">Error!</p>
-                <p class="status-message">Review response in console and refer to <a
-                        href="https://docs.adyen.com/development-resources/response-handling">Response handling.</a></p>
-                <a class="button" onclick="restartDropin()">Return Home</a>
+              <p class="status-message">Error!</p>
+              <p class="status-message">
+                Review response in console and refer to
+                <a
+                  href="https://docs.adyen.com/development-resources/response-handling"
+                  >Response handling.</a
+                >
+              </p>
+              <a class="button" onclick="restartDropin()">Return Home</a>
             </div>
           </div>
 
@@ -276,47 +293,42 @@
                     <div class="col flex-fill section-title">
                       <p class="mb-1 titleFonts">Location</p>
                     </div>
-                    <div class="row container">
-                      <!-- section description -->
-                      <div class="col-6 mb-2">
-                        <p class="textFonts">
-                          Choose your shopper location and language
-                        </p>
-                      </div>
-                      <!-- title -->
-                      <div class="col-3 mb-2">
-                        <p class="textFonts text-left ml-3">Shopper Location</p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 mb-2">
-                        <div class="country-selector textFonts">
-                          <div
-                            class="country-selector__flag"
-                            aria-hidden="true"
-                          >
-                            <img
-                              id="flag_img"
-                              src="https://ca-test.adyen.com/ca/adl/img/flags/nl.svg"
-                              alt="Flag icon"
-                            />
-                          </div>
-                          <select
-                            onchange="changeSelect(this)"
-                            id="country_select"
-                            class="country-selector__select"
-                            aria-label="country"
-                            autocomplete="off"
-                          >
-                            <option value="NL">Netherlands</option>
-                            <option value="GB">United Kingdom</option>
-                            <option value="US">United States</option>
-                          </select>
-                          <div class="dropdown-icon" aria-hidden="true">
-                            <img
-                              src="{{ url_for('static', filename='img/dropdown.svg') }}"
-                              alt="Dropdown caret"
-                            />
-                          </div>
+                    <!-- section description -->
+                    <div class="col-6 mb-2">
+                      <p class="textFonts">
+                        Choose your shopper location and language
+                      </p>
+                    </div>
+                    <!-- title -->
+                    <div class="col-3 mb-2">
+                      <p class="textFonts text-left ml-3">Shopper Location</p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 mb-2">
+                      <div class="country-selector textFonts">
+                        <div class="country-selector__flag" aria-hidden="true">
+                          <img
+                            id="flag_img"
+                            src="https://ca-test.adyen.com/ca/adl/img/flags/nl.svg"
+                            alt="Flag icon"
+                          />
+                        </div>
+                        <select
+                          onchange="changeSelect(this)"
+                          id="country_select"
+                          class="country-selector__select"
+                          aria-label="country"
+                          autocomplete="off"
+                        >
+                          <option value="NL">Netherlands</option>
+                          <option value="GB">United Kingdom</option>
+                          <option value="US">United States</option>
+                        </select>
+                        <div class="dropdown-icon" aria-hidden="true">
+                          <img
+                            src="{{ url_for('static', filename='img/dropdown.svg') }}"
+                            alt="Dropdown caret"
+                          />
                         </div>
                       </div>
                     </div>
@@ -324,17 +336,16 @@
                   <!-- line - section end -->
                   <hr class="mt-4 mb-4" />
 
-
-                <!-- section for hiding/showing payment methods -->
-                <div class="row mt-3">
-                  <div class="col flex-fill section-title">
-                    <p class="mb-1 titleFonts">Payment Methods</p>
-                  </div>
-                  <div class="row container">
+                  <!-- section for hiding/showing payment methods -->
+                  <div class="row mt-3">
+                    <div class="col flex-fill section-title">
+                      <p class="mb-1 titleFonts">Payment Methods</p>
+                    </div>
                     <!-- section description -->
                     <div class="col-6">
                       <p class="textFonts">
-                        Choose which payment methods you would like to see at checkout
+                        Choose which payment methods you would like to see at
+                        checkout
                       </p>
                     </div>
                     <!-- title -->
@@ -343,211 +354,204 @@
                     </div>
                     <!-- toggle -->
                     <div class="col-3">
-                      <div class="custom-control custom-switch">
-                        <input type="checkbox" class="custom-control-input" id="showPaypal" data-toggle="toggle" onchange="showPaypal()" checked>
-                        <label class="custom-control-label" for="showPaypal"></label>
+                      <div class="custom-control custom-switch text-center">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="showPaypal"
+                          data-toggle="toggle"
+                          onchange="showPaypal()"
+                          checked
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="showPaypal"
+                        ></label>
                       </div>
                     </div>
                   </div>
-                </div>
-                <!-- line - section end -->
-                <hr class="mt-4 mb-4" />
+                  <!-- 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">
+                      <p class="mb-1 titleFonts">Payment Method Behaviour</p>
+                    </div>
 
-                <!-- section titile "Payment Method Behaviour" -->
-                <div class="row mt-3">
-                  <div class="col flex-fill section-title">
-                    <p class="mb-1 titleFonts">Payment Method Behaviour</p>
-                  </div>
-                  <div class="row container">
                     <!-- text -->
                     <div class="col-6">
                       <p class="textFonts">
-                        Select how you'd like your payment methods to behave at checkout
+                        Select how you'd like your payment methods to behave at
+                        checkout
                       </p>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6">
-                        <p class="textFonts">
-                          Select how you'd like your payment methods to behave
-                          at checkout
-                        </p>
-                      </div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Open first payment method
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="firstPayBox"
-                            data-toggle="toggle"
-                            checked
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="firstPayBox"
-                          ></label>
-                        </div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Open first payment method
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="firstPayBox"
+                          data-toggle="toggle"
+                          checked
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="firstPayBox"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Hide stored payment methods
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="onlyStored"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="onlyStored"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Hide stored payment methods
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="onlyStored"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="onlyStored"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Add billing address
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="billAdd"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="billAdd"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Add billing address
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="billAdd"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="billAdd"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Include card holder name
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="holderName"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="holderName"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Include card holder name
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="holderName"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="holderName"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Show only saved Payment Methods
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="showPayMethod"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="showPayMethod"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Show only saved Payment Methods
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="showPayMethod"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="showPayMethod"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">Hide CVC field</p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="hideCVC"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="hideCVC"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">Hide CVC field</p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="hideCVC"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="hideCVC"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Include placeholder data
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="placeholderData"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="placeholderData"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Include placeholder data
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="placeholderData"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="placeholderData"
+                        ></label>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            
 
                 <!-- Theme & Styles content - 2nd tab -->
                 <div
@@ -965,7 +969,6 @@
                         </div>
                       </div>
                     </div>
-
                   </div>
                   <div class="row container">
                     <!-- text -->
@@ -977,36 +980,41 @@
                     <!-- toggle -->
                     <div class="col-3 text-right">
                       <div class="form-group">
-                        <input type="range" class="form-control-range" id="payButtonWidth" min="265" max="665" value="100%" onchange="payButtonWidth(this.value)">
-                      </div>
+                        <input
+                          type="range"
+                          class="form-control-range"
+                          id="payButtonWidth"
+                          min="265"
+                          max="665"
+                          value="100%"
+                          onchange="payButtonWidth(this.value)"
+                        />
                       </div>
+                    </div>
                   </div>
                   <div class="row container">
                     <!-- text -->
                     <div class="col-6"></div>
                     <!-- title -->
                     <div class="col-3">
-                      <p class="textFonts text-left ml-3">Payment methods spacing</p>
+                      <p class="textFonts text-left ml-3">
+                        Payment methods spacing
+                      </p>
                     </div>
                     <!-- toggle -->
                     <div class="col-3 text-right">
                       <div class="form-group">
-                        <input type="range" class="form-control-range" id="paymentsSpacing" min="0" max="50" value="0" onchange="paymentsSpacing(this.value)">
+                        <input
+                          type="range"
+                          class="form-control-range"
+                          id="paymentsSpacing"
+                          min="0"
+                          max="50"
+                          value="0"
+                          onchange="paymentsSpacing(this.value)"
+                        />
                       </div>
                       <!-- toggle -->
-                      <div class="col-3 text-left">
-                        <div class="form-group">
-                          <input
-                            type="range"
-                            class="form-control-range"
-                            id="changeWidth"
-                            min="300"
-                            max="700"
-                            value="500"
-                            onchange="dropinWidth(this.value)"
-                          />
-                        </div>
-                      </div>
                     </div>
                   </div>
                   <hr class="mt-4 mb-4" />
@@ -1025,6 +1033,7 @@
                   role="tabpanel"
                   aria-labelledby="save-tab"
                 >
+                  <<<<<<< Updated upstream
                   <div class="row mt-3">
                     <div class="col flex-fill section-title">
                       <p class="mb-1 titleFonts">Adyen Configuration</p>
@@ -1032,7 +1041,9 @@
                     <div class="row container">
                       <!-- section description -->
                       <div class="col-12 mb-2">
-                        <pre id="configCode"><code id="configCode" class="configCode"></code></pre>
+                        <pre
+                          id="configCode"
+                        ><code id="configCode" class="configCode"></code></pre>
                       </div>
                     </div>
                   </div>
@@ -1043,10 +1054,20 @@
                     <div class="row container">
                       <!-- section description -->
                       <div class="col-12 mb-2">
-                        <pre id="cssCode"><code class="css-code" id="cssCode" ></code></pre>
+                        <pre
+                          id="cssCode"
+                        ><code class="css-code" id="cssCode" ></code></pre>
                       </div>
                     </div>
                   </div>
+                  =======
+                  <pre
+                    id="configCode"
+                  ><code id="configCode" class="configCode"></code></pre>
+                  <pre
+                    id="cssCode"
+                  ><code class="css-code" id="cssCode" ></code></pre>
+                  >>>>>>> Stashed changes
                 </div>
               </div>
             </div>