diff --git a/src/components/DataDimension/Info/DataElementInfo.js b/src/components/DataDimension/Info/DataElementInfo.js
index 2cfe6c21e..c3c72512c 100644
--- a/src/components/DataDimension/Info/DataElementInfo.js
+++ b/src/components/DataDimension/Info/DataElementInfo.js
@@ -2,7 +2,8 @@ import { useDataQuery } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../../../locales/index.js'
-import { capitalizeText, getCommonFields, InfoTable } from './InfoTable.js'
+import { valueTypeDisplayNames } from '../../../modules/valueTypes.js'
+import { getCommonFields, InfoTable } from './InfoTable.js'
 import styles from './styles/InfoPopover.style.js'
 
 const dataElementQuery = {
@@ -54,7 +55,9 @@ export const DataElementInfo = ({ id, displayNameProp }) => {
                 </tr>
                 <tr>
                     <th>{i18n.t('Value type')}</th>
-                    <td>{capitalizeText(data?.dataElement.valueType)}</td>
+                    <td>
+                        {valueTypeDisplayNames[data?.dataElement.valueType]}
+                    </td>
                 </tr>
                 <tr>
                     <th>{i18n.t('Aggregation type')}</th>
diff --git a/src/components/DataDimension/Info/DataElementOperandInfo.js b/src/components/DataDimension/Info/DataElementOperandInfo.js
index 068c99f91..fa8ed6da5 100644
--- a/src/components/DataDimension/Info/DataElementOperandInfo.js
+++ b/src/components/DataDimension/Info/DataElementOperandInfo.js
@@ -2,7 +2,8 @@ import { useConfig, useDataEngine } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useState } from 'react'
 import i18n from '../../../locales/index.js'
-import { capitalizeText, getCommonFields, InfoTable } from './InfoTable.js'
+import { valueTypeDisplayNames } from '../../../modules/valueTypes.js'
+import { getCommonFields, InfoTable } from './InfoTable.js'
 import styles from './styles/InfoPopover.style.js'
 
 const dataElementOperandsQuery = {
@@ -108,9 +109,11 @@ export const DataElementOperandInfo = ({ id, displayNameProp }) => {
                 <tr>
                     <th>{i18n.t('Value type')}</th>
                     <td>
-                        {capitalizeText(
-                            data?.dataElementOperand.dataElement.valueType
-                        )}
+                        {
+                            valueTypeDisplayNames[
+                                data?.dataElementOperand.dataElement.valueType
+                            ]
+                        }
                     </td>
                 </tr>
                 <tr>
diff --git a/src/components/DataDimension/Info/EventDataItemInfo.js b/src/components/DataDimension/Info/EventDataItemInfo.js
index f112d9857..8b5b867ed 100644
--- a/src/components/DataDimension/Info/EventDataItemInfo.js
+++ b/src/components/DataDimension/Info/EventDataItemInfo.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../../../locales/index.js'
 import { DIMENSION_TYPE_PROGRAM_DATA_ELEMENT } from '../../../modules/dataTypes.js'
-import { capitalizeText, getCommonFields, InfoTable } from './InfoTable.js'
+import { valueTypeDisplayNames } from '../../../modules/valueTypes.js'
+import { getCommonFields, InfoTable } from './InfoTable.js'
 import styles from './styles/InfoPopover.style.js'
 
 const programDataElementQuery = {
@@ -54,7 +55,7 @@ export const EventDataItemInfo = ({ type, id, displayNameProp }) => {
                 </tr>
                 <tr>
                     <th>{i18n.t('Value type')}</th>
-                    <td>{capitalizeText(data?.valueType)}</td>
+                    <td>{valueTypeDisplayNames[data?.valueType]}</td>
                 </tr>
                 {data?.optionSet && (
                     <tr>