diff --git a/frontend/src/app/credentials/add/page.jsx b/frontend/src/app/credentials/add/page.jsx
new file mode 100644
index 0000000..7a43b5c
--- /dev/null
+++ b/frontend/src/app/credentials/add/page.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import globalStyle from "../../globalStyle.module.css";
+import createCredStyle from "./styles.module.css";
+import TopToolTip from "@/app/components/topToolTip/TopToolTip";
+
+const page = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            buttonText="Save"
+            cancelButtonText="Cancel"
+            topbarTitle="Create Credential"
+            state="add"
+          />
+          {/* Create Crediantial Container */}
+          <div className={createCredStyle.createCredContainer}>
+            <TopToolTip />
+            <div className={createCredStyle.inputFieldContainer}>
+              {/* Project Name Input Container */}
+              <div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;
diff --git a/frontend/src/app/credentials/add/styles.module.css b/frontend/src/app/credentials/add/styles.module.css
new file mode 100644
index 0000000..e18567e
--- /dev/null
+++ b/frontend/src/app/credentials/add/styles.module.css
@@ -0,0 +1,18 @@
+.createCredContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.inputFieldContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  border-radius: 8px;
+}
diff --git a/frontend/src/app/roles/[rolesId]/page.jsx b/frontend/src/app/roles/[rolesId]/page.jsx
new file mode 100644
index 0000000..a4c006a
--- /dev/null
+++ b/frontend/src/app/roles/[rolesId]/page.jsx
@@ -0,0 +1,207 @@
+import React from "react";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import globalStyle from "../../globalStyle.module.css";
+import editRoleStyle from "./styles.module.css";
+
+const page = () => {
+  const sampleData = [
+    { permission: "organization.delete" },
+    { permission: "user.create" },
+    { permission: "user.list" },
+    { permission: "user.update" },
+    { permission: "robot.create" },
+    { permission: "user.delete" },
+    { permission: "robot.list" },
+    { permission: "robot.delete" },
+    { permission: "project.delete" },
+    { permission: "project.update" },
+    { permission: "service.create" },
+    { permission: "service.list" },
+    { permission: "service.delete" },
+    { permission: "service.update" },
+  ];
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="" topbarTitle="View" state="view" />
+          <div className={editRoleStyle.addRoleContainer}>
+            {/* Input fields Container  */}
+            <div className={editRoleStyle.inputFieldContainer}>
+              {/* User Details */}
+              <div className={editRoleStyle.userDetails}>
+                {/* Header */}
+                <div className={editRoleStyle.header}>
+                  <div>
+                    <p>Role Details</p>
+                  </div>
+                </div>
+                {/* Input fields */}
+                <form className={editRoleStyle.fields}>
+                  {/* Email */}
+                  <div className={editRoleStyle.inputMainContainer}>
+                    <div className={editRoleStyle.inputContainer}>
+                      {/* Label */}
+                      <div className={editRoleStyle.label}>
+                        <p>Name</p>
+                      </div>
+                      {/* Input field */}
+                      <div className={editRoleStyle.inputField}>
+                        <input
+                          type="text"
+                          name=""
+                          id=""
+                          placeholder="organization-owner" //static
+                          className={editRoleStyle.placeholderTxt}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  {/* Full Name */}
+                  <div className={editRoleStyle.inputMainContainer}>
+                    <div className={editRoleStyle.inputContainer}>
+                      {/* Label */}
+                      <div className={editRoleStyle.label}>
+                        <p>Organization ID</p>
+                      </div>
+                      {/* Input field */}
+                      <div className={editRoleStyle.inputField}>
+                        <input
+                          type="text"
+                          name=""
+                          id=""
+                          placeholder="67160a5ae69144ff19aafb86" //static
+                          className={editRoleStyle.placeholderTxt}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </form>
+              </div>
+
+              {/* Permissions */}
+              <div className={editRoleStyle.userPermissions}>
+                {/* Add permissions */}
+                <div className={editRoleStyle.permissionsContainer}>
+                  {/* Header */}
+                  <div className={editRoleStyle.permissionsHeader}>
+                    <p>Permissions</p>
+                    <div className={editRoleStyle.svgContainer}>
+                      <div>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width={24}
+                          height={24}
+                          viewBox="0 0 24 24"
+                          fill="none"
+                        >
+                          <path
+                            d="M12 5.29199V18.7087"
+                            stroke="#333649"
+                            strokeWidth={2}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                          <path
+                            d="M5.29102 12H18.7077"
+                            stroke="#333649"
+                            strokeWidth={2}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* State text (static) */}
+                  {sampleData.map((perm, index) => {
+                    return (
+                      <div className={editRoleStyle.permissions} key={index}>
+                        <div className={editRoleStyle.permissionsItem}>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width={24}
+                            height={24}
+                            viewBox="0 0 24 24"
+                            fill="none"
+                          >
+                            <path
+                              d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
+                              stroke="#969AF9"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
+                              stroke="#969AF9"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
+                              stroke="#969AF9"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
+                          <p>{perm.permission}</p>
+                        </div>
+
+                        <div className={editRoleStyle.deleteBtn}>
+                          <div className={editRoleStyle.deleteSvg}>
+                            {" "}
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width={20}
+                              height={20}
+                              viewBox="0 0 20 20"
+                              fill="none"
+                            >
+                              <path
+                                d="M3.61133 6.00684H16.3891"
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                              <path
+                                d="M8.40234 9.20117V13.9928"
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                              <path
+                                d="M11.5977 9.20117V13.9928"
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                              <path
+                                d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                              <path
+                                d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;
diff --git a/frontend/src/app/roles/[rolesId]/styles.module.css b/frontend/src/app/roles/[rolesId]/styles.module.css
new file mode 100644
index 0000000..153020c
--- /dev/null
+++ b/frontend/src/app/roles/[rolesId]/styles.module.css
@@ -0,0 +1,292 @@
+.addRoleContainer {
+  display: flex;
+  padding: 36px 144px 72px 144px;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.inputFieldContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.userDetails {
+  display: flex;
+  width: 400px;
+  padding: 24px 24px 48px 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 6px;
+  background: #1d1e2a;
+  background: color(display-p3 0.1137 0.1176 0.1608);
+}
+.header {
+  display: flex;
+  padding-bottom: 24px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.header > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  flex: 1 0 0;
+}
+.header > div > p {
+  width: 163px;
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.fields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.selectRoleContainer,
+.inputMainContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.inputContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.label {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  align-self: stretch;
+}
+.label > p {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.inputField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+.inputField > input {
+  display: flex;
+  height: 44px;
+  padding: 12px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  background: none;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #616583;
+  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+}
+.inputField > input:hover {
+  border: 1px solid #616583;
+  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+  background: rgba(75, 79, 109, 0.05);
+  background: color(display-p3 0.298 0.3098 0.4196 / 0.05);
+}
+
+.inputField input:focus {
+  outline: none;
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
+  background: rgba(75, 79, 109, 0.25);
+  background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
+  caret-color: #959aff;
+}
+.inputField input:focus::placeholder {
+  color: #4b4f6d;
+  color: color(display-p3 0.298 0.3098 0.4196);
+}
+
+.placeholderTxt::placeholder {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.userPermissions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 6px;
+}
+.permissionsContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #1d1e2a;
+  background: color(display-p3 0.1138 0.1191 0.1616);
+}
+.permissionsHeader {
+  display: flex;
+  padding-bottom: 24px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+
+.permissionsHeader > p {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  flex: 1 0 0;
+
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  width: 163px;
+}
+.svgContainer {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+  border-radius: 6px;
+  background: #27293b;
+  background: color(display-p3 0.1529 0.1608 0.2275);
+}
+
+.svgContainer > div {
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  border-radius: 6px;
+  background: #27293b;
+  background: color(display-p3 0.1529 0.1608 0.2275);
+}
+
+.permissionDefaultState {
+  display: flex;
+  height: 43.813px;
+  padding: 8px 16px;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+}
+.permissionDefaultState p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  align-self: stretch;
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.permissions {
+  display: flex;
+  height: 43.813px;
+  padding: 8px 16px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 0.5px solid #2e3042;
+  border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
+}
+.permissions: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);
+  background: rgba(129, 135, 255, 0.05);
+  background: color(display-p3 0.5098 0.5294 1 / 0.05);
+}
+.permissionsItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.permissionsItem > p {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.deleteBtn {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.deleteSvg {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #959aff00;
+  color: #969af9;
+  aspect-ratio: 1/1;
+  border-radius: 100px;
+}
+
+.deleteSvg:hover {
+  color: #fff;
+  stroke-width: 1px;
+  stroke: color(display-p3 1 1 1);
+  border-radius: 100px;
+  border: 1px solid #959aff;
+  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+  background: linear-gradient(
+    180deg,
+    color(display-p3 0.4118 0.4196 0.5725) 0%,
+    color(display-p3 0.1241 0.1265 0.1725) 100%
+  );
+}
diff --git a/frontend/src/app/roles/add/page.jsx b/frontend/src/app/roles/add/page.jsx
new file mode 100644
index 0000000..3b9fbc5
--- /dev/null
+++ b/frontend/src/app/roles/add/page.jsx
@@ -0,0 +1,120 @@
+import React from "react";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import globalStyle from "../../globalStyle.module.css";
+import addRoleStyle from "./styles.module.css";
+
+const page = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            buttonText="Save"
+            cancelButtonText="Cancel"
+            topbarTitle="Add Role"
+            state="add"
+          />
+          <div className={addRoleStyle.addUserContainer}>
+            {/* Input fields Container  */}
+            <div className={addRoleStyle.inputFieldContainer}>
+              {/* User Details */}
+              <div className={addRoleStyle.roleDetails}>
+                {/* Header */}
+                <div className={addRoleStyle.header}>
+                  <div>
+                    <p>Role Details</p>
+                  </div>
+                </div>
+                {/* Input fields */}
+                <form className={addRoleStyle.fields}>
+                  {/* Email */}
+                  <div className={addRoleStyle.inputMainContainer}>
+                    <div className={addRoleStyle.inputContainer}>
+                      {/* Label */}
+                      <div className={addRoleStyle.label}>
+                        <p>Name</p>
+                      </div>
+                      {/* Input field */}
+                      <div className={addRoleStyle.inputField}>
+                        <input
+                          type="text"
+                          name=""
+                          id=""
+                          placeholder="Enter name"
+                          className={addRoleStyle.placeholderTxt}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  {/* Full Name */}
+                  <div className={addRoleStyle.inputMainContainer}>
+                    <div className={addRoleStyle.inputContainer}>
+                      {/* Label */}
+                      <div className={addRoleStyle.label}>
+                        <p>Organization ID</p>
+                      </div>
+                      {/* Input field */}
+                      <div className={addRoleStyle.inputField}>
+                        <input
+                          type="text"
+                          name=""
+                          id=""
+                          placeholder="Enter organization ID"
+                          className={addRoleStyle.placeholderTxt}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </form>
+              </div>
+
+              {/* Permissions */}
+              <div className={addRoleStyle.rolePermissions}>
+                {/* Add permissions */}
+                <div className={addRoleStyle.permissionsContainer}>
+                  {/* Header */}
+                  <div className={addRoleStyle.permissionsHeader}>
+                    <p>Permissions</p>
+                    <div className={addRoleStyle.svgContainer}>
+                      <div>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width={24}
+                          height={24}
+                          viewBox="0 0 24 24"
+                          fill="none"
+                        >
+                          <path
+                            d="M12 5.29199V18.7087"
+                            stroke="#333649"
+                            strokeWidth={2}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                          <path
+                            d="M5.29102 12H18.7077"
+                            stroke="#333649"
+                            strokeWidth={2}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* State text (static) */}
+                  <div className={addRoleStyle.permissionDefaultState}>
+                    <p>No permission added yet</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;
diff --git a/frontend/src/app/roles/add/styles.module.css b/frontend/src/app/roles/add/styles.module.css
new file mode 100644
index 0000000..21c5f86
--- /dev/null
+++ b/frontend/src/app/roles/add/styles.module.css
@@ -0,0 +1,253 @@
+.addUserContainer {
+  display: flex;
+  padding: 36px 144px 72px 144px;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.inputFieldContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.roleDetails {
+  display: flex;
+  width: 400px;
+  padding: 24px 24px 48px 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 6px;
+  background: #1d1e2a;
+  background: color(display-p3 0.1137 0.1176 0.1608);
+}
+.header {
+  display: flex;
+  padding-bottom: 24px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.header > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  flex: 1 0 0;
+}
+.header > div > p {
+  width: 163px;
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.fields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.selectRoleContainer,
+.inputMainContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.inputContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.label {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  align-self: stretch;
+}
+.label > p {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.inputField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+.inputField > input {
+  display: flex;
+  height: 44px;
+  padding: 12px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  background: none;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #616583;
+  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+}
+.inputField > input:hover {
+  border: 1px solid #616583;
+  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+  background: rgba(75, 79, 109, 0.05);
+  background: color(display-p3 0.298 0.3098 0.4196 / 0.05);
+}
+
+.inputField input:focus {
+  outline: none;
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
+  background: rgba(75, 79, 109, 0.25);
+  background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
+  caret-color: #959aff;
+}
+.inputField input:focus::placeholder {
+  color: #4b4f6d;
+  color: color(display-p3 0.298 0.3098 0.4196);
+}
+
+.placeholderTxt::placeholder {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+/* Select Role Dropdown */
+.selectField {
+  display: flex;
+  height: 44px;
+  padding: 12px 16px;
+  align-self: stretch;
+  background: none;
+  border-radius: 6px;
+  border: 1px solid #616583;
+  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 400;
+  appearance: none;
+}
+
+.selectField:focus {
+  outline: none;
+  border: 1px solid #959aff;
+  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
+  background: rgba(75, 79, 109, 0.25);
+  background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
+}
+
+.rolePermissions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 6px;
+}
+.permissionsContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #1d1e2a;
+  background: color(display-p3 0.1138 0.1191 0.1616);
+}
+.permissionsHeader {
+  display: flex;
+  padding-bottom: 24px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+
+.permissionsHeader > p {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  flex: 1 0 0;
+
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  width: 163px;
+}
+.svgContainer {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+  border-radius: 6px;
+  background: #27293b;
+  background: color(display-p3 0.1529 0.1608 0.2275);
+}
+
+.svgContainer > div {
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  border-radius: 6px;
+  background: #27293b;
+  background: color(display-p3 0.1529 0.1608 0.2275);
+}
+
+.permissionDefaultState {
+  display: flex;
+  height: 43.813px;
+  padding: 8px 16px;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+}
+.permissionDefaultState p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  align-self: stretch;
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
diff --git a/frontend/src/app/roles/page.jsx b/frontend/src/app/roles/page.jsx
index e93ac5c..f6cbeb5 100644
--- a/frontend/src/app/roles/page.jsx
+++ b/frontend/src/app/roles/page.jsx
@@ -1,9 +1,14 @@
+"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 RolesPage = () => {
+  const router = useRouter();
+
   const sampleData = [
     {
       name: "organization-owner",
@@ -41,16 +46,20 @@ const RolesPage = () => {
             <table className={styles.table}>
               <thead className={styles.tableHeader}>
                 <tr>
-                  <th width="30%">Email</th>
-                  <th width="30%">Full Name</th>
-                  <th width="30%">Date Created</th>
+                  <th width="30%">Name</th>
+                  <th width="30%">Organization ID</th>
+                  <th width="30%">Permissions</th>
                   <th></th>
                 </tr>
               </thead>
               <tbody className={styles.tableBody}>
-                {sampleData.map((data, index) => {
+                {sampleData.map((data, role) => {
+                  //role or user?
                   return (
-                    <tr key={index}>
+                    <tr
+                      key={role}
+                      onClick={() => router.push(`/roles/${role.id}`)}
+                    >
                       <td>{data.name}</td>
                       <td>{data.orgId}</td>
                       <td>{data.permissions}</td>
diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index eec86cb..d96bcb0 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -11,6 +11,14 @@ const page = () => {
     { permission: "user.update" },
     { permission: "robot.create" },
     { permission: "user.delete" },
+    { permission: "robot.list" },
+    { permission: "robot.delete" },
+    { permission: "project.delete" },
+    { permission: "project.update" },
+    { permission: "service.create" },
+    { permission: "service.list" },
+    { permission: "service.delete" },
+    { permission: "service.update" },
   ];
   return (
     <div className={globalStyle.section}>
@@ -62,7 +70,7 @@ const page = () => {
                           type="text"
                           name=""
                           id=""
-                          placeholder="Enter Email"
+                          placeholder="nino.moonshot@gmail.com" //static
                           className={editUserStyle.placeholderTxt}
                         />
                       </div>
@@ -81,7 +89,7 @@ const page = () => {
                           type="text"
                           name=""
                           id=""
-                          placeholder="Enter full name"
+                          placeholder="Nino Paul Cervantes" //static
                           className={editUserStyle.placeholderTxt}
                         />
                       </div>