done roles layout

frontend/src/app/users/page.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import styles from "./styles.module.css";
+
 const UsersPage = () => {
   const sampleData = [
     {
@@ -35,7 +36,7 @@ const UsersPage = () => {
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Add User" topbarTitle="Users" />
-          {/* Table */}
+          {/* Users Table */}
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead className={styles.tableHeader}>

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

@@ -16,7 +16,7 @@
 .tableHeader th {
   align-items: center;
   gap: 24px;
-  padding: 13px 24px;
+  padding: 12px 24px;
   text-align: left;
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
@@ -39,6 +39,10 @@
   font-weight: 500;
   line-height: normal;
 }
+
+.tableBody tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+}
 .tableBody tr:hover {
   border-bottom: 1px solid rgba(129, 135, 255, 0.25);
   border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);