diff --git a/frontend/index.html b/frontend/index.html
index 1f70938..b03b4c5 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <!-- <link rel="icon" type="image" href="/frontend/src/assets/cc2.jpeg" /> -->
     <link rel="shortcut icon" href="/src/assets/cc3.jpeg" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ChitChat</title>
   </head>
diff --git a/frontend/src/pages/UsersList.jsx b/frontend/src/pages/UsersList.jsx
index cb78eaa..ff41441 100644
--- a/frontend/src/pages/UsersList.jsx
+++ b/frontend/src/pages/UsersList.jsx
@@ -1,22 +1,61 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 function UsersList() {
-	const [users, setUsers] = useState([]);
+	// const [users, setUsers] = useState([]);
 
-	useEffect(() => {
-		fetch("http://127.0.0.1:9000/api/profiles/")
-			.then((response) => response.json())
-			.then((data) => setUsers(data));
-	}, []);
+	// useEffect(() => {
+	// 	fetch("http://127.0.0.1:9000/api/profiles/")
+	// 		.then((response) => response.json())
+	// 		.then((data) => setUsers(data));
+	// }, []);
 
 	return (
-		<div>
-			<h1>Users</h1>
-			<ul>
-				{users.map((user) => (
-					<li key={user.id}>{user.user}</li>
-				))}
-			</ul>
+		<div className="bg-red-500 p-2">
+			<div className="container mx-auto">
+				<div className="flex justify-between items-center">
+					<div className="text-white font-bold text-xl">W</div>
+					<nav>
+						<ul className="flex space-x-4">
+							<li>
+								<i className="fa-solid fa-house text-white"></i>
+								<a href="#" className="text-white hover:text-gray-300">
+									Home
+								</a>
+							</li>
+							<li>
+								<a href="#" className="text-white hover:text-gray-300">
+									Companies
+								</a>
+							</li>
+							<li>
+								<a href="#" className="text-white hover:text-gray-300">
+									Profiles
+								</a>
+							</li>
+							<li>
+								<a href="#" className="text-white hover:text-gray-300">
+									Jobs
+								</a>
+							</li>
+							<li>
+								<a href="#" className="text-white hover:text-gray-300">
+									Messages
+								</a>
+							</li>
+							<li>
+								<button
+									type="button"
+									className="bg-green-500 text-white px-2 py-1 rounded-md hover:bg-green-600 focus:outline-none focus:ring focus:border-blue-300"
+								>
+									Notification
+								</button>
+							</li>
+						</ul>
+					</nav>
+
+					<div className="">John Doe</div>
+				</div>
+			</div>
 		</div>
 	);
 }