diff --git a/packages/backend/src/server/web/cli.css b/packages/backend/src/server/web/cli.css
index 6903db983..1a7b78a66 100644
--- a/packages/backend/src/server/web/cli.css
+++ b/packages/backend/src/server/web/cli.css
@@ -6,13 +6,26 @@ main {
 	border-radius: 10px;
 }
 #tl > div {
-	padding: 16px;
-	border-bottom: 1px solid #908caa;
+	border: 1px solid #908caa;
+  border-radius: 10px;
+  margin: 10px;
+  padding: 10px;
+	width: fit-content;
 }
 #tl > div > header {
 	font-weight: 700;
 }
 
+img {
+	height: 45px;
+	border-radius: 10px;
+	margin-right: 10px;
+}
+
+#form {
+	text-align: center;
+}
+
 * {
 	font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
 }
@@ -26,7 +39,6 @@ html {
 	justify-content: center;
 	margin: auto;
 	padding: 10px;
-	text-align: center;
 }
 button {
 	border-radius:999px;
diff --git a/packages/backend/src/server/web/cli.js b/packages/backend/src/server/web/cli.js
index 290453f7e..bc2b7977c 100644
--- a/packages/backend/src/server/web/cli.js
+++ b/packages/backend/src/server/web/cli.js
@@ -45,11 +45,16 @@ window.onload = async () => {
 		const tl = document.getElementById("tl");
 		for (const note of notes) {
 			const el = document.createElement("div");
-			const name = document.createElement("header");
+			const header = document.createElement("header");
+			const name = document.createElement("p");
+			const avatar = document.createElement("img")
 			name.textContent = `${note.user.name} @${note.user.username}`;
+			avatar.src = note.user.avatar;
 			const text = document.createElement("div");
 			text.textContent = `${note.text}`;
-			el.appendChild(name);
+			el.appendChild(header);
+			header.appendChild(avatar);
+			header.appendChild(name);
 			el.appendChild(text);
 			tl.appendChild(el);
 		}