diff --git a/src/editor/components/nodetypeentry.css b/src/editor/components/nodetypeentry.css
index c76ac585492c292b10d1b36c71284c195fd2ce16..41e325a473ae8e946bf2c0f72cae8c10b40e2fc8 100644
--- a/src/editor/components/nodetypeentry.css
+++ b/src/editor/components/nodetypeentry.css
@@ -1,7 +1,12 @@
-div#ks-editor .node-type-name {
-    width: 150px;
+div#ks-editor input,
+div#ks-editor button {
+    margin-bottom: 0.5em;
+}
+
+div#ks-editor input {
+    max-width: 100%;
 }
 
 div#ks-editor .node-type-color {
-    width: 5rem;
+    margin-bottom: 1em;
 }
diff --git a/src/editor/components/nodetypeentry.tsx b/src/editor/components/nodetypeentry.tsx
index ed1907a4ddf5bcfcf172e3dc0fe8c7cf0d963966..727520ed157da6aa1a44c9e7e40de607ae1a34c0 100644
--- a/src/editor/components/nodetypeentry.tsx
+++ b/src/editor/components/nodetypeentry.tsx
@@ -70,7 +70,9 @@ function NodeTypeEntry({
     };
 
     return (
-        <li className="node-type" onBlur={handleBlur}>
+        <div className="node-type" onBlur={handleBlur}>
+            <label htmlFor="node-type-name">Name</label>
+            <br />
             <input
                 className="node-type-name"
                 type={"text"}
@@ -79,21 +81,26 @@ function NodeTypeEntry({
                     handleDataChange("name", event.target.value)
                 }
             />
+            <br />
+            <label htmlFor="node-type-color">Color</label>
+            <br />
             <input
                 className="node-type-color"
                 type={"text"}
                 value={tmpColor !== undefined ? tmpColor : nodeType.color}
                 onChange={(event) => handleColorChange(event.target.value)}
             />
+            <br />
             <button onClick={() => onNodeTypeSelect(nodeType)}>
                 Select nodes
             </button>
+            <br />
             {enableDelete && (
                 <button onClick={() => onNodeTypeDelete([nodeType.id])}>
                     Delete
                 </button>
             )}
-        </li>
+        </div>
     );
 }
 
diff --git a/src/editor/components/nodetypeseditor.css b/src/editor/components/nodetypeseditor.css
index db57894967f88f4babb0a909faafe86275b2e0d0..defbabd168ed0fd14314bb5da8f82ced95a829a6 100644
--- a/src/editor/components/nodetypeseditor.css
+++ b/src/editor/components/nodetypeseditor.css
@@ -1,5 +1,3 @@
-div#ks-editor #node-types-editor ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+div#ks-editor #node-types-editor select {
+    margin-bottom: 1em;
 }
diff --git a/src/editor/components/nodetypeseditor.tsx b/src/editor/components/nodetypeseditor.tsx
index 287498bc3d719f48b66832dab99d9c91218796bf..f3bc7efe51db2baa0d1aab0951f18ab650e5ae40 100644
--- a/src/editor/components/nodetypeseditor.tsx
+++ b/src/editor/components/nodetypeseditor.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import "./nodetypeseditor.css";
 import NodeTypeEntry from "./nodetypeentry";
 import { NodeType, NodeTypeData } from "../../common/graph/nodetype";
@@ -23,23 +23,55 @@ function NodeTypesEditor({
     onNodeTypeDataChange,
     createCheckpoint,
 }: NodeTypesEditorProps) {
+    const [selectedType, setSelectedType] = useState<NodeType>(nodeTypes[0]); // There should always exist at least one NodeType object
+
+    const selectTypeWithId = (id: number) =>
+        setSelectedType(nodeTypes.find((type: NodeType) => type.id == id));
+
+    const handleNodeTypeCreation = () => {
+        const newNodeType = onNodeTypeCreation();
+
+        // Select new type
+        setSelectedType(newNodeType);
+    };
+
+    const handleNodeTypeDelete = (ids: number[]) => {
+        onNodeTypeDelete(ids);
+
+        // Selete other type => Try first element that will not be delete
+        const newSelectedType = nodeTypes.find(
+            (nodeType: NodeType) => !ids.includes(nodeType.id)
+        );
+        setSelectedType(newSelectedType);
+    };
+
     return (
         <div id="node-types-editor">
-            <h3>Node types</h3>
-            <ul>
-                {nodeTypes.map((nodeType) => (
-                    <NodeTypeEntry
+            <button onClick={handleNodeTypeCreation}>Add type</button>
+            <br />
+            <select
+                onChange={(e) => selectTypeWithId(Number(e.target.value))}
+                value={selectedType.id}
+            >
+                {nodeTypes.map((nodeType: NodeType, index: number) => (
+                    <option
                         key={nodeType.id}
-                        nodeType={nodeType}
-                        onNodeTypeSelect={onNodeTypeSelect}
-                        onNodeTypeDelete={onNodeTypeDelete}
-                        onNodeTypeDataChange={onNodeTypeDataChange}
-                        enableDelete={nodeTypes.length > 1}
-                        createCheckpoint={createCheckpoint}
-                    />
+                        value={nodeType.id}
+                        selected={index === 0}
+                    >
+                        {nodeType.name}
+                    </option>
                 ))}
-            </ul>
-            <button onClick={onNodeTypeCreation}>Add type</button>
+            </select>
+            <hr />
+            <NodeTypeEntry
+                nodeType={selectedType}
+                onNodeTypeSelect={onNodeTypeSelect}
+                onNodeTypeDelete={handleNodeTypeDelete}
+                onNodeTypeDataChange={onNodeTypeDataChange}
+                enableDelete={nodeTypes.length > 1}
+                createCheckpoint={createCheckpoint}
+            />
         </div>
     );
 }