diff --git a/web/src/app/app.php b/web/src/app/app.php
index 7fac749..8934966 100644
--- a/web/src/app/app.php
+++ b/web/src/app/app.php
@@ -31,7 +31,9 @@ $width = '40em';
 
 <main class="flex">
 	<div id="app-container" class="flex center width-max">
-		<div class="panel center">APP HERE</div>
+		<div class="panel center">
+			<div id="mcontent">...</div>
+		</div>
 	</div>
 </main>
 <?php tpl('app.footer') ?>
diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js
index fd406d2..e904723 100644
--- a/web/src/app/js/app.js
+++ b/web/src/app/js/app.js
@@ -135,7 +135,7 @@ window.onload = function(e) {
 	if (getNormalizedURI() === app.vars.app_dir) {
 		scriptPageHandler('pages.home',		{ exact: '' });
 		scriptPageHandler('pages.meet',		{ exact: 'meet' });
-		scriptPageHandler('pages.crushes',	{ exact: 'crushes' });
+		scriptPageHandler('pages.crushes',	{ regex: /^crushes(\/you)?$/ });
 		scriptPageHandler('pages.chat',		{ exact: 'chat' });
 	}
 	window.onhashchange();
diff --git a/web/src/app/js/pages/crushes.js b/web/src/app/js/pages/crushes.js
index 7b28363..60dfc8d 100644
--- a/web/src/app/js/pages/crushes.js
+++ b/web/src/app/js/pages/crushes.js
@@ -1,5 +1,29 @@
 app.pages.crushes = {
 	load: function(args) {
-		console.log('CRUSHES');
+		let key = 'from_me';
+		if (args.length === 2 && args[1] === 'you')
+			key = 'to_me';
+
+		const dom = document.getElementById('mcontent');
+		dom.innerHTML = '...'; // TODO: replace to a better loader?
+		http.get('/api/v1/me/pending_follows', {}, function(json) {
+			app.template.loadMany(['crushes.content','crushes.item'], function(_) {
+				dom.innerHTML = app.template.fill({}, app.template.get('crushes.content'));
+				if (json === undefined)
+					return false; // TODO: handle unknown error
+				json = json[key];
+				if (json.length === 0)
+					return false; // TODO: handle empty items here
+
+				const itdom = document.getElementById('crush-items');
+				itdom.innerHTML = '';
+				for (var i = 0; i < json.length; i++) {
+					var item = json[i];
+					var tpl = app.template.fill(item, app.template.get('crushes.item'));
+					// TODO: add item logic here (if needed)
+					itdom.innerHTML += tpl;
+				}
+			});
+		})
 	},
 };
diff --git a/web/src/app/js/templates/crushes/content.html b/web/src/app/js/templates/crushes/content.html
new file mode 100644
index 0000000..8fafd26
--- /dev/null
+++ b/web/src/app/js/templates/crushes/content.html
@@ -0,0 +1,2 @@
+<div class="header">HEADER_HERE</div>
+<div id="crush-items">ITEMS HERE</div>
diff --git a/web/src/app/js/templates/crushes/item.html b/web/src/app/js/templates/crushes/item.html
new file mode 100644
index 0000000..93fa000
--- /dev/null
+++ b/web/src/app/js/templates/crushes/item.html
@@ -0,0 +1 @@
+<div>{.name}</div>