diff --git a/lib/elgato_dm.js b/lib/elgato_dm.js
index af494052b2..b1fd53a084 100644
--- a/lib/elgato_dm.js
+++ b/lib/elgato_dm.js
@@ -36,6 +36,14 @@ function elgatoDM(_system) {
 	var self = this
 	system = _system
 
+	self.surface_names = {}
+
+	system.emit('db_get', 'surfaces_names', function (names) {
+		if (names) {
+			self.surface_names = names
+		}
+	})
+
 	system.on('elgatodm_remove_device', self.removeDevice.bind(self))
 
 	system.on('devices_reenumerate', function () {
@@ -69,6 +77,15 @@ function elgatoDM(_system) {
 				})
 			})
 
+			socket.on('device_set_name', function (serialnumber, name) {
+				if (Object.values(instances).find((inst) => inst.serialnumber === serialnumber)) {
+					self.surface_names[serialnumber] = name
+					self.updateDevicesList()
+
+					system.emit('db_set', 'surfaces_names', self.surface_names)
+				}
+			})
+
 			socket.on('device_config_get', function (_id, answer) {
 				for (var id in instances) {
 					if (instances[id].id == _id) {
@@ -108,6 +125,7 @@ elgatoDM.prototype.getDevicesList = function () {
 		id: instance.id || '',
 		serialnumber: instance.serialnumber || '',
 		type: instance.type || '',
+		name: self.surface_names[instance.serialnumber] || '',
 		config: instance.config || {},
 	}))
 
diff --git a/webui/src/Surfaces.jsx b/webui/src/Surfaces.jsx
index b4d952e19e..95e361a803 100644
--- a/webui/src/Surfaces.jsx
+++ b/webui/src/Surfaces.jsx
@@ -26,6 +26,7 @@ import { StaticContext, LoadingRetryOrError, socketEmit } from './util'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCog, faSync } from '@fortawesome/free-solid-svg-icons'
 import shortid from 'shortid'
+import { TextInputField } from './Components/TextInputField'
 
 export const SurfacesPage = memo(function SurfacesPage() {
 	const context = useContext(StaticContext)
@@ -72,6 +73,13 @@ export const SurfacesPage = memo(function SurfacesPage() {
 		editModalRef.current.show(device)
 	}, [])
 
+	const updateName = useCallback(
+		(serialnumber, name) => {
+			context.socket.emit('device_set_name', serialnumber, name)
+		},
+		[context.socket]
+	)
+
 	return (
 		<div>
 			<h4>Surfaces</h4>
@@ -95,6 +103,7 @@ export const SurfacesPage = memo(function SurfacesPage() {
 					<tr>
 						<th>NO</th>
 						<th>ID</th>
+						<th>Name</th>
 						<th>Type</th>
 						<th>&nbsp;</th>
 					</tr>
@@ -105,6 +114,13 @@ export const SurfacesPage = memo(function SurfacesPage() {
 							<tr key={dev.id}>
 								<td>#{i}</td>
 								<td>{dev.serialnumber}</td>
+								<td>
+									<TextInputField
+										definition={{}}
+										value={dev.name}
+										setValue={(val) => updateName(dev.serialnumber, val)}
+									/>
+								</td>
 								<td>{dev.type}</td>
 								<td>
 									{dev?.config && dev.config.length > 0 ? (