diff --git a/i18n/en.pot b/i18n/en.pot
index d6e69e8e..33597d84 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-19T05:39:42.631Z\n"
-"PO-Revision-Date: 2024-11-19T05:39:42.631Z\n"
+"POT-Creation-Date: 2024-11-19T09:39:21.743Z\n"
+"PO-Revision-Date: 2024-11-19T09:39:21.743Z\n"
 
 msgid "Never"
 msgstr "Never"
@@ -346,9 +346,6 @@ msgstr "No options"
 msgid "System default"
 msgstr "System default"
 
-msgid "Verify Email"
-msgstr "Verify Email"
-
 msgid "User profile"
 msgstr "User profile"
 
diff --git a/src/layout/FormFields.component.js b/src/layout/FormFields.component.js
index 50fb832f..d7b221a5 100644
--- a/src/layout/FormFields.component.js
+++ b/src/layout/FormFields.component.js
@@ -358,7 +358,6 @@ class FormFields extends Component {
     renderFields(fieldNames) {
         const d2 = this.context.d2
         const valueStore = this.props.valueStore
-
         // Create the regular fields
         const fields = fieldNames
             .map((fieldName) => createField(fieldName, valueStore, d2))
@@ -368,10 +367,12 @@ class FormFields extends Component {
         // Append the Verify Email button after the 'email' field
         const emailFieldIndex = fieldNames.indexOf('email')
         if (emailFieldIndex !== -1) {
+            // check if user has an email configured
+            const emailValue = valueStore.state['email'] || ''
             const verifyEmailField = {
                 name: 'emailVerification',
                 component: VerifyEmail,
-                props: {},
+                props: { userEmail: emailValue },
             }
 
             fields.splice(emailFieldIndex + 1, 0, verifyEmailField)
diff --git a/src/layout/VerifyEmail.component.js b/src/layout/VerifyEmail.component.js
index 012dba29..84c9a372 100644
--- a/src/layout/VerifyEmail.component.js
+++ b/src/layout/VerifyEmail.component.js
@@ -1,19 +1,39 @@
-import { useAlert } from '@dhis2/app-runtime'
-import { CircularLoader } from '@dhis2/ui'
+import { useAlert, useDataQuery } from '@dhis2/app-runtime'
+import { Button, CircularLoader } from '@dhis2/ui'
 import { getInstance as getD2 } from 'd2'
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
-export function VerifyEmail() {
+const systemSettingsQuery = {
+    systemSettings: {
+        resource: 'systemSettings',
+    },
+}
+
+export function VerifyEmail({ userEmail }) {
     const errorAlert = useAlert(({ message }) => message, { critical: true })
     const successAlert = useAlert(({ message }) => message, { success: true })
     const [isLoading, setIsLoading] = useState(false)
+    const { data, loading: systemInfoLoading } =
+        useDataQuery(systemSettingsQuery)
+
+    const keyEmailHostname = data?.systemSettings?.keyEmailHostname
+    const keyEmailUsername = data?.systemSettings?.keyEmailUsername
+
+    const emailConfigured = !!keyEmailHostname && !!keyEmailUsername
 
+    const isButtonDisabled =
+        systemInfoLoading || !emailConfigured || !userEmail?.trim() || isLoading
+
+    if (systemInfoLoading) {
+        return <CircularLoader />
+    }
     const handleEmailVerification = async () => {
         setIsLoading(true)
         try {
             const d2 = await getD2()
             const api = d2.Api.getApi()
-            api.baseUrl = 'http://localhost:8080/'
+            api.baseUrl = 'http://localhost:8080/api/'
 
             await api.post('account/sendEmailVerification')
             successAlert.show({
@@ -32,22 +52,17 @@ export function VerifyEmail() {
 
     return (
         <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-            <button
-                type="button"
-                style={{
-                    background: 'white',
-                    border: '1px solid',
-                    borderColor: '#1976D2',
-                    color: '#1976D2',
-                    padding: '10px',
-                    cursor: isLoading ? 'not-allowed' : 'pointer',
-                }}
+            <Button
+                secondary
                 onClick={handleEmailVerification}
-                disabled={isLoading}
+                disabled={isButtonDisabled}
             >
                 Verify Email
-            </button>
+            </Button>
             {isLoading && <CircularLoader small />}
         </div>
     )
 }
+VerifyEmail.propTypes = {
+    userEmail: PropTypes.string.isRequired,
+}