diff --git a/.gitignore b/.gitignore
index 76460f8..fea06b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,4 @@ sftp-config.json
 *.sublime-workspace
 .idea
 .vscode
-node_modules/
+node_modules/
\ No newline at end of file
diff --git a/library.js b/library.js
index 2a45c43..4455671 100644
--- a/library.js
+++ b/library.js
@@ -1,6 +1,6 @@
 'use strict';
 
-var S = require.main.require('string');
+var S = require('string');
 var meta = module.parent.require('./meta');
 var user = module.parent.require('./user');
 
@@ -108,7 +108,7 @@ library.addUserToTopic = function(data, callback) {
 			if (err) {
 				return callback(err);
 			}
-			
+
 			data.templateData.loggedInUser = userdata;
 			callback(null, data);
 		});
diff --git a/package.json b/package.json
index 557fed0..593e2b1 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "6.1.3",
+  "version": "6.1.5",
   "nbbpm": {
-    "compatibility": "^1.4.4"
+    "compatibility": "^1.4.4 || ^1.5.0 || ^1.6.0"
   },
   "description": "Persona theme for NodeBB",
   "main": "theme.less",
@@ -37,5 +37,8 @@
   "license": "BSD-2-Clause",
   "bugs": {
     "url": "https://github.com/psychobunny/nodebb-theme-persona/issues"
+  },
+  "dependencies": {
+    "string": "^3.3.3"
   }
 }
diff --git a/templates/category.tpl b/templates/category.tpl
index 6800957..6aeac6d 100644
--- a/templates/category.tpl
+++ b/templates/category.tpl
@@ -31,6 +31,7 @@
 		<p class="hidden-xs">{name}</p>
 
 		<!-- IF !topics.length -->
+		<hr class="visible-xs" />
 		<div class="alert alert-warning" id="category-no-topics">
 			[[category:no_topics]]
 		</div>
diff --git a/templates/recent.tpl b/templates/recent.tpl
index 7a11a7c..52c4c9b 100644
--- a/templates/recent.tpl
+++ b/templates/recent.tpl
@@ -14,18 +14,18 @@
 			<!-- ENDIF loggedIn -->
 		</div>
 
-		<div class="btn-group pull-right category-dropdown-container <!-- IF !categories.length -->hidden<!-- ENDIF !categories.length -->">
+		<div component="category/dropdown" class="btn-group pull-right category-dropdown-container <!-- IF !categories.length -->hidden<!-- ENDIF !categories.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 				<!-- IF selectedCategory --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
 				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
 			</button>
-			<ul class="dropdown-menu category-dropdown-menu" role="menu">
+			<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
 				<li role="presentation" class="category">
 					<a role="menu-item" href="{config.relative_path}/{selectedFilter.url}"><i class="fa fa-fw <!-- IF !selectedCategory -->fa-check<!-- ENDIF !selectedCategory -->"></i> [[unread:all_categories]]</a>
 				</li>
 				<!-- BEGIN categories -->
-				<li role="presentation" class="category" data-cid="{categories.cid}">
-					<a role="menu-item" href="{config.relative_path}/{selectedFilter.url}?cid={categories.cid}"><i class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><span class="fa-stack"><i style="color: {categories.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
+				<li role="presentation" class="category" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}">
+					<a role="menu-item" href="{config.relative_path}/{selectedFilter.url}?cid={categories.cid}"><i component="category/select/icon" class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><span class="fa-stack"><i style="color: {categories.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
 				</li>
 				<!-- END categories -->
 			</ul>
diff --git a/templates/unread.tpl b/templates/unread.tpl
index 9330399..c03be21 100644
--- a/templates/unread.tpl
+++ b/templates/unread.tpl
@@ -35,18 +35,18 @@
 			</ul>
 		</div>
 
-		<div class="btn-group pull-right category-dropdown-container">
+		<div component="category/dropdown" class="btn-group pull-right category-dropdown-container">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 				<!-- IF selectedCategory --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
 				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
 			</button>
-			<ul class="dropdown-menu category-dropdown-menu" role="menu">
+			<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
 				<li role="presentation" class="category">
 					<a role="menu-item" href="{config.relative_path}/{selectedFilter.url}"><i class="fa fa-fw <!-- IF !selectedCategory -->fa-check<!-- ENDIF !selectedCategory -->"></i> [[unread:all_categories]]</a>
 				</li>
 				<!-- BEGIN categories -->
-				<li role="presentation" class="category" data-cid="{categories.cid}">
-					<a role="menu-item" href="{config.relative_path}/{selectedFilter.url}?cid={categories.cid}"><i class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><span class="fa-stack"><i style="color: {categories.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
+				<li role="presentation" class="category" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}">
+					<a role="menu-item" href="{config.relative_path}/{selectedFilter.url}?cid={categories.cid}"><i component="category/select/icon" class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><span class="fa-stack"><i style="color: {categories.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span><!-- ENDIF categories.icon --> {categories.name}</a>
 				</li>
 				<!-- END categories -->
 			</ul>