1 files changed, 16 insertions, 10 deletions
diff --git a/panel/src/pages/Roles.jsx b/panel/src/pages/Roles.jsx
index 05f73b6..5b18ace 100644
--- a/panel/src/pages/Roles.jsx
+++ b/panel/src/pages/Roles.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { db, auth } from '../firebase';
 import { collection, getDocs } from 'firebase/firestore';
 import { httpsCallable } from 'firebase/functions';
+import Navbar from '../components/Navbar';
 
 const Roles = () => {
   const [users, setUsers] = useState([]);
@@ -33,16 +34,21 @@ const Roles = () => {
   }
 
   return (
-    <div className="container">
-      <h4>Manage Roles</h4>
-      <div>
-        {users.map((user, index) => (
-          <div key={index} className="mb-3">
-            <p>{user.email}</p>
-            <button onClick={() => handleRoleChange(user.email, 'admin')} className="btn btn-primary mr-2">Make Admin</button>
-            <button onClick={() => handleRoleChange(user.email, 'user')} className="btn btn-secondary">Make User</button>
-          </div>
-        ))}
+    <div>
+      <Navbar />
+      <div className="container mt-5">
+        <h4>Manage Roles</h4>
+        <div className="list-group">
+          {users.map((user, index) => (
+            <div key={index} className="list-group-item d-flex justify-content-between align-items-center">
+              <p className="mb-0">{user.email}</p>
+              <div>
+                <button onClick={() => handleRoleChange(user.email, 'admin')} className="btn btn-primary btn-sm mr-2">Make Admin</button>
+                <button onClick={() => handleRoleChange(user.email, 'user')} className="btn btn-secondary btn-sm">Make User</button>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );