diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 9c93ebc3..359c4351 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -7,6 +7,8 @@ import { Context } from '../context';
 import { useEffect, useState } from 'react';
 import request from '@/utils/request';
 import { Analytics } from "@vercel/analytics/react"
+import { usePathname, useRouter } from 'next/navigation';
+
 
 export default function App({ Component, pageProps }) {
   const [username, setUsername] = useState('');
@@ -14,6 +16,8 @@ export default function App({ Component, pageProps }) {
   const [accountType, setAccountType] = useState('');
   const [profilePic, setProfilePic] = useState('');
   const [points, setPoints] = useState(0);
+  const path = usePathname();
+  const router = useRouter();
 
   const appState = {
     role, setRole,
@@ -26,7 +30,14 @@ export default function App({ Component, pageProps }) {
   const fetchUser = async () => {
     const url = process.env.NEXT_PUBLIC_API_URL + "/account";
     const user = await request(url, "GET", null);
-    console.log(user);
+
+    if(user && user.error && user.error === "Not authorized") {
+      const pathNames = ["/", "/login", "/careers", "/register", 
+        "/onboarding", "/forgot-password", "/education", "/userrs", 
+        "/privacy-policy","/404", "/terms-of-service", "/learn"];
+      if(!pathNames.includes(path)) router.push("/login");
+    }
+
     if (user && user.username) {
       setRole(user.role);
       setUsername(user.username);
diff --git a/src/pages/users/[user].jsx b/src/pages/users/[user].jsx
index f2b5d773..24ffb71d 100644
--- a/src/pages/users/[user].jsx
+++ b/src/pages/users/[user].jsx
@@ -944,20 +944,26 @@ export default function Create() {
                           </span>
                         )}
                         {!ownUser && followedUser && (
-                          <span className="ml-2 text-lg text-white">
-                            <i
-                              className="fas fa-user-slash text-lg hover:text-gray-400"
-                              onClick={handleUnfollowUser}
+                          <button 
+                            className="border rounded-sm border-neutral-500 ml-2 px-1 text-sm text-white hover:bg-neutral-600"
+                            onClick={handleUnfollowUser}>
+                              <i
+                              className="fas fa-user-slash text-xs"
                             ></i>
-                          </span>
+                            {' '}
+                            Unfollow
+                          </button>
                         )}
                         {!ownUser && !followedUser && (
-                          <span className="ml-2 text-lg text-white">
-                            <i
-                              className="fas fa-user-plus text-lg hover:text-gray-400"
-                              onClick={handleFollowUser}
+                          <button 
+                            className="border rounded-sm border-neutral-500 ml-2 px-1 text-sm text-white hover:bg-neutral-600"
+                            onClick={handleFollowUser}>
+                              <i
+                              className="fas fa-user-plus text-xs"
                             ></i>
-                          </span>
+                            {' '}
+                            Follow
+                          </button>
                         )}
                       </h1>
                       <p className="text-white">
@@ -976,21 +982,25 @@ export default function Create() {
                         {user && (
                           <>
                             <span
-                              className="cursor-pointer font-bold hover:text-gray-400"
+                              className={`border border-neutral-500 rounded-sm px-2 py-1 cursor-pointer font-bold hover:bg-neutral-600 ${
+                                displayMode === 'followers' ? 'bg-neutral-500' : ''
+                              }`}
                               onClick={() => setDisplayMode('followers')}
                             >
-                              {' '}
                               Followers
-                            </span>{' '}
+                              {' '}
                             {followerNum || '0'}
+                            </span>
                             <span
-                              className="ml-4 cursor-pointer font-bold hover:text-gray-400"
+                              className={`border border-neutral-500 rounded-sm px-2 py-1 ml-4 cursor-pointer font-bold hover:bg-neutral-600 ${
+                                displayMode === 'following' ? 'bg-neutral-500' : ''
+                              }`}
                               onClick={() => setDisplayMode('following')}
                             >
-                              {' '}
                               Following
-                            </span>{' '}
+                              {' '}
                             {followingNum || '0'}
+                            </span>
                           </>
                         )}
                       </p>