diff --git a/public/src/admin/general/navigation.js b/public/src/admin/general/navigation.js
new file mode 100644
index 0000000000..4bdb1973c6
--- /dev/null
+++ b/public/src/admin/general/navigation.js
@@ -0,0 +1,44 @@
+"use strict";
+/* global define, app, ajaxify, socket, templates, bootbox */
+
+define('admin/general/navigation', function() {
+	var navigation = {};
+
+
+	var available;
+
+	navigation.init = function() {
+		available = JSON.parse(ajaxify.variables.get('available'));
+
+		$('.delete').on('click', function() {
+			$(this).parents('li').remove();
+		});
+
+		$('#save').on('click', saveNavigation);
+	};
+
+	function saveNavigation() {
+		var nav = [];
+
+		$('#enabled li').each(function() {
+			var form = $(this).find('form').serializeArray(),
+				data = {};
+
+			form.forEach(function(input) {
+				data[input.name] = input.value;
+			});
+
+			nav.push(data);
+		});
+
+		socket.emit('admin.navigation.save', activeRewards, function(err) {
+			if (err) {
+				app.alertError(err.message);
+			} else {
+				app.alertSuccess('Successfully saved navigation');
+			}
+		});
+	}
+
+	return navigation;
+});
\ No newline at end of file
diff --git a/src/socket.io/admin/navigation.js b/src/socket.io/admin/navigation.js
new file mode 100644
index 0000000000..0f3f7c168e
--- /dev/null
+++ b/src/socket.io/admin/navigation.js
@@ -0,0 +1,10 @@
+"use strict";
+
+var navigationAdmin = require('../../navigation/admin'),
+	SocketNavigation = {};
+
+SocketNavigation.save = function(socket, data, callback) {
+	navigationAdmin.save(data, callback);
+};
+
+module.exports = SocketNavigation;
\ No newline at end of file
diff --git a/src/views/admin/general/navigation.tpl b/src/views/admin/general/navigation.tpl
index 2356309f06..e513c1b7a1 100644
--- a/src/views/admin/general/navigation.tpl
+++ b/src/views/admin/general/navigation.tpl
@@ -4,9 +4,9 @@
 			<div class="panel-heading">Active Navigation</div>
 			<div class="panel-body">
 				<ul id="enabled">
-					<form class="main inline-block">
-						<!-- BEGIN enabled -->
-						<li class="well">
+					<!-- BEGIN enabled -->
+					<li class="well">
+						<form>
 							<label>ID: <small>optional</small>
 								<input class="form-control" type="text" name="id" value="{enabled.id}" />
 							</label>
@@ -26,12 +26,13 @@
 								<input class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
 							</label>
 							<hr />
+							<button class="btn btn-danger delete">Delete</button>
 							<label>Enabled
 								<input type="checkbox" name="enabled" <!-- IF enabled --> checked<!-- ENDIF enabled --> />
 							</label>
-						</li>
-						<!-- END enabled -->
-					</form>
+						</form>
+					</li>
+					<!-- END enabled -->
 				</ul>
 			</div>
 		</div>
@@ -51,6 +52,7 @@
 						<span class="pull-right badge"><!-- IF available.core -->core<!-- ELSE -->plugin<!-- ENDIF available.core --></span>
 					</li>
 					<!-- END available -->
+					<input type="hidden" template-variable="available" value="{function.stringify, available}" />
 				</ul>
 			</div>
 		</div>