diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx
index d55538d..145b0fc 100644
--- a/frontend/src/components/AsyncMethodComponent.tsx
+++ b/frontend/src/components/AsyncMethodComponent.tsx
@@ -1,9 +1,10 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { runMethod } from '../socket';
 import { InputGroup, Form, Button } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
+import { WebSettingsContext } from '../WebSettings';
 
 interface AsyncMethodProps {
   name: string;
@@ -19,7 +20,14 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   const { name, parentPath, docString, value: runningTask, addNotification } = props;
   const renderCount = useRef(0);
   const formRef = useRef(null);
-  const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
+  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const id = getIdFromFullAccessPath(fullAccessPath);
+  const webSettings = useContext(WebSettingsContext);
+  let displayName = name;
+
+  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+    displayName = webSettings[fullAccessPath].displayName;
+  }
 
   useEffect(() => {
     renderCount.current++;
@@ -95,7 +103,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
         <div>Render count: {renderCount.current}</div>
       )}
       <h5>
-        Function: {name}
+        Function: {displayName}
         <DocStringComponent docString={docString} />
       </h5>
       <Form onSubmit={execute} ref={formRef}>
diff --git a/frontend/src/components/ButtonComponent.tsx b/frontend/src/components/ButtonComponent.tsx
index 70be699..8d8f868 100644
--- a/frontend/src/components/ButtonComponent.tsx
+++ b/frontend/src/components/ButtonComponent.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
+import { WebSettingsContext } from '../WebSettings';
 import { ToggleButton } from 'react-bootstrap';
 import { setAttribute } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
@@ -16,11 +17,16 @@ interface ButtonComponentProps {
 }
 
 export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
-  const { name, parentPath, value, readOnly, docString, mapping, addNotification } =
-    props;
-  const buttonName = mapping ? (value ? mapping[0] : mapping[1]) : name;
+  const { name, parentPath, value, readOnly, docString, addNotification } = props;
+  // const buttonName = props.mapping ? (value ? props.mapping[0] : props.mapping[1]) : name;
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
+  const webSettings = useContext(WebSettingsContext);
+  let displayName = name;
+
+  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+    displayName = webSettings[fullAccessPath].displayName;
+  }
 
   const renderCount = useRef(0);
 
@@ -51,7 +57,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
         value={parentPath}
         disabled={readOnly}
         onChange={(e) => setChecked(e.currentTarget.checked)}>
-        {buttonName}
+        {displayName}
       </ToggleButton>
     </div>
   );
diff --git a/frontend/src/components/ColouredEnumComponent.tsx b/frontend/src/components/ColouredEnumComponent.tsx
index 5863f7b..0f5f5c0 100644
--- a/frontend/src/components/ColouredEnumComponent.tsx
+++ b/frontend/src/components/ColouredEnumComponent.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
+import { WebSettingsContext } from '../WebSettings';
 import { InputGroup, Form, Row, Col } from 'react-bootstrap';
 import { setAttribute } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
@@ -28,6 +29,12 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
   const renderCount = useRef(0);
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
+  const webSettings = useContext(WebSettingsContext);
+  let displayName = name;
+
+  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+    displayName = webSettings[fullAccessPath].displayName;
+  }
 
   useEffect(() => {
     renderCount.current++;
@@ -49,7 +56,7 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
       <DocStringComponent docString={docString} />
       <Row>
         <Col className="d-flex align-items-center">
-          <InputGroup.Text>{name}</InputGroup.Text>
+          <InputGroup.Text>{displayName}</InputGroup.Text>
           {readOnly ? (
             // Display the Form.Control when readOnly is true
             <Form.Control
diff --git a/frontend/src/components/DataServiceComponent.tsx b/frontend/src/components/DataServiceComponent.tsx
index 1971e0c..0d53223 100644
--- a/frontend/src/components/DataServiceComponent.tsx
+++ b/frontend/src/components/DataServiceComponent.tsx
@@ -1,10 +1,11 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import React from 'react';
 import { Card, Collapse } from 'react-bootstrap';
 import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
 import { Attribute, GenericComponent } from './GenericComponent';
 import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
+import { WebSettingsContext } from '../WebSettings';
 
 type DataServiceProps = {
   name: string;
@@ -31,6 +32,13 @@ export const DataServiceComponent = React.memo(
     }
     const id = getIdFromFullAccessPath(fullAccessPath);
 
+    const webSettings = useContext(WebSettingsContext);
+    let displayName = fullAccessPath;
+
+    if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+      displayName = webSettings[fullAccessPath].displayName;
+    }
+
     return (
       <div className="dataServiceComponent" id={id}>
         <Card className="mb-3">
@@ -38,7 +46,7 @@ export const DataServiceComponent = React.memo(
             onClick={() => setOpen(!open)}
             style={{ cursor: 'pointer' }} // Change cursor style on hover
           >
-            {fullAccessPath} {open ? <ChevronDown /> : <ChevronRight />}
+            {displayName} {open ? <ChevronDown /> : <ChevronRight />}
           </Card.Header>
           <Collapse in={open}>
             <Card.Body>
diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx
index 03f556c..c486ecf 100644
--- a/frontend/src/components/EnumComponent.tsx
+++ b/frontend/src/components/EnumComponent.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
+import { WebSettingsContext } from '../WebSettings';
 import { InputGroup, Form, Row, Col } from 'react-bootstrap';
 import { setAttribute } from '../socket';
 import { getIdFromFullAccessPath } from '../utils/stringUtils';
@@ -27,6 +28,12 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
   const renderCount = useRef(0);
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
+  const webSettings = useContext(WebSettingsContext);
+  let displayName = name;
+
+  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+    displayName = webSettings[fullAccessPath].displayName;
+  }
 
   useEffect(() => {
     renderCount.current++;
@@ -48,7 +55,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
       <DocStringComponent docString={docString} />
       <Row>
         <Col className="d-flex align-items-center">
-          <InputGroup.Text>{name}</InputGroup.Text>
+          <InputGroup.Text>{displayName}</InputGroup.Text>
           <Form.Select
             aria-label="Default select example"
             value={value}
diff --git a/frontend/src/components/GenericComponent.tsx b/frontend/src/components/GenericComponent.tsx
index 9b9bba1..5678133 100644
--- a/frontend/src/components/GenericComponent.tsx
+++ b/frontend/src/components/GenericComponent.tsx
@@ -186,7 +186,6 @@ export const GenericComponent = React.memo(
         />
       );
     } else if (attribute.type === 'ColouredEnum') {
-      console.log(attribute);
       return (
         <ColouredEnumComponent
           name={name}
diff --git a/frontend/src/components/ImageComponent.tsx b/frontend/src/components/ImageComponent.tsx
index 23294c7..e521806 100644
--- a/frontend/src/components/ImageComponent.tsx
+++ b/frontend/src/components/ImageComponent.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { WebSettingsContext } from '../WebSettings';
 import { Card, Collapse, Image } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
@@ -22,6 +23,12 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
   const [open, setOpen] = useState(true);
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
+  const webSettings = useContext(WebSettingsContext);
+  let displayName = name;
+
+  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+    displayName = webSettings[fullAccessPath].displayName;
+  }
 
   useEffect(() => {
     renderCount.current++;
@@ -41,7 +48,7 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
           onClick={() => setOpen(!open)}
           style={{ cursor: 'pointer' }} // Change cursor style on hover
         >
-          {name} {open ? <ChevronDown /> : <ChevronRight />}
+          {displayName} {open ? <ChevronDown /> : <ChevronRight />}
         </Card.Header>
         <Collapse in={open}>
           <Card.Body>
diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx
index cad7317..82cc9a4 100644
--- a/frontend/src/components/MethodComponent.tsx
+++ b/frontend/src/components/MethodComponent.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { WebSettingsContext } from '../WebSettings';
 import { runMethod } from '../socket';
 import { Button, InputGroup, Form, Collapse } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
@@ -23,6 +24,12 @@ export const MethodComponent = React.memo((props: MethodProps) => {
   const [functionCalls, setFunctionCalls] = useState([]);
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
+  const webSettings = useContext(WebSettingsContext);
+  let displayName = name;
+
+  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+    displayName = webSettings[fullAccessPath].displayName;
+  }
 
   useEffect(() => {
     renderCount.current++;
@@ -81,7 +88,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
         <div>Render count: {renderCount.current}</div>
       )}
       <h5 onClick={() => setHideOutput(!hideOutput)} style={{ cursor: 'pointer' }}>
-        Function: {name}
+        Function: {displayName}
         <DocStringComponent docString={docString} />
       </h5>
       <Form onSubmit={execute}>
diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx
index 3e5220e..dd2481d 100644
--- a/frontend/src/components/NumberComponent.tsx
+++ b/frontend/src/components/NumberComponent.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { WebSettingsContext } from '../WebSettings';
 import { Form, InputGroup } from 'react-bootstrap';
 import { setAttribute } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
@@ -148,6 +149,12 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   const [inputString, setInputString] = useState(props.value.toString());
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
+  const webSettings = useContext(WebSettingsContext);
+  let displayName = name;
+
+  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+    displayName = webSettings[fullAccessPath].displayName;
+  }
 
   useEffect(() => {
     renderCount.current++;
@@ -309,7 +316,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
       <DocStringComponent docString={docString} />
       <div className="d-flex">
         <InputGroup>
-          {showName && <InputGroup.Text>{name}</InputGroup.Text>}
+          {showName && <InputGroup.Text>{displayName}</InputGroup.Text>}
           <Form.Control
             type="text"
             value={inputString}
diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx
index b050595..f0cc6fc 100644
--- a/frontend/src/components/SliderComponent.tsx
+++ b/frontend/src/components/SliderComponent.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { WebSettingsContext } from '../WebSettings';
 import { InputGroup, Form, Row, Col, Collapse, ToggleButton } from 'react-bootstrap';
 import { setAttribute } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
@@ -36,6 +37,12 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   } = props;
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
+  const webSettings = useContext(WebSettingsContext);
+  let displayName = name;
+
+  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+    displayName = webSettings[fullAccessPath].displayName;
+  }
 
   useEffect(() => {
     renderCount.current++;
@@ -101,7 +108,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
       <DocStringComponent docString={docString} />
       <Row>
         <Col xs="auto" xl="auto">
-          <InputGroup.Text>{name}</InputGroup.Text>
+          <InputGroup.Text>{displayName}</InputGroup.Text>
         </Col>
         <Col xs="5" xl>
           <Slider
diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx
index e8d06c6..33dc8cc 100644
--- a/frontend/src/components/StringComponent.tsx
+++ b/frontend/src/components/StringComponent.tsx
@@ -1,10 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Form, InputGroup } from 'react-bootstrap';
 import { setAttribute } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
 import '../App.css';
 import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
+import { WebSettingsContext } from '../WebSettings';
 
 // TODO: add button functionality
 
@@ -26,6 +27,12 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   const [inputString, setInputString] = useState(props.value);
   const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
+  const webSettings = useContext(WebSettingsContext);
+  let displayName = name;
+
+  if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
+    displayName = webSettings[fullAccessPath].displayName;
+  }
 
   useEffect(() => {
     renderCount.current++;
@@ -65,7 +72,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
       )}
       <DocStringComponent docString={docString} />
       <InputGroup>
-        <InputGroup.Text>{name}</InputGroup.Text>
+        <InputGroup.Text>{displayName}</InputGroup.Text>
         <Form.Control
           type="text"
           value={inputString}