diff --git a/static/juice.css b/static/juice.css
index e42598b..510818c 100644
--- a/static/juice.css
+++ b/static/juice.css
@@ -1,10 +1,11 @@
 body {
-	padding: 5%;
 	font-family: Helvetica,sans-serif;
 	background-color: lightblue;
+	margin: 0;
 }
 
-#container {
+#devices {
+	padding: 5%;
 	display: flex;
 	justify-content: center;
 }
@@ -46,18 +47,6 @@ body {
 	height: 5em;
 }
 
-path {
-	cursor: pointer;
-}
-
-.on {
-	stroke: red;
-}
-
-.off {
-	stroke: black;
-}
-
 @font-face {
 	font-family: FontAwesome;
 	src: url("/static/fontawesome-webfont.woff2");
diff --git a/static/juice.js b/static/juice.js
index 41995a9..e713584 100644
--- a/static/juice.js
+++ b/static/juice.js
@@ -1,5 +1,15 @@
+function get_object_from_svg(svg) {
+	var all_objects = document.getElementsByTagName("object");
+	for (var i=0; i < all_objects.length; i++) {
+		if (svg === all_objects[i].getSVGDocument().firstElementChild) {
+			return all_objects[i];
+		}
+	}
+	return null;
+}
+
 function toggle_outlet(svg) {
-	let sub_dev = svg.parentElement;
+	let sub_dev = get_object_from_svg(svg).parentElement;
 	let params = {
 		device_id: sub_dev.parentElement.parentElement.id,
 		sub_dev_id: sub_dev.id
diff --git a/static/outlet.svg b/static/outlet.svg
index 314f598..8256067 100644
--- a/static/outlet.svg
+++ b/static/outlet.svg
@@ -1,20 +1,20 @@
 <svg class="off" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-	<path fill="none" stroke="red"
-		d="M 23,10
-		L 77,10
-		A 50 49 0 0 1 77,91
-		L 23,91
-		A 50 49 0 0 1 23,10
-		Z" />
+	<style>
+		path, rect {
+			cursor: pointer;
+		}
 
-	<rect x="29" y="30" width="6" height="21" fill="none" stroke="red" />
+		.on {
+			stroke: red;
+		}
 
-	<rect x="65" y="30" width="6" height="21" fill="none" stroke="red" />
+		.off {
+			stroke: black;
+		}
+	</style>
 
-	<path fill="none" stroke="red"
-		d="M 43, 75
-		A 1 1 0 0 1 57,75
-		L 57,84
-		L 43,84
-		Z" />
+	<rect x="29" y="30" width="6" height="21" fill="none" />
+	<rect x="65" y="30" width="6" height="21" fill="none" />
+	<path fill="none" d="M 43, 75 A 1 1 0 0 1 57,75 L 57,84 L 43,84 Z" />
+	<path fill="white" fill-opacity="0.0" d="M 23,10 L 77,10 A 50 49 0 0 1 77,91 L 23,91 A 50 49 0 0 1 23,10 Z" onclick="top.toggle_outlet(this.parentElement)" />
 </svg>
diff --git a/templates/index.html b/templates/index.html
index 0ee729d..0b1efae 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,38 +1,35 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<title>Juice</title>
-	<link rel="stylesheet" type="text/css" href="/static/juice.css">
-	<script type="text/javascript" src="/static/juice.js"></script>
-</head>
-<body>
-	<div id="container">
-		{% for dev_type, devices in network.items() %}
-		{% for device in devices %}
-		<div class="device {{ dev_type }}" id="{{ device.id }}">
-			<div class="id">{{ device.id }}</div>
-			<div class="description"><span class="field_value">{{ device.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
-			<div class="location"><span class="field_value">{{ device.location }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
-			<div class="ip_address"><i>{{ device.ip_address }}</i></div>
-			<div class="sub_devices">
-				{% for sub_dev_type, sub_devs in device.sub_devices.items() %}
-				{% for sub_dev in sub_devs %}
-				<div class="sub_device {{ sub_dev_type }}" id="{{ sub_dev.id }}">
-					<div class="id">{{ sub_dev.id }}</div>
-					<svg class="outlet_image {% if sub_dev.state %}on{% else %}off{% endif %}" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-						<rect x="29" y="30" width="6" height="21" fill="none" />
-						<rect x="65" y="30" width="6" height="21" fill="none" />
-						<path fill="none" d="M 43, 75 A 1 1 0 0 1 57,75 L 57,84 L 43,84 Z" />
-						<path fill="white" fill-opacity="0.0" d="M 23,10 L 77,10 A 50 49 0 0 1 77,91 L 23,91 A 50 49 0 0 1 23,10 Z" onclick="toggle_outlet(this.parentElement)" />
-					</svg>
-					<div class="description"><span class="field_value">{{ sub_dev.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
+	<head>
+		<title>Juice</title>
+		<link rel="stylesheet" type="text/css" href="/static/juice.css">
+		<script type="text/javascript" src="/static/juice.js"></script>
+	</head>
+	<body>
+		<main>
+			<div id="devices">
+				{% for dev_type, devices in network.items() %}
+				{% for device in devices %}
+				<div class="device {{ dev_type }}" id="{{ device.id }}">
+					<div class="id">{{ device.id }}</div>
+					<div class="description"><span class="field_value">{{ device.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
+					<div class="location"><span class="field_value">{{ device.location }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
+					<div class="ip_address"><i>{{ device.ip_address }}</i></div>
+					<div class="sub_devices">
+						{% for sub_dev_type, sub_devs in device.sub_devices.items() %}
+						{% for sub_dev in sub_devs %}
+						<div class="sub_device {{ sub_dev_type }}" id="{{ sub_dev.id }}">
+							<div class="id">{{ sub_dev.id }}</div>
+							<object class="outlet_image" data="/static/outlet.svg"></object>
+							<div class="description"><span class="field_value">{{ sub_dev.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
+						</div>
+						{% endfor %}
+						{% endfor %}
+					</div>
 				</div>
-				{% endfor %}
-				{% endfor %}
+			{% endfor %}
+			{% endfor %}
 			</div>
-		</div>
-	{% endfor %}
-	{% endfor %}
-	</div>
-</body>
+		</main>
+	</body>
 </html>
