diff --git a/less/groups.less b/less/groups.less
index f5b3b9a..db238be 100644
--- a/less/groups.less
+++ b/less/groups.less
@@ -1,27 +1,43 @@
-.groups {
-	&.list {
-		margin-top: 1em;
+[component="groups/container"] {
+	[component="groups/summary"] {
 		.panel-body {
 			min-height: 72px;
 		}
-	}
 
-	.list-cover {
-		background-size: cover;
-		min-height: 125px;
-		background-position: 50% 50%;
-		.pointer;
+		.list-cover {
+			background-size: cover;
+			min-height: 125px;
+			background-position: 50% 50%;
+			.pointer;
 
-		h3 {
-			background-color: rgba(0,0,0,0.5);
-			display: inline-block;
-			padding: 0.25em 0.5em;
-			color: white;
-			font-weight: bold;
+			h3 {
+				background-color: rgba(0,0,0,0.5);
+				display: inline-block;
+				padding: 0.25em 0.5em;
+				color: white;
+				font-weight: bold;
+			}
+		}
+
+		.members {
+			padding-left: 0;
+
+			> li {
+				list-style-type: none;
+				display: inline-block;
+
+				img {
+					width: 32px;
+				}
+			}
+
+			.truncated {
+				vertical-align: bottom;
+			}
 		}
 	}
 
-	.group-cover {
+	[component="groups/cover"] {
 		background-size: cover;
 		background-repeat: no-repeat;
 		min-height: 200px;
@@ -115,48 +131,25 @@
 		}
 	}
 
-	.members {
-		padding-left: 0;
-
-		> li {
-			list-style-type: none;
-			display: inline-block;
-
-			img {
-				width: 32px;
-			}
+	[component="groups/members"] {
+		img {
+			width: 32px;
 		}
 
-		.truncated {
-			vertical-align: bottom;
+		.member-name {
+			vertical-align: middle;
 		}
 	}
 
-	.view-full {
-		float: right;
-	}
-
-	&.details {
-		.members, .pending {
-			img {
-				width: 32px;
-			}
-
-			.member-name {
-				vertical-align: middle;
-			}
+	[component="groups/activity"] {
+		.content {
+			max-height: 250px;
+			word-break: break-word;
+			overflow: hidden;
+			position: relative;
 		}
-
-		.latest-posts {
-			.content {
-				max-height: 250px;
-				word-break: break-word;
-				overflow: hidden;
-				position: relative;
-			}
-			.user-img {
-				width: 32px;
-			}
+		.user-img {
+			width: 32px;
 		}
 	}
 }
\ No newline at end of file
diff --git a/templates/groups/details.tpl b/templates/groups/details.tpl
index 5469910..bc16a41 100644
--- a/templates/groups/details.tpl
+++ b/templates/groups/details.tpl
@@ -1,5 +1,5 @@
-<div class="groups details row">
-	<div class="col-xs-12 group-cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
+<div component="groups/container" class="details row">
+	<div class="col-xs-12" component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
 		<div class="change">[[groups:cover-change]] <i class="fa fa-fw fa-pencil-square-o"></i></div>
 		<div class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
 		<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
@@ -29,7 +29,7 @@
 				<h3 class="panel-title"><i class="fa fa-users"></i> [[groups:details.members]]</h3>
 			</div>
 			<div class="panel-body">
-				<table class="table table-striped table-hover members">
+				<table component="groups/members" class="table table-striped table-hover">
 					<!-- BEGIN members -->
 					<tr data-uid="{group.members.uid}">
 						<td>
@@ -70,7 +70,7 @@
 				<h3 class="panel-title"><i class="fa fa-clock-o"></i> [[groups:details.pending]]</h3>
 			</div>
 			<div class="panel-body">
-				<table class="table table-striped table-hover pending">
+				<table component="groups/members" class="table table-striped table-hover">
 					<!-- BEGIN pending -->
 					<tr data-uid="{group.pending.uid}">
 						<td>
@@ -109,7 +109,7 @@
 			</div>
 
 			<div class="panel-body options collapse">
-				<form role="form">
+				<form component="groups/settings" role="form">
 					<div class="form-group">
 						<label for="name">[[groups:details.group_name]]</label>
 						<input class="form-control" name="name" id="name" type="text" value="{group.name}" />
@@ -120,14 +120,14 @@
 					</div>
 					<div class="form-group user-title-option">
 						<label for="userTitle">[[groups:details.badge_text]]</label>
-						<input class="form-control" name="userTitle" id="userTitle" type="text" value="{group.userTitle}"<!-- IF !userTitleEnabled --> disabled<!-- ENDIF !userTitleEnabled --> />
+						<input component="groups/userTitleOption" class="form-control" name="userTitle" id="userTitle" type="text" value="{group.userTitle}"<!-- IF !userTitleEnabled --> disabled<!-- ENDIF !userTitleEnabled --> />
 					</div>
 					<div class="form-group user-title-option">
 						<label>[[groups:details.badge_preview]]</label><br />
 						<span class="label<!-- IF !userTitleEnabled --> hide<!-- ENDIF !userTitleEnabled -->" style="background-color: {group.labelColor}"><i class="fa {group.icon} icon"></i> <!-- IF group.userTitle -->{group.userTitle}<!-- ELSE -->{group.name}<!-- ENDIF group.userTitle --></span>
 
-						<button type="button" class="btn btn-default btn-sm" data-action="icon-select"<!-- IF !userTitleEnabled --> disabled<!-- ENDIF !userTitleEnabled -->>[[groups:details.change_icon]]</button>
-						<button type="button" class="btn btn-default btn-sm" data-action="color-select"<!-- IF !userTitleEnabled --> disabled<!-- ENDIF !userTitleEnabled -->>[[groups:details.change_colour]]</button>
+						<button component="groups/userTitleOption" type="button" class="btn btn-default btn-sm" data-action="icon-select"<!-- IF !userTitleEnabled --> disabled<!-- ENDIF !userTitleEnabled -->>[[groups:details.change_icon]]</button>
+						<button component="groups/userTitleOption" type="button" class="btn btn-default btn-sm" data-action="color-select"<!-- IF !userTitleEnabled --> disabled<!-- ENDIF !userTitleEnabled -->>[[groups:details.change_colour]]</button>
 						<input type="hidden" name="labelColor" value="<!-- IF group.labelColor -->{group.labelColor}<!-- ENDIF group.labelColor -->" />
 						<input type="hidden" name="icon" value="<!-- IF group.icon -->{group.icon}<!-- ENDIF group.icon -->" />
 						<div id="icons" style="display:none;">
@@ -173,7 +173,7 @@
 				<h3 class="panel-title"><i class="fa fa-edit"></i> [[groups:details.latest_posts]]</h3>
 			</div>
 
-			<div class="panel-body latest-posts">
+			<div component="groups/activity" class="panel-body">
 				<!-- IF !posts.length -->
 				<div class="alert alert-info">[[groups:details.has_no_posts]]</div>
 				<!-- ENDIF !posts.length -->
diff --git a/templates/groups/list.tpl b/templates/groups/list.tpl
index a10e812..fe12eda 100644
--- a/templates/groups/list.tpl
+++ b/templates/groups/list.tpl
@@ -21,7 +21,9 @@
 	</div>
 </div>
 
-<div class="groups list row" id="groups-list">
+<hr />
+
+<div component="groups/container" class="row" id="groups-list">
 	<!-- IF groups.length -->
 	<!-- IMPORT partials/groups/list.tpl -->
 	<!-- ELSE -->
diff --git a/templates/partials/groups/list.tpl b/templates/partials/groups/list.tpl
index 3789a5b..66d8a1a 100644
--- a/templates/partials/groups/list.tpl
+++ b/templates/partials/groups/list.tpl
@@ -1,5 +1,5 @@
 	<!-- BEGIN groups -->
-	<div class="col-lg-4 col-md-6 col-sm-12" data-slug="{groups.slug}">
+	<div class="col-lg-4 col-md-6 col-sm-12" component="groups/summary" data-slug="{groups.slug}">
 		<div class="panel panel-default">
 			<div class="panel-heading list-cover" style="<!-- IF groups.cover:url -->background-image: url({groups.cover:url});<!-- ENDIF groups.cover:url -->">
 				<h3 class="panel-title">{groups.name} <small>{groups.memberCount}</small></h3>