diff --git a/public/language/en-GB/admin/extend/rewards.json b/public/language/en-GB/admin/extend/rewards.json
index 5383a90b33..df89d441a7 100644
--- a/public/language/en-GB/admin/extend/rewards.json
+++ b/public/language/en-GB/admin/extend/rewards.json
@@ -8,8 +8,6 @@
 	"delete": "Delete",
 	"enable": "Enable",
 	"disable": "Disable",
-	"control-panel": "Rewards Control",
-	"new-reward": "New Reward",
 
 	"alert.delete-success": "Successfully deleted reward",
 	"alert.no-inputs-found": "Illegal reward - no inputs found!",
diff --git a/public/less/admin/extend/rewards.less b/public/less/admin/extend/rewards.less
index 2dc84b5bc3..3972b16de3 100644
--- a/public/less/admin/extend/rewards.less
+++ b/public/less/admin/extend/rewards.less
@@ -16,6 +16,36 @@
 		> li {
 			border-bottom: 1px solid #ddd;
 			margin-bottom: 20px;
+			&:last-child {
+				border-bottom: 0;
+			}
+		}
+	}
+
+	.rewards { width: 100%; }
+
+	.well {
+		border-radius: 2px;
+		border-width: 2px;
+		color: #333;
+
+		&.if-block {
+			border-color: @brand-primary;
+		}
+		&.this-block {
+			border-color: @brand-warning;
+		}
+		&.then-block {
+			border-color: @brand-success;
+		}
+		&.reward-block {
+			border-color: @brand-success;
+			background-color: lighten(@brand-success, 15%);
+			color: #fff;
+			a, select, input { color: #fff; }
+			select > option { color: #333; }
+			width: 100%;
+			min-height: 110px;
 		}
 	}
 }
\ No newline at end of file
diff --git a/public/src/admin/extend/rewards.js b/public/src/admin/extend/rewards.js
index 3850b24017..7df62a7e15 100644
--- a/public/src/admin/extend/rewards.js
+++ b/public/src/admin/extend/rewards.js
@@ -95,13 +95,13 @@ define('admin/extend/rewards', [], function () {
 			html += '<label for="' + input.name + '">' + input.label + '<br />';
 			switch (input.type) {
 				case 'select':
-					html += '<select name="' + input.name + '">';
+					html += '<select class="form-control" name="' + input.name + '">';
 					input.values.forEach(function (value) {
 						html += '<option value="' + value.value + '">' + value.name + '</option>';
 					});
 					break;
 				case 'text':
-					html += '<input type="text" name="' + input.name + '" />';
+					html += '<input type="text" class="form-control" name="' + input.name + '" />';
 					break;
 			}
 			html += '</label><br />';
diff --git a/src/views/admin/extend/rewards.tpl b/src/views/admin/extend/rewards.tpl
index bd226cc39d..456ab7d379 100644
--- a/src/views/admin/extend/rewards.tpl
+++ b/src/views/admin/extend/rewards.tpl
@@ -1,76 +1,82 @@
-<div id="rewards" class="row">
-	<div class="col-lg-9">
-		<div class="panel panel-default">
-			<div class="panel-heading">[[admin/extend/rewards:rewards]]</div>
-			<div class="panel-body">
-				<ul id="active">
-					{{{ each active }}}
-					<li data-rid="{active.rid}" data-id="{active.id}">
-						<form class="main inline-block">
-							<div class="well inline-block">
-								<label for="condition">[[admin/extend/rewards:condition-if-users]]</label><br />
-								<select name="condition" data-selected="{active.condition}">
-									{{{ each conditions }}}
-									<option value="{conditions.condition}">{conditions.name}</option>
-									{{{ end }}}
-								</select>
-							</div>
-							<div class="well inline-block">
-								<label for="condition">[[admin/extend/rewards:condition-is]]</label><br />
-								<select name="conditional" data-selected="{active.conditional}">
-									{{{ each  conditionals }}}
-									<option value="{conditionals.conditional}">{conditionals.name}</option>
-									{{{ end }}}
-								</select>
-								<input type="text" name="value" value="{active.value}" />
-							</div>
-							<div class="well inline-block">
-								<label for="condition">[[admin/extend/rewards:condition-then]]</label><br />
-								<select name="rid" data-selected="{active.rid}">
-									<!-- BEGIN ../../rewards -->
-									<option value="{rewards.rid}">{rewards.name}</option>
-									<!-- END ../../rewards -->
-								</select>
-							</div>
-						</form>
 
-						<form class="rewards inline-block">
-							<div class="inputs well inline-block"></div>
-						</form>
-						<div class="clearfix"></div>
-
-						<div class="pull-right">
-							<div class="panel-body inline-block">
-								<form class="main">
-									<label for="claimable">[[admin/extend/rewards:max-claims]]</label><br />
-									<input type="text" name="claimable" value="{active.claimable}" placeholder="1" />
-									<small>[[admin/extend/rewards:zero-infinite]]</small>
-								</form>
-							</div>
-							<div class="panel-body inline-block">
-								<button class="btn btn-danger delete">[[admin/extend/rewards:delete]]</button>
-								<!-- IF active.disabled -->
-								<button class="btn btn-success toggle">[[admin/extend/rewards:enable]]</button>
-								<!-- ELSE -->
-								<button class="btn btn-warning toggle">[[admin/extend/rewards:disable]]</button>
-								<!-- ENDIF active.disabled -->
+<div id="rewards">
+	<ul id="active">
+		{{{ each active }}}
+		<li data-rid="{active.rid}" data-id="{active.id}">
+			<div class="row">
+				<div class="col-xs-12 col-sm-12 col-lg-8">
+					<form class="main inline-block">
+						<div class="well inline-block if-block">
+							<label for="condition">[[admin/extend/rewards:condition-if-users]]</label><br />
+							<select class="form-control" name="condition" data-selected="{active.condition}">
+								{{{ each conditions }}}
+								<option value="{conditions.condition}">{conditions.name}</option>
+								{{{ end }}}
+							</select>
+						</div>
+						<div class="well inline-block this-block">
+							<label for="condition">[[admin/extend/rewards:condition-is]]</label><br />
+							<div class="row">
+								<div class="col-xs-6">
+									<select class="form-control" name="conditional" data-selected="{active.conditional}">
+										{{{ each  conditionals }}}
+										<option value="{conditionals.conditional}">{conditionals.name}</option>
+										{{{ end }}}
+									</select>
+								</div>
+								<div class="col-xs-6">
+									<input class="form-control" type="text" name="value" value="{active.value}" />
+								</div>
 							</div>
 						</div>
-						<div class="clearfix"></div>
-					</li>
-					{{{ end }}}
-				</ul>
+						<div class="well inline-block then-block">
+							<label for="condition">[[admin/extend/rewards:condition-then]]</label><br />
+							<select class="form-control" name="rid" data-selected="{active.rid}">
+								<!-- BEGIN ../../rewards -->
+								<option value="{rewards.rid}">{rewards.name}</option>
+								<!-- END ../../rewards -->
+							</select>
+						</div>
+					</form>
+				</div>
+				<div class="col-xs-12 col-sm-12 col-lg-4">
+					<form class="rewards inline-block">
+						<div class="inputs well inline-block reward-block"></div>
+					</form>
+				</div>
+			</div>
+
+			<div class="pull-left">
+				<div class="panel-body inline-block">
+					<form class="main">
+						<label for="claimable">[[admin/extend/rewards:max-claims]] <small>[[admin/extend/rewards:zero-infinite]]</small></label><br />
+						<input class="form-control" type="text" name="claimable" value="{active.claimable}" placeholder="1" />
+					</form>
+				</div>
 			</div>
-		</div>
-	</div>
 
-	<div class="col-lg-3 acp-sidebar">
-		<div class="panel panel-default">
-			<div class="panel-heading">[[admin/extend/rewards:control-panel]]</div>
-			<div class="panel-body">
-				<button class="btn btn-success btn-md" id="new">[[admin/extend/rewards:new-reward]]</button>
-				<button class="btn btn-primary btn-md" id="save">[[global:save_changes]]</button>
+			<div class="pull-right">
+				<div class="panel-body inline-block">
+					<button class="btn btn-danger delete">[[admin/extend/rewards:delete]]</button>
+					<!-- IF active.disabled -->
+					<button class="btn btn-success toggle">[[admin/extend/rewards:enable]]</button>
+					<!-- ELSE -->
+					<button class="btn btn-warning toggle">[[admin/extend/rewards:disable]]</button>
+					<!-- ENDIF active.disabled -->
+				</div>
 			</div>
-		</div>
-	</div>
+			<div class="clearfix"></div>
+		</li>
+		{{{ end }}}
+	</ul>
+</div>
+
+<div class="floating-button">
+	<button id="new" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" >
+		<i class="material-icons">add</i>
+	</button>
+
+	<button id="save" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored primary">
+		<i class="material-icons">save</i>
+	</button>
 </div>
\ No newline at end of file