done profile dropdown

frontend/src/app/users/[usersId]/page.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import globalStyle from "../../globalStyle.module.css";
+
+const page = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Edit" topbarTitle="View" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;

frontend/src/app/users/add/page.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import globalStyle from "../../globalStyle.module.css";
+
+const page = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add" topbarTitle="Add User" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;

frontend/src/app/users/page.jsx

@@ -1,31 +1,28 @@
+"use client";
 import React from "react";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import styles from "./styles.module.css";
+import { useRouter } from "next/navigation";
 
 const UsersPage = () => {
+  const router = useRouter();
+
   const sampleData = [
     {
+      id: 1,
       email: "nino.moonshot@gmail.com",
       fullName: "Nino Paul Cervantes",
       createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
     },
     {
+      id: 2,
       email: "nino.moonshot@gmail.com",
       fullName: "Nino Paul Cervantes",
       createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
     },
     {
-      email: "nino.moonshot@gmail.com",
-      fullName: "Nino Paul Cervantes",
-      createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
-    },
-    {
-      email: "nino.moonshot@gmail.com",
-      fullName: "Nino Paul Cervantes",
-      createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
-    },
-    {
+      id: 3,
       email: "nino.moonshot@gmail.com",
       fullName: "Nino Paul Cervantes",
       createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
@@ -48,12 +45,15 @@ const UsersPage = () => {
                 </tr>
               </thead>
               <tbody className={styles.tableBody}>
-                {sampleData.map((data, index) => {
+                {sampleData.map((user, index) => {
                   return (
-                    <tr key={index}>
-                      <td>{data.email}</td>
-                      <td>{data.fullName}</td>
-                      <td>{data.createdAt}</td>
+                    <tr
+                      key={user.id}
+                      onClick={() => router.push(`/users/${user.id}`)}
+                    >
+                      <td>{user.email}</td>
+                      <td>{user.fullName}</td>
+                      <td>{user.createdAt}</td>
                       <td>
                         <div className={styles.tableActions}>
                           <button className={styles.viewBtn}>

frontend/src/app/users/styles.module.css

@@ -1,5 +1,8 @@
 .tableContainer {
   width: 100%;
+  height: calc(100vh - 170px);
+  position: relative;
+  overflow: auto;
 }
 
 /* Table */
@@ -27,6 +30,11 @@
   font-weight: 500;
   line-height: normal;
 }
+.tableContainer th {
+  background-color: #1c1d2b;
+  top: 0;
+  position: sticky;
+}
 
 /* Targets individual body */
 .tableBody td {