diff --git a/public/src/forum/admin/extend/widgets.js b/public/src/forum/admin/extend/widgets.js
index 5eb5d14576..393a58df4b 100644
--- a/public/src/forum/admin/extend/widgets.js
+++ b/public/src/forum/admin/extend/widgets.js
@@ -23,9 +23,9 @@ define('forum/admin/extend/widgets', function() {
 	function prepareWidgets() {
 		$('[data-location="drafts"]').insertAfter($('[data-location="drafts"]').closest('.tab-content'));
 
-		$('#widgets .available-widgets .panel').draggable({
+		$('#widgets .available-widgets .widget-panel').draggable({
 			helper: function(e) {
-				return $(e.target).parents('.panel').clone().addClass('block').width($(e.target.parentNode).width());
+				return $(e.target).parents('.widget-panel').clone().addClass('block').width($(e.target.parentNode).width());
 			},
 			distance: 10,
 			connectToSortable: ".widget-area"
@@ -66,9 +66,9 @@ define('forum/admin/extend/widgets', function() {
 			},
 			connectWith: "div"
 		}).on('click', '.toggle-widget', function() {
-			$(this).parents('.panel').children('.panel-body').toggleClass('hidden');
+			$(this).parents('.widget-panel').children('.panel-body').toggleClass('hidden');
 		}).on('click', '.delete-widget', function() {
-			var panel = $(this).parents('.panel');
+			var panel = $(this).parents('.widget-panel');
 
 			bootbox.confirm('Are you sure you wish to delete this widget?', function(confirm) {
 				if (confirm) {
@@ -76,7 +76,7 @@ define('forum/admin/extend/widgets', function() {
 				}
 			});
 		}).on('dblclick', '.panel-heading', function() {
-			$(this).parents('.panel').children('.panel-body').toggleClass('hidden');
+			$(this).parents('.widget-panel').children('.panel-body').toggleClass('hidden');
 		});
 
 		$('#widgets .save').on('click', saveWidgets);
@@ -92,7 +92,7 @@ define('forum/admin/extend/widgets', function() {
 					area = el.children('.widget-area'),
 					widgets = [];
 
-				area.find('.panel[data-widget]').each(function() {
+				area.find('.widget-panel[data-widget]').each(function() {
 					var widgetData = {},
 						data = $(this).find('form').serializeArray();
 
diff --git a/src/views/admin/extend/widgets.tpl b/src/views/admin/extend/widgets.tpl
index 5d5bdcc521..c856a70645 100644
--- a/src/views/admin/extend/widgets.tpl
+++ b/src/views/admin/extend/widgets.tpl
@@ -1,97 +1,113 @@
 <div id="widgets">
-	<h3>Widgets</h3>
-
-	<div class="row">
-		<div class="col-xs-6 pull-right">
-			<ul class="nav nav-pills">
-			<!-- BEGIN templates -->
-				<li class="<!-- IF @first -->active<!-- ENDIF @first -->"><a href="#" data-template="{templates.template}" data-toggle="pill">{templates.template}</a></li>
-			<!-- END templates -->
-			</ul>
+	<div class="col-md-7">
+		<div class="panel panel-default">
+			<div class="panel-heading">Widget Areas</div>
+			<div class="panel-body">
+				<div class="row">
+					<ul class="nav nav-pills">
+					<!-- BEGIN templates -->
+						<li class="<!-- IF @first -->active<!-- ENDIF @first -->"><a href="#" data-template="{templates.template}" data-toggle="pill">{templates.template}</a></li>
+					<!-- END templates -->
+					</ul>
 
-			<div class="tab-content">
-			<!-- BEGIN templates -->
-				<div class="tab-pane <!-- IF @first -->active<!-- ENDIF @first -->" data-template="{templates.template}">
-				<!-- BEGIN areas -->
-					<div class="area" data-template="{templates.template}" data-location="{templates.areas.location}">
-						<h4>{templates.areas.name} <small>{templates.template} / {templates.areas.location}</small></h4>
-						<div class="well widget-area">
+					<div class="tab-content">
+					<!-- BEGIN templates -->
+						<div class="tab-pane <!-- IF @first -->active<!-- ENDIF @first -->" data-template="{templates.template}">
+						<!-- BEGIN areas -->
+							<div class="area" data-template="{templates.template}" data-location="{templates.areas.location}">
+								<h4>{templates.areas.name} <small>{templates.template} / {templates.areas.location}</small></h4>
+								<div class="well widget-area">
 
+								</div>
+							</div>
+						<!-- END areas -->
 						</div>
+					<!-- END templates -->
 					</div>
-				<!-- END areas -->
+
+					<button class="btn btn-success save pull-right">Save</button>
 				</div>
-			<!-- END templates -->
 			</div>
-
-			<button class="btn btn-success save pull-right">Save</button>
 		</div>
-		<div class="col-xs-6 pull-left">
-			<div class="available-widgets">
-				<h4>Available Widgets <small>Drag and drop widgets into templates</small></h4>
-				<!-- IF !widgets.length -->
-				<div class="alert alert-info">No widgets found! Activate the essential widgets plugin in the <a href="/admin/plugins">plugins</a> control panel.</div>
-				<!-- ENDIF !widgets.length -->
-				<div class="row">
-					<!-- BEGIN widgets -->
-					<div class="col-lg-6 col-md-12">
-						<div data-widget="{widgets.widget}" class="panel panel-default pointer">
-							<div class="panel-heading">
-								<strong>{widgets.name}</strong>
-								<small><br />{widgets.description}</small>
-							</div>
-							<div class="panel-body hidden">
-								<form>
-									{widgets.content}
-								</form>
+	</div>
+
+	<div class="col-md-5">
+		<div class="panel panel-default">
+			<div class="panel-heading">Available Widgets</div>
+			<div class="panel-body">
+				<div class="available-widgets">
+					<p>Drag and drop widgets into templates</p>
+					<!-- IF !widgets.length -->
+					<div class="alert alert-info">No widgets found! Activate the essential widgets plugin in the <a href="/admin/plugins">plugins</a> control panel.</div>
+					<!-- ENDIF !widgets.length -->
+					<div class="row">
+						<!-- BEGIN widgets -->
+						<div class="col-lg-3 col-md-12">
+							<div data-widget="{widgets.widget}" class="panel widget-panel panel-default pointer">
+								<div class="panel-heading">
+									<strong>{widgets.name}</strong>
+									<small><br />{widgets.description}</small>
+								</div>
+								<div class="panel-body hidden">
+									<form>
+										{widgets.content}
+									</form>
+								</div>
 							</div>
 						</div>
+						<!-- END widgets -->
 					</div>
-					<!-- END widgets -->
 				</div>
 			</div>
-			<hr />
-			<div class="available-containers">
-				<h4>Available Containers <small>Drag and drop on top of any widget</small></h4>
-				<div class="containers">
-					<div class="pointer" style="padding: 20px; border: 1px dotted #dedede; margin-bottom: 20px;" data-container-html=" ">
-						None
-					</div>
-					<div class="well pointer" data-container-html='<div class="well">{body}</div>'>
-						Well
-					</div>
-					<div class="jumbotron pointer" data-container-html='<div class="jumbotron">{body}</div>'>
-						Jumbotron
-					</div>
-					<div class="panel" data-container-html='<div class="panel"><div class="panel-body">{body}</div></div>'>
-						<div class="panel-body pointer">
-							Panel
-						</div>
-					</div>
-					<div class="panel panel-default pointer" data-container-html='<div class="panel panel-default"><div class="panel-heading">{title}</div><div class="panel-body">{body}</div></div>'>
-						<div class="panel-heading">
-							Panel Header
-							<div class="pull-right color-selector">
-								<button data-class="panel-default" class="btn btn-xs">&nbsp;&nbsp;</button>
-								<button data-class="panel-primary" class="btn btn-xs btn-primary">&nbsp;&nbsp;</button>
-								<button data-class="panel-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
-								<button data-class="panel-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
-								<button data-class="panel-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
-								<button data-class="panel-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
+		</div>
+		<div class="panel panel-default">
+			<div class="panel-heading">Available Containers</div>
+			<div class="panel-body">
+				<div class="available-widgets">
+					<p>Drag and drop on top of any active widget</p>
+					<div class="available-containers">
+						<h4>Available Containers <small>Drag and drop on top of any widget</small></h4>
+						<div class="containers">
+							<div class="pointer" style="padding: 20px; border: 1px dotted #dedede; margin-bottom: 20px;" data-container-html=" ">
+								None
+							</div>
+							<div class="well pointer" data-container-html='<div class="well">{body}</div>'>
+								Well
+							</div>
+							<div class="jumbotron pointer" data-container-html='<div class="jumbotron">{body}</div>'>
+								Jumbotron
+							</div>
+							<div class="panel" data-container-html='<div class="panel"><div class="panel-body">{body}</div></div>'>
+								<div class="panel-body pointer">
+									Panel
+								</div>
+							</div>
+							<div class="panel panel-default pointer" data-container-html='<div class="panel panel-default"><div class="panel-heading">{title}</div><div class="panel-body">{body}</div></div>'>
+								<div class="panel-heading">
+									Panel Header
+									<div class="pull-right color-selector">
+										<button data-class="panel-default" class="btn btn-xs">&nbsp;&nbsp;</button>
+										<button data-class="panel-primary" class="btn btn-xs btn-primary">&nbsp;&nbsp;</button>
+										<button data-class="panel-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
+										<button data-class="panel-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
+										<button data-class="panel-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
+										<button data-class="panel-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
+									</div>
+								</div>
+								<div class="panel-body">
+									Panel Body
+								</div>
 							</div>
-						</div>
-						<div class="panel-body">
-							Panel Body
-						</div>
-					</div>
 
-					<div class="alert alert-info pointer" data-container-html='<div class="alert alert-info">{body}</div>'>
-						Alert
-						<div class="pull-right color-selector">
-							<button data-class="alert-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
-							<button data-class="alert-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
-							<button data-class="alert-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
-							<button data-class="alert-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
+							<div class="alert alert-info pointer" data-container-html='<div class="alert alert-info">{body}</div>'>
+								Alert
+								<div class="pull-right color-selector">
+									<button data-class="alert-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
+									<button data-class="alert-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
+									<button data-class="alert-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
+									<button data-class="alert-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>