diff --git a/src/styles/images/plus.svg b/src/styles/images/plus.svg
new file mode 100644
index 00000000..cab0b033
--- /dev/null
+++ b/src/styles/images/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path></svg>
\ No newline at end of file
diff --git a/src/styles/images/trash.svg b/src/styles/images/trash.svg
new file mode 100644
index 00000000..d3dc8942
--- /dev/null
+++ b/src/styles/images/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
diff --git a/src/styles/nodes.css b/src/styles/nodes.css
index 58afc3b9..a030afa8 100644
--- a/src/styles/nodes.css
+++ b/src/styles/nodes.css
@@ -1,30 +1,158 @@
 
-.list-entry:not(:last-child),
-.map-entry:not(:last-child),
-.object-node:not(:last-child) > .object-fields {
-  margin-bottom: 0.3rem;
+.tree > .object-node > .node-body {
+  border-left: none;
+  padding-left: 0;
 }
 
-.list-entry,
-.map-entry,
-.object-fields {
+.node {
+  margin: 2px 0;
+}
+
+.node-body > .node:first-child {
+  margin-top: 4px;
+}
+
+.list-node:last-child,
+.map-node:last-child,
+.object-node:last-child {
+  margin-bottom: 0;
+}
+
+.list-node > .node-body,
+.map-node > .node-body,
+.object-node > .node-body {
+  border-left: 3px solid;
+}
+
+.node-header > label,
+.node-header > button {
+  user-select: none;
+}
+.object-node > .node-header > label.collapse {
+  cursor: pointer;
+}
+
+.node input,
+.node select {
+  font-size: 18px;
+}
+
+.node-header {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.node-header > * {
+  height: 24px;
+  border: 1px solid;
+}
+
+.node-header > button {
+  cursor: pointer;
+}
+
+.node-header > input {
+  padding-left: 4px;
+}
+
+.node-header > label,
+.node-header > button {
+  padding: 0 3px;
+}
+
+.node-header > *:first-child {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.node-header > *:last-child {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.node-header > *:not(:last-child) {
+  margin-right: -1px;
+}
+
+.object-node > .node-header > *:first-child,
+.map-node > .node-header > *:first-child,
+.list-node > .node-header > *:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 0;
+}
+
+.node-header > label.collapse.closed {
+  border-bottom-left-radius: 3px;
+}
+
+label.collapse::before {
+  padding-right: 5px;
+  position: relative;
+  top: 3px;
+}
+
+label.collapse.closed::before,
+button.add::after {
+  content: url('./images/plus.svg')
+}
+
+label.collapse.open::before,
+button.remove::before {
+  content: url('./images/trash.svg');
+}
+
+.node-body {
+  display: flex;
+  flex-direction: column;
   padding-left: 0.7rem;
 }
 
-.list-entry {
-  border-left: 2px solid #0b552a;
+.node-entry {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2px;
 }
 
-.map-fields {
-  border-left: 2px solid #066fb4;
+/* COLORS */
+
+.node-header > * {
+  border-color: #bcbfc3;
 }
 
-.object-fields {
-  border-left: 2px solid #b9b9b9;
+.node-header > label {
+  background-color: #e4e4e4;
 }
-.object-node > label {
-  user-select: none;
+
+.node-header > button.add {
+  border-color: #54911b;
+  background-color: #add38a;
 }
-.object-node > label.collapse {
-  cursor: pointer;
+
+.node-header > button.selected {
+  background-color: #f0e65e;
+  border-color: #b9a327
+}
+
+.node-header > label.collapse.closed {
+  border-color: #54911b;
+  background-color: #add38a;
+}
+
+.node-header > label.collapse.open,
+button.remove {
+  border-color: #be4b2e;
+  background-color: #e2917c;
+}
+
+.list-node > .node-body {
+  border-color: #72a543;
+}
+
+.map-node > .node-body {
+  border-color: #066fb4;
+}
+
+.object-node > .node-body {
+  border-color: #b9b9b9;
 }