diff --git a/chat/consumersNotice.py b/chat/consumersNotice.py
index c0f2723..f387ff0 100644
--- a/chat/consumersNotice.py
+++ b/chat/consumersNotice.py
@@ -288,12 +288,15 @@ class ChatNoticeConsumer(WebsocketConsumer):
 		asked = AskFriendModel().getAsked(user.pk)
 		asker = AskFriendModel().getAsker(user.pk)
 
+		online_friends = self.get_online_friend(user)
+
 		self.send(text_data=json.dumps({
 			'type':event['type'],
 			'author_id':event['author_id'],
 			'targets':event['targets'],
 			'asker': asker,
 			'asked': asked,
+			'online': online_friends,
 			'time': event['time'],
 			'status':event['status'],
 		}))
@@ -351,23 +354,27 @@ class ChatNoticeConsumer(WebsocketConsumer):
 		self.send_ask_friend(event)
 
 
-	def online_users(self, event):
-
-		user = self.scope["user"]
-		if (user.is_anonymous or not user.is_authenticated):
-			return
-
+	def get_online_friend(self, user):
 		online_friends = {}
 		for friend in FriendModel().getFriends(user.pk):
 			if (friend in self.channel_layer.users_channels):
 				online_friends[friend] = "green"
 			else:
 				online_friends[friend] = "red"
+		return online_friends
+
+	def online_users(self, event):
+
+		user = self.scope["user"]
+		if (user.is_anonymous or not user.is_authenticated):
+			return
+
+		online_friends = self.get_online_friend(user)
 
 		self.send(text_data=json.dumps({
 			'type':event['type'],
 			'author_id':event['author_id'],
-			'content':online_friends,
+			'online':online_friends,
 			'time': event['time'],
 			'status':event['status'],
 		}))
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index 7e35fb0..9b843e5 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -1,12 +1,3 @@
-*{
-	color: #cccccc;
-	font-size: 35px;
-	background-color: #1a1a1a;
-}
-
-body {
-}
-
 #app #avatar {
 	max-height: 10em;
 	max-width: 10em;
diff --git a/frontend/static/css/me.css b/frontend/static/css/me.css
index 1d731ee..6879d41 100644
--- a/frontend/static/css/me.css
+++ b/frontend/static/css/me.css
@@ -1,17 +1,11 @@
-#app #main .account
-{
-	color: #1a1a1a;
+#app * {
+	font-size: 30px;
 }
 
+
 #app #main
 {
 	width: 60%;
 	display: flex;
 	flex-direction: column;
-	color: #1a1a1a;
-}
-
-#app #main .profile
-{
-	color: #1a1a1a;
 }
diff --git a/frontend/static/css/profile.css b/frontend/static/css/profile.css
index 21fb0dc..a1ead7d 100644
--- a/frontend/static/css/profile.css
+++ b/frontend/static/css/profile.css
@@ -1,3 +1,7 @@
+#app * {
+	font-size: 30px;
+}
+
 #app #username
 {
 	font-size: 0.8em;
@@ -11,7 +15,6 @@
 
 #app {
 	margin-top: 1em;
-	background-color: red;
 }
 
 #app #yes, #app #no {
diff --git a/frontend/static/css/search.css b/frontend/static/css/search.css
index 6aa1061..27b9734 100644
--- a/frontend/static/css/search.css
+++ b/frontend/static/css/search.css
@@ -1,3 +1,7 @@
+#app * {
+	font-size: 40px;
+}
+
 #app img
 
 {
diff --git a/frontend/static/js/api/chat/notice.js b/frontend/static/js/api/chat/notice.js
index 4616179..f882835 100644
--- a/frontend/static/js/api/chat/notice.js
+++ b/frontend/static/js/api/chat/notice.js
@@ -80,7 +80,7 @@ class Notice {
 				this.rewrite_invite();
 		}
 		else {
-			let sender = await this.client.profiles.getProfile(send.author_id);
+			let sender = await this.client.profiles.getProfileId(send.author_id);
 			create_popup(sender.username + " refuse your invitation");
 		}
 
@@ -123,7 +123,7 @@ class Notice {
 				return;
 
 			this.data["invited"] = content;
-			let sender = await this.client.profiles.getProfile(send.author_id);
+			let sender = await this.client.profiles.getProfileId(send.author_id);
 
 			create_popup("Invitation received by " + sender.username);
 
@@ -145,7 +145,7 @@ class Notice {
 	}
 
 	async receive_online_users(send) {
-		let content = send.content;
+		let content = send.online;
 		if (content !== undefined) {
 
 			if (this.data["online"].length > 0) {
@@ -187,7 +187,7 @@ class Notice {
 			if (send.status == 400)
 				create_popup("Friend ask error");
 			else if (send.status == 409)
-				create_popup("Already asked friend or already friend");
+				create_popup("Already asked friend");
 		}
 
 		//if (!send.asked.includes(send.author_id) || 
@@ -202,7 +202,7 @@ class Notice {
 		this.data["asker"] = send.asker;
 
 		if (send.author_id != my_id) {
-			let sender = await this.client.profiles.getProfile(send.author_id);
+			let sender = await this.client.profiles.getProfileId(send.author_id);
 			if (this.data["asker"].includes(send.author_id))
 				create_popup(sender.username + " ask you as friend");
 			if (this.rewrite_profile !== undefined)
@@ -220,8 +220,6 @@ class Notice {
 	}
 
 	async receive_remove_friend(send) {
-		this.data["asked"] = send.asked;
-		this.data["asker"] = send.asker;
 
 		if (send.author_id == this.client.me.id) {
 			if (send.status == 400)
@@ -233,6 +231,8 @@ class Notice {
 
 		if (this.rewrite_profile !== undefined)
 			await this.rewrite_profile();
+
+		this.receive_online_users(send);
 	}
 
 	async accept_friend(user_id) {
@@ -246,7 +246,7 @@ class Notice {
 	async receive_accept_friend(send) {
 		this.data["asked"] = send.asked;
 		this.data["asker"] = send.asker;
-		let sender = await this.client.profiles.getProfile(send.author_id);
+		let sender = await this.client.profiles.getProfileId(send.author_id);
 
 		if (send.author_id == this.client.me.id) {
 			if (send.status == 400)
@@ -262,6 +262,8 @@ class Notice {
 
 		if (this.rewrite_profile !== undefined)
 			await this.rewrite_profile();
+
+		this.receive_online_users(send);
 	}
 
 	async refuse_friend(user_id) {
@@ -275,7 +277,7 @@ class Notice {
 	async receive_refuse_friend(send) {
 		this.data["asked"] = send.asked;
 		this.data["asker"] = send.asker;
-		let sender = await this.client.profiles.getProfile(send.author_id);
+		let sender = await this.client.profiles.getProfileId(send.author_id);
 
 		if (send.author_id == this.client.me.id) {
 			if (send.status == 400)
diff --git a/frontend/static/js/api/client.js b/frontend/static/js/api/client.js
index 7978053..57d3ce4 100644
--- a/frontend/static/js/api/client.js
+++ b/frontend/static/js/api/client.js
@@ -73,6 +73,7 @@ class Client
 		this.notice = new Notice(this);
 
 		this.lang = new LanguageManager;
+
 	}
 
 	/**
diff --git a/frontend/static/js/api/profile.js b/frontend/static/js/api/profile.js
index c2601c4..d15d0a4 100644
--- a/frontend/static/js/api/profile.js
+++ b/frontend/static/js/api/profile.js
@@ -5,7 +5,7 @@ class Profile
 	/**
 	 * @param  {Client} client
 	 */
-	constructor (client, username, id = undefined, avatar_url = undefined)
+	constructor (client, username=undefined, id=undefined, avatar_url=undefined)
 	{
 		/**
 		 * @type  {Client} client
@@ -36,7 +36,11 @@ class Profile
 
 	async init()
 	{
-		let response = await this.client._get(`/api/profiles/${this.username}`);
+		let response;
+		if (this.username !== undefined)
+			response = await this.client._get(`/api/profiles/${this.username}`);
+		else 
+			response = await this.client._get(`/api/profiles/id/${this.id}`);
 
 		if (response.status !== 200)
 			return response.status;
diff --git a/frontend/static/js/api/profiles.js b/frontend/static/js/api/profiles.js
index 4200ff5..070769c 100644
--- a/frontend/static/js/api/profiles.js
+++ b/frontend/static/js/api/profiles.js
@@ -42,6 +42,14 @@ class Profiles
 		return profile;
 	}
 
+	async getProfileId(id)
+	{
+		let profile = new Profile(this.client, undefined, id);
+		if (await profile.init())
+			return null;
+		return profile;
+	}
+
 	/**
 	 * Block a user
 	 * @param {Number} user_id 
diff --git a/frontend/static/js/views/Search.js b/frontend/static/js/views/Search.js
index f388707..76358f8 100644
--- a/frontend/static/js/views/Search.js
+++ b/frontend/static/js/views/Search.js
@@ -68,7 +68,7 @@ export default class extends AbstractView {
 			username.setAttribute('data-link', '');
 			username.id = `username${user.id}`
 			username.href = `/profiles/${user.username}`;
-			if (user.id == client.me.id)
+			if (logged && user.id == client.me.id)
 				username.style.color = "green";
 			else {
 				let online = client.notice.data["online"][user.id];
diff --git a/frontend/templates/index.html b/frontend/templates/index.html
index 499c006..585f672 100644
--- a/frontend/templates/index.html
+++ b/frontend/templates/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bozo Pong</title>
 	<link rel="stylesheet" href="{% static 'css/bootstrap/bootstrap.min.css' %}">
+	<link rel="stylesheet" href="{% static 'css/index.css' %}">
 </head>
 <body data-bs-theme="dark">
 	<nav class="navbar navbar-expand-lg bg-body-tertiary rounded m-2">
diff --git a/profiles/urls.py b/profiles/urls.py
index 5c29740..d0904f6 100644
--- a/profiles/urls.py
+++ b/profiles/urls.py
@@ -10,7 +10,8 @@ urlpatterns = [
     path("", viewsets.ProfileViewSet.as_view({'get': 'list'}), name="profiles_list"),
 	path("block", views.BlocksView.as_view(), name="block_page"),
 	path("block/<int:pk>", views.BlockView.as_view(), name="block_page"),
-    path("<str:username>", viewsets.ProfileViewSet.as_view({'get': 'retrieve'}), name="profile_page"),
 	path("friend", views.FriendsView.as_view(), name="friend_page"),
+    path("<str:username>", viewsets.ProfileViewSet.as_view({'get': 'retrieve'}), name="profile_page"),
+    path("id/<int:pk>", viewsets.ProfileViewSet.as_view({'get': 'retrieve_id'}), name="profile_page"),
 
-] + static("/static/avatars/", document_root="./avatars")
+] + static("/staqic/avatars/", document_root="./avatars")
diff --git a/profiles/views.py b/profiles/views.py
index 19f6635..8c27128 100644
--- a/profiles/views.py
+++ b/profiles/views.py
@@ -70,6 +70,8 @@ class BlocksView(APIView):
 		return Response("Deleted", status=status.HTTP_200_OK)
 
 class FriendsView(APIView):
+	permission_classes = (permissions.IsAuthenticated,)
+	authentication_classes = (SessionAuthentication,)
 
 	def get(self, request):
 		friends = FriendModel().getFriends(request.user.pk)
diff --git a/profiles/viewsets.py b/profiles/viewsets.py
index a0aa2c5..425cceb 100644
--- a/profiles/viewsets.py
+++ b/profiles/viewsets.py
@@ -27,6 +27,15 @@ class ProfileViewSet(viewsets.ModelViewSet):
         return Response(self.serializer_class(instance).data,
                         status=status.HTTP_200_OK)
 
+    def retrieve_id(self, request: HttpRequest, pk=None):
+        user = User.objects.filter(pk=pk)
+        if (not user):
+            return Response({"detail": "Profile not found."}, status=status.HTTP_404_NOT_FOUND)
+        instance = self.queryset().get(pk=user[0].pk)
+        instance.avatar_url.name = instance.avatar_url.name[instance.avatar_url.name.find("static") - 1:]
+        return Response(self.serializer_class(instance).data,
+                        status=status.HTTP_200_OK)
+
     def list(self, request: HttpRequest):
         serializer = ProfileSerializer(self.queryset(), many=True)
         for profile in serializer.data: