diff --git a/package.json b/package.json
index 1a23940..f4430bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "summit-registration-lite",
-  "version": "5.0.37",
+  "version": "5.8.38-beta.1",
   "description": "Summit Registration Lite",
   "main": "index.js",
   "scripts": {
diff --git a/src/components/login/index.js b/src/components/login/index.js
index d4267bd..cf2522d 100644
--- a/src/components/login/index.js
+++ b/src/components/login/index.js
@@ -55,12 +55,12 @@ const LoginComponent = ({
                             <input placeholder="youremail@example.com" value={email} onChange={e => setEmail(e.target.value)}
                                    onKeyPress={(ev) => ev.key === 'Enter' ? loginCode() : null} data-testid="email-input" />
                         </div>
-                        <div onClick={() => loginCode()} data-testid="email-button"
-                            className={`${styles.button} ${styles.email_login_button} ${email === '' ? `${styles.pointerDisabled} ${styles.buttonDisabled}` : `${styles.primaryEmailButton}`}`}>
+                        <button onClick={() => loginCode()} data-testid="email-button" disabled={!email}
+                            className={`${styles.button} ${styles.primaryEmailButton}`}>
                             <EmailRoundedIcon style={{ fontSize: "20px" }} />
                             <span>Email me a single-use code</span>
                             <span></span>
-                        </div>
+                        </button>
                         {emailError && <span data-testid="email-error">Please enter a valid email address</span>}
                         <h2 className={styles.h2Styled}>or</h2>
                     </div>
diff --git a/src/components/login/index.module.scss b/src/components/login/index.module.scss
index c432463..1ec1247 100644
--- a/src/components/login/index.module.scss
+++ b/src/components/login/index.module.scss
@@ -54,28 +54,24 @@
 }
 
 .primaryEmailButton {
-  background-color: var(--color_input_background_color);
-  border: 1px solid var(--color_input_border_color);
-  color: var(--color_input_text_color);
-}
-
-.buttonDisabled {
-  background-color: var(--color_secondary_contrast);
-  color: var(--color_input_text_color_disabled);
-}
-
-.pointerDisabled {
-  pointer-events: none;
-}
-
-.email_login_button {
   display: flex;
   justify-content: space-between;
   padding: 10px 9px;
   width: 100%;
+  background-color: var(--color_input_background_color);
+  border: 1px solid var(--color_input_border_color);
   span {
     padding: 0 0 0 8px;
     margin: 0;
+    color: var(--color_input_text_color);
+  }
+  &:disabled {    
+    cursor: not-allowed;
+    background-color: var(--color_input_background_color_disabled);
+    border: 1px solid var(--color_input_border_color_disabled);
+    span {
+      color: var(--color_input_text_color_disabled);
+    }
   }
 }
 
diff --git a/src/components/promocode-input/index.module.scss b/src/components/promocode-input/index.module.scss
index fc9e649..4f42db7 100644
--- a/src/components/promocode-input/index.module.scss
+++ b/src/components/promocode-input/index.module.scss
@@ -41,14 +41,16 @@
       align-items: center;
       width: 30%;
       height: 100%;
-      background-color: #818181;
+      background-color: var(--color_input_background_color);
+      border: 1px solid var(--color_input_border_color);
       border-radius: 0px 4px 4px 0px;
       &.noCode {
-        background-color: #CFCFCF;
+        background-color: var(--color_input_background_color_disabled);
+        border: 1px solid var(--color_input_border_color_disabled);        
         cursor: not-allowed;
       }
-      button {
-        color: #fff;
+      button {        
+        color: var(--color_input_text_color);
         font-size: 14px;
         font-style: normal;
         font-weight: 600;
@@ -58,6 +60,9 @@
         height: 100%;
         border: none;
         background-color: transparent;
+        &:disabled {
+          color: var(--color_input_text_color_disabled);
+        }
       }
     }
     .appliedCodeIcon {
diff --git a/src/components/stripe-form/index.js b/src/components/stripe-form/index.js
index 7296c3f..8340908 100644
--- a/src/components/stripe-form/index.js
+++ b/src/components/stripe-form/index.js
@@ -77,12 +77,16 @@ const StripeForm = ({ reservation, payTicket, userProfile, stripeOptions, provid
     let bgColor = DefaultBGColor;
     let textColor = DefaultTextColor;
     let hintColor = DefaultHintColor;
+    let disabledBgColor = DefaultBGColor;
+    let disabledTextColor = DefaultBGColor; 
 
     if(document && document.documentElement) {
         const documentStyles = getComputedStyle(document.documentElement);
         bgColor = documentStyles.getPropertyValue('--color_input_background_color');
         textColor = documentStyles.getPropertyValue('--color_input_text_color');
         hintColor = documentStyles.getPropertyValue('--color_text_input_hints');
+        disabledBgColor = documentStyles.getPropertyValue('--color_input_background_color_disabled');
+        disabledTextColor = documentStyles.getPropertyValue('--color_input_text_color_disabled');
     }
 
 
@@ -102,6 +106,10 @@ const StripeForm = ({ reservation, payTicket, userProfile, stripeOptions, provid
                 "-webkit-text-fill-color": textColor,
                 "-webkit-box-shadow:": `0 0 0px 1000px ${bgColor} inset`
             },
+            ':disabled': {
+                color: disabledTextColor,
+                backgroundColor: disabledBgColor
+            }
         },
         invalid: {
             color: '#e5424d',
diff --git a/src/components/ticket-type/index.module.scss b/src/components/ticket-type/index.module.scss
index 541404b..5f9247e 100644
--- a/src/components/ticket-type/index.module.scss
+++ b/src/components/ticket-type/index.module.scss
@@ -71,8 +71,8 @@
     height: 36px;
     text-align: center;
     border: 1px solid var(--color_input_border_color);
-    // color: var(--color_input_text_color);
-    // background-color: var(--color_input_background_color);
+    color: var(--color_input_text_color);
+    background-color: var(--color_input_background_color);
   }
 
   input {
@@ -92,11 +92,12 @@
     align-items: center;
 
     &:disabled {
-      &,
+      background-color: var(--color_input_background_color_disabled);
+      border: 1px solid var(--color_input_border_color_disabled);
+      color: var(--color_input_text_color_disabled);
+      cursor: not-allowed;
       &:hover {
-        opacity: 0.65;
-        background: #dedede;
-        border-color: #bebebe;
+        opacity: 0.65;        
       }
     }
   }
diff --git a/src/index.ejs b/src/index.ejs
index ffb7a68..46b1e6e 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -33,6 +33,9 @@
               --color_input_text_color_disabled: #fff;
               --color_input_background_color: #fff;
               --color_input_border_color: #dbdbdb;
+              --color_input_text_color_disabled: #fff;
+              --color_input_background_color_disabled: #CFCFCF;
+              --color_input_border_color_disabled: #dbdbdb;
               --color_button_background_color: #ffffff;
               --color_button_color: #000000;
               /* END LIGHT MODE */
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 20d9723..d681380 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -1,6 +1,8 @@
 .button {
   &[disabled] {
-    background-color: var(--color_secondary_contrast)!important;
+    background-color: var(--color_input_background_color_disabled)!important;
+    border: 1px solid var(--color_input_border_color_disabled)!important;
+    color: var(--color_input_text_color_disabled)!important;
   }  
   font-weight: bold!important;
   font-size: 1em!important;