diff --git a/less/category.less b/less/category.less
index cec0e2d..ae331e0 100644
--- a/less/category.less
+++ b/less/category.less
@@ -19,4 +19,11 @@
 			font-weight: bold;
 		}
 	}
+}
+
+.subcategory {
+	> p {
+		text-transform: uppercase;
+		color: @gray-light;
+	}
 }
\ No newline at end of file
diff --git a/templates/category.tpl b/templates/category.tpl
index 6746a2a..138a94f 100644
--- a/templates/category.tpl
+++ b/templates/category.tpl
@@ -1,12 +1,7 @@
 <div class="category">
 	<!-- IMPORT partials/breadcrumbs.tpl -->
-
-	<div class="subcategories row">
-		<!-- BEGIN children -->
-		<!-- IMPORT partials/category/subcategory.tpl -->
-		<!-- END children -->
-	</div>
-
+	<!-- IMPORT partials/category/subcategory.tpl -->
+	
 	<!-- IF children.length --><hr /><!-- ENDIF children.length -->
 
 	<div class="clearfix">
@@ -37,7 +32,7 @@
 	<ul component="category" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}">
 		<meta itemprop="itemListOrder" content="descending">
 		<!-- BEGIN topics -->
-		<li component="category/topic" class="row clearfix {function.generateTopicClass}"  <!-- IMPORT partials/data/category.tpl -->>
+		<li component="category/topic" class="row clearfix {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
 			<meta itemprop="name" content="{topics.title}">
 
 			<div class="col-md-7 col-sm-12 col-xs-12 content">
diff --git a/templates/partials/category/subcategory.tpl b/templates/partials/category/subcategory.tpl
index 0327887..5fcd52f 100644
--- a/templates/partials/category/subcategory.tpl
+++ b/templates/partials/category/subcategory.tpl
@@ -1,50 +1,59 @@
-		<div class="{children.class}" data-cid="{children.cid}" data-numRecentReplies="{children.numRecentReplies}">
+<div class="subcategory">
+	<!-- IF children.length --><p>Subcategories</p><!-- ENDIF children.length -->
+
+	<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+		<!-- BEGIN children -->
+		<li data-cid="{children.cid}" data-numRecentReplies="{children.numRecentReplies}" class="row clearfix">
 			<meta itemprop="name" content="{children.name}">
-			<h4 class="category-title">
-				<!-- IF !children.link -->
-				<span class="badge {children.unread-class}">{children.topic_count} </span>
-				<!-- ENDIF !children.link -->
 
-				<!-- IF children.link -->
-				<a href="{children.link}" itemprop="url" target="_blank">
-				<!-- ELSE -->
-				<a href="{relative_path}/category/{children.slug}" itemprop="url">
-				<!-- ENDIF children.link -->
-				{children.name}
-				</a>
-			</h4>
+			<div class="col-md-7 col-sm-12 col-xs-12 content">
+				<div class="icon pull-left" style="{function.generateCategoryBackground}">
+					<i class="fa fa-fw {children.icon}"></i>
+				</div>
 
-			<!-- IF children.link -->
-			<a style="color: {children.color};" href="{children.link}" itemprop="url" target="_blank">
-			<!-- ELSE -->
-			<a style="color: {children.color};" href="{relative_path}/category/{children.slug}" itemprop="url">
-			<!-- ENDIF children.link -->
-				<div
-					id="category-{children.cid}" class="category-header category-header-image-{children.imageClass}"
-					title="{children.description}"
-					style="
-						<!-- IF children.backgroundImage -->background-image: url({children.backgroundImage});<!-- ENDIF children.backgroundImage -->
-						<!-- IF children.bgColor -->background-color: {children.bgColor};<!-- ENDIF children.bgColor -->
-					"
-				>
-					<div id="category-{children.cid}" class="category-slider-{children.post_count}">
-						<!-- IF children.icon -->
-						<div class="category-box"><i class="fa {children.icon} fa-4x"></i></div>
-						<!-- ENDIF children.icon -->
-						<div class="category-box" itemprop="description">{children.description}</div>
+				<h1 class="title pull-left">
+					<!-- IF children.link -->
+					<a href="{children.link}" itemprop="url" target="_blank">
+					<!-- ELSE -->
+					<a href="{relative_path}/category/{children.slug}" itemprop="url">
+					<!-- ENDIF children.link -->
+					{children.name}
+					</a><br />
+					<small>{children.description}</small>
+				</h1>
+			</div>
 
-						<!-- BEGIN posts -->
-						<div class="category-box">
-							<div class="post-preview">
-								<img src="{children.posts.user.picture}" class="pull-left" />
-								<p class=""><strong>{children.posts.user.username}</strong>: {children.posts.content}</p>
-							</div>
+			<div class="hidden-sm hidden-xs">
+				<!-- IF !children.link -->
+				<div class="col-md-1 stats">
+					<span class="{children.unread-class}">{children.topic_count}</span><br />
+					<small>Topics</small>
+				</div>
+				<div class="col-md-1 stats">
+					<span class="{children.unread-class}">{children.post_count}</span><br />
+					<small>Posts</small>
+				</div>
+				<div class="col-md-3">
+					<!-- BEGIN posts -->
+					<!-- IF @first -->
+					<div class="card" style="border-color: {children.bgColor}">
+						<p>
+							<strong>{children.posts.user.username}</strong> <small class="timeago" title="{children.posts.relativeTime}"></small>
+						</p>
+						<div class="post-content">
+							{children.posts.content}
 						</div>
-						<!-- END posts -->
-						<!-- IF children.icon -->
-						<div class="category-box"><i class="fa {children.icon} fa-4x"></i></div>
-						<!-- ENDIF children.icon -->
 					</div>
+					<!-- ENDIF @first -->
+					<!-- END posts -->
+				</div>
+				<!-- ELSE -->
+				<div class="col-md-4">
+
 				</div>
-			</a>
-		</div>
\ No newline at end of file
+				<!-- ENDIF !children.link -->
+			</div>
+		</li>
+		<!-- END children -->
+	</ul>
+</div>
\ No newline at end of file