diff --git a/api/src/api/me.js b/api/src/api/me.js
index d46aaff..2c8479c 100644
--- a/api/src/api/me.js
+++ b/api/src/api/me.js
@@ -206,6 +206,18 @@ module.exports = {
 			return res.json({ result: 1 })
 		}],
 	},
+	profile: {
+		get: [auth.enforceSession, async (req, res) => {
+			const account = await api.accounts.getAccount(apID(res.locals.user.username))
+			if (account === undefined)
+				return res.json({ error: 'unknown_error' })
+
+			var data = { user: res.locals.user, account }
+			delete data.user.password
+			delete data.account.username
+			return res.json(data)
+		}],
+	},
 	pending_follows: {
 		get: [auth.enforceSession, async (req, res) => {
 			let follows
diff --git a/api/src/server.js b/api/src/server.js
index faf4638..4fb9e26 100644
--- a/api/src/server.js
+++ b/api/src/server.js
@@ -71,6 +71,8 @@ app.on('apex-inbox', activity.federation.inbox)
 /* ALL  */ app.route(api.v1('/me/quizs'))
 	.get(api.me.quizs.get)
 	.post(api.me.quizs.post)
+/* ALL  */ app.route(api.v1('/me/profile'))
+	.get(api.me.profile.get)
 /* POST */ app.route(api.v1('/accounts/follow')).post(api.accounts.follow.post)
 /* POST */ app.route(api.v1('/accounts/unfollow')).post(api.accounts.unfollow.post)
 /* POST */ app.route(api.v1('/accounts/block')).post(api.accounts.block.post)
diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css
index 0977698..e2e8114 100644
--- a/web/src/app/css/app.css
+++ b/web/src/app/css/app.css
@@ -90,6 +90,19 @@ img.avatar {
 	top: -2px;
 	margin-right: 3px;
 }
+.person .prop {
+	margin-bottom: .8em;
+}
+.person .prop .fa {
+	font-size: 1.3em;
+	margin-right: .5em;
+	vertical-align: middle;
+	position: relative;
+	top: -2px;
+}
+.person .prop > span {
+	opacity: .6;
+}
 
 
 .button.disabled {
@@ -235,25 +248,21 @@ main {
 #quizs .name {
 	font-size: 1.2em;
 }
-#quizs .avatar.round,
-#quiz .avatar.round {
+.panel .person .avatar.round {
 	padding: 3px;
 	background: linear-gradient(30deg, #df00ff, pink, pink, #7c4cff);
 	box-shadow: -6px 4px 0px #0000004f;
 }
-#quizs .avatar.round.big,
-#quiz .avatar.round.big {
+.panel .person .avatar.round.big {
 	width: 5em;
 	height: 5em;
 }
-#quizs .avatar img,
-#quiz .avatar img {
+.panel .person .avatar img {
 	width: 3em;
 	height: 3em;
 	filter: brightness(120%);
 }
-#quizs .avatar.big img,
-#quiz .avatar.big img {
+.panel .person .avatar.big img {
 	width: 5em;
 	height: 5em;
 }
@@ -503,11 +512,13 @@ main {
 	line-height: 2em;
 }
 
-.item .acct {
+.item .acct,
+.person .acct {
 	font-size: .8em;
 	opacity: .7;
 }
-.item .bigname {
+.item .bigname,
+.person .bigname {
 	font-size: 1.5em;
 }
 
diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js
index 161d835..c5633d1 100644
--- a/web/src/app/js/app.js
+++ b/web/src/app/js/app.js
@@ -563,6 +563,7 @@ window.onload = function(e) {
 		handle('pages.meet',		'meet');
 		handle('pages.crushes',		/^crushes(\/you)?$/);
 		handle('pages.quiz',		/^quiz\/[^\/]+?$/);
+		handle('pages.settings',	/^settings(\/.+)?/);
 	}
 
 	app.script('api');
diff --git a/web/src/app/js/pages/settings.js b/web/src/app/js/pages/settings.js
new file mode 100644
index 0000000..61e3618
--- /dev/null
+++ b/web/src/app/js/pages/settings.js
@@ -0,0 +1,39 @@
+app.pages.settings = {
+	data: {},
+	load: function(args) {
+		if (args.length > 1 && page().loaders[args[1]] !== undefined)
+			page().loaders[args[1]](args);
+		app.preload.home();
+	},
+	loaders: {
+		profile: function(args) {
+			const container = document.getElementById('app-container');
+			container.innerHTML = '';
+			app.template.loadMany(['settings.profile']);
+			http.get('/api/v1/me/profile',{}, async function(json) {
+				if (app.template.get('settings.profile') === undefined)
+					await waitUntil(function() {
+						return app.template.get('settings.profile')
+							!== undefined }, 10000, 50);
+				page().data.profile = json;
+				page().paint.profile(json);
+			});
+		},
+	},
+	paint: {
+		profile: function(json) {
+			json = json || page().data.profile;
+			if (json.user === undefined)
+				return hashredir();
+			if (app.template.get('settings.profile') === undefined) return;
+
+			const container = document.getElementById('app-container');
+			container.innerHTML = app.template.fill(json, app.template.get('settings.profile'),
+			function(k,v) {
+				if (k === 'account.name') return app.emoji.expand(capitalize(v));
+			});
+		},
+	},
+	actions: {
+	},
+}
diff --git a/web/src/app/js/templates/home/quiz_item.html b/web/src/app/js/templates/home/quiz_item.html
index 78f1d42..eac537e 100644
--- a/web/src/app/js/templates/home/quiz_item.html
+++ b/web/src/app/js/templates/home/quiz_item.html
@@ -2,7 +2,7 @@
 	onclick="app.pages.home.loadQuiz('{.id}')"
 	onEnter="app.pages.home.loadQuiz('{.id}')"
 	tabindex="0">
-	<div class="flex">
+	<div class="person flex">
 		<div><div class="avatar round">
 			<img class="round" src="{.from.avatar.url}"/>
 		</div></div>
diff --git a/web/src/app/js/templates/settings/profile.html b/web/src/app/js/templates/settings/profile.html
new file mode 100644
index 0000000..31e1a5a
--- /dev/null
+++ b/web/src/app/js/templates/settings/profile.html
@@ -0,0 +1,36 @@
+<div id="settings-profile" class="panel center flex">
+	<div class="center content">
+		<div class="person flex">
+			<div class="width-max">
+				<div class="user-name">
+					<span class="bigname">{.account.name}</span>
+					<br>
+					<span class="acct" style="
+						position: relative;
+						top: 2px;
+						">@{.account.acct}</span>
+					<br><br><br>
+				</div>
+				<div class="prop" id="prop-place">
+					<i class="fa fa-map-marker fa-fw"
+						style="color: #e8864c">
+					</i>
+					<span>{.account.props.place}</span>
+				</div>
+				<div class="prop" id="prop-age">
+					<i class="fa fa-birthday-cake fa-fw"
+						style="color: #f46ac5">
+					</i>
+					<span><b>{.account.props.age}</b> {s:app.years_old}</span>
+				</div>
+			</div>
+			<div class="avatar-container">
+				<a href="#profile/{.account._id}">
+				<div class="big avatar round">
+					<img class="round" src="{.account.avatar.url}">
+				</div>
+				</a>
+			</div>
+		</div>
+	</div>
+</div>