diff --git a/client/public/index.js b/client/public/index.js
index 484cf28..4399e0e 100644
--- a/client/public/index.js
+++ b/client/public/index.js
@@ -60,32 +60,41 @@ paypal
 paypal
   .PaymentFields({
     fundingSource: paypal.FUNDING.GIROPAY,
+    // style object is optional
     style: {
-      base: {
-        backgroundColor: 'white',
-        color: 'black',
-        fontSize: '16px',
-        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
-        lineHeight: '1.4',
-        letterSpacing: '0.3',
+      // customize field attributes (optional)
+      variables: {
+        fontFamily: "'Helvetica Neue', Arial, sans-serif", // applies to all payment fields text
+        fontSizeBase: "0.9375rem", // applies to input, placeholder, and dropdown text values
+        fontSizeM: "0.93rem", // the payment fields title description
+        textColor: "#2c2e2f", // applies payment fields title description, input, and dropdown text
+        colorTextPlaceholder: "#2c2e2f", // applies to the placeholder text
+        colorBackground: "#fff", // background color of the input and dropdown fields
+        colorDanger: "#d20000", // applies to the invalid field border and validation text
+        borderRadius: "0.2rem", // for the input and dropdown fields
+        borderColor: "#dfe1e5", // for the input and dropdown fields
+        borderWidth: "1px", // for the input and dropdown fields
+        borderFocusColor: "black", // color for the invalid field border and validation text
+        // spacingUnit: "10px", // spacing between multiple input fields, giropay has one input field
       },
-      input: {
-        backgroundColor: 'white',
-        fontSize: '16px',
-        color: '#333',
-        borderColor: '#dbdbdb',
-        borderRadius: '4px',
-        borderWidth: '1px',
-        padding: '1rem',
-      },
-      invalid: {
-        color: 'red',
-      },
-      active: {
-        color: 'black',
+
+      // set custom rules to apply to fields classes (optional)
+      // see https://www.w3schools.com/css/css_syntax.asp fore more on selectors and declarations
+      rules: {
+        ".Input": {}, // overwrite properties for the input fields
+        ".Input:hover": {}, // applies to the input field on mouse hover
+        ".Input:focus": { // applies to the focused input field
+          color: 'blue',
+          boxShadow: '0px 2px 4px rgb(0 0 0 / 50%), 0px 1px 6px rgb(0 0 0 / 25%)',
+        },
+        ".Input:active": {}, // applies when input fields are clicked
+        ".Input--invalid": {}, // applies to input fields when invalid input is entered
+        ".Label": {}, // overwrite properties for the input field labels
       },
     },
+
     fields: {
+      // fields prefill info (optional)
       name: {
         value: ''
       },