diff --git a/frontend/static/js/views/ProfilePageView.js b/frontend/static/js/views/ProfilePageView.js
index 55d5a3a..336765c 100644
--- a/frontend/static/js/views/ProfilePageView.js
+++ b/frontend/static/js/views/ProfilePageView.js
@@ -2,68 +2,50 @@ import AbstractView from "./abstracts/AbstractView.js";
 import { client, lang } from "../index.js";
 
 export default class extends AbstractView {
-    constructor(params) {
-        super(params, decodeURI(params.username));
-        this.username = decodeURI(params.username);
-    }
-
-	setTitle() {
-		document.title = this.username;
+	constructor(params) {
+		super(params, `${decodeURI(params.username)} - Profile`);
+		this.username = decodeURI(params.username);
 	}
 
-    async postInit()
-    {
-        this.profile = await client.profiles.getProfile(this.username);
+	setTitle() {
+		document.title = `${this.username} - Profile`;
+	}
 
-		if (this.profile === null)
+	async postInit()
+	{
+		if (!this.profile)
 			return 404;
-		this.user_id = this.profile.id;
 
-		this.info = document.getElementById("info");
-
-		// Username
-        let username = document.createElement("a");
-		username.id = "username";
-        username.appendChild(document.createTextNode(this.username));
-		this.info.appendChild(username);
-
-		this.info.appendChild(document.createElement("br"));
-
-		// Avatar
-        let avatar = document.createElement("img");
-		avatar.id = "avatar";
-        avatar.src = this.profile.avatar_url;
-		this.info.appendChild(avatar);
+		this.userId = this.profile.id;
 
 		await this.blockButton();
-
 		await this.friendButton();
 
 		client.notice.rewrite_profile = async () => {
-			let result = await this.profile.getFriend();
+			await this.profile.getFriend();
 			await this.profile.getBlock();
 			await this.friendButton();
 		};
-    }
+	}
 
 	async blockButton() {
 		// Block option
 		if (await client.isAuthenticated() === false)
 			return;
 
-		if (client.me.id != this.user_id) {
+		if (client.me.id != this.userId) {
 			let block = document.getElementById("block");
 			if (block == undefined) {
 				block = document.createElement("p");
-				this.info.appendChild(block);
+				// this.info.appendChild(block);
 			}
 
 			block.id = "block";
 			block.onclick = async () => {
 				if (!this.profile.isBlocked)
-					await client.profiles.block(this.user_id);
+					await client.profiles.block(this.userId);
 				else
-					await client.profiles.deblock(this.user_id);
+					await client.profiles.deblock(this.userId);
 				this.profile = await client.profiles.getProfile(this.username);
 
 				this.blockButton();
@@ -79,12 +61,12 @@ export default class extends AbstractView {
 		if (await client.isAuthenticated() === false)
 			return;
 
-		if (client.me.id != this.user_id) {
+		if (client.me.id != this.userId) {
 			let yes = document.getElementById("yes") || document.createElement("p");
 			let no = document.getElementById("no") || document.createElement("p");
 			let friend = document.getElementById("friend") || document.createElement("p");
-			
-			if (client.notice.data.asker.includes(this.user_id)) {
+
+			if (client.notice.data.asker.includes(this.userId)) {
 
 				if (friend)
 					friend.remove();
@@ -92,18 +74,18 @@ export default class extends AbstractView {
 				yes.id = "yes";
 				yes.textContent = lang.get('profileAcceptRequest', 'Accept Friend');
 				yes.onclick = async () => {
-					client.notice.accept_friend(this.user_id);
+					client.notice.accept_friend(this.userId);
 				};
 
 				no.id = "no";
 				no.textContent = lang.get('profileDenyRequest', 'Decline Friend');
 				no.onclick = async () => {
-					client.notice.refuse_friend(this.user_id);
+					client.notice.refuse_friend(this.userId);
 				};
 
-				this.info.appendChild(yes);
-				this.info.appendChild(document.createTextNode(" "));
-				this.info.appendChild(no);
+				// this.info.appendChild(yes);
+				// this.info.appendChild(document.createTextNode(" "));
+				// this.info.appendChild(no);
 
 			}
 			else {
@@ -114,9 +96,9 @@ export default class extends AbstractView {
 				friend.id = "friend";
 				friend.onclick = async () => {
 					if (this.profile.isFriend)
-						await client.notice.remove_friend(this.user_id);
+						await client.notice.remove_friend(this.userId);
 					else
-						await client.notice.ask_friend(this.user_id);
+						await client.notice.ask_friend(this.userId);
 					await client.profiles.getProfile(this.username);
 					this.friendButton();
 				};
@@ -125,17 +107,30 @@ export default class extends AbstractView {
 				else {
 					friend.textContent = lang.get('profileAddFriend', 'Ask Friend');
 				}
-				this.info.appendChild(friend);
+				// this.info.appendChild(friend);
 			}
 		}
 	}
 
-    async getHtml() {
-        return `
-            <link rel="stylesheet" href="/static/css/profile.css">
-			<div id="info"> 
+	async getHtml() {
 
+		this.profile = await client.profiles.getProfile(this.username);
+		if (!this.profile)
+			return '';
+
+		const logged = await client.isAuthenticated();
+
+		return `
+			<div class='mb-3' id='profileInfo'>
+			  <h1>${this.username}</h1>
+			  <a href=${this.profile.avatar_url} target='_blank'>
+			    <img class='img-thumbnail' src=${this.profile.avatar_url} style='width:auto; max-height:20vh; min-height:10vh'>
+			  </a>
 			</div>
-        `;
-    }
+			<div>
+			  <button class='btn btn-sm btn-success ${logged ? '' : 'd-none'}' id='addFriendButton'>Add Friend</button>
+			  <button class='btn btn-sm btn-danger ${logged ? '' : 'd-none'}' id='removeFriendButton'>Remove Friend</button>
+			</div>
+			`;
+	}
 }