diff --git a/client/package.json b/client/package.json
index c07ac56..f71bbaf 100644
--- a/client/package.json
+++ b/client/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@types/nprogress": "^0.2.3",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -29,6 +30,7 @@
     "lucide-react": "^0.363.0",
     "next": "14.1.4",
     "next-themes": "^0.3.0",
+    "nprogress": "^0.2.0",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.2",
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index c632f30..3eac89c 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -41,6 +41,12 @@ dependencies:
   '@radix-ui/react-slot':
     specifier: ^1.0.2
     version: 1.0.2(@types/react@18.2.67)(react@18.2.0)
+  '@radix-ui/react-toast':
+    specifier: ^1.1.5
+    version: 1.1.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0)(react@18.2.0)
+  '@types/nprogress':
+    specifier: ^0.2.3
+    version: 0.2.3
   axios:
     specifier: ^1.6.8
     version: 1.6.8
@@ -62,6 +68,9 @@ dependencies:
   next-themes:
     specifier: ^0.3.0
     version: 0.3.0(react-dom@18.2.0)(react@18.2.0)
+  nprogress:
+    specifier: ^0.2.0
+    version: 0.2.0
   react:
     specifier: ^18
     version: 18.2.0
@@ -3991,6 +4000,38 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-toast@1.1.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.67)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.67)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.67)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.67)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.67)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.67
+      '@types/react-dom': 18.2.22
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.67)(react@18.2.0):
     resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
     peerDependencies:
@@ -4497,6 +4538,10 @@ packages:
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
     dev: false
 
+  /@types/nprogress@0.2.3:
+    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
+    dev: false
+
   /@types/parse-json@4.0.2:
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
     dev: false
@@ -12337,6 +12382,10 @@ packages:
       path-key: 3.1.1
     dev: false
 
+  /nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
+
   /nth-check@1.0.2:
     resolution: {integrity: sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==}
     dependencies:
diff --git a/client/src/app/(forum)/forum/[slug]/page.tsx b/client/src/app/(forum)/forum/[slug]/page.tsx
index 3c72d7b..a4940e3 100644
--- a/client/src/app/(forum)/forum/[slug]/page.tsx
+++ b/client/src/app/(forum)/forum/[slug]/page.tsx
@@ -42,7 +42,7 @@ function Page({ params }: { params: { slug: string } }) {
             </Button>
             <Button size={"sm"} className="text-sm">
               <FaPlus className="mr-2" />
-              Follow
+              Subscribe
             </Button>
           </div>
         </div>
diff --git a/client/src/app/[username]/page.tsx b/client/src/app/[username]/page.tsx
index f01c3f6..48063a8 100644
--- a/client/src/app/[username]/page.tsx
+++ b/client/src/app/[username]/page.tsx
@@ -5,9 +5,17 @@ import React from "react";
 import { useState } from 'react';
 import useSWR from 'swr';
 import Link from 'next/link';
+import { Button } from "~/components/ui/button";
+import { FaPlus, FaMinus } from "react-icons/fa6";
+import { useUser } from "@clerk/clerk-react";
 
 function UserProfile({ params }: { params: { username: string } }) {
-    const { getUser, getUserPosts, getUserComments, getUserFollowers, getUserFollowing, getUserSubscriptions, getUserPostVotes, getUserCommentVotes } = useFetcher();
+    const { getUser, getUserPosts, getUserComments, getUserFollowers, getUserFollowing, getUserSubscriptions, getUserPostVotes, getUserCommentVotes, followUser, unfollowUser } = useFetcher();
+    const { user } = useUser();
+    const currentUsername = user?.username;
+    const { data: currentfollowings } = useSWR(`getUserFollowing/${currentUsername}`, getUserFollowing);
+    const followingUsernames = currentfollowings?.followings?.map(following => following.username) || [];
+    console.log("currentfollowings", followingUsernames);
     const { data: userProfile, error } = useSWR(`getUser/${params.username}`, getUser);
 
     const [selectedTab, setSelectedTab] = useState('posts');
@@ -42,7 +50,7 @@ function UserProfile({ params }: { params: { username: string } }) {
                     <div className="dark:bg-secondary dark:text-[#d8dce0] bg-white rounded-lg shadow-md p-6">
                         <img className="w-24 h-24 -mt-12 border-4 border-white rounded-full mx-auto shadow-lg" src={userProfile.avatarUrl} alt={userProfile.username} />
                         <h1 className="mb-2 text-xl font-bold">{userProfile.username}</h1>
-                        <p className="mb-2 text-sm text-gray-500 dark:text-[#d8dce0]">{userProfile.email}</p>
+                        <p className="mb-2 text-sm text-orange-500 dark:text-[#d8dce0]">{userProfile.email}</p>
                         <p className="mb-2 text-sm dark:text-[#d8dce0]">{userProfile.aboutMe}</p>
                         <h2 className="text-lg font-semibold">Social Media</h2>
                         <div className="flex space-x-2 mt-2">
@@ -50,6 +58,14 @@ function UserProfile({ params }: { params: { username: string } }) {
                             <a href={userProfile.twitter} target="_blank" rel="noopener noreferrer">Twitter</a>
                             <a href={userProfile.linkedin} target="_blank" rel="noopener noreferrer">LinkedIn</a>
                         </div>
+                        <Button
+                            size={"sm"}
+                            className="text-sm mt-2"
+                            onClick={() => followingUsernames.includes(userProfile.username) ? unfollowUser(currentUsername, userProfile.username) : followUser(currentUsername, userProfile.username)}
+                        >
+                            {followingUsernames.includes(userProfile.username) ? <FaMinus className="mr-2" /> : <FaPlus className="mr-2" />}
+                            {followingUsernames.includes(userProfile.username) ? 'Unfollow' : 'Follow'}
+                        </Button>
                     </div>
                 </div>
                 <div className="w-full md:w-1/3 p-4">
@@ -82,43 +98,43 @@ function UserProfile({ params }: { params: { username: string } }) {
                 <div className="dark:bg-secondary dark:text-[#d8dce0] bg-white rounded-lg shadow-md p-6">
                     <div className="flex justify-between">
                         <button
-                            className={`p-2 ${selectedTab === 'posts' ? 'text-orange-500' : 'text-gray-500'}`}
+                            className={`p-2 ${selectedTab === 'posts' ? 'text-orange-100' : 'text-orange-500'}`}
                             onClick={() => setSelectedTab('posts')}
                         >
                             Posts
                         </button>
                         <button
-                            className={`p-2 ${selectedTab === 'comments' ? 'text-orange-500' : 'text-gray-500'}`}
+                            className={`p-2 ${selectedTab === 'comments' ? 'text-orange-100' : 'text-orange-500'}`}
                             onClick={() => setSelectedTab('comments')}
                         >
                             Comments
                         </button>
                         <button
-                            className={`p-2 ${selectedTab === 'followers' ? 'text-orange-500' : 'text-gray-500'}`}
+                            className={`p-2 ${selectedTab === 'followers' ? 'text-orange-100' : 'text-orange-500'}`}
                             onClick={() => setSelectedTab('followers')}
                         >
                             Followers
                         </button>
                         <button
-                            className={`p-2 ${selectedTab === 'following' ? 'text-orange-500' : 'text-gray-500'}`}
+                            className={`p-2 ${selectedTab === 'following' ? 'text-orange-100' : 'text-orange-500'}`}
                             onClick={() => setSelectedTab('following')}
                         >
                             Following
                         </button>
                         <button
-                            className={`p-2 ${selectedTab === 'subscriptions' ? 'text-orange-500' : 'text-gray-500'}`}
+                            className={`p-2 ${selectedTab === 'subscriptions' ? 'text-orange-100' : 'text-orange-500'}`}
                             onClick={() => setSelectedTab('subscriptions')}
                         >
                             Subscriptions
                         </button>
                         <button
-                            className={`p-2 ${selectedTab === 'postVotes' ? 'text-orange-500' : 'text-gray-500'}`}
+                            className={`p-2 ${selectedTab === 'postVotes' ? 'text-orange-100' : 'text-orange-500'}`}
                             onClick={() => setSelectedTab('postVotes')}
                         >
                             Post Votes
                         </button>
                         <button
-                            className={`p-2 ${selectedTab === 'commentVotes' ? 'text-orange-500' : 'text-gray-500'}`}
+                            className={`p-2 ${selectedTab === 'commentVotes' ? 'text-orange-100' : 'text-orange-500'}`}
                             onClick={() => setSelectedTab('commentVotes')}
                         >
                             Comment Votes
@@ -134,8 +150,8 @@ function UserProfile({ params }: { params: { username: string } }) {
                                             return (
                                                 <Link href={`/post/${item.id}`} key={item.id}>
                                                     <div className="bg-white shadow rounded-lg p-4 mb-4">
-                                                        <h2 className="text-gray-700">{item.title}</h2>
-                                                        <p className="text-gray-700">{item.content}</p>
+                                                        <h2 className="text-orange-700">{item.title}</h2>
+                                                        <p className="text-orange-700">{item.content}</p>
                                                     </div>
                                                 </Link>
                                             );
@@ -143,7 +159,7 @@ function UserProfile({ params }: { params: { username: string } }) {
                                             return (
                                                 <Link href={`/post/${item.postId}`} key={item.id}>
                                                     <div className="bg-white shadow rounded-lg p-4 mb-4">
-                                                        <p className="text-gray-700">{item.content}</p>
+                                                        <p className="text-orange-700">{item.content}</p>
                                                         <p>Upvotes: {item.upvotesCount}, Downvotes: {item.downvotesCount}</p>
                                                     </div>
                                                 </Link>
@@ -151,10 +167,14 @@ function UserProfile({ params }: { params: { username: string } }) {
                                         case 'followers':
                                         case 'following':
                                             return (
-                                                <Link href={`/profile/${item.username}`} key={item.id}>
-                                                    <div className="bg-white shadow rounded-lg p-4 mb-4">
-                                                        <img src={item.avatarUrl} alt={item.username} />
-                                                        <p className="text-gray-700">{item.username}</p>
+                                                <Link href={`/${item.username}`} key={item.id}>
+                                                    <div className="bg-white shadow rounded-lg p-4 mb-4 w-32 h-32">
+                                                        <img
+                                                            src={item.avatarUrl}
+                                                            alt={item.username}
+                                                            className="w-8 h-8 object-cover" // Add these classes
+                                                        />
+                                                        <p className="text-orange-700">{item.username}</p>
                                                         <p>Reputation: {item.reputation}</p>
                                                     </div>
                                                 </Link>
@@ -164,8 +184,8 @@ function UserProfile({ params }: { params: { username: string } }) {
                                                 <Link href={`/forum/${item.id}`} key={item.id}>
                                                     <div className="bg-white shadow rounded-lg p-4 mb-4">
                                                         <img src={item.logo} alt={item.name} />
-                                                        <h2 className="text-gray-700">{item.name}</h2>
-                                                        <p className="text-gray-700">{item.description}</p>
+                                                        <h2 className="text-orange-700">{item.name}</h2>
+                                                        <p className="text-orange-700">{item.description}</p>
                                                     </div>
                                                 </Link>
                                             );
@@ -173,7 +193,7 @@ function UserProfile({ params }: { params: { username: string } }) {
                                             return (
                                                 <Link href={`/post/${item.postId}`} key={item.id}>
                                                     <div className="bg-white shadow rounded-lg p-4 mb-4">
-                                                        <p className="text-gray-700">{item.content}</p>
+                                                        <p className="text-orange-700">{item.content}</p>
                                                         <p>Vote status: {item.voteStatus}, Upvotes: {item.upvotesCount}, Downvotes: {item.downvotesCount}</p>
                                                     </div>
                                                 </Link>
@@ -182,7 +202,7 @@ function UserProfile({ params }: { params: { username: string } }) {
                                             return (
                                                 <Link href={`/post/${item.postId}`} key={item.id}>
                                                     <div className="bg-white shadow rounded-lg p-4 mb-4">
-                                                        <p className="text-gray-700">{item.content}</p>
+                                                        <p className="text-orange-700">{item.content}</p>
                                                         <p>Vote status: {item.voteStatus}, Upvotes: {item.upvotesCount}, Downvotes: {item.downvotesCount}</p>
                                                     </div>
                                                 </Link>
@@ -196,7 +216,7 @@ function UserProfile({ params }: { params: { username: string } }) {
                             )
                         ) : (
                             <div className="flex justify-center items-center h-12">
-                                <p className="text-gray-500">Loading...</p>
+                                <p className="text-orange-500">Loading...</p>
                             </div>
                         )}
                     </div>
diff --git a/client/src/app/favicon.ico b/client/src/app/favicon.ico
index 4570eb8..9bdd64b 100644
Binary files a/client/src/app/favicon.ico and b/client/src/app/favicon.ico differ
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index c0766c9..246b465 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -17,6 +17,9 @@ const inter = Inter({ subsets: ["latin"] });
 export const metadata: Metadata = {
   title: "WeGotThis Community",
   description: "You are not alone. WeGotThis Community is here to help you.",
+  icons: {
+    icon: "./wgt.png",
+  },
 };
 
 export default function RootLayout({
diff --git a/client/src/hooks/fetcher.tsx b/client/src/hooks/fetcher.tsx
index 0cbb83f..33c4196 100644
--- a/client/src/hooks/fetcher.tsx
+++ b/client/src/hooks/fetcher.tsx
@@ -257,7 +257,41 @@ export const useFetcher = (filter = 'hot') => {
         }
     }
 
+    const followUser = async (idOrUsername: string, followingIdOrUsername: string) => {
+        try {
+            const response = await axios.post(`/users/${idOrUsername}/followings/${followingIdOrUsername}`, {}, {
+                withCredentials: true
+            });
+            console.log(response.data.message);
+            mutate(`getUserFollowing/${idOrUsername}`);
+            mutate(`getUserFollowers/${followingIdOrUsername}`);
+            mutate(`getUser/${followingIdOrUsername}`);
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
+    const unfollowUser = async (idOrUsername: string, followingIdOrUsername: string) => {
+        try {
+            const response = await axios.delete(`/users/${idOrUsername}/followings/${followingIdOrUsername}`, {
+                withCredentials: true
+            });
+            console.log(response.data.message);
+            mutate(`getUserFollowing/${idOrUsername}`);
+            mutate(`getUserFollowers/${followingIdOrUsername}`);
+            mutate(`getUser/${followingIdOrUsername}`);
+            return response.data;
+        } catch (error) {
+            // @ts-ignore
+            throw new Error(error);
+        }
+    }
+
     return {
+        unfollowUser,
+        followUser,
         allPosts,
         allForums,
         getForumPosts,