3 files changed, 13 insertions, 3 deletions
diff --git a/panel/src/pages/Dashboard.css b/panel/src/pages/Dashboard.css
index 08a15eb..024df9b 100644
--- a/panel/src/pages/Dashboard.css
+++ b/panel/src/pages/Dashboard.css
@@ -4,6 +4,7 @@
   align-items: center;
   background-color: #f4f7fc;
   min-height: 100vh;
+  padding: 20px;
 }
 
 .dashboard-container {
diff --git a/panel/src/pages/Roles.css b/panel/src/pages/Roles.css
index 7563805..43bb952 100644
--- a/panel/src/pages/Roles.css
+++ b/panel/src/pages/Roles.css
@@ -1,5 +1,5 @@
 :root {
-  --primary-color: #3498db;
+  --primary-color: #4caf50;
   --secondary-color: #ffffff;
   --background-color: #f4f7fc;
   --text-color: #333;
@@ -9,6 +9,13 @@
 }
 
 /* General container styling */
+.roles {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background-color: #f4f7fc;
+	padding: 20px;
+}
 .roles-container {
   max-width: 800px;
   margin: 20px auto;
diff --git a/panel/src/pages/Roles.jsx b/panel/src/pages/Roles.jsx
index a30c953..f9a5745 100644
--- a/panel/src/pages/Roles.jsx
+++ b/panel/src/pages/Roles.jsx
@@ -42,8 +42,10 @@ const Roles = () => {
   }
 
   return (
-    <div>
-      <Navbar />
+     <div>
+    	<div className="roles">
+      		<Navbar className="roles" />
+	  </div>
       <div className="roles-container">
         <h1>Manage Roles</h1>
         <div className="roles-list">