diff --git a/src/actions/index.js b/src/actions/index.js
index cc515f7..e019940 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -272,6 +272,15 @@ export const setFixtureAddress = (fixtureId, fixtureAddress) => ({
   type: constants.SET_FIXTURE_ADDRESS
 })
 
+/*
+ * Set the values of the fixture
+ */
+export const setFixture = (fixtureId, fixture) => ({
+  fixtureId,
+  fixture,
+  type: constants.SET_FIXTURE
+})
+
 /*
  * Set the properties of a fixture
  */
diff --git a/src/components/dmx-fixture-property/index.js b/src/components/dmx-fixture-property/index.js
index 6392e75..63adf6b 100644
--- a/src/components/dmx-fixture-property/index.js
+++ b/src/components/dmx-fixture-property/index.js
@@ -1,5 +1,8 @@
 import { LitElement, html } from '/node_modules/@polymer/lit-element/lit-element.js'
 import { repeat } from '/node_modules/lit-html/directives/repeat.js'
+import { rgbToHex } from '../../directives/rgb-to-hex.js'
+import { defaultValue } from '../../directives/default-value.js'
+import { selected } from '../../directives/selected.js'
 
 
 /*
@@ -12,7 +15,8 @@ class DmxFixtureProperty extends LitElement {
       name: { type: String },
       type: { type: String },
       channels: { type: Number },
-      property: { type: Object }
+      property: { type: Object },
+      value: { type: String }
     }
   }
 
@@ -58,21 +62,22 @@ class DmxFixtureProperty extends LitElement {
   }
 
   render() {
-    const { channels, property, name } = this
+    const { channels, property, name, value } = this
 
     return html`
     <div>
+
       <label title="${channels}">${name}</label>:
 
       ${
         property.isRgb
-        ? html`<input type="color" @change="${e => this.handleColorChange(e)}">`
+        ? html`<input type="color" .value="${rgbToHex(value)}" @change="${e => this.handleColorChange(e)}">`
         : ''
       }
 
       ${
         property.isRange
-        ? html`<input type="number" value="0" min="0" max="255" @change="${e => this.handleInputChange(e)}">`
+        ? html`<input type="number" .value="${defaultValue(value, 0)}" min="0" max="255" @change="${e => this.handleInputChange(e)}">`
         : ''
       }
 
@@ -81,7 +86,7 @@ class DmxFixtureProperty extends LitElement {
         ? html`
           <select @change="${e => this.handleSelectChange(e)}">
             ${repeat(property.mapping, mapping => html`
-              <option value="${mapping}">${mapping}</option>
+              <option value="${mapping}" ?selected="${selected(value, mapping)}">${mapping}</option>
             `)}
           </select>
         `
@@ -90,13 +95,23 @@ class DmxFixtureProperty extends LitElement {
 
       ${
         property.isMultiRange
-        ? html`<input type="text" @change="${e => this.handleInputChange(e)}" title="${JSON.stringify(property.mapping)}">`
+        ? html`
+          <input type="text" .value="${defaultValue(value, '')}" @change="${e => this.handleInputChange(e)}">
+          <ul>
+            ${repeat(property.mapping, mapping => html`
+              <li>${mapping}</li>
+            `)}
+          </ul>
+        `
         : ''
       }
 
       ${
         property.isHiRes
-        ? html`<input type="number" @change="${e => this.handleInputChange(e)}" title="${property.min} to ${property.max}" min="${property.min}" max="${property.max}">`
+        ? html`
+          <input type="number" .value="${defaultValue(value, 0)}" @change="${e => this.handleInputChange(e)}" min="${property.min}" max="${property.max}">
+          <span>From ${property.min} to ${property.max}</span>
+        `
         : ''
       }
 
diff --git a/src/components/dmx-fixture/index.js b/src/components/dmx-fixture/index.js
index 1f3e6fa..1e2fd9c 100644
--- a/src/components/dmx-fixture/index.js
+++ b/src/components/dmx-fixture/index.js
@@ -1,7 +1,7 @@
 import { LitElement, html } from '/node_modules/@polymer/lit-element/lit-element.js'
 import { repeat } from '/node_modules/lit-html/directives/repeat.js'
 import { store } from '../../reduxStore.js'
-import { setChannels, setFixtureAddress } from '../../actions/index.js'
+import { setChannels, setFixture, setFixtureProperties } from '../../actions/index.js'
 import '/node_modules/@polymer/polymer/lib/elements/dom-repeat.js'
 import '../dmx-fixture-property/index.js'
 import * as Fixtures from '../../utils/dmx-fixtures.js'
@@ -22,6 +22,7 @@ class DmxFixture extends LitElement {
       type: { type: String },
       address: { type: Number },
       universe: { type: Number },
+      properties: { type: Object },
       _fixture: { type: Object },
       _properties: { type: Object }
     }
@@ -33,8 +34,12 @@ class DmxFixture extends LitElement {
     // Get data out of the form
     const data = new FormData(e.target)
     const address = parseInt(data.get('address'), 10)
+    const name = data.get('name')
 
-    store.dispatch(setFixtureAddress(this.id, address))
+    store.dispatch(setFixture(this.id, { 
+      name, 
+      address 
+    }))
   }
 
   /*
@@ -48,6 +53,9 @@ class DmxFixture extends LitElement {
     // Send all values of all channels to universe 0
     store.dispatch(setChannels(0, [...batch]))
 
+    // Save the changed property into state
+    store.dispatch(setFixtureProperties(this.id, { [name]: value }))
+
     const now = new Date()
 
     // Send the universe to the UsbDmxManager
@@ -67,7 +75,7 @@ class DmxFixture extends LitElement {
     // Get the properties of the fixture
     this._properties = this._fixture.getParamsList()
 
-    const { type, address, _fixture, _properties } = this
+    const { properties, type, address, name, _fixture, _properties } = this
 
     return html`
         <style>
@@ -82,22 +90,29 @@ class DmxFixture extends LitElement {
           }
         </style>
 
-        <div>
           <div class="grid">
             <div>
-              <iron-icon icon="info-outline" id="info"></iron-icon>
-              Type: ${type}
-              <br />
-              Weight: ${_fixture.weight} kg
-              <br />
-              Channels: ${_fixture.channels}
 
               <form id="fixtureMetaProperties" @submit="${e => this.handleSubmit(e)}">
+                <div>
+                  <label for="name">Name</label>
+                  <input id="name" name="name" type="text" .value="${name}"/>
+                </div>
+              
                 <div>
                   <label for="address">Address</label>
-                  <input id="address" name="address" type="number" min="0" max="512" value="${address}"/>
+                  <input id="address" name="address" type="number" min="0" max="512" .value="${address}"/>
                 </div>
+
+                <button type="submit">Update</button>
               </form>
+
+              <iron-icon icon="info-outline" id="info"></iron-icon>
+              Type: ${type}
+              <br />
+              Weight: ${_fixture.weight} kg
+              <br />
+              Channels: ${_fixture.channels}
             </div>
           </div>
 
@@ -108,6 +123,7 @@ class DmxFixture extends LitElement {
                 @change="${e => this.handleChange(e)}"
 
                 .property="${property}"
+                .value="${properties[property.name]}"
                 name="${property.name}"
                 type="${property.type}"
                 channels="${property.channels}"
@@ -118,7 +134,6 @@ class DmxFixture extends LitElement {
 
           </div>
 
-        </div>
     `
   }
 }
diff --git a/src/directives/default-value.js b/src/directives/default-value.js
new file mode 100644
index 0000000..545e3c2
--- /dev/null
+++ b/src/directives/default-value.js
@@ -0,0 +1,12 @@
+import { directive } from '/node_modules/lit-html/lit-html.js'
+
+/*
+ * Set a default value if the provided value is undefined
+ */
+export const defaultValue = (value, defaultVal) => directive(part => {
+    if (value === undefined) {
+        value = defaultVal
+    }
+
+    part.setValue(value)
+})
diff --git a/src/directives/rgb-to-hex.js b/src/directives/rgb-to-hex.js
new file mode 100644
index 0000000..f5a9cc7
--- /dev/null
+++ b/src/directives/rgb-to-hex.js
@@ -0,0 +1,15 @@
+import { directive } from '/node_modules/lit-html/lit-html.js'
+
+/*
+ * Convert an RGB-Array into a Hex color
+ */
+export const rgbToHex = (value, defaultValue = '#000000') => directive(part => {
+    // Is an RGB array
+    if (Array.isArray(value) && value.length === 3) {
+        const hex = `#${value.map(x => x.toString(16).padStart(2, '0')).join('')}`
+        part.setValue(hex)
+    // Is not an RGB array, so use the defaultValue
+    } else {
+        part.setValue(defaultValue)
+    }
+})
diff --git a/src/directives/selected.js b/src/directives/selected.js
new file mode 100644
index 0000000..63c6091
--- /dev/null
+++ b/src/directives/selected.js
@@ -0,0 +1,15 @@
+import { directive } from '/node_modules/lit-html/lit-html.js'
+
+/*
+ * Find out if the provided value is defined or equals the value of the <option></option>
+ * to set the "selected" attribute
+ */
+export const selected = (value, optionValue) => directive(part => {
+    if (value === undefined) {
+      part.setValue(false)
+    } else if (optionValue === value) {
+      part.setValue(true)
+    } else {
+      part.setValue(false)
+    }
+})
diff --git a/src/reducers/index.js b/src/reducers/index.js
index f9fd070..59aee78 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -258,6 +258,10 @@ export const fixtureManager = (state = [], { type, fixture, fixtureIndex, fixtur
     case constants.ADD_FIXTURE:
       return update(state, { $push: [fixture] })
 
+    case constants.SET_FIXTURE: {
+      return update(state, { [fixtureIndex]: { $merge: fixture } })
+    }
+
     case constants.SET_FIXTURE_ADDRESS:
       return update(state, { [fixtureIndex]: { address: { $set: fixtureAddress } } })
 
diff --git a/src/views/fixture-detail-view.js b/src/views/fixture-detail-view.js
index dfe0519..cdc7858 100644
--- a/src/views/fixture-detail-view.js
+++ b/src/views/fixture-detail-view.js
@@ -2,18 +2,31 @@ import { html } from '@polymer/lit-element'
 import { PageViewElement } from './page-view-element.js'
 import { getFixture } from '../selectors/index.js'
 import { store } from '../reduxStore.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 import '../components/dmx-fixture/index.js'
 
-class FixtureDetailView extends PageViewElement {
+class FixtureDetailView extends connect(store)(PageViewElement) {
 
   static get properties() {
-    return { fixtureId: { type: String } }
+    return { 
+      fixtureId: { type: String },
+      fixture: {
+        type: Object,
+        hasChanged: (newValue, oldValue) => !Object.is(newValue, oldValue)
+      }
+    }
+  }
+
+  _stateChanged(state) {
+    const { fixtureId } = this
+    this.fixture = getFixture(state, { fixtureId })
   }
 
   render() {
     const { fixtureId } = this
+    this.fixture = getFixture(store.getState(), { fixtureId })
 
-    const fixture = getFixture(store.getState(), { fixtureId })
+    const { fixture } = this
 
     return html`
       <style>
@@ -24,23 +37,13 @@ class FixtureDetailView extends PageViewElement {
           border: 3px solid var(--dark-primary-color);
           background: var(--dark-primary-color);
         }
-
-        .item::before {
-          content: attr(data-name);
-          position: absolute;
-          top: calc(var(--padding-basic) * -3);
-          overflow: visible;
-          background: var(--dark-primary-color);
-          color: var(--text-primary-color);
-          padding: var(--padding-basic);
-        }
       </style>
 
 
-      <div class="item" data-name="${fixture.name}">
+      <div class="item">
 
         <dmx-fixture
-          name="${fixture.name}"
+          .name="${fixture.name}"
           .properties="${fixture.properties}"
           id="${fixture.id}"
           type="${fixture.type}"