diff --git a/frontend/app/(auth)/login/page.tsx b/frontend/app/(auth)/login/page.tsx
index 4f17e95..3aefcba 100644
--- a/frontend/app/(auth)/login/page.tsx
+++ b/frontend/app/(auth)/login/page.tsx
@@ -12,7 +12,7 @@ import * as Yup from "yup";
 import { useMutation } from "@tanstack/react-query";
 import { api } from "@/config";
 import { AxiosError } from "axios";
-import { HttpError } from "@/types/http-error";
+import { HttpError } from "@/types/http-error"; 
 
 type LoginForm = {
   email: string;
diff --git a/frontend/components/organisms/add-friends.tsx b/frontend/components/organisms/add-friends.tsx
index 4a14625..85bd602 100644
--- a/frontend/components/organisms/add-friends.tsx
+++ b/frontend/components/organisms/add-friends.tsx
@@ -1,22 +1,22 @@
-import React, { MouseEvent, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Hr from "../atoms/hr";
 import FieldInput from "../atoms/field-input";
 import PrimaryDotLoadingButton from "../molecules/primary-dot-loading-button";
 
 export default function AddFriends() {
   const inputRef = useRef<HTMLInputElement>(null);
-  const [inputText, setInputText] = useState('');
+  const [inputText, setInputText] = useState("");
+  const [onLoading, setOnLoading] = useState(false);
 
   useEffect(() => {
     inputRef?.current?.focus();
   }, [inputRef]);
 
-  function onSendFriendRequestClicked(
-    e: MouseEvent<HTMLButtonElement>,
-    setLoadingState: React.Dispatch<React.SetStateAction<boolean>>
-  ) {
-    setLoadingState(true);
-    setTimeout(() => { console.log('simulating network request'); setLoadingState(false); }, 5000);
+  function sendFriendRequest() {
+    setOnLoading(true);
+    setTimeout(() => {
+      setOnLoading(false);
+    }, 5000);
   }
 
   return (
@@ -34,9 +34,8 @@ export default function AddFriends() {
           <PrimaryDotLoadingButton
             disabled={inputText.length == 0}
             className="absolute right-4 top-1/2 h-8 -translate-y-1/2 bg-primary text-sm text-white"
-            onButtonClicked={(e, setLoadingState) =>
-              onSendFriendRequestClicked(e, setLoadingState)
-            }
+            onClick={() => sendFriendRequest()}
+            onLoading={onLoading}
           >
             Send Friend Request
           </PrimaryDotLoadingButton>
diff --git a/frontend/components/organisms/friends-topbar.tsx b/frontend/components/organisms/friends-topbar.tsx
index 2e7d071..15f3639 100644
--- a/frontend/components/organisms/friends-topbar.tsx
+++ b/frontend/components/organisms/friends-topbar.tsx
@@ -23,16 +23,16 @@ export default function FriendsTopBar({
     <TopBar>
       <div className="flex w-fit gap-2">
         <BsPersonFill size="22" className="text-icon" />
-        <span className="text-white select-none">Friends</span>
+        <span className="select-none text-white">Friends</span>
       </div>
 
       <IconButton
         className={twMerge(
           "h-6 rounded-[4px] border-2 border-accent p-2 text-[16px] font-medium ",
           activeOption === TopBarOptions.AddFriends &&
-          "border-none text-[#2dc06d] hover:bg-transparent hover:text-[#2dc06d] active:bg-transparent active:text-[#2dc06d]",
+            "border-none text-[#2dc06d] hover:bg-transparent hover:text-[#2dc06d] active:bg-transparent active:text-[#2dc06d]",
           activeOption !== TopBarOptions.AddFriends &&
-          "bg-accent text-white hover:bg-accent hover:text-white active:bg-accent active:text-white"
+            "bg-accent text-white hover:bg-accent hover:text-white active:bg-accent active:text-white"
         )}
         onClick={(e) =>
           activeOption !== TopBarOptions.AddFriends &&
diff --git a/frontend/components/organisms/server-sidebar.tsx b/frontend/components/organisms/server-sidebar.tsx
index dbf1c6e..7011873 100644
--- a/frontend/components/organisms/server-sidebar.tsx
+++ b/frontend/components/organisms/server-sidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { BsDiscord, BsRobot, BsTv } from "react-icons/bs";
+import { BsRobot, BsTv } from "react-icons/bs";
 import Divider from "../molecules/divider";
 import ServerButton from "../molecules/server-button";
 import { useState } from "react";
diff --git a/frontend/components/organisms/users-list.tsx b/frontend/components/organisms/users-list.tsx
index 0bc1146..c775e89 100644
--- a/frontend/components/organisms/users-list.tsx
+++ b/frontend/components/organisms/users-list.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, MouseEvent } from "react";
 import SearchField from "../molecules/search-field";
-import { BsCheck, BsCheckCircle, BsCheckCircleFill, BsPersonDash, BsPersonDashFill, BsSearch, BsX } from "react-icons/bs";
+import { BsCheck, BsPersonDashFill, BsSearch, BsX } from "react-icons/bs";
 import SearchResults from "../molecules/search-result-new";
 import UserListItem from "../molecules/user-list-item";
 import { User } from "@/models/user";