diff --git a/frontend/src/app/components/permissions/Permissions.jsx b/frontend/src/app/components/permissions/Permissions.jsx
new file mode 100644
index 0000000..620b368
--- /dev/null
+++ b/frontend/src/app/components/permissions/Permissions.jsx
@@ -0,0 +1,134 @@
+import editUserStyle from "./styles.module.css";
+import React from "react";
+
+const Permissions = ({ sampleData = [] }) => {
+  return (
+    <>
+      {/* Permissions */}
+      <div className={editUserStyle.userPermissions}>
+        {/* Add permissions */}
+        <div className={editUserStyle.imanginaryDiv}></div>
+        <div className={editUserStyle.permissionsContainer}>
+          {/* Header */}
+          <div className={editUserStyle.permissionsHeader}>
+            <p>Permissions</p>
+            <div className={editUserStyle.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>
+
+          {sampleData.length === 0 ? (
+            // Default Message
+            <div className={editUserStyle.permissionDefaultState}>
+              <p>No permission added yet</p>
+            </div>
+          ) : (
+            // Sampple Data(static)
+            sampleData.map((perm, index) => {
+              return (
+                <div className={editUserStyle.permissions} key={index}>
+                  <div className={editUserStyle.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={editUserStyle.deleteBtn}>
+                    <div className={editUserStyle.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>
+    </>
+  );
+};
+
+export default Permissions;
diff --git a/frontend/src/app/components/permissions/styles.module.css b/frontend/src/app/components/permissions/styles.module.css
new file mode 100644
index 0000000..891783d
--- /dev/null
+++ b/frontend/src/app/components/permissions/styles.module.css
@@ -0,0 +1,185 @@
+.imanginaryDiv {
+  padding: 18px;
+}
+.userPermissions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 6px;
+  height: calc(100vh - 175px);
+  position: relative;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.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%
+  );
+}
+
+.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/components/searchbar/SearchBar.jsx b/frontend/src/app/components/searchbar/SearchBar.jsx
new file mode 100644
index 0000000..40a317a
--- /dev/null
+++ b/frontend/src/app/components/searchbar/SearchBar.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import searchBarStyle from "./styles.module.css";
+
+const SearchBar = () => {
+  return (
+    <form className={searchBarStyle.searchBarContainer}>
+      <input
+        className={searchBarStyle.input}
+        type="text"
+        name=""
+        id=""
+        placeholder="Search"
+      />
+      <div className={searchBarStyle.icon}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={24}
+          height={24}
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path
+            d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
+            stroke="#858699"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+    </form>
+  );
+};
+
+export default SearchBar;
diff --git a/frontend/src/app/components/searchbar/styles.module.css b/frontend/src/app/components/searchbar/styles.module.css
new file mode 100644
index 0000000..6f5c566
--- /dev/null
+++ b/frontend/src/app/components/searchbar/styles.module.css
@@ -0,0 +1,46 @@
+.searchBarContainer {
+  display: flex;
+  width: 260px;
+  justify-content: space-between;
+  padding: 6px 6px 6px 12px;
+
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid #31324a;
+
+  border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
+}
+.searchBarContainer > .input {
+  background-color: red;
+  outline: none;
+  border: none;
+  width: 100%;
+
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+  caret-color: #575bc7;
+}
+
+.input::placeholder {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  text-align: start;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}