diff --git a/events.py b/events.py
index ebff324..2952b51 100644
--- a/events.py
+++ b/events.py
@@ -209,6 +209,8 @@ async def neopixel(request, ws, data):
 	if data.get('type') == 'solid':
 		payload = tools.from_html_color(data.get('color'))
 		payload = str(payload)[1:-1].replace(' ', '')
+	elif data.get('type') == 'rainbow':
+		payload = ','.join(data.get('rainbow_params'))
 
 	request.app['mqtt'].publish(mqtt_msg, payload)
 	# websocket response is handled under LightStrip.mqtt_callback
diff --git a/models.py b/models.py
index 0db5f4c..984e053 100644
--- a/models.py
+++ b/models.py
@@ -165,6 +165,7 @@ class LightStrip(Device):
 
 	async def mqtt_callback(self, app, msg):
 		topic = msg.topic.split('/')
+		payload = msg.payload.decode('utf8')
 
 		data = {}
 		data['ok'] = True
@@ -172,10 +173,10 @@ class LightStrip(Device):
 		data['change_mode'] = topic[1]
 
 		if topic[1] == 'state':
-			payload = msg.payload.decode('utf8').split(',')
-			payload = [int(num) for num in payload]
 			data['type'] = topic[2]
 			if topic[2] == 'solid':
+				payload = payload.split(',')
+				payload = [int(num) for num in payload]
 				data['amount'] = topic[3]
 				if topic[3] == 'single':
 					data['sub_device_id'] = 'led' + topic[4]
@@ -185,8 +186,12 @@ class LightStrip(Device):
 				elif topic[3] == 'all':
 					for sub_device in self.sub_devices:
 						sub_device.color = payload
-				save_network(network)
 				data['color'] = tools.to_html_color(payload)
+			elif topic[2] == 'rainbow':
+				payload = payload.split(',')
+				self.rainbow_params = [float(p) for p in payload[:3]]
+				self.rainbow_params += [int(p) for p in payload[3:]]
+		save_network(network)
 
 		res = {'event': 'neopixel', 'data': data}
 		await app.send_json_all(res)
diff --git a/static/juice.js b/static/juice.js
index e6e95ff..f180395 100644
--- a/static/juice.js
+++ b/static/juice.js
@@ -248,11 +248,15 @@ function delete_device(device) {
 	socket.send('delete_device', data);
 }
 
-function neopixel_state(sub_device) {
-	let device = sub_device.parentElement.parentElement;
+function neopixel_state(device) {
+	let sub_device;
+	if (device.classList.contains('sub_device')) {
+		sub_device = device;
+		device = sub_device.closest('.device');
+	}
 	let state_mode = device.querySelector('.state_select').value;
 	let data = {
-		device_id: sub_device.parentElement.parentElement.id,
+		device_id: device.id,
 		change_mode: 'state',
 		type: state_mode,
 	}
@@ -273,6 +277,16 @@ function neopixel_state(sub_device) {
 			data['sub_device_id'] = sub_device.classList[2];
 		}
 	} else if (state_mode === 'rainbow') {
+		data['rainbow_params'] = [
+			device.querySelector('#state_rainbow_red_freq_' + device.id).value,
+			device.querySelector('#state_rainbow_green_freq_' + device.id).value,
+			device.querySelector('#state_rainbow_blue_freq_' + device.id).value,
+			device.querySelector('#state_rainbow_red_phase_' + device.id).value,
+			device.querySelector('#state_rainbow_green_phase_' + device.id).value,
+			device.querySelector('#state_rainbow_blue_phase_' + device.id).value,
+			device.querySelector('#state_rainbow_center_' + device.id).value,
+			device.querySelector('#state_rainbow_width_' + device.id).value
+		]
 	} else if (state_mode === 'america') {
 	}
 	socket.send('neopixel', data);
@@ -311,6 +325,8 @@ function state_solid_amount(radio) {
 }
 
 function state_select(select) {
+	let device = select.parentElement.parentElement.parentElement;
+	let sub_devices = device.querySelector('.sub_devices');
 	if (select.value === 'solid') {
 		select.parentElement.querySelector('.state_solid').style.display = 'block';
 		select.parentElement.querySelector('.state_rainbow').style.display = 'none';
@@ -319,10 +335,18 @@ function state_select(select) {
 		select.parentElement.querySelector('.state_solid').style.display = 'none';
 		select.parentElement.querySelector('.state_rainbow').style.display = 'block';
 		select.parentElement.querySelector('.state_america').style.display = 'none';
+		for (let sub_device of sub_devices.children) {
+			let input = sub_device.firstElementChild.firstElementChild;
+			input.disabled = true;
+		}
 	} else if (select.value === 'america') {
 		select.parentElement.querySelector('.state_solid').style.display = 'none';
 		select.parentElement.querySelector('.state_rainbow').style.display = 'none';
 		select.parentElement.querySelector('.state_america').style.display = 'block';
+		for (let sub_device of sub_devices.children) {
+			let input = sub_device.firstElementChild.firstElementChild;
+			input.disabled = true;
+		}
 	}
 }
 
diff --git a/templates/index.html b/templates/index.html
index 6e4d095..243ebdf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -53,56 +53,56 @@
 								<input type="radio" id="state_solid_single_{{ device.id }}" name="state_solid_{{ device.id }}" value="single" onchange="state_solid_amount(this)">
 								<label for="state_solid_single_{{ device.id }}">Single</label><br>
 								<label for="state_solid_all_color_{{ device.id }}">All:</label>
-								<input type="color" id="state_solid_all_color_{{ device.id }}" value="{{ device.sub_devices[0].color|html_color }}" onchange="neopixel_state(this.parentElement.parentElement)">
+								<input type="color" id="state_solid_all_color_{{ device.id }}" value="{{ device.sub_devices[0].color|html_color }}" onchange="neopixel_state(this.closest('.device'))">
 							</div>
 							<div class="state_rainbow" style="display: {% if device.state == 'rainbow' %}block{% else %}none{% endif %}">
 								<table>
 									<tr>
 										<td>Red</td>
 										<td>
-											<input type="number" id="state_rainbow_red_freq_{{ device.id }}" min="0" max="1" step="0.1">
+											<input type="number" id="state_rainbow_red_freq_{{ device.id }}" min="0" max="1" step="0.1" value="{{ device.rainbow_params[0] }}" onchange="neopixel_state(this.closest('.device'))">
 											<label for="state_rainbow_red_freq_{{ device.id }}">f</label>
 										</td>
 										<td>
-											<input type="number" id="state_rainbow_red_phase_{{ device.id }}" min="0" max="10" step="1">
+											<input type="number" id="state_rainbow_red_phase_{{ device.id }}" min="0" max="10" step="1" value="{{ device.rainbow_params[3] }}" onchange="neopixel_state(this.closest('.device'))">
 											<label for="state_rainbow_red_phase_{{ device.id }}">Φ</label>
 										</td>
 									</tr>
 									<tr>
 										<td>Green</td>
 										<td>
-											<input type="number" id="state_rainbow_green_freq_{{ device.id }}" min="0" max="1" step="0.1">
+											<input type="number" id="state_rainbow_green_freq_{{ device.id }}" min="0" max="1" step="0.1" value="{{ device.rainbow_params[1] }}" onchange="neopixel_state(this.closest('.device'))">
 											<label for="state_rainbow_green_freq_{{ device.id }}">f</label>
 										</td>
 										<td>
-											<input type="number" id="state_rainbow_green_phase_{{ device.id }}" min="0" max="10" step="1">
+											<input type="number" id="state_rainbow_green_phase_{{ device.id }}" min="0" max="10" step="1" value="{{ device.rainbow_params[4] }}" onchange="neopixel_state(this.closest('.device'))">
 											<label for="state_rainbow_green_phase_{{ device.id }}">Φ</label>
 										</td>
 									</tr>
 									<tr>
 										<td>Blue</td>
 										<td>
-											<input type="number" id="state_rainbow_blue_freq_{{ device.id }}" min="0" max="1" step="0.1">
+											<input type="number" id="state_rainbow_blue_freq_{{ device.id }}" min="0" max="1" step="0.1" value="{{ device.rainbow_params[2] }}" onchange="neopixel_state(this.closest('.device'))">
 											<label for="state_rainbow_blue_freq_{{ device.id }}">f</label>
 										</td>
 										<td>
-											<input type="number" id="state_rainbow_blue_phase_{{ device.id }}" min="0" max="10" step="1">
+											<input type="number" id="state_rainbow_blue_phase_{{ device.id }}" min="0" max="10" step="1" value="{{ device.rainbow_params[5] }}" onchange="neopixel_state(this.closest('.device'))">
 											<label for="state_rainbow_blue_phase_{{ device.id }}">Φ</label>
 										</td>
 									</tr>
 									<tr>
 										<td><label for="state_rainbow_center_{{ device.id }}">Center</label></td>
-										<td><input type="number" id="state_rainbow_center_{{ device.id }}" min="0" max="255" step="1"></td>
+										<td><input type="number" id="state_rainbow_center_{{ device.id }}" min="0" max="255" step="1" value="{{ device.rainbow_params[6] }}" onchange="neopixel_state(this.closest('.device'))"></td>
 									</tr>
 									<tr>
 										<td><label for="state_rainbow_width_{{ device.id }}">Width</label></td>
-										<td><input type="number" id="state_rainbow_width_{{ device.id }}" min="0" max="128" step="1"></td>
+										<td><input type="number" id="state_rainbow_width_{{ device.id }}" min="0" max="128" step="1" value="{{ device.rainbow_params[7] }}" onchange="neopixel_state(this.closest('.device'))"></td>
 									</tr>
 								</table>
 							</div>
 							<div class="state_america" style="display: {% if device.state == 'america' %}block{% else %}none{% endif %}">
 								<label for="state_america_stripe_{{ device.id }}">Stripe Length</label>
-								<input type="number" id="state_america_stripe_{{ device.id }}" min="1" max="256" step="1">
+								<input type="number" id="state_america_stripe_{{ device.id }}" min="1" max="256" step="1" value="{{ device.america_params }}">
 							</div>
 						</div>
 						<div class="animation">
@@ -124,7 +124,7 @@
 							<div class="description editable"><span class="field_value">{{ sub_device.description }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
 							{% elif device.type == 'LightStrip' %}
 							<label class="NeoPixel_color" style="background-color: {{ sub_device.color|html_color }}">
-								<input class="NeoPixel_color_input" type="color" value="{{ sub_device.color|html_color }}" onchange="neopixel_state(this.parentElement.parentElement)" disabled>
+								<input class="NeoPixel_color_input" type="color" value="{{ sub_device.color|html_color }}" onchange="neopixel_state(this.closest('.sub_device'))" disabled>
 							</label>
 							{% endif %}
 						</div>