diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css
index 23a2a60..7c6d6e2 100644
--- a/web/src/app/css/app.css
+++ b/web/src/app/css/app.css
@@ -101,6 +101,16 @@ main {
 	height: 100vh;
 	filter: blur(30px);
 }
+.meet.item .status-avatar img {
+	max-width: 30em;
+}
+@media (max-width: 700px) {
+	.meet.item .status-avatar img {
+		max-width: 20em !important;
+		position: relative;
+		top: -3em;
+	}
+}
 .meet.item .black {
 	background: linear-gradient(to right, #00000082, #00000063, #00000063, #00000082);
 }
diff --git a/web/src/app/js/media.js b/web/src/app/js/media.js
new file mode 100644
index 0000000..ff75577
--- /dev/null
+++ b/web/src/app/js/media.js
@@ -0,0 +1,8 @@
+app.media = {
+	view: function(url) {
+		if (url.matches(/.*\.(jpg|jpeg|png|ico|webp)$/)) {
+			// TODO: load a template (with overlay) and set image
+			console.log(url);
+		}
+	},
+}
diff --git a/web/src/app/js/templates/meet/item.html b/web/src/app/js/templates/meet/item.html
index 5cf0fcb..b056342 100644
--- a/web/src/app/js/templates/meet/item.html
+++ b/web/src/app/js/templates/meet/item.html
@@ -2,9 +2,10 @@
 	<div class="back-avatar" style="background-image:url({avatar})"></div>
 	<div class="absolute-top width-max height-max black"></div>
 	<div class="absolute-top width-max height-max content">
-		<div class="flex">
-			<img class="center" style="max-width: 20em"
-				src="{avatar}"/>
+		<div class="status-avatar flex">
+			<a class="center" href="javascript:app.media.view('{avatar}')"/>
+				<img src="{avatar}"/>
+			</a>
 		</div>
 		<div>
 		<div class="status fixed-bottom"