diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index e87f0d53d..9454452e7 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -44,6 +44,7 @@ Now, the choice is restricted to the _timeslice/snapshot_ type that match the gr
 - https://github.com/eclipse-syson/syson/issues/2270[#2270] [diagram] Add dedicated tools to diagram elements palette to create/edit/delete expressions.
 - https://github.com/eclipse-syson/syson/issues/2269[#2269] [diagram] When using direct edit on feature elements which have a value expression (e.g. an `Attribute` with a default value defined), the expression part (after the `=` sign) is no longer part of the initial direct edit value, and will be ignored if supplied in the new text value.
 Users should use the dedicated tools to edit expressions instead, as they ensure only valid expressions (with all names resolving) are accepted.
+- https://github.com/eclipse-syson/syson/issues/2287[#2287] [details] Use a label instead of a text field to display Expressions in the Details view
 
 === New features
 
diff --git a/doc/content/modules/user-manual/assets/images/expression-details.png b/doc/content/modules/user-manual/assets/images/expression-details.png
index b7ba2f237..10f629259 100644
Binary files a/doc/content/modules/user-manual/assets/images/expression-details.png and b/doc/content/modules/user-manual/assets/images/expression-details.png differ
diff --git a/frontend/syson-components/src/extensions/expressions/ExpressionPropertySection.tsx b/frontend/syson-components/src/extensions/expressions/ExpressionPropertySection.tsx
index d45041e5f..d9400084a 100644
--- a/frontend/syson-components/src/extensions/expressions/ExpressionPropertySection.tsx
+++ b/frontend/syson-components/src/extensions/expressions/ExpressionPropertySection.tsx
@@ -20,11 +20,10 @@ import {
   PropertySectionLabel,
   TextfieldStyleProps,
 } from '@eclipse-sirius/sirius-components-forms';
+import Typography from '@mui/material/Typography';
 
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import { useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
@@ -141,46 +140,14 @@ export const ExpressionPropertySection: PropertySectionComponent<GQLTextfield |
       <div className={classes.propertySectionLabel}>
         <PropertySectionLabel editingContextId={editingContextId} formId={formId} widget={widgetForLabel} />
       </div>
-      <TextField
-        name={labelOverride}
-        placeholder={labelOverride}
-        variant="standard"
-        value={widget.stringValue}
-        spellCheck={false}
-        margin="dense"
-        multiline={true}
-        maxRows={4}
-        fullWidth
-        data-testid={labelOverride}
-        disabled={true}
-        error={widget.diagnostics.length > 0}
-        helperText={widget.diagnostics[0]?.message}
-        className={classes.textfield}
-        InputProps={
-          widget.style
-            ? {
-                className: classes.style,
-              }
-            : {}
-        }
-        inputProps={{
-          'data-testid': `input-${labelOverride}`,
-          className: classes.input,
-        }}
-        slotProps={{
-          input: {
-            endAdornment: (
-              <InputAdornment position="end">
-                <Tooltip title={'Edit'}>
-                  <IconButton size="small" onClick={onEditExpression}>
-                    <MoreHorizIcon />
-                  </IconButton>
-                </Tooltip>
-              </InputAdornment>
-            ),
-          },
-        }}
-      />
+      <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+        <Typography data-testid={`details-expression-value`}>{widget.stringValue}</Typography>
+        <Tooltip title={'Edit'}>
+          <IconButton size="small" onClick={onEditExpression}>
+            <MoreHorizIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
       {modalElement}
     </div>
   );
diff --git a/integration-tests-cypress/cypress/e2e/project/details/details.cy.ts b/integration-tests-cypress/cypress/e2e/project/details/details.cy.ts
index 346892934..150ca4f8b 100644
--- a/integration-tests-cypress/cypress/e2e/project/details/details.cy.ts
+++ b/integration-tests-cypress/cypress/e2e/project/details/details.cy.ts
@@ -92,8 +92,8 @@ describe('Details View Tests', () => {
         explorer.select('vehicle.actualSpeed <= maxSpeed');
       });
       it("Then the Details view shows the expression's textual value", () => {
-        details.getTextField('Expression value').should('exist');
-        details.getTextField('Expression value').should('have.value', 'vehicle.actualSpeed <= maxSpeed');
+        cy.getByTestId('details-expression-value').should('exist');
+        cy.getByTestId('details-expression-value').should('have.text', 'vehicle.actualSpeed <= maxSpeed');
       });
     });
 
@@ -106,8 +106,8 @@ describe('Details View Tests', () => {
         explorer.select('length');
       });
       it("Then the Details view shows the child expression's textual value", () => {
-        details.getTextField('Expression value').should('exist');
-        details.getTextField('Expression value').should('have.value', '80 [SI::centimetre]');
+        cy.getByTestId('details-expression-value').should('exist');
+        cy.getByTestId('details-expression-value').should('have.text', '80 [SI::centimetre]');
       });
     });
   });