Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT

Add switches
changes in input fields
2026-03-02 11:58:42 +08:00 · 2026-03-02 11:58:11 +08:00 · 2026-03-02 11:58:06 +08:00 · 2026-03-01 19:46:07 +08:00 · 2026-03-01 12:46:48 +08:00 · 2026-02-28 20:52:41 +08:00
107 changed files with 11581 additions and 88 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
    "react-dom": "19.2.3"
  },
  "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
    "babel-plugin-react-compiler": "1.0.0",
    "eslint": "^9",
    "eslint-config-next": "16.1.6"
--- a/frontend/public/images/BadgeImage.png
+++ b/frontend/public/images/BadgeImage.png
--- a/frontend/public/images/logo.png
+++ b/frontend/public/images/logo.png
--- a/frontend/public/navigations/AgentsIcon.svg
+++ b/frontend/public/navigations/AgentsIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4075 5.81834H9.45513C9.22117 5.81903 8.99288 5.89035 8.80015 6.02299C8.60742 6.15563 8.45924 6.34337 8.37501 6.56165L7.87559 7.85082L6.15668 8.82643L4.78619 8.61737C4.558 8.5864 4.32575 8.62395 4.11894 8.72529C3.91214 8.82663 3.74013 8.98716 3.62477 9.18647L3.1602 9.99946C3.04116 10.202 2.98631 10.4358 3.0029 10.6701C3.01949 10.9044 3.10673 11.1282 3.25312 11.3119L4.12418 12.392V14.3432L3.27635 15.4233C3.12996 15.607 3.04272 15.8308 3.02613 16.0651C3.00954 16.2994 3.06439 16.5332 3.18343 16.7358L3.648 17.5487C3.76337 17.748 3.93537 17.9086 4.14216 18.0099C4.34897 18.1112 4.58124 18.1488 4.80943 18.1179L6.17992 17.9088L7.87559 18.8843L8.37501 20.1736C8.45924 20.3918 8.60742 20.5796 8.80015 20.7123C8.99288 20.8448 9.22117 20.9162 9.45513 20.9169H10.4307C10.6647 20.9162 10.893 20.8448 11.0857 20.7123C11.2785 20.5796 11.4266 20.3918 11.5109 20.1736L12.0103 18.8843L13.706 17.9088L15.0764 18.1179C15.3046 18.1488 15.5369 18.1112 15.7437 18.0099C15.9505 17.9086 16.1226 17.748 16.2379 17.5487L16.7024 16.7358C16.8215 16.5332 16.8763 16.2994 16.8598 16.0651C16.8432 15.8308 16.756 15.607 16.6096 15.4233L15.7385 14.3432V13.0851M7.60846 13.3676C7.60846 13.827 7.7447 14.2761 7.99994 14.6581C8.25518 15.0401 8.61795 15.3378 9.0424 15.5136C9.46685 15.6895 9.93389 15.7354 10.3845 15.6458C10.8351 15.5562 11.249 15.335 11.5738 15.0101C11.8987 14.6853 12.1199 14.2714 12.2095 13.8208C12.2992 13.3702 12.2532 12.9031 12.0774 12.4787C11.9015 12.0542 11.6038 11.6915 11.2218 11.4362C10.8398 11.181 10.3907 11.0447 9.93131 11.0447C9.31526 11.0447 8.72443 11.2895 8.28881 11.7251C7.85319 12.1607 7.60846 12.7515 7.60846 13.3676ZM13.4308 7.1649C13.0052 7.09086 13.0052 6.47985 13.4308 6.4058C14.9728 6.13754 16.1992 4.96304 16.5339 3.43411L16.5595 3.31691C16.6517 2.89625 17.2506 2.89363 17.3463 3.31347L17.3775 3.45005C17.7247 4.97178 18.9514 6.13635 20.4891 6.40387C20.9169 6.4783 20.9169 7.09241 20.4891 7.16684C18.9514 7.43436 17.7247 8.59894 17.3775 10.1207L17.3463 10.2572C17.2506 10.6771 16.6517 10.6745 16.5595 10.2538L16.5339 10.1366C16.1992 8.60767 14.9728 7.43317 13.4308 7.1649Z" stroke="#858699" style="stroke:#858699;stroke:color(display-p3 0.5216 0.5255 0.6000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/public/navigations/CredentialsIcon.svg
+++ b/frontend/public/navigations/CredentialsIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.03125 5.90625L5.4375 7.3125L7.78125 4.96875M4.03125 11.5312L5.4375 12.9375L7.78125 10.5938M4.03125 17.1562L5.4375 18.5625L7.78125 16.2188M11.0625 6.375H19.5M11.0625 12H19.5M11.0625 17.625H19.5" stroke="#858699" style="stroke:#858699;stroke:color(display-p3 0.5216 0.5255 0.6000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/public/navigations/HomeIcon.svg
+++ b/frontend/public/navigations/HomeIcon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.4375 12H3.5625L12 3.5625L20.4375 12H18.5625" stroke="#858699" style="stroke:#858699;stroke:color(display-p3 0.5216 0.5255 0.6000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.4375 12V18.5625C5.4375 19.0598 5.63504 19.5367 5.98667 19.8883C6.33831 20.24 6.81522 20.4375 7.3125 20.4375H16.6875C17.1848 20.4375 17.6617 20.24 18.0133 19.8883C18.365 19.5367 18.5625 19.0598 18.5625 18.5625V12" stroke="#858699" style="stroke:#858699;stroke:color(display-p3 0.5216 0.5255 0.6000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.125 12H13.875V15.75H10.125V12Z" stroke="#858699" style="stroke:#858699;stroke:color(display-p3 0.5216 0.5255 0.6000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/public/navigations/OrganizationIcon.svg
+++ b/frontend/public/navigations/OrganizationIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.3653 7.69688C16.4048 6.7122 15.1917 6.01095 13.8591 5.67M10.1362 5.67C8.78152 6.01744 7.55105 6.73708 6.58406 7.7475M4.82062 10.7616C4.60749 11.4669 4.49946 12.1997 4.5 12.9366C4.5 13.6284 4.59375 14.2987 4.76906 14.9353M6.60656 18.1491C7.56883 19.1461 8.7887 19.8568 10.1306 20.2022M13.8806 20.2022C15.2181 19.856 16.4338 19.1467 17.3934 18.1528M19.2328 14.9372C19.4119 14.2864 19.5024 13.6144 19.5019 12.9394C19.5019 12.2231 19.4016 11.5303 19.2141 10.8741M10.125 5.4375C10.125 5.93478 10.3225 6.41169 10.6742 6.76333C11.0258 7.11496 11.5027 7.3125 12 7.3125C12.4973 7.3125 12.9742 7.11496 13.3258 6.76333C13.6775 6.41169 13.875 5.93478 13.875 5.4375C13.875 4.94022 13.6775 4.46331 13.3258 4.11167C12.9742 3.76004 12.4973 3.5625 12 3.5625C11.5027 3.5625 11.0258 3.76004 10.6742 4.11167C10.3225 4.46331 10.125 4.94022 10.125 5.4375ZM3.5625 16.6875C3.5625 17.1848 3.76004 17.6617 4.11167 18.0133C4.46331 18.365 4.94022 18.5625 5.4375 18.5625C5.93478 18.5625 6.41169 18.365 6.76333 18.0133C7.11496 17.6617 7.3125 17.1848 7.3125 16.6875C7.3125 16.1902 7.11496 15.7133 6.76333 15.3617C6.41169 15.01 5.93478 14.8125 5.4375 14.8125C4.94022 14.8125 4.46331 15.01 4.11167 15.3617C3.76004 15.7133 3.5625 16.1902 3.5625 16.6875ZM16.6875 16.6875C16.6875 17.1848 16.885 17.6617 17.2367 18.0133C17.5883 18.365 18.0652 18.5625 18.5625 18.5625C19.0598 18.5625 19.5367 18.365 19.8883 18.0133C20.24 17.6617 20.4375 17.1848 20.4375 16.6875C20.4375 16.1902 20.24 15.7133 19.8883 15.3617C19.5367 15.01 19.0598 14.8125 18.5625 14.8125C18.0652 14.8125 17.5883 15.01 17.2367 15.3617C16.885 15.7133 16.6875 16.1902 16.6875 16.6875Z" stroke="#858699" style="stroke:#858699;stroke:color(display-p3 0.5216 0.5255 0.6000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/public/navigations/ProjectIcon.svg
+++ b/frontend/public/navigations/ProjectIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.4375 18.5625L8.02219 11.6709C8.08916 11.4923 8.20905 11.3383 8.36585 11.2296C8.52265 11.1209 8.70889 11.0626 8.89969 11.0625H20.4375M5.4375 18.5625H18.5869C19.0231 18.5624 19.4456 18.4102 19.7817 18.1321C20.1177 17.8541 20.3463 17.4675 20.4281 17.0391L21.3619 12.1538C21.3842 12.0195 21.377 11.882 21.3408 11.7508C21.3047 11.6196 21.2404 11.4979 21.1524 11.394C21.0645 11.2902 20.9549 11.2068 20.8315 11.1495C20.708 11.0923 20.5736 11.0626 20.4375 11.0625M5.4375 18.5625C4.94022 18.5625 4.46331 18.365 4.11167 18.0133C3.76004 17.6617 3.5625 17.1848 3.5625 16.6875V6.375C3.5625 5.87772 3.76004 5.40081 4.11167 5.04917C4.46331 4.69754 4.94022 4.5 5.4375 4.5H9.1875L12 7.3125H18.5625C19.0598 7.3125 19.5367 7.51004 19.8883 7.86167C20.24 8.21331 20.4375 8.69022 20.4375 9.1875V11.0625" stroke="#858699" style="stroke:#858699;stroke:color(display-p3 0.5216 0.5255 0.6000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/public/navigations/RolesIcon.svg
+++ b/frontend/public/navigations/RolesIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 11.9024L11.9615 15.1453C11.8112 15.2138 11.6479 15.2494 11.4827 15.2494C11.3175 15.2494 11.1542 15.2138 11.0038 15.1453L4 11.9024M19 15.6531L11.9615 18.8959C11.8112 18.9645 11.6479 19 11.4827 19C11.3175 19 11.1542 18.9645 11.0038 18.8959L4 15.6531M12.0423 11.3831C11.8712 11.4574 11.6866 11.4958 11.5 11.4958C11.3134 11.4958 11.1289 11.4574 10.9577 11.3831L4.3808 8.33645C4.274 8.28258 4.18425 8.20011 4.12154 8.09823C4.05884 7.99635 4.02564 7.87907 4.02564 7.75943C4.02564 7.63979 4.05884 7.52251 4.12154 7.42063C4.18425 7.31876 4.274 7.23629 4.3808 7.18241L10.9577 4.11268C11.1289 4.03835 11.3134 4 11.5 4C11.6866 4 11.8712 4.03835 12.0423 4.11268L18.6192 7.15933C18.7261 7.21321 18.8158 7.29568 18.8785 7.39755C18.9413 7.49943 18.9744 7.61671 18.9744 7.73635C18.9744 7.85599 18.9413 7.97327 18.8785 8.07515C18.8158 8.17703 18.7261 8.2595 18.6192 8.31337L12.0423 11.3831Z" stroke="#858699" style="stroke:#858699;stroke:color(display-p3 0.5216 0.5255 0.6000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/public/navigations/UsersIcon.svg
+++ b/frontend/public/navigations/UsersIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5625 20.4375V18.5625C3.5625 17.5679 3.95759 16.6141 4.66085 15.9108C5.36411 15.2076 6.31794 14.8125 7.3125 14.8125H11.0625C12.0571 14.8125 13.0109 15.2076 13.7142 15.9108C14.4174 16.6141 14.8125 17.5679 14.8125 18.5625V20.4375M15.75 3.68438C16.5566 3.89091 17.2716 4.36003 17.7822 5.01779C18.2927 5.67555 18.5699 6.48453 18.5699 7.31719C18.5699 8.14985 18.2927 8.95883 17.7822 9.61658C17.2716 10.2743 16.5566 10.7435 15.75 10.95M20.4375 20.4375V18.5625C20.4327 17.7348 20.1543 16.932 19.6456 16.2791C19.1368 15.6263 18.4264 15.16 17.625 14.9531M5.4375 7.3125C5.4375 8.30706 5.83259 9.26089 6.53585 9.96415C7.23911 10.6674 8.19294 11.0625 9.1875 11.0625C10.1821 11.0625 11.1359 10.6674 11.8392 9.96415C12.5424 9.26089 12.9375 8.30706 12.9375 7.3125C12.9375 6.31794 12.5424 5.36411 11.8392 4.66085C11.1359 3.95759 10.1821 3.5625 9.1875 3.5625C8.19294 3.5625 7.23911 3.95759 6.53585 4.66085C5.83259 5.36411 5.4375 6.31794 5.4375 7.3125Z" stroke="#858699" style="stroke:#858699;stroke:color(display-p3 0.5216 0.5255 0.6000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/public/organization.svg
+++ b/frontend/public/organization.svg
@@ -0,0 +1,8 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.04492 7.35714V2.07143C5.04492 1.34162 5.63655 0.75 6.36635 0.75H12.3128C13.0426 0.75 13.6342 1.34162 13.6342 2.07143V7.35714C13.6342 8.08694 13.0426 8.67857 12.3128 8.67857H6.36635C5.63655 8.67857 5.04492 8.08694 5.04492 7.35714Z" stroke="#969AF9" style="stroke:#969AF9;stroke:color(display-p3 0.5892 0.6031 0.9766);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.33984 8.67871V13.9644" stroke="#969AF9" style="stroke:#969AF9;stroke:color(display-p3 0.5892 0.6031 0.9766);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.73242 13.9641V12.6427C2.73242 11.9129 3.32405 11.3213 4.05385 11.3213H14.6253C15.3551 11.3213 15.9467 11.9129 15.9467 12.6427V13.9641" stroke="#969AF9" style="stroke:#969AF9;stroke:color(display-p3 0.5892 0.6031 0.9766);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.75 16.6067V15.2853C0.75 14.5555 1.34162 13.9639 2.07143 13.9639H3.39286C4.12266 13.9639 4.71429 14.5555 4.71429 15.2853V16.6067C4.71429 17.3365 4.12266 17.9282 3.39286 17.9282H2.07143C1.34162 17.9282 0.75 17.3365 0.75 16.6067Z" stroke="#969AF9" style="stroke:#969AF9;stroke:color(display-p3 0.5892 0.6031 0.9766);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.35742 16.6067V15.2853C7.35742 14.5555 7.94905 13.9639 8.67885 13.9639H10.0003C10.7301 13.9639 11.3217 14.5555 11.3217 15.2853V16.6067C11.3217 17.3365 10.7301 17.9282 10.0003 17.9282H8.67885C7.94905 17.9282 7.35742 17.3365 7.35742 16.6067Z" stroke="#969AF9" style="stroke:#969AF9;stroke:color(display-p3 0.5892 0.6031 0.9766);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.9648 16.6067V15.2853C13.9648 14.5555 14.5564 13.9639 15.2863 13.9639H16.6077C17.3375 13.9639 17.9291 14.5555 17.9291 15.2853V16.6067C17.9291 17.3365 17.3375 17.9282 16.6077 17.9282H15.2863C14.5564 17.9282 13.9648 17.3365 13.9648 16.6067Z" stroke="#969AF9" style="stroke:#969AF9;stroke:color(display-p3 0.5892 0.6031 0.9766);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/public/profile/PROFILE.svg
+++ b/frontend/public/profile/PROFILE.svg
--- a/frontend/src/app/agents/add/page.jsx
+++ b/frontend/src/app/agents/add/page.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import TextField from "@/app/components/fields/textfield";
+// import Prompts from "@/app/components/prompts/Prompts";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import TopToolTip from "@/app/components/topToolTip/TopToolTip";
+import globalStyle from "../../globalStyle.module.css";
+import createAgentStyle 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="Create New Agent"
+            state="add"
+          />
+          {/* Create Crediantial Container */}
+          <div className={createAgentStyle.createAgentContainer}>
+            <TopToolTip />
+            <div className={createAgentStyle.inputContainer}>
+              {/* Header */}
+              <div></div>
+              {/* Agent name input */}
+              <div></div>
+              {/* Kubernetes API input */}
+              <div></div>
+              {/* Checkbox */}
+              <div></div>
+              {/* Agent endpoint */}
+              <div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;
--- a/frontend/src/app/agents/add/styles.module.css
+++ b/frontend/src/app/agents/add/styles.module.css
@@ -0,0 +1,17 @@
+.createAgentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.inputContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 8px;
+}
--- a/frontend/src/app/agents/page.jsx
+++ b/frontend/src/app/agents/page.jsx
@@ -0,0 +1,204 @@
+import React from "react";
+import styles from "./styles.module.css";
+import TopHeader from "../components/topHeader/TopHeader";
+import globalStyle from "../globalStyle.module.css";
+const AgentsPage = () => {
+  const sampleData = [
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+    {
+      name: "DOKS OneCB Dev",
+      endPoint: "http://100.64.1.9:6969",
+      type: "Tailscale",
+      proxyName: "doks-onecbdev-kube-apiserver-proxy",
+      dateCreated: "2/11/2026",
+    },
+  ];
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add Agents" topbarTitle="Agents" />
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th width="25%">Name</th>
+                  <th>Endpoint</th>
+                  <th>Type</th>
+                  <th>Proxy Name</th>
+                  <th>Date Created</th>
+
+                  <th width="10%"></th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {sampleData.map((org, index) => {
+                  return (
+                    <tr key={index}>
+                      <td>{org.name}</td>
+                      <td>{org.endPoint}</td>
+                      <td>
+                        <div className={styles.type}>{org.type}</div>
+                      </td>
+                      <td>{org.proxyName}</td>
+                      <td>{org.dateCreated}</td>
+                      <td>
+                        <div className={styles.actions}>
+                          <div>
+                            <button className={styles.iconButton}>
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width={20}
+                                height={20}
+                                viewBox="0 0 20 20"
+                                fill="none"
+                              >
+                                <path
+                                  d="M8.40234 9.99957C8.40234 10.4232 8.57062 10.8294 8.87016 11.129C9.1697 11.4285 9.57596 11.5968 9.99957 11.5968C10.4232 11.5968 10.8294 11.4285 11.129 11.129C11.4285 10.8294 11.5968 10.4232 11.5968 9.99957C11.5968 9.57596 11.4285 9.1697 11.129 8.87016C10.8294 8.57062 10.4232 8.40234 9.99957 8.40234C9.57596 8.40234 9.1697 8.57062 8.87016 8.87016C8.57062 9.1697 8.40234 9.57596 8.40234 9.99957Z"
+                                  stroke="#969AF9"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                />
+                                <path
+                                  d="M17.1875 9.99967C15.2708 13.1941 12.875 14.7913 10 14.7913C7.125 14.7913 4.72917 13.1941 2.8125 9.99967C4.72917 6.80523 7.125 5.20801 10 5.20801C12.875 5.20801 15.2708 6.80523 17.1875 9.99967Z"
+                                  stroke="#969AF9"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                          <div>
+                            <button className={styles.iconButton}>
+                              <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="#969AF9"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                />
+                                <path
+                                  d="M8.40234 9.20117V13.9928"
+                                  stroke="#969AF9"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                />
+                                <path
+                                  d="M11.5977 9.20117V13.9928"
+                                  stroke="#969AF9"
+                                  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="#969AF9"
+                                  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="#969AF9"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentsPage;
--- a/frontend/src/app/agents/styles.module.css
+++ b/frontend/src/app/agents/styles.module.css
@@ -0,0 +1,100 @@
+.tableContainer {
+  width: 100%;
+}
+.tableContainer > table,
+.tableContainer > table > thead {
+  border-collapse: collapse;
+  border: none;
+  width: 100%;
+}
+.tableContainer {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+  position: relative;
+}
+.tableContainer th {
+  background-color: #1c1d2b;
+  top: 0;
+  position: sticky;
+}
+.tableContainer > table > thead > tr > th,
+.tableContainer > table > tbody > tr > td {
+  padding: 12px 24px;
+  gap: 17px;
+  text-align: start;
+}
+
+.tableContainer > table > thead > tr {
+  border-bottom: 1px solid #212235;
+  background: #1c1d2b;
+}
+.tableContainer > table > tbody > tr > td {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.type {
+  display: flex;
+  padding: 4px 0px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 6px;
+  border: 0.5px solid #5359f2;
+  background: rgba(83, 89, 242, 0.25);
+}
+.type > p {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.tableContainer > table > tbody > tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+  cursor: pointer;
+}
+.tableContainer > table > tbody > tr:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  background: rgba(129, 135, 255, 0.05);
+}
+.tableContainer > table > thead > tr > th {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.iconButton {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: rgba(255, 255, 255, 0);
+  outline: none;
+  border: 1px solid #959aff00;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.iconButton:hover {
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+.iconButton:hover path {
+  stroke: white;
+}
+.actions {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+}
--- a/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
+++ b/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./styles.module.css";
+import AddIcon from "../../icons/add";
+const PrimaryButton = (props) => {
+  return (
+    <button className={styles.button} {...props}>
+      <AddIcon width={20} height={20} />
+      Add
+    </button>
+  );
+};
+
+export default PrimaryButton;
--- a/frontend/src/app/components/buttons/primarybutton/styles.module.css
+++ b/frontend/src/app/components/buttons/primarybutton/styles.module.css
@@ -0,0 +1,21 @@
+.button {
+  display: flex;
+  padding: 8px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  font-family: inter;
+  border-radius: 6px;
+  border: 0.5px solid #8187ff;
+  background: rgba(83, 89, 242, 0.25);
+  color: #fff;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.button:hover {
+  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
+}
--- a/frontend/src/app/components/checkbox/CheckBox.jsx
+++ b/frontend/src/app/components/checkbox/CheckBox.jsx
@@ -0,0 +1,42 @@
+"use client";
+import { useState } from "react";
+import CheckIcon from "../icons/check";
+import styles from "./styles.module.css";
+import CloseIcon from "../icons/close";
+import CheckedIcon from "../icons/switchIcons/checked";
+import UnCheckedIcon from "../icons/switchIcons/unchecked";
+
+const CustomCheckbox = ({ checked, onChange, id }) => {
+  const [isChecked, setIsChecked] = useState(false);
+  return (
+    <>
+      <input
+        type="checkbox"
+        id={id}
+        className={styles.check}
+        checked={checked}
+        onChange={() => {
+          setIsChecked(!isChecked);
+          onChange;
+        }}
+      />
+
+      <label htmlFor={id} className={styles.switch}>
+        <span className={styles.knob}>
+          {isChecked ? (
+            <CheckedIcon
+              width={16}
+              height={16}
+              color="#4F378A"
+              viewBox="0 0 20 20"
+            />
+          ) : (
+            <UnCheckedIcon width={16} height={16} color="#fff" />
+          )}
+        </span>
+      </label>
+    </>
+  );
+};
+
+export default CustomCheckbox;
--- a/frontend/src/app/components/checkbox/styles.module.css
+++ b/frontend/src/app/components/checkbox/styles.module.css
@@ -0,0 +1,46 @@
+.switch {
+  display: flex;
+  width: 53px;
+
+  height: 33px;
+  align-items: center;
+  background-color: white;
+  cursor: pointer;
+  padding: 0 2px;
+  border-radius: 150px;
+  position: relative;
+  border: 2px solid #6d6d6d;
+  overflow: hidden;
+}
+
+.check {
+  display: none;
+}
+
+/* The knob (replaces ::before) */
+.knob {
+  width: 25px;
+  height: 25px;
+  background-color: #6d6d6d;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  transition: all 0.15s ease-in-out;
+}
+.knob:hover {
+  box-shadow: 0 0 0px 5px #33333327;
+  background-color: #333;
+}
+
+.check:checked + .switch .knob {
+  transform: translateX(75%);
+  background-color: white;
+}
+
+/* Optional background change */
+.check:checked + .switch {
+  background-color: #8187ff;
+  border: 2px solid #8187ff;
+}
--- a/frontend/src/app/components/fields/styles.module.css
+++ b/frontend/src/app/components/fields/styles.module.css
@@ -0,0 +1,38 @@
+.input {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #616583;
+  background-color: transparent;
+  color: white;
+  font-family: Inter;
+  font-size: 16px;
+  outline: none;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  caret-color: #575bc7;
+}
+.input:focus,
+.input:active {
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  background: rgba(75, 79, 109, 0.25);
+}
+.input:hover {
+  background: rgba(75, 79, 109, 0.25);
+}
+.input::placeholder {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
--- a/frontend/src/app/components/fields/textfield.jsx
+++ b/frontend/src/app/components/fields/textfield.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import styles from "./styles.module.css";
+const TextField = ({ placeHolder }) => {
+  return (
+    <input className={styles.input} type="text" placeholder={placeHolder} />
+  );
+};
+
+export default TextField;
--- a/frontend/src/app/components/header/Header.jsx
+++ b/frontend/src/app/components/header/Header.jsx
@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+import styles from "./styles.module.css";
+import HeaderDetails from "./components/HeaderDetails";
+
+const Header = () => {
+  return (
+    <div className={styles.mainContainer}>
+      <HeaderDetails />
+    </div>
+  );
+};
+
+export default Header;
--- a/frontend/src/app/components/header/components/HeaderDetails.jsx
+++ b/frontend/src/app/components/header/components/HeaderDetails.jsx
@@ -0,0 +1,281 @@
+"use client";
+
+import React from "react";
+import orgStyle from "./Organization.module.css";
+import profileStyle from "./Profile.module.css";
+
+import { useState } from "react";
+
+const HeaderDetails = () => {
+  const orgList = [
+    { name: "Project Moonshot Inc." },
+    { name: "Organization X" },
+    { name: "Organization Y" },
+    { name: "Organization Z" },
+  ];
+  const [openOrgDropdown, setOpenOrgDropdown] = useState(false);
+  const [openProfileDropdown, setOpenProfileDropdown] = useState(false);
+  const [selectedOrg, setSelectedOrg] = useState(null);
+
+  const handleOrgSelect = (index) => {
+    setSelectedOrg(index);
+  };
+
+  return (
+    <>
+      {/* Organization and Dropdown Section*/}
+      <div className={orgStyle.organizationContainer}>
+        <div className={orgStyle.orgContainer}>
+          {/* Logo */}
+          <div className={orgStyle.orgLogo}></div>
+          <div className={orgStyle.orgName}>
+            <p>Organization</p>
+            <div className={orgStyle.dropdownContainer}>
+              {/* Dropdown Menu*/}
+              {openOrgDropdown && (
+                <div className={orgStyle.dropdown}>
+                  {/* Organization Header and Search  */}
+                  <div className={orgStyle.orgSearchContainer}>
+                    {/* Header */}
+                    <div className={orgStyle.createBtnContainer}>
+                      <p>Organization</p>
+                      <div className={orgStyle.createBtn}>
+                        <p>Create</p>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                        >
+                          <g clipPath="url(#clip0_548_2226)">
+                            <path
+                              d="M8.00034 14.8718C11.7954 14.8718 14.8718 11.7954 14.8718 8.00034C14.8718 4.20535 11.7954 1.12891 8.00034 1.12891C4.20535 1.12891 1.12891 4.20535 1.12891 8.00034C1.12891 11.7954 4.20535 14.8718 8.00034 14.8718Z"
+                              stroke="#8287FF"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M8 4.8291V11.172"
+                              stroke="#8287FF"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M4.82812 8H11.171"
+                              stroke="#8287FF"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </g>
+                          <defs>
+                            <clipPath id="clip0_548_2226">
+                              <rect width="16" height="16" fill="white" />
+                            </clipPath>
+                          </defs>
+                        </svg>
+                      </div>
+                    </div>
+                    {/* Search */}
+                    <div className={orgStyle.srchInputContainer}>
+                      <div className={orgStyle.srchInputGroup}>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="18"
+                          height="18"
+                          viewBox="0 0 18 18"
+                          fill="none"
+                        >
+                          <g clipPath="url(#clip0_23_1333)">
+                            <path
+                              d="M7.79548 14.424C11.4568 14.424 14.4249 11.4559 14.4249 7.7945C14.4249 4.13315 11.4568 1.16504 7.79548 1.16504C4.13412 1.16504 1.16602 4.13315 1.16602 7.7945C1.16602 11.4559 4.13412 14.424 7.79548 14.424Z"
+                              stroke="#858699"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M16.8359 16.835L12.6172 12.6162"
+                              stroke="#858699"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </g>
+                          <defs>
+                            <clipPath id="clip0_23_1333">
+                              <rect width="18" height="18" fill="white" />
+                            </clipPath>
+                          </defs>
+                        </svg>
+                        <input
+                          className={orgStyle.placeholderTxt}
+                          type="text"
+                          name="search"
+                          id=""
+                          placeholder="Search"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Select Options */}
+                  <div className={orgStyle.optionsContainer}>
+                    {orgList.map((org, index) => {
+                      return (
+                        <div
+                          className={orgStyle.orgList}
+                          key={index}
+                          onClick={() => handleOrgSelect(index)}
+                        >
+                          <div
+                            className={`${orgStyle.iconTxt} ${index === selectedOrg ? orgStyle.active : ""}`}
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="20"
+                              height="20"
+                              viewBox="0 0 20 20"
+                              fill="none"
+                            >
+                              <path
+                                d="M7.87565 14.8747L3.20898 10.208L4.10482 9.31217L7.87565 13.083L15.8757 5.08301L16.7715 5.97884L7.87565 14.8747Z"
+                                fill="#8287FF"
+                                style={{
+                                  fill: "#8287FF",
+                                  fillOpacity: 1,
+                                }}
+                              />
+                            </svg>
+                            <p>{org.name}</p>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+              {/* Button */}
+              <div
+                className={orgStyle.dropdownBtn}
+                onClick={() => setOpenOrgDropdown(!openOrgDropdown)}
+              >
+                <p>Project Moonshot Inc.</p>
+                <div>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="12"
+                    height="12"
+                    viewBox="0 0 12 12"
+                    fill="none"
+                  >
+                    <path
+                      d="M1.03906 3.51953L6.00031 8.48083L10.9616 3.51953"
+                      stroke="#969AF9"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Profile Section */}
+      <div
+        className={profileStyle.profileContainer}
+        onClick={() => setOpenProfileDropdown(!openProfileDropdown)}
+      >
+        {/* Profile */}
+        <div className={profileStyle.profileBadge}>
+          {/* Username and Role*/}
+          <div className={profileStyle.nameRole}>
+            <p className={profileStyle.userName}>JM Grills</p>
+            <p className={profileStyle.userRole}>Super Admin</p>
+          </div>
+
+          {/* User profile*/}
+          <div className={profileStyle.userImgContainer}>
+            <div className={profileStyle.userPic}></div>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <path
+                d="M12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 14 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 4C13.1046 4 14 4.89543 14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4Z"
+                fill="#858699"
+              />
+            </svg>
+          </div>
+        </div>
+
+        {/* Dropdown */}
+        {openProfileDropdown && (
+          <div className={profileStyle.dropdownContainer}>
+            {/* Settings */}
+            <div className={profileStyle.settingsBtn}>
+              {/* Icon */}
+              <div className={profileStyle.btn}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={20}
+                  height={20}
+                  viewBox="0 0 20 20"
+                  fill="none"
+                >
+                  <path
+                    d="M8.60417 3.5975C8.95917 2.13417 11.0408 2.13417 11.3958 3.5975C11.4491 3.81733 11.5535 4.02148 11.7006 4.19333C11.8477 4.36518 12.0332 4.49988 12.2422 4.58645C12.4512 4.67303 12.6776 4.70904 12.9032 4.69156C13.1287 4.67407 13.3469 4.60359 13.54 4.48583C14.8258 3.7025 16.2983 5.17417 15.515 6.46083C15.3974 6.65388 15.327 6.87195 15.3096 7.09731C15.2922 7.32267 15.3281 7.54897 15.4146 7.75782C15.5011 7.96666 15.6356 8.15215 15.8073 8.29921C15.9789 8.44627 16.1829 8.55075 16.4025 8.60417C17.8658 8.95917 17.8658 11.0408 16.4025 11.3958C16.1827 11.4491 15.9785 11.5535 15.8067 11.7006C15.6348 11.8477 15.5001 12.0332 15.4135 12.2422C15.327 12.4512 15.291 12.6776 15.3084 12.9032C15.3259 13.1287 15.3964 13.3469 15.5142 13.54C16.2975 14.8258 14.8258 16.2983 13.5392 15.515C13.3461 15.3974 13.1281 15.327 12.9027 15.3096C12.6773 15.2922 12.451 15.3281 12.2422 15.4146C12.0333 15.5011 11.8479 15.6356 11.7008 15.8073C11.5537 15.9789 11.4492 16.1829 11.3958 16.4025C11.0408 17.8658 8.95917 17.8658 8.60417 16.4025C8.5509 16.1827 8.44648 15.9785 8.29941 15.8067C8.15233 15.6348 7.96676 15.5001 7.75779 15.4135C7.54882 15.327 7.32236 15.291 7.09685 15.3084C6.87133 15.3259 6.65313 15.3964 6.46 15.5142C5.17417 16.2975 3.70167 14.8258 4.485 13.5392C4.60258 13.3461 4.67296 13.1281 4.6904 12.9027C4.70785 12.6773 4.67187 12.451 4.58539 12.2422C4.49892 12.0333 4.36438 11.8479 4.19273 11.7008C4.02107 11.5537 3.81714 11.4492 3.5975 11.3958C2.13417 11.0408 2.13417 8.95917 3.5975 8.60417C3.81733 8.5509 4.02148 8.44648 4.19333 8.29941C4.36518 8.15233 4.49988 7.96676 4.58645 7.75779C4.67303 7.54882 4.70904 7.32236 4.69156 7.09685C4.67407 6.87133 4.60359 6.65313 4.48583 6.46C3.7025 5.17417 5.17417 3.70167 6.46083 4.485C7.29417 4.99167 8.37417 4.54333 8.60417 3.5975Z"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M7.5 10C7.5 10.663 7.76339 11.2989 8.23223 11.7678C8.70107 12.2366 9.33696 12.5 10 12.5C10.663 12.5 11.2989 12.2366 11.7678 11.7678C12.2366 11.2989 12.5 10.663 12.5 10C12.5 9.33696 12.2366 8.70107 11.7678 8.23223C11.2989 7.76339 10.663 7.5 10 7.5C9.33696 7.5 8.70107 7.76339 8.23223 8.23223C7.76339 8.70107 7.5 9.33696 7.5 10Z"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+              <p>Settings</p>
+            </div>
+            {/* Logout */}
+            <div className={profileStyle.logoutBtn}>
+              {/* Icon */}
+              <div className={profileStyle.btn}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={20}
+                  height={20}
+                  viewBox="0 0 20 20"
+                  fill="none"
+                >
+                  <path
+                    d="M11.5625 6.875V5.3125C11.5625 4.8981 11.3979 4.50067 11.1049 4.20765C10.8118 3.91462 10.4144 3.75 10 3.75H4.53125C4.11685 3.75 3.71942 3.91462 3.4264 4.20765C3.13337 4.50067 2.96875 4.8981 2.96875 5.3125V14.6875C2.96875 15.1019 3.13337 15.4993 3.4264 15.7924C3.71942 16.0854 4.11685 16.25 4.53125 16.25H10C10.4144 16.25 10.8118 16.0854 11.1049 15.7924C11.3979 15.4993 11.5625 15.1019 11.5625 14.6875V13.125M7.65625 10H17.0312M17.0312 10L14.6875 7.65625M17.0312 10L14.6875 12.3437"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+              <p>Logout</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default HeaderDetails;
--- a/frontend/src/app/components/header/components/Organization.module.css
+++ b/frontend/src/app/components/header/components/Organization.module.css
@@ -0,0 +1,252 @@
+/* Organization Header and Dropdown*/
+.organizationContainer {
+  display: flex;
+  align-items: center;
+}
+.orgContainer {
+  display: flex;
+  padding: 6px;
+  align-items: center;
+  gap: 16px;
+  border-radius: 4px;
+}
+.orgLogo {
+  width: 38px;
+  height: 38px;
+  aspect-ratio: 1/1;
+  border-radius: 100px;
+  background:
+    url(/images/logo.png) lightgray 50% / cover no-repeat,
+    #232537;
+  background:
+    url(/images/logo.png) lightgray 50% / cover no-repeat,
+    color(display-p3 0.1392 0.1443 0.2106);
+}
+
+.orgName {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.orgName > p {
+  color: #eeeffd;
+  color: color(display-p3 0.9333 0.9373 0.9882);
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.dropdownContainer {
+  /* width: 201px;
+  height: 28px; */
+  cursor: pointer;
+  position: relative;
+}
+
+.dropdownBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+}
+.dropdownBtn > p {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.dropdownBtn > div {
+  display: inline-flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 100px;
+  border: 1px solid #b8badc00;
+}
+.dropdownBtn > div:hover {
+  border: 1px solid #b8badc;
+  background: linear-gradient(
+    180deg,
+    rgba(149, 154, 255, 0.25) 0%,
+    rgba(88, 91, 151, 0.25) 100%
+  );
+}
+.dropdown {
+  display: inline-flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  border-radius: 6px;
+  background: #2d3143;
+  background: color(display-p3 0.1804 0.1922 0.2588);
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  margin-top: 8px;
+  left: 0;
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.orgSearchContainer {
+  display: flex;
+  width: 318px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.createBtnContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+.createBtnContainer > p {
+  color: #a3a7c6;
+  color: color(display-p3 0.6425 0.6544 0.7649);
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.createBtn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+}
+.createBtn > p {
+  color: #8187ff;
+  color: color(display-p3 0.5098 0.5294 1);
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.createBtn:hover > p {
+  color: #9ba0ff;
+  color: color(display-p3 0.6127 0.6282 1);
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-skip-ink: auto;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+}
+.createBtn:hover > svg path {
+  stroke: #9ba0ff;
+  stroke-width: 1.5px;
+  stroke: color(display-p3 0.6127 0.6282 1);
+}
+
+.srchInputContainer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+.srchInputGroup {
+  display: flex;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 9px;
+  flex: 1 0 0;
+  border-radius: 4px;
+  background: #282c3c;
+  background: color(display-p3 0.1593 0.1702 0.2316);
+}
+
+.placeholderTxt {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: Inter;
+  font-size: 16px;
+}
+.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;
+  letter-spacing: 0.08px;
+}
+
+.optionsContainer {
+  display: flex;
+  width: 318px;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.orgList:hover {
+  border-radius: 4px;
+  background: #3c4159;
+  color: #acb0ff;
+  background: color(display-p3 0.2398 0.2548 0.3399);
+}
+
+.orgList {
+  display: flex;
+  padding: 6px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+}
+.orgList:hover .iconTxt p {
+  color: #acb0ff;
+}
+.iconTxt {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.iconTxt > svg {
+  opacity: 0;
+}
+.active > svg {
+  opacity: 1;
+}
+
+.iconTxt > p {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
--- a/frontend/src/app/components/header/components/Profile.module.css
+++ b/frontend/src/app/components/header/components/Profile.module.css
@@ -0,0 +1,140 @@
+/* Profile and Dropdown */
+.profileContainer {
+  display: flex;
+  height: 44px;
+  flex-direction: column;
+  align-items: flex-end;
+  cursor: pointer;
+  position: relative;
+}
+.profileBadge {
+  display: flex;
+  padding: 6px 0 6px 8px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  border-radius: 6px;
+}
+.profileBadge:hover {
+  border-radius: 6px;
+  background: #21232f;
+  background: color(display-p3 0.1294 0.1373 0.1804);
+}
+
+.nameRole {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 6px;
+}
+.userName {
+  align-self: stretch;
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  text-align: right;
+  leading-trim: both;
+  text-edge: cap;
+  font-family: Inter;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  /* line-height: 30px; 200% */
+  line-height: 1;
+  letter-spacing: -0.15px;
+}
+.userRole {
+  align-self: stretch;
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  text-align: right;
+  leading-trim: both;
+  text-edge: cap;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  /* line-height: 30px; 230.769% */
+  line-height: 0.5;
+  letter-spacing: -0.26px;
+}
+.userImgContainer {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.userPic {
+  width: 32px;
+  height: 32px;
+  aspect-ratio: 1/1;
+  border-radius: 32px;
+  background: url(/profile/PROFILE.svg) lightgray 50% / cover no-repeat;
+}
+
+.dropdownContainer {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  width: 100%;
+  left: 0;
+  border-radius: 6px;
+  background: #2d3144;
+  background: color(display-p3 0.1787 0.1913 0.2605);
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
+  cursor: pointer;
+  position: absolute;
+  z-index: 10;
+  top: 100%;
+  margin-top: 3px;
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.settingsBtn,
+.logoutBtn {
+  display: flex;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  color: #acb0ff;
+  border-radius: 4px;
+}
+.settingsBtn:hover,
+.logoutBtn:hover {
+  background: #3c4159;
+  background: color(display-p3 0.2392 0.2549 0.3412);
+
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+}
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.settingsBtn,
+.logoutBtn > p {
+  color: #acb0ff;
+  color: color(display-p3 0.678 0.6895 1);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
--- a/frontend/src/app/components/header/styles.module.css
+++ b/frontend/src/app/components/header/styles.module.css
@@ -0,0 +1,10 @@
+.mainContainer {
+  display: flex;
+  height: 84px;
+  padding: 12px 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+  border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
+}
--- a/frontend/src/app/components/icons/add.jsx
+++ b/frontend/src/app/components/icons/add.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+const AddIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M10 4.41016V15.5907"
+        stroke="currentColor"
+        strokeOpacity={1}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.41016 10H15.5907"
+        stroke="currentColor"
+        strokeOpacity={1}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default AddIcon;
--- a/frontend/src/app/components/icons/agent.jsx
+++ b/frontend/src/app/components/icons/agent.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+const AgentIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <g clipPath="url(#clip0_306_15353)">
+        <path
+          d="M8.57278 4.14746H7.66494C7.44193 4.14812 7.22431 4.21611 7.0406 4.34254C6.85688 4.46898 6.71563 4.64794 6.63534 4.85601L6.15928 6.08489L4.52076 7.01487L3.21437 6.81558C2.99685 6.78606 2.77546 6.82186 2.57833 6.91846C2.3812 7.01505 2.21724 7.16807 2.10727 7.35807L1.66443 8.13303C1.55095 8.32607 1.49867 8.54895 1.51448 8.7723C1.5303 8.99565 1.61346 9.20896 1.753 9.38407L2.58332 10.4137V12.2736L1.77514 13.3032C1.6356 13.4783 1.55244 13.6916 1.53663 13.915C1.52081 14.1383 1.5731 14.3612 1.68657 14.5543L2.12941 15.3292C2.23938 15.5192 2.40335 15.6722 2.60046 15.7688C2.79759 15.8654 3.019 15.9012 3.23652 15.8718L4.54291 15.6725L6.15928 16.6024L6.63534 17.8313C6.71563 18.0393 6.85688 18.2183 7.0406 18.3448C7.22431 18.4711 7.44193 18.5392 7.66494 18.5399H8.59491C8.81793 18.5392 9.03556 18.4711 9.21927 18.3448C9.40299 18.2183 9.54424 18.0393 9.62453 17.8313L10.1006 16.6024L11.717 15.6725L13.0234 15.8718C13.2409 15.9012 13.4623 15.8654 13.6594 15.7688C13.8565 15.6722 14.0206 15.5192 14.1305 15.3292L14.5733 14.5543C14.6868 14.3612 14.739 14.1383 14.7233 13.915C14.7074 13.6916 14.6243 13.4783 14.4848 13.3032L13.6544 12.2736V11.0744M5.90464 11.3436C5.90464 11.7816 6.03451 12.2097 6.27781 12.5738C6.52112 12.9379 6.86692 13.2217 7.27152 13.3893C7.67611 13.5569 8.12131 13.6007 8.55083 13.5153C8.98035 13.4299 9.37489 13.219 9.68455 12.9093C9.99421 12.5997 10.2051 12.2051 10.2905 11.7756C10.376 11.3461 10.3321 10.9009 10.1645 10.4963C9.99693 10.0917 9.71313 9.7459 9.34901 9.5026C8.98489 9.2593 8.55679 9.12943 8.11886 9.12943C7.53161 9.12943 6.96842 9.36272 6.55317 9.77796C6.13793 10.1932 5.90464 10.7564 5.90464 11.3436Z"
+          stroke="#858699"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+        <path
+          d="M11.4547 5.43105C11.049 5.36047 11.049 4.77804 11.4547 4.70745C12.9245 4.45174 14.0936 3.33217 14.4126 1.87474L14.437 1.76303C14.5249 1.36204 15.0958 1.35954 15.1871 1.75975L15.2168 1.88994C15.5477 3.3405 16.717 4.4506 18.1829 4.70561C18.5907 4.77656 18.5907 5.36195 18.1829 5.4329C16.717 5.68791 15.5477 6.79801 15.2168 8.24857L15.1871 8.37876C15.0958 8.77897 14.5249 8.77647 14.437 8.37548L14.4126 8.26377C14.0936 6.80634 12.9245 5.68677 11.4547 5.43105Z"
+          stroke="#858699"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_306_15353">
+          <rect
+            width="20"
+            height="20"
+            fill="white"
+            style={{ fillOpacity: 1 }}
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default AgentIcon;
--- a/frontend/src/app/components/icons/back.jsx
+++ b/frontend/src/app/components/icons/back.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+const BackIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M5 12H19"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 12L11 18"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 12L11 6"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default BackIcon;
--- a/frontend/src/app/components/icons/check.jsx
+++ b/frontend/src/app/components/icons/check.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const CheckIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
+        stroke="white"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CheckIcon;
--- a/frontend/src/app/components/icons/circledCheck.jsx
+++ b/frontend/src/app/components/icons/circledCheck.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const CircledChececkIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M7.5 10L9.16667 11.6667L12.5 8.33333M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
+        stroke="#016730"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CircledChececkIcon;
--- a/frontend/src/app/components/icons/clone.jsx
+++ b/frontend/src/app/components/icons/clone.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+const CloneIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M7.20898 9.76388C7.20898 9.08602 7.47826 8.43593 7.95758 7.95661C8.4369 7.47729 9.087 7.20801 9.76486 7.20801H18.0698C18.7476 7.20801 19.3977 7.47729 19.8771 7.95661C20.3564 8.43593 20.6257 9.08602 20.6257 9.76388V18.0688C20.6257 18.7467 20.3564 19.3968 19.8771 19.8761C19.3977 20.3554 18.7476 20.6247 18.0698 20.6247H9.76486C9.087 20.6247 8.4369 20.3554 7.95758 19.8761C7.47826 19.3968 7.20898 18.7467 7.20898 18.0688V9.76388Z"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.34483 16.5396C4.05062 16.3725 3.80591 16.1304 3.63557 15.838C3.46523 15.5456 3.37533 15.2134 3.375 14.875V5.29167C3.375 4.2375 4.2375 3.375 5.29167 3.375H14.875C15.5938 3.375 15.9848 3.74396 16.3125 4.33333"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.041 13.917H16.791"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.916 11.042V16.792"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CloneIcon;
--- a/frontend/src/app/components/icons/close.jsx
+++ b/frontend/src/app/components/icons/close.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+const CloseIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M20.7077 7.29199L7.29102 20.7087"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.29102 7.29199L20.7077 20.7087"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CloseIcon;
--- a/frontend/src/app/components/icons/credentials.jsx
+++ b/frontend/src/app/components/icons/credentials.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const CredentialsIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4.03125 5.90625L5.4375 7.3125L7.78125 4.96875M4.03125 11.5312L5.4375 12.9375L7.78125 10.5938M4.03125 17.1562L5.4375 18.5625L7.78125 16.2188M11.0625 6.375H19.5M11.0625 12H19.5M11.0625 17.625H19.5"
+        stroke="#858699"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CredentialsIcon;
--- a/frontend/src/app/components/icons/delete.jsx
+++ b/frontend/src/app/components/icons/delete.jsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+const DeleteIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M3.61133 6.00684H16.3891"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.40234 9.20117V13.9928"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.5977 9.20117V13.9928"
+        stroke="#969AF9"
+        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="#969AF9"
+        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="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default DeleteIcon;
--- a/frontend/src/app/components/icons/download.jsx
+++ b/frontend/src/app/components/icons/download.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+const DownloadIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <g clipPath="url(#clip0_306_15402)">
+        <path
+          d="M7.98047 13.6074L11.9983 17.6253L16.0162 13.6074"
+          stroke="#8287FF"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+        <path
+          d="M12 17.625V6.375"
+          stroke="#8287FF"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+        <path
+          d="M11.9992 22.4466C17.7686 22.4466 22.4456 17.7696 22.4456 12.0001C22.4456 6.23074 17.7686 1.55371 11.9992 1.55371C6.22976 1.55371 1.55273 6.23074 1.55273 12.0001C1.55273 17.7696 6.22976 22.4466 11.9992 22.4466Z"
+          stroke="#8287FF"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_306_15402">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            style={{ fillOpacity: 1 }}
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default DownloadIcon;
--- a/frontend/src/app/components/icons/env.jsx
+++ b/frontend/src/app/components/icons/env.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+const EnviromentIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M10.3723 16.8874C9.70785 17.0716 8.90927 16.7502 8.70885 15.9223C8.65958 15.719 8.563 15.5301 8.42695 15.3712C8.29091 15.2122 8.11925 15.0876 7.92596 15.0075C7.73266 14.9274 7.52319 14.8941 7.31458 14.9103C7.10598 14.9265 6.90414 14.9917 6.7255 15.1006C5.5361 15.8252 4.17404 14.4639 4.89862 13.2737C5.00739 13.0952 5.07249 12.8934 5.08862 12.685C5.10476 12.4765 5.07148 12.2672 4.99149 12.074C4.9115 11.8808 4.78705 11.7093 4.62827 11.5732C4.46949 11.4372 4.28085 11.3406 4.07769 11.2911C2.7241 10.9628 2.7241 9.03723 4.07769 8.70885C4.28103 8.65958 4.46987 8.563 4.62883 8.42695C4.78779 8.29091 4.91239 8.11925 4.99247 7.92596C5.07255 7.73266 5.10586 7.52319 5.08969 7.31458C5.07352 7.10598 5.00832 6.90414 4.8994 6.7255C4.17481 5.5361 5.5361 4.17404 6.72627 4.89862C7.4971 5.36729 8.4961 4.95258 8.70885 4.07769C9.03723 2.7241 10.9628 2.7241 11.2911 4.07769C11.3404 4.28103 11.437 4.46987 11.573 4.62883C11.7091 4.78779 11.8807 4.91239 12.074 4.99247C12.2673 5.07255 12.4768 5.10586 12.6854 5.08969C12.894 5.07352 13.0959 5.00832 13.2745 4.8994C14.4639 4.17481 15.826 5.5361 15.1014 6.72627C14.9926 6.90484 14.9275 7.10655 14.9114 7.31501C14.8952 7.52347 14.9285 7.7328 15.0085 7.92598C15.0885 8.11916 15.2129 8.29074 15.3717 8.42677C15.5305 8.5628 15.7191 8.65945 15.9223 8.70885C16.7548 8.91081 17.0755 9.7171 16.8835 10.3839"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.084 15.3955H17.709"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.3965 13.083V17.708"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.6875 10C7.6875 10.6133 7.93114 11.2015 8.36482 11.6352C8.79849 12.0689 9.38669 12.3125 10 12.3125C10.6133 12.3125 11.2015 12.0689 11.6352 11.6352C12.0689 11.2015 12.3125 10.6133 12.3125 10C12.3125 9.38669 12.0689 8.79849 11.6352 8.36482C11.2015 7.93114 10.6133 7.6875 10 7.6875C9.38669 7.6875 8.79849 7.93114 8.36482 8.36482C7.93114 8.79849 7.6875 9.38669 7.6875 10Z"
+        stroke="#8287FF"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default EnviromentIcon;
--- a/frontend/src/app/components/icons/home.jsx
+++ b/frontend/src/app/components/icons/home.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+const HomeIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M5.4375 12H3.5625L12 3.5625L20.4375 12H18.5625"
+        stroke="#969AF9"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.4375 12V18.5625C5.4375 19.0598 5.63504 19.5367 5.98667 19.8883C6.33831 20.24 6.81522 20.4375 7.3125 20.4375H16.6875C17.1848 20.4375 17.6617 20.24 18.0133 19.8883C18.365 19.5367 18.5625 19.0598 18.5625 18.5625V12"
+        stroke="#969AF9"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.125 12H13.875V15.75H10.125V12Z"
+        stroke="#969AF9"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default HomeIcon;
--- a/frontend/src/app/components/icons/key.jsx
+++ b/frontend/src/app/components/icons/key.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const KeyIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M14.875 9.12482H14.8846M16.3652 4.18269L19.8171 7.63461C20.0732 7.89064 20.2763 8.1946 20.4149 8.52913C20.5535 8.86367 20.6248 9.22223 20.6248 9.58434C20.6248 9.94644 20.5535 10.305 20.4149 10.6395C20.2763 10.9741 20.0732 11.278 19.8171 11.5341L17.2843 14.0669C17.0282 14.323 16.7243 14.5261 16.3897 14.6647C16.0552 14.8033 15.6966 14.8746 15.3345 14.8746C14.9724 14.8746 14.6139 14.8033 14.2793 14.6647C13.9448 14.5261 13.6408 14.323 13.3848 14.0669L13.0963 13.7785L6.81158 20.0632C6.49315 20.3816 6.07278 20.5777 5.62421 20.6171L5.4565 20.6248H4.33333C4.09861 20.6248 3.87205 20.5386 3.69664 20.3826C3.52123 20.2267 3.40917 20.0117 3.38171 19.7786L3.375 19.6665V18.5433C3.37511 18.0933 3.53354 17.6577 3.82254 17.3128L3.93658 17.1882L4.33333 16.7915H6.25V14.8748H8.16667V12.9581L10.2213 10.9035L9.93287 10.615C9.67681 10.359 9.47368 10.055 9.3351 9.7205C9.19651 9.38596 9.12518 9.0274 9.12518 8.66529C9.12518 8.30319 9.19651 7.94463 9.3351 7.61009C9.47368 7.27556 9.67681 6.97159 9.93287 6.71557L12.4657 4.18269C12.7218 3.92662 13.0257 3.7235 13.3603 3.58491C13.6948 3.44633 14.0534 3.375 14.4155 3.375C14.7776 3.375 15.1361 3.44633 15.4707 3.58491C15.8052 3.7235 16.1092 3.92662 16.3652 4.18269Z"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default KeyIcon;
--- a/frontend/src/app/components/icons/manageEnv.jsx
+++ b/frontend/src/app/components/icons/manageEnv.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const ManageEnvIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M6.25065 11.9997C5.74232 11.9997 5.25481 11.7977 4.89536 11.4383C4.53592 11.0789 4.33398 10.5913 4.33398 10.083C4.33398 9.57468 4.53592 9.08716 4.89536 8.72772C5.25481 8.36828 5.74232 8.16634 6.25065 8.16634M6.25065 11.9997C6.75898 11.9997 7.24649 11.7977 7.60594 11.4383C7.96538 11.0789 8.16732 10.5913 8.16732 10.083C8.16732 9.57468 7.96538 9.08716 7.60594 8.72772C7.24649 8.36828 6.75898 8.16634 6.25065 8.16634M6.25065 11.9997L6.25065 19.6663M6.25065 8.16634L6.25065 4.33301M13.1497 14.2987C12.9066 14.1167 12.6238 13.9951 12.3246 13.9439C12.0253 13.8926 11.7182 13.9132 11.4284 14.0039C11.1387 14.0946 10.8746 14.2528 10.658 14.4655C10.4414 14.6783 10.2784 14.9394 10.1825 15.2275C10.0865 15.5156 10.0604 15.8223 10.1063 16.1225C10.1521 16.4226 10.2686 16.7075 10.4462 16.9538C10.6237 17.2001 10.8573 17.4007 11.1275 17.5391C11.3978 17.6774 11.697 17.7496 12.0007 17.7497V19.6663M12.0007 4.33301V13.9163M17.7507 9.12467C17.2423 9.12467 16.7548 8.92274 16.3954 8.5633C16.0359 8.20385 15.834 7.71634 15.834 7.20801C15.834 6.69968 16.0359 6.21216 16.3954 5.85272C16.7548 5.49328 17.2423 5.29134 17.7507 5.29134M17.7507 9.12467C18.259 9.12467 18.7465 8.92274 19.1059 8.5633C19.4654 8.20385 19.6673 7.71634 19.6673 7.20801C19.6673 6.69968 19.4654 6.21216 19.1059 5.85272C18.7465 5.49328 18.259 5.29134 17.7507 5.29134M17.7507 9.12467V11.5205M17.7507 5.29134V4.33301M18.7099 20.6247C18.4582 20.6247 18.209 20.5751 17.9765 20.4788C17.7439 20.3825 17.5326 20.2413 17.3547 20.0633C17.1767 19.8853 17.0355 19.674 16.9392 19.4415C16.8429 19.2089 16.7933 18.9597 16.7933 18.708C16.7933 18.4563 16.8429 18.2071 16.9392 17.9745C17.0355 17.742 17.1767 17.5307 17.3547 17.3527C17.5326 17.1747 17.7439 17.0336 17.9765 16.9372C18.209 16.8409 18.4582 16.7913 18.7099 16.7913M18.7099 20.6247C18.9616 20.6247 19.2109 20.5751 19.4434 20.4788C19.676 20.3825 19.8873 20.2413 20.0652 20.0633C20.2432 19.8853 20.3844 19.674 20.4807 19.4415C20.577 19.2089 20.6266 18.9597 20.6266 18.708C20.6266 18.4563 20.577 18.2071 20.4807 17.9745C20.3844 17.742 20.2432 17.5307 20.0652 17.3527C19.8873 17.1747 19.676 17.0336 19.4434 16.9372C19.2109 16.8409 18.9616 16.7913 18.7099 16.7913M18.7099 20.6247V22.0622M18.7099 16.7913V15.3538M21.6147 17.0309L20.3698 17.7497M17.0511 19.6663L15.8052 20.3851M15.8052 17.0309L17.0511 17.7497M20.3698 19.6663L21.6156 20.3851"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ManageEnvIcon;
--- a/frontend/src/app/components/icons/menu.jsx
+++ b/frontend/src/app/components/icons/menu.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+const MenuIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M9.20117 9.99978C9.20117 10.1047 9.22183 10.2085 9.26196 10.3054C9.3021 10.4023 9.36092 10.4903 9.43508 10.5645C9.50924 10.6386 9.59728 10.6975 9.69417 10.7376C9.79106 10.7777 9.89491 10.7984 9.99978 10.7984C10.1047 10.7984 10.2085 10.7777 10.3054 10.7376C10.4023 10.6975 10.4903 10.6386 10.5645 10.5645C10.6386 10.4903 10.6975 10.4023 10.7376 10.3054C10.7777 10.2085 10.7984 10.1047 10.7984 9.99978C10.7984 9.89491 10.7777 9.79106 10.7376 9.69417C10.6975 9.59728 10.6386 9.50924 10.5645 9.43508C10.4903 9.36092 10.4023 9.3021 10.3054 9.26196C10.2085 9.22183 10.1047 9.20117 9.99978 9.20117C9.89491 9.20117 9.79106 9.22183 9.69417 9.26196C9.59728 9.3021 9.50924 9.36092 9.43508 9.43508C9.36092 9.50924 9.3021 9.59728 9.26196 9.69417C9.22183 9.79106 9.20117 9.89491 9.20117 9.99978Z"
+        fill="#8287FF"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.20117 15.5906C9.20117 15.6955 9.22183 15.7993 9.26196 15.8962C9.3021 15.9931 9.36092 16.0811 9.43508 16.1553C9.50924 16.2295 9.59728 16.2883 9.69417 16.3284C9.79106 16.3686 9.89491 16.3892 9.99978 16.3892C10.1047 16.3892 10.2085 16.3686 10.3054 16.3284C10.4023 16.2883 10.4903 16.2295 10.5645 16.1553C10.6386 16.0811 10.6975 15.9931 10.7376 15.8962C10.7777 15.7993 10.7984 15.6955 10.7984 15.5906C10.7984 15.4857 10.7777 15.3819 10.7376 15.285C10.6975 15.1881 10.6386 15.1001 10.5645 15.0259C10.4903 14.9517 10.4023 14.8929 10.3054 14.8528C10.2085 14.8126 10.1047 14.792 9.99978 14.792C9.89491 14.792 9.79106 14.8126 9.69417 14.8528C9.59728 14.8929 9.50924 14.9517 9.43508 15.0259C9.36092 15.1001 9.3021 15.1881 9.26196 15.285C9.22183 15.3819 9.20117 15.4857 9.20117 15.5906Z"
+        fill="#8287FF"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.20117 4.40994C9.20117 4.51481 9.22183 4.61866 9.26196 4.71555C9.3021 4.81245 9.36092 4.90048 9.43508 4.97464C9.50924 5.0488 9.59728 5.10763 9.69417 5.14776C9.79106 5.18789 9.89491 5.20855 9.99978 5.20855C10.1047 5.20855 10.2085 5.18789 10.3054 5.14776C10.4023 5.10763 10.4903 5.0488 10.5645 4.97464C10.6386 4.90048 10.6975 4.81245 10.7376 4.71555C10.7777 4.61866 10.7984 4.51481 10.7984 4.40994C10.7984 4.30506 10.7777 4.20122 10.7376 4.10432C10.6975 4.00743 10.6386 3.91939 10.5645 3.84524C10.4903 3.77108 10.4023 3.71225 10.3054 3.67212C10.2085 3.63198 10.1047 3.61133 9.99978 3.61133C9.89491 3.61133 9.79106 3.63198 9.69417 3.67212C9.59728 3.71225 9.50924 3.77108 9.43508 3.84524C9.36092 3.91939 9.3021 4.00743 9.26196 4.10432C9.22183 4.20122 9.20117 4.30506 9.20117 4.40994Z"
+        fill="#8287FF"
+        stroke="#8287FF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default MenuIcon;
--- a/frontend/src/app/components/icons/organization.jsx
+++ b/frontend/src/app/components/icons/organization.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const OrganizationIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M17.3653 7.69688C16.4048 6.7122 15.1917 6.01095 13.8591 5.67M10.1362 5.67C8.78152 6.01744 7.55105 6.73708 6.58406 7.7475M4.82062 10.7616C4.60749 11.4669 4.49946 12.1997 4.5 12.9366C4.5 13.6284 4.59375 14.2987 4.76906 14.9353M6.60656 18.1491C7.56883 19.1461 8.7887 19.8568 10.1306 20.2022M13.8806 20.2022C15.2181 19.856 16.4338 19.1467 17.3934 18.1528M19.2328 14.9372C19.4119 14.2864 19.5024 13.6144 19.5019 12.9394C19.5019 12.2231 19.4016 11.5303 19.2141 10.8741M10.125 5.4375C10.125 5.93478 10.3225 6.41169 10.6742 6.76333C11.0258 7.11496 11.5027 7.3125 12 7.3125C12.4973 7.3125 12.9742 7.11496 13.3258 6.76333C13.6775 6.41169 13.875 5.93478 13.875 5.4375C13.875 4.94022 13.6775 4.46331 13.3258 4.11167C12.9742 3.76004 12.4973 3.5625 12 3.5625C11.5027 3.5625 11.0258 3.76004 10.6742 4.11167C10.3225 4.46331 10.125 4.94022 10.125 5.4375ZM3.5625 16.6875C3.5625 17.1848 3.76004 17.6617 4.11167 18.0133C4.46331 18.365 4.94022 18.5625 5.4375 18.5625C5.93478 18.5625 6.41169 18.365 6.76333 18.0133C7.11496 17.6617 7.3125 17.1848 7.3125 16.6875C7.3125 16.1902 7.11496 15.7133 6.76333 15.3617C6.41169 15.01 5.93478 14.8125 5.4375 14.8125C4.94022 14.8125 4.46331 15.01 4.11167 15.3617C3.76004 15.7133 3.5625 16.1902 3.5625 16.6875ZM16.6875 16.6875C16.6875 17.1848 16.885 17.6617 17.2367 18.0133C17.5883 18.365 18.0652 18.5625 18.5625 18.5625C19.0598 18.5625 19.5367 18.365 19.8883 18.0133C20.24 17.6617 20.4375 17.1848 20.4375 16.6875C20.4375 16.1902 20.24 15.7133 19.8883 15.3617C19.5367 15.01 19.0598 14.8125 18.5625 14.8125C18.0652 14.8125 17.5883 15.01 17.2367 15.3617C16.885 15.7133 16.6875 16.1902 16.6875 16.6875Z"
+        stroke="#858699"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default OrganizationIcon;
--- a/frontend/src/app/components/icons/project.jsx
+++ b/frontend/src/app/components/icons/project.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const ProjectIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M5.4375 18.5625L8.02219 11.6709C8.08916 11.4923 8.20905 11.3383 8.36585 11.2296C8.52265 11.1209 8.70889 11.0626 8.89969 11.0625H20.4375M5.4375 18.5625H18.5869C19.0231 18.5624 19.4456 18.4102 19.7817 18.1321C20.1177 17.8541 20.3463 17.4675 20.4281 17.0391L21.3619 12.1538C21.3842 12.0195 21.377 11.882 21.3408 11.7508C21.3047 11.6196 21.2404 11.4979 21.1524 11.394C21.0645 11.2902 20.9549 11.2068 20.8315 11.1495C20.708 11.0923 20.5736 11.0626 20.4375 11.0625M5.4375 18.5625C4.94022 18.5625 4.46331 18.365 4.11167 18.0133C3.76004 17.6617 3.5625 17.1848 3.5625 16.6875V6.375C3.5625 5.87772 3.76004 5.40081 4.11167 5.04917C4.46331 4.69754 4.94022 4.5 5.4375 4.5H9.1875L12 7.3125H18.5625C19.0598 7.3125 19.5367 7.51004 19.8883 7.86167C20.24 8.21331 20.4375 8.69022 20.4375 9.1875V11.0625"
+        stroke="#858699"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ProjectIcon;
--- a/frontend/src/app/components/icons/robot.jsx
+++ b/frontend/src/app/components/icons/robot.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const RobotIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M8.16667 3.375L10.0833 6.25M15.8333 3.375L13.9167 6.25M9.125 12.9583V11.0417M14.875 11.0417V12.9583M3.375 10.0833C3.375 9.06667 3.77887 8.09165 4.49776 7.37276C5.21665 6.65387 6.19167 6.25 7.20833 6.25H16.7917C17.8083 6.25 18.7834 6.65387 19.5022 7.37276C20.2211 8.09165 20.625 9.06667 20.625 10.0833V15.8333C20.625 16.85 20.2211 17.825 19.5022 18.5439C18.7834 19.2628 17.8083 19.6667 16.7917 19.6667H7.20833C6.19167 19.6667 5.21665 19.2628 4.49776 18.5439C3.77887 17.825 3.375 16.85 3.375 15.8333V10.0833Z"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RobotIcon;
--- a/frontend/src/app/components/icons/roles.jsx
+++ b/frontend/src/app/components/icons/roles.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+const RolesIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <g clipPath="url(#clip0_306_15337)">
+        <path
+          d="M10.6205 9.86809C10.4245 9.9532 10.2131 9.99711 9.99942 9.99711C9.78573 9.99711 9.57434 9.9532 9.37835 9.86809L1.8462 6.37952C1.72389 6.31783 1.62111 6.2234 1.54929 6.10675C1.47748 5.99009 1.43945 5.85579 1.43945 5.7188C1.43945 5.58181 1.47748 5.44751 1.54929 5.33086C1.62111 5.21421 1.72389 5.11979 1.8462 5.05809L9.37835 1.54309C9.57434 1.45798 9.78573 1.41406 9.99942 1.41406C10.2131 1.41406 10.4245 1.45798 10.6205 1.54309L18.1526 5.03166C18.275 5.09336 18.3778 5.18779 18.4495 5.30443C18.5214 5.42108 18.5593 5.55538 18.5593 5.69237C18.5593 5.82937 18.5214 5.96366 18.4495 6.08032C18.3778 6.19697 18.275 6.2914 18.1526 6.35309L10.6205 9.86809Z"
+          stroke="#858699"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+        <path
+          d="M18.5887 10.4629L10.528 14.1761C10.3559 14.2546 10.1688 14.2953 9.97962 14.2953C9.79041 14.2953 9.60338 14.2546 9.43123 14.1761L1.41016 10.4629"
+          stroke="#858699"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+        <path
+          d="M18.5887 14.7578L10.528 18.471C10.3559 18.5495 10.1688 18.5902 9.97962 18.5902C9.79041 18.5902 9.60338 18.5495 9.43123 18.471L1.41016 14.7578"
+          stroke="#858699"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ strokeOpacity: 1 }}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_306_15337">
+          <rect
+            width="20"
+            height="20"
+            fill="white"
+            style={{ fillOpacity: 1 }}
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default RolesIcon;
--- a/frontend/src/app/components/icons/search.jsx
+++ b/frontend/src/app/components/icons/search.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const SearchIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <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>
+  );
+};
+
+export default SearchIcon;
--- a/frontend/src/app/components/icons/switchIcons/checked.jsx
+++ b/frontend/src/app/components/icons/switchIcons/checked.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+const CheckedIcon = ({
+  width = 20,
+  height = 20,
+  color = "white",
+  strokeWidth = 1.5,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 28 28"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CheckedIcon;
--- a/frontend/src/app/components/icons/switchIcons/unchecked.jsx
+++ b/frontend/src/app/components/icons/switchIcons/unchecked.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+const UnCheckedIcon = ({
+  width = 20,
+  height = 20,
+  color = "white",
+  strokeWidth = 1.5,
+
+  viewBox = "0 0 28 28",
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M20.7077 7.29199L7.29102 20.7087"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.29102 7.29199L20.7077 20.7087"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default UnCheckedIcon;
--- a/frontend/src/app/components/icons/toastClose.jsx
+++ b/frontend/src/app/components/icons/toastClose.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const ToastCloseIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M15 5L5 15M5 5L15 15"
+        stroke="#016730"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ToastCloseIcon;
--- a/frontend/src/app/components/icons/user.jsx
+++ b/frontend/src/app/components/icons/user.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const UserIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M3.5625 20.4375V18.5625C3.5625 17.5679 3.95759 16.6141 4.66085 15.9108C5.36411 15.2076 6.31794 14.8125 7.3125 14.8125H11.0625C12.0571 14.8125 13.0109 15.2076 13.7142 15.9108C14.4174 16.6141 14.8125 17.5679 14.8125 18.5625V20.4375M15.75 3.68438C16.5566 3.89091 17.2716 4.36003 17.7822 5.01779C18.2927 5.67555 18.5699 6.48453 18.5699 7.31719C18.5699 8.14985 18.2927 8.95883 17.7822 9.61658C17.2716 10.2743 16.5566 10.7435 15.75 10.95M20.4375 20.4375V18.5625C20.4327 17.7348 20.1543 16.932 19.6456 16.2791C19.1368 15.6263 18.4264 15.16 17.625 14.9531M5.4375 7.3125C5.4375 8.30706 5.83259 9.26089 6.53585 9.96415C7.23911 10.6674 8.19294 11.0625 9.1875 11.0625C10.1821 11.0625 11.1359 10.6674 11.8392 9.96415C12.5424 9.26089 12.9375 8.30706 12.9375 7.3125C12.9375 6.31794 12.5424 5.36411 11.8392 4.66085C11.1359 3.95759 10.1821 3.5625 9.1875 3.5625C8.19294 3.5625 7.23911 3.95759 6.53585 4.66085C5.83259 5.36411 5.4375 6.31794 5.4375 7.3125Z"
+        stroke="#858699"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default UserIcon;
--- a/frontend/src/app/components/icons/view.jsx
+++ b/frontend/src/app/components/icons/view.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+const ViewIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M8.40234 9.99957C8.40234 10.4232 8.57062 10.8294 8.87016 11.129C9.1697 11.4285 9.57596 11.5968 9.99957 11.5968C10.4232 11.5968 10.8294 11.4285 11.129 11.129C11.4285 10.8294 11.5968 10.4232 11.5968 9.99957C11.5968 9.57596 11.4285 9.1697 11.129 8.87016C10.8294 8.57062 10.4232 8.40234 9.99957 8.40234C9.57596 8.40234 9.1697 8.57062 8.87016 8.87016C8.57062 9.1697 8.40234 9.57596 8.40234 9.99957Z"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.1875 9.99967C15.2708 13.1941 12.875 14.7913 10 14.7913C7.125 14.7913 4.72917 13.1941 2.8125 9.99967C4.72917 6.80523 7.125 5.20801 10 5.20801C12.875 5.20801 15.2708 6.80523 17.1875 9.99967Z"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ViewIcon;
--- a/frontend/src/app/components/prompts/Prompts.jsx
+++ b/frontend/src/app/components/prompts/Prompts.jsx
@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+
+const Prompts = ({ show }) => {
+  return (
+    <>
+      {/* Prompts (static) */}
+      {show && (
+        <div className={styles.prompts}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={20}
+            height={20}
+            viewBox="0 0 20 20"
+            fill="none"
+          >
+            <path
+              d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5C8.01088 2.5 6.10322 3.29018 4.6967 4.6967C3.29018 6.10322 2.5 8.01088 2.5 10Z"
+              stroke="#CCA04F"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M10 6.66699V10.0003"
+              stroke="#CCA04F"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M10 13.333H10.0083"
+              stroke="#CCA04F"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <p>The name is already in used. You can try another.</p>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Prompts;
--- a/frontend/src/app/components/prompts/styles.module.css
+++ b/frontend/src/app/components/prompts/styles.module.css
@@ -0,0 +1,16 @@
+.prompts {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.prompts > p {
+  color: #d49e3d;
+  color: color(display-p3 0.7988 0.6279 0.3103);
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.07px;
+}
--- a/frontend/src/app/components/sidebar/Sidebar.jsx
+++ b/frontend/src/app/components/sidebar/Sidebar.jsx
@@ -0,0 +1,165 @@
+"use client";
+import React from "react";
+import styles from "./styles.module.css";
+
+import { usePathname, useRouter } from "next/navigation";
+import HomeIcon from "../icons/home";
+import OrganizationIcon from "../icons/organization";
+import ProjectIcon from "../icons/project";
+import UserIcon from "../icons/user";
+import RolesIcon from "../icons/roles";
+import CredentialsIcon from "../icons/credentials";
+import AgentIcon from "../icons/agent";
+import DownloadIcon from "../icons/download";
+
+const Sidebar = () => {
+  const router = useRouter();
+  const navToHome = () => {
+    router.push("/home");
+  };
+  const navToOrganization = () => {
+    router.push("/organization");
+  };
+  const navToProject = () => {
+    router.push("/projects");
+  };
+  const navToUsers = () => {
+    router.push("/users");
+  };
+  const navToRoles = () => {
+    router.push("/roles");
+  };
+  const navToCredentials = () => {
+    router.push("/credentials");
+  };
+  const navToAgents = () => {
+    router.push("/agents");
+  };
+
+  const pathname = usePathname();
+  console.log(pathname);
+  return (
+    <div className={styles.mainContainer}>
+      <div className={styles.topContainer}>
+        {/* Logo Container */}
+        <div className={styles.logoContainer}>
+          <div>
+            <div className={styles.logoIconContainer}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="37"
+                height="36"
+                viewBox="0 0 37 36"
+                fill="none"
+              >
+                <path
+                  d="M15.465 11.0234C13.7773 12.2949 12.0608 13.7836 10.3874 15.457C2.90925 22.9352 -0.879626 31.2707 1.92467 34.0751C4.72895 36.8792 13.0645 33.0904 20.5426 25.6123C22.2161 23.9388 23.7048 22.2224 24.9762 20.5347"
+                  stroke="#969AF9"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{ strokeOpacity: 1 }}
+                  fill="none"
+                />
+                <path
+                  d="M24.9762 20.5353C29.3864 26.3895 31.1822 31.8988 29.0053 34.0757C26.201 36.88 17.8655 33.091 10.3874 25.6129C2.90925 18.1348 -0.879626 9.79927 1.92467 6.99498C4.10141 4.81824 9.61081 6.61397 15.465 11.0241"
+                  stroke="#969AF9"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{ strokeOpacity: 1 }}
+                  fill="none"
+                />
+                <path
+                  d="M14.1504 20.5347C14.1504 21.261 14.7391 21.8497 15.4654 21.8497C16.1916 21.8497 16.7804 21.261 16.7804 20.5347C16.7804 19.8085 16.1916 19.2197 15.4654 19.2197C14.7391 19.2197 14.1504 19.8085 14.1504 20.5347Z"
+                  stroke="#969AF9"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{ strokeOpacity: 1 }}
+                  fill="none"
+                />
+                <path
+                  d="M20.7505 9.08429C19.9243 8.94056 19.9243 7.75456 20.7505 7.61083C23.7436 7.09012 26.124 4.81039 26.7737 1.84263L26.8236 1.61514C27.0022 0.798617 28.1649 0.793535 28.3509 1.60847L28.4114 1.87358C29.0849 4.82732 31.4661 7.0878 34.4509 7.60707C35.2814 7.75154 35.2814 8.94358 34.4509 9.08805C31.4661 9.60732 29.0849 11.8678 28.4114 14.8216L28.3509 15.0867C28.1649 15.9016 27.0022 15.8965 26.8236 15.08L26.7737 14.8525C26.124 11.8848 23.7436 9.605 20.7505 9.08429Z"
+                  stroke="#969AF9"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{ strokeOpacity: 1 }}
+                  fill="none"
+                />
+              </svg>
+            </div>
+            <div className={styles.logoDescription}>
+              <p>Internal Developer Platform</p>
+              <p>By Project Moonshot Inc.</p>
+            </div>
+          </div>
+        </div>
+        {/* Navigations */}
+        <div className={styles.navContainer}>
+          <div
+            className={`${styles.nav} ${pathname.includes("/home") ? styles.active : ""}`}
+            onClick={navToHome}
+          >
+            <HomeIcon />
+            <p>Home</p>
+          </div>
+          <div
+            className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
+            onClick={navToOrganization}
+          >
+            <OrganizationIcon />
+            <p>Organization</p>
+          </div>
+          <div
+            onClick={navToProject}
+            className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
+          >
+            <ProjectIcon />
+            <p>Project</p>
+          </div>
+          <div
+            onClick={navToUsers}
+            className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
+          >
+            <UserIcon />
+            <p>Users</p>
+          </div>
+          <div
+            onClick={navToRoles}
+            className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
+          >
+            <RolesIcon />
+            <p>Roles</p>
+          </div>
+          <div
+            onClick={navToCredentials}
+            className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
+          >
+            <CredentialsIcon />
+            <p>Credentials</p>
+          </div>
+          <div
+            onClick={navToAgents}
+            className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
+          >
+            <AgentIcon />
+            <p>Agents</p>
+          </div>
+        </div>
+      </div>
+      {/* Footers */}
+      <div className={styles.navFooterContainer}>
+        <div>
+          <div>
+            <p>Download ICTL v3</p>
+            <DownloadIcon />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;
--- a/frontend/src/app/components/sidebar/styles.module.css
+++ b/frontend/src/app/components/sidebar/styles.module.css
@@ -0,0 +1,157 @@
+.mainContainer {
+  display: flex;
+  width: 250px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  height: 100vh;
+  align-self: stretch;
+  border-right: 1px solid #2c2d3d;
+  user-select: none;
+  border-right: 1px solid #2c2d3d;
+  background: #191a24;
+}
+.topContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.logoContainer {
+  display: flex;
+  height: 84px;
+  padding: 12px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+  border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
+}
+.logoContainer > div {
+  display: flex;
+  padding-right: 6px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.logoIconContainer {
+  display: flex;
+  width: 50px;
+  height: 50px;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 9px;
+  aspect-ratio: 1/1;
+  border-radius: 4px;
+}
+.logoDescription {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+.logoDescription > p:nth-child(1) {
+  color: #fff;
+  color: color(display-p3 1 1 1);
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+}
+.logoDescription > p:nth-child(2) {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.05px;
+  align-self: stretch;
+}
+.navContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.nav {
+  display: flex;
+  padding: 16px 24px;
+  align-items: center;
+  cursor: pointer;
+  gap: 16px;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  border-left: 2px solid #959aff00;
+  align-self: stretch;
+}
+.nav:hover {
+  background: rgba(149, 154, 255, 0.05);
+}
+.nav path {
+  stroke: #858699;
+}
+.nav:hover path {
+  stroke: #d2d3e0;
+}
+.active {
+  border-left: 2px solid #959aff;
+  background: rgba(149, 154, 255, 0.05);
+  color: #959aff;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.active:hover path {
+  stroke: #969af9;
+}
+.active path {
+  stroke: #969af9;
+}
+.navFooterContainer {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.navFooterContainer > div {
+  display: flex;
+  padding: 12px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid #292b43;
+  background: #1d1e2c;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
+.navFooterContainer > div > div {
+  display: flex;
+  width: 186px;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+}
+.navFooterContainer > div > div > p {
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
--- a/frontend/src/app/components/toast/success/styles.module.css
+++ b/frontend/src/app/components/toast/success/styles.module.css
@@ -0,0 +1,35 @@
+.toastContainer {
+  display: flex;
+  padding: 14px 10px 14px 16px;
+  align-items: center;
+  gap: 16px;
+  border-radius: 10px;
+  border: 1px solid #a6facc;
+  background: #eefdf3;
+  position: absolute;
+  bottom: 25px;
+  z-index: 11;
+  right: 20px;
+}
+.messageContainer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.iconContainer {
+  display: flex;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 100px;
+  background: #a6facc;
+}
+.messageContainer p {
+  color: #006929;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
--- a/frontend/src/app/components/toast/success/successToast.jsx
+++ b/frontend/src/app/components/toast/success/successToast.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./styles.module.css";
+import CircledChececkIcon from "../../icons/circledCheck";
+import ToastCloseIcon from "../../icons/toastClose";
+const SuccessToast = ({ message }) => {
+  return (
+    <div className={styles.toastContainer}>
+      <div className={styles.messageContainer}>
+        <div className={styles.iconContainer}>
+          <CircledChececkIcon />
+        </div>
+        <p>{message}</p>
+      </div>
+      <ToastCloseIcon />
+    </div>
+  );
+};
+
+export default SuccessToast;
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -0,0 +1,122 @@
+"use client";
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import { usePathname, useRouter, useParams } from "next/navigation";
+import BackIcon from "../icons/back";
+import SearchIcon from "../icons/search";
+import EnviromentIcon from "../icons/env";
+import AddIcon from "../icons/add";
+import CheckIcon from "../icons/check";
+import MenuIcon from "../icons/menu";
+import CloneIcon from "../icons/clone";
+import RobotIcon from "../icons/robot";
+import KeyIcon from "../icons/key";
+import ManageEnvIcon from "../icons/manageEnv";
+
+const TopHeader = (props) => {
+  const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
+  const pathName = usePathname();
+  const router = useRouter();
+  const params = useParams();
+  const handleNavigateToAdd = () => {
+    router.push(`${pathName}/add`);
+  };
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>
+        {((pathName.includes("/view") && props.state === "view") ||
+          params.usersId ||
+          params.roleId) && (
+          <div onClick={() => router.back()}>
+            <BackIcon />
+          </div>
+        )}
+        <p>{props.topbarTitle}</p>
+      </div>
+      <div className={styles.actionBar}>
+        {(pathName === "/projects/view" || !props.state) && (
+          <div className={styles.searchBarContainer}>
+            <SearchIcon />
+          </div>
+        )}
+        {pathName === "/credentials" ? (
+          <div className={styles.mngEnvKeyButton}>
+            <EnviromentIcon />
+            <p>Manage Env. Key</p>
+          </div>
+        ) : (
+          ""
+        )}
+        {pathName === "/projects/view" && (
+          <div
+            className={styles.button}
+            onClick={() => props.trigger(!props.triggerState)}
+          >
+            <AddIcon />
+            <p>{props.buttonText}</p>
+          </div>
+        )}
+        {!props.state && (
+          <div className={styles.button} onClick={handleNavigateToAdd}>
+            <AddIcon />
+            <p>{props.buttonText}</p>
+          </div>
+        )}
+        {props.state === "add" ? (
+          <>
+            <div className={styles.button}>
+              <CheckIcon width={20} height={20} />
+              <p>{props.buttonText}</p>
+            </div>
+            <div className={styles.cancelButton} onClick={() => router.back()}>
+              <p>{props.cancelButtonText}</p>
+            </div>
+          </>
+        ) : (
+          ""
+        )}
+        {/* Projects 3 dots menu */}
+        {pathName === "/projects/view" && (
+          <div
+            className={styles.menu}
+            onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
+          >
+            <div className={styles.dotMenu}>
+              <MenuIcon />
+            </div>
+            {triggerDropDownMenu && (
+              <div className={styles.dropDown}>
+                <div>
+                  <div>
+                    <CloneIcon />
+                    <p>Clone Project</p>
+                  </div>
+                </div>
+                <div>
+                  <div>
+                    <RobotIcon />
+                    <p>Robots</p>
+                  </div>
+                </div>
+                <div>
+                  <div>
+                    <KeyIcon />
+                    <p>Init Key</p>
+                  </div>
+                </div>
+                <div>
+                  <div>
+                    <ManageEnvIcon />
+                    <p>Manage Env. Key</p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TopHeader;
--- a/frontend/src/app/components/topHeader/styles.module.css
+++ b/frontend/src/app/components/topHeader/styles.module.css
@@ -0,0 +1,197 @@
+.container {
+  display: flex;
+  padding: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  background: #21232f;
+}
+.title {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+.title > div {
+  display: flex;
+  padding: 6px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 100px;
+  border: 0.5px solid #8187ff;
+  cursor: pointer;
+}
+.title > div:hover {
+  border-radius: 100px;
+  border: 0.5px solid #959aff;
+  background: linear-gradient(
+    180deg,
+    rgba(149, 154, 255, 0.25) 0%,
+    rgba(88, 91, 151, 0.25) 100%
+  );
+}
+.title > div:hover path {
+  stroke: white;
+}
+.title > p {
+  color: #d2d3e1;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.actionBar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+}
+.searchBarContainer {
+  display: flex;
+  padding: 6px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+}
+.button {
+  display: flex;
+  padding: 8px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  border: 0.5px solid #8187ff;
+  background: rgba(83, 89, 242, 0.25);
+  cursor: pointer;
+}
+.button:hover {
+  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
+}
+.mngEnvKeyButton {
+  display: inline-flex;
+  padding: 8px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 6px;
+  border-radius: 6px;
+  border: 1px solid #5358f200;
+  cursor: pointer;
+}
+.mngEnvKeyButton > p {
+  color: #8187ff;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  cursor: pointer;
+}
+.mngEnvKeyButton:hover p {
+  color: white;
+}
+.mngEnvKeyButton:hover {
+  border: 1px solid #5359f2;
+  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
+}
+.mngEnvKeyButton:hover path {
+  stroke: white;
+}
+.cancelButton {
+  display: flex;
+  height: 36px;
+  padding: 9px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  border: 0.5px solid #4e537e;
+  cursor: pointer;
+}
+.cancelButton:hover {
+  border-radius: 6px;
+  border: 1px solid #8e98e7;
+  background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%);
+}
+.menu {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  gap: 10px;
+  flex-direction: column;
+  align-items: flex-end;
+  aspect-ratio: 1/1;
+  position: relative;
+}
+.dotMenu {
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  gap: 12px;
+  border-radius: 6px;
+  border: 1px solid #8187ff;
+  cursor: pointer;
+}
+
+.dotMenu:hover {
+  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
+}
+.dotMenu:hover path {
+  stroke: white;
+}
+.dropDown {
+  display: flex;
+  width: 200px;
+  padding: 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  z-index: 2;
+  border-radius: 6px;
+  background: #2d3144;
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.dropDown > div:hover {
+  border-radius: 4px;
+  background: #3c4159;
+  background: color(display-p3 0.2392 0.2549 0.3412);
+  color: white;
+}
+.dropDown > div:hover p {
+  color: white;
+}
+.dropDown > div:hover path {
+  stroke: white;
+}
+.dropDown > div {
+  display: flex;
+  padding: 6px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+}
+
+.dropDown > div > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  color: #d2d3e1;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
--- a/frontend/src/app/components/topToolTip/TopToolTip.jsx
+++ b/frontend/src/app/components/topToolTip/TopToolTip.jsx
@@ -0,0 +1,43 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+const TopToolTip = () => {
+  return (
+    <div className={styles.upperToolTips}>
+      <div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={20}
+          height={20}
+          viewBox="0 0 20 20"
+          fill="none"
+        >
+          <path
+            d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5C8.01088 2.5 6.10322 3.29018 4.6967 4.6967C3.29018 6.10322 2.5 8.01088 2.5 10Z"
+            stroke="#191A23"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M10 6.66699V10.0003"
+            stroke="#191A23"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M10 13.333H10.0083"
+            stroke="#191A23"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <p>Complete the input field before saving</p>
+      </div>
+    </div>
+  );
+};
+
+export default TopToolTip;
--- a/frontend/src/app/components/topToolTip/styles.module.css
+++ b/frontend/src/app/components/topToolTip/styles.module.css
@@ -0,0 +1,23 @@
+.upperToolTips {
+  display: flex;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  background: #959aff;
+}
+.upperToolTips > div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.upperToolTips > div > p {
+  color: #191a24;
+  text-align: center;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
--- a/frontend/src/app/credentials/add/page.jsx
+++ b/frontend/src/app/credentials/add/page.jsx
@@ -0,0 +1,102 @@
+"use client";
+import React, { useRef, useState } 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";
+import TextField from "@/app/components/fields/textfield";
+import Prompts from "@/app/components/prompts/Prompts";
+
+const Page = () => {
+  const [selectedFile, setSelectedFile] = useState(null);
+  // Click
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setSelectedFile(file);
+      console.log(file); //send this to backend later
+    }
+  };
+  // Drag/Drop
+  const handleDrop = (e) => {
+    e.preventDefault();
+
+    const file = e.dataTransfer.files[0];
+    if (file) {
+      setSelectedFile(file);
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+  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 className={createCredStyle.projectName}>
+                <div className={createCredStyle.label}>
+                  <p className={createCredStyle.labelTxt}>Project Name</p>
+                  {/* <p className={createCredStyle.required}>*</p> */}
+                </div>
+                {/* Content */}
+                <div className={createCredStyle.credInputField}>
+                  <TextField placeHolder="Enter Credential Name" />
+                  <Prompts show={false} />
+                </div>
+              </div>
+              {/* Upload File */}
+              <div className={createCredStyle.uploadFile}>
+                {/* Label */}
+                <div className={createCredStyle.label}>
+                  <p>Upload File</p>
+                  {/* Optional or Required */}
+                  {/* <p className={createCredStyle.optionalTxt}>(Optional)</p> */}{" "}
+                </div>
+                {/* Upload File */}
+                <label
+                  className={createCredStyle.upload}
+                  onDragOver={handleDragOver}
+                  onDrop={handleDrop}
+                >
+                  <input
+                    type="file"
+                    onChange={handleFileChange}
+                    style={{ display: "none" }}
+                  />
+                  {selectedFile ? (
+                    <p className={createCredStyle.chooseTxt}>
+                      {/* Display file name only */}
+                      {selectedFile.name}
+                    </p>
+                  ) : (
+                    <>
+                      <p className={createCredStyle.chooseTxt}>
+                        Click to choose a file
+                      </p>
+                      <p className={createCredStyle.dragTxt}>
+                        Drag or drop here
+                      </p>
+                    </>
+                  )}
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;
--- a/frontend/src/app/credentials/add/styles.module.css
+++ b/frontend/src/app/credentials/add/styles.module.css
@@ -0,0 +1,159 @@
+.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;
+}
+.projectName {
+  display: flex;
+  width: 500px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+.label {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  align-self: stretch;
+}
+.labelTxt {
+  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;
+}
+.required {
+  color: #cfb000;
+  font-weight: 600;
+}
+
+.credInputField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+.credInputField > 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);
+}
+.credInputField > 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);
+}
+
+.credInputField 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;
+}
+.credInputField 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;
+}
+
+.uploadFile {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+}
+.label > .optionalTxt {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 16 px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
+.upload {
+  display: flex;
+  height: 203px;
+  padding: 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px dashed #5980f1;
+  border: 2px dashed color(display-p3 0.3804 0.4959 0.9137);
+  cursor: pointer;
+}
+.upload:hover {
+  background: rgba(129, 135, 255, 0.25);
+  background: color(display-p3 0.5098 0.5294 1 / 0.25);
+}
+.upload:hover .chooseTxt {
+  color: #fff;
+  color: color(display-p3 1 1 1);
+}
+
+.chooseTxt {
+  color: #5980f1;
+  color: color(display-p3 0.3804 0.4959 0.9137);
+  text-align: center;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  align-self: stretch;
+}
+
+.dragTxt {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  text-align: center;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  align-self: stretch;
+}
--- a/frontend/src/app/credentials/page.jsx
+++ b/frontend/src/app/credentials/page.jsx
@@ -0,0 +1,99 @@
+import React from "react";
+import TopHeader from "../components/topHeader/TopHeader";
+import globalStyle from "../globalStyle.module.css";
+import styles from "./styles.module.css";
+import DeleteIcon from "../components/icons/delete";
+import SuccessToast from "../components/toast/success/successToast";
+const CredentialsPage = () => {
+  const sampleData = [
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+    {
+      name: "mongo tls ca crt",
+      organizationID: "67160a5ae69144ff19aafb86",
+    },
+  ];
+  return (
+    <div className={globalStyle.section}>
+      <SuccessToast message="New Credential added successfully!" />
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add Credentials" topbarTitle="Credentials" />
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th width="45%">Name</th>
+                  <th width="45%">Organization ID</th>
+                  <th width="10%"></th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {sampleData.map((org, index) => {
+                  return (
+                    <tr key={index}>
+                      <td>{org.name}</td>
+                      <td>{org.organizationID}</td>
+                      <td className={styles.actions}>
+                        <div>
+                          <button className={styles.iconButton}>
+                            <DeleteIcon />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CredentialsPage;
--- a/frontend/src/app/credentials/styles.module.css
+++ b/frontend/src/app/credentials/styles.module.css
@@ -0,0 +1,75 @@
+.tableContainer {
+  width: 100%;
+}
+.tableContainer > table,
+.tableContainer > table > thead {
+  border-collapse: collapse;
+  border: none;
+  width: 100%;
+}
+.tableContainer {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+  position: relative;
+}
+
+.tableContainer th {
+  background: #1c1d2b;
+  top: 0;
+  position: sticky;
+}
+.tableContainer > table > thead > tr > th,
+.tableContainer > table > tbody > tr > td {
+  padding: 12px 24px;
+  gap: 17px;
+  text-align: start;
+}
+.tableContainer > table > thead > tr {
+  border-bottom: 1px solid #212235;
+  background: #1c1d2b;
+}
+.tableContainer > table > tbody > tr > td {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.tableContainer > table > tbody > tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+  cursor: pointer;
+}
+.tableContainer > table > tbody > tr:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  background: rgba(129, 135, 255, 0.05);
+}
+.tableContainer > table > thead > tr > th {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.iconButton {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: rgba(255, 255, 255, 0);
+  outline: none;
+  border: 1px solid #959aff00;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.iconButton:hover {
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+.iconButton:hover path {
+  stroke: white;
+}
--- a/frontend/src/app/globalStyle.module.css
+++ b/frontend/src/app/globalStyle.module.css
@@ -0,0 +1,27 @@
+.section {
+  width: 100%;
+}
+.mainContainer {
+  display: flex;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  background: #191a24;
+  width: 100%;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  background: #191a24;
+}
+.topHeader {
+  display: flex;
+  padding: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  background: #21232f;
+}
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,12 +1,12 @@
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #d2d3e0;
+  --foreground: #191a24;
 }

@media (prefers-color-scheme: dark) {
  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: #191a24;
+    --foreground: #d2d3e0;
  }
 }

@@ -19,9 +19,10 @@ body {
 body {
  color: var(--foreground);
  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: inter, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
 }

 * {
@@ -40,3 +41,13 @@ a {
    color-scheme: dark;
  }
 }
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background: #34384c;
+}
--- a/frontend/src/app/home/page.jsx
+++ b/frontend/src/app/home/page.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const HomePage = () => {
+  return <div></div>;
+};
+
+export default HomePage;
--- a/frontend/src/app/home/styles.module.css
+++ b/frontend/src/app/home/styles.module.css
--- a/frontend/src/app/layout.js
+++ b/frontend/src/app/layout.js
@@ -1,26 +1,31 @@
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter } from "next/font/google";
+import Sidebar from "./components/sidebar/Sidebar";
+import Header from "./components/header/Header";
 import "./globals.css";
+import styles from "./page.module.css";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const inter = Inter({
+  variable: "--font-inter",
  subsets: ["latin"],
 });

 export const metadata = {
-  title: "Create Next App",
+  title: "Internal Developer Platform",
  description: "Generated by create next app",
 };

 export default function RootLayout({ children }) {
  return (
    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className={`${inter.variable} `}>
+        <div className={styles.layout}>
+          <Sidebar />
+
+          <div className={styles.mainContainer}>
+            <Header />
            {children}
+          </div>
+        </div>
      </body>
    </html>
  );
--- a/frontend/src/app/organization/add/page.jsx
+++ b/frontend/src/app/organization/add/page.jsx
@@ -0,0 +1,117 @@
+import React from "react";
+import globalStyle from "../../globalStyle.module.css";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import styles from "./styles.module.css";
+import Image from "next/image";
+import TopToolTip from "@/app/components/topToolTip/TopToolTip";
+import TextField from "@/app/components/fields/textfield";
+const AddCredentials = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            buttonText="Save"
+            cancelButtonText="Cancel"
+            state="add"
+            topbarTitle="Create New Organization"
+          />
+          <div className={styles.contentContainer}>
+            <TopToolTip />
+            <div className={styles.createOrganizationFormContainer}>
+              <div className={styles.organizationBadgeContainer}>
+                <div className={styles.organizationBadge}>
+                  <div className={styles.organizationBadgeDetails}>
+                    <div className={styles.relativeContainer}>
+                      <div className={styles.imageContainer}>
+                        <Image
+                          src="/images/BadgeImage.png"
+                          width={48}
+                          height={48}
+                          alt="badge image"
+                        />
+                      </div>
+                      <div className={styles.addIconContainer}>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width={20}
+                          height={20}
+                          viewBox="0 0 20 20"
+                          fill="none"
+                        >
+                          <path
+                            d="M10 4.41016V15.5907"
+                            stroke="white"
+                            strokeWidth={1.5}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                          <path
+                            d="M4.41016 10H15.5907"
+                            stroke="white"
+                            strokeWidth={1.5}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                  <div className={styles.labels}>
+                    <p>
+                      Organization Badge<span>(Optional)</span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.inputGroup}>
+                <div className={styles.inputLabel}>
+                  <p>
+                    Organization Name <span>*</span>
+                  </p>
+                </div>
+                <div className={styles.inputField}>
+                  <TextField placeHolder="Enter organization name" />
+                  <div className={styles.prompts}>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="20"
+                      height="20"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5C8.01088 2.5 6.10322 3.29018 4.6967 4.6967C3.29018 6.10322 2.5 8.01088 2.5 10Z"
+                        stroke="#CCA04F"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M10 6.66699V10.0003"
+                        stroke="#CCA04F"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M10 13.333H10.0083"
+                        stroke="#CCA04F"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                    <p>The name is already in used. You can try another.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddCredentials;
--- a/frontend/src/app/organization/add/styles.module.css
+++ b/frontend/src/app/organization/add/styles.module.css
@@ -0,0 +1,200 @@
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.upperToolTips {
+  display: flex;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  background: #959aff;
+}
+.upperToolTips > div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.upperToolTips > div > p {
+  color: #191a24;
+  text-align: center;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.createOrganizationFormContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+}
+.organizationBadgeContainer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+.organizationBadge {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1 0 0;
+}
+.organizationBadgeDetails {
+  display: flex;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+.relativeContainer {
+  display: flex;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  position: relative;
+}
+.imageContainer {
+  display: flex;
+  width: 70px;
+  height: 70px;
+  padding: 11px;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1/1;
+  border-radius: 100px;
+  border: 1px solid #616583;
+  background: #4b4f6d;
+}
+.addIconContainer {
+  display: flex;
+  width: 27.813px;
+  height: 27.813px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 4.188px;
+  bottom: 4.187px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
+  border-radius: 100px;
+  background: #696b95;
+}
+.labels {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  flex: 1 0 0;
+}
+.labels > 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;
+}
+.labels > p span {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
+.inputGroup {
+  display: flex;
+  width: 500px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+.inputLabel {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  align-self: stretch;
+}
+.inputLabel > p {
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.inputLabel > p span {
+  color: #cfb000;
+
+  font-weight: 600;
+}
+.inputField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+.inputField > input {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #616583;
+  background-color: transparent;
+  color: white;
+  font-family: Inter;
+  font-size: 16px;
+  outline: none;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  caret-color: #575bc7;
+}
+.inputField > input:focus {
+  border-radius: 6px;
+  border: 1px solid #a8aac1;
+  background: rgba(75, 79, 109, 0.25);
+}
+.inputField > input:hover {
+  background: rgba(75, 79, 109, 0.25);
+}
+.inputField > input::placeholder {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.prompts {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.prompts > p {
+  color: #d49e3d;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.07px;
+}
--- a/frontend/src/app/organization/page.jsx
+++ b/frontend/src/app/organization/page.jsx
@@ -0,0 +1,97 @@
+"use-client";
+import React from "react";
+import styles from "./styles.module.css";
+import TopHeader from "../components/topHeader/TopHeader";
+import globalStyle from "../globalStyle.module.css";
+import SuccessToast from "../components/toast/success/successToast";
+import DeleteIcon from "../components/icons/delete";
+
+const OrganizationPage = () => {
+  const sampleData = [
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+    {
+      organizationName: "Project Moonshot Inc.",
+      dateCreated: "2024-10-21 08:01:30.556 +0000 UTC",
+    },
+  ];
+
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add Organization" topbarTitle="Organization" />
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th width="45%">Organization Name</th>
+                  <th width="45%">Date Created</th>
+                  <th width="10%"></th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {sampleData.map((org, index) => {
+                  return (
+                    <tr key={index}>
+                      <td>{org.organizationName}</td>
+                      <td>{org.dateCreated}</td>
+                      <td className={styles.actions}>
+                        <div>
+                          <button className={styles.iconButton}>
+                            <DeleteIcon />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrganizationPage;
--- a/frontend/src/app/organization/styles.module.css
+++ b/frontend/src/app/organization/styles.module.css
@@ -0,0 +1,74 @@
+.tableContainer {
+  width: 100%;
+}
+.tableContainer > table,
+.tableContainer > table > thead {
+  border-collapse: collapse;
+  border: none;
+  width: 100%;
+}
+.tableContainer {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+  position: relative;
+}
+.tableContainer th {
+  background: #1c1d2b;
+  top: 0;
+  position: sticky;
+}
+.tableContainer > table > thead > tr > th,
+.tableContainer > table > tbody > tr > td {
+  padding: 12px 24px;
+  gap: 17px;
+  text-align: start;
+}
+.tableContainer > table > thead > tr {
+  border-bottom: 1px solid #212235;
+  background: #1c1d2b;
+}
+.tableContainer > table > tbody > tr > td {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.tableContainer > table > tbody > tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+  cursor: pointer;
+}
+.tableContainer > table > tbody > tr:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  background: rgba(129, 135, 255, 0.05);
+}
+.tableContainer > table > thead > tr > th {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.iconButton {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: rgba(255, 255, 255, 0);
+  outline: none;
+  border: 1px solid #959aff00;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.iconButton:hover {
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+.iconButton:hover path {
+  stroke: white;
+}
--- a/frontend/src/app/page.js
+++ b/frontend/src/app/page.js
@@ -2,65 +2,5 @@ import Image from "next/image";
 import styles from "./page.module.css";

 export default function Home() {
-  return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className={styles.intro}>
-          <h1>To get started, edit the page.js file.</h1>
-          <p>
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className={styles.secondary}
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
+  return <div className={styles.page}></div>;
 }
--- a/frontend/src/app/page.module.css
+++ b/frontend/src/app/page.module.css
@@ -10,23 +10,20 @@
  --button-secondary-border: #ebebeb;

  display: flex;
-  min-height: 100vh;
  align-items: center;
  justify-content: center;
-  font-family: var(--font-geist-sans);
-  background-color: var(--background);
 }
-
-.main {
+.layout {
+  display: flex;
+
+  align-items: center;
+}
+.mainContainer {
  display: flex;
-  min-height: 100vh;
-  width: 100%;
-  max-width: 800px;
  flex-direction: column;
  align-items: flex-start;
-  justify-content: space-between;
-  background-color: var(--foreground);
-  padding: 120px 60px;
+  flex: 1 0 0;
+  align-self: stretch;
 }

 .intro {
--- a/frontend/src/app/projects/add/page.jsx
+++ b/frontend/src/app/projects/add/page.jsx
@@ -0,0 +1,112 @@
+import React from "react";
+import globalStyle from "../../globalStyle.module.css";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import styles from "./styles.module.css";
+import TopToolTip from "@/app/components/topToolTip/TopToolTip";
+const AddProject = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            buttonText="Save"
+            cancelButtonText="Cancel"
+            state="add"
+            topbarTitle="Create New Project"
+          />
+          <div className={styles.contentContainer}>
+            <TopToolTip />
+            <div className={styles.createProjectFormContainer}>
+              <div className={styles.inputGroup}>
+                <div className={styles.label}>
+                  <p>
+                    Project Name <span>*</span>
+                  </p>
+                </div>
+                <div className={styles.inputField}>
+                  <input type="text" placeholder="Enter project name" />
+                  <div className={styles.prompts}>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width={20}
+                      height={20}
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5C8.01088 2.5 6.10322 3.29018 4.6967 4.6967C3.29018 6.10322 2.5 8.01088 2.5 10Z"
+                        stroke="#CCA04F"
+                        strokeWidth={1.5}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M10 6.66699V10.0003"
+                        stroke="#CCA04F"
+                        strokeWidth={1.5}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M10 13.333H10.0083"
+                        stroke="#CCA04F"
+                        strokeWidth={1.5}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                    <p>The name is already in used. You can try another.</p>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.inputGroup}>
+                <div className={styles.label}>
+                  <p>
+                    Project Version <span>*</span>
+                  </p>
+                </div>
+                <div className={styles.inputField}>
+                  <input type="text" placeholder="Version" />
+                </div>
+              </div>
+              <div className={styles.inputGroup}>
+                <div className={styles.label}>
+                  <p>
+                    Organization <span>*</span>
+                  </p>
+                </div>
+                <div className={styles.inputField}>
+                  <select name="" id="">
+                    <option value="">Select</option>
+                  </select>
+                </div>
+              </div>
+              <div className={styles.inputGroup}>
+                <div className={styles.label}>
+                  <p>
+                    Agent <span>*</span>
+                  </p>
+                </div>
+                <div className={styles.inputField}>
+                  <select name="" id="">
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                    <option value="">Select</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddProject;
--- a/frontend/src/app/projects/add/styles.module.css
+++ b/frontend/src/app/projects/add/styles.module.css
@@ -0,0 +1,108 @@
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.createProjectFormContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  border-radius: 8px;
+}
+.inputGroup {
+  display: flex;
+  width: 500px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+.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;
+}
+.label > p span {
+  color: #cfb000;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+.inputField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+.inputField > input,
+.inputField > select {
+  display: flex;
+  height: 44px;
+  padding: 12px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #616583;
+  background-color: transparent;
+  color: white;
+  font-family: Inter;
+  font-size: 16px;
+  outline: none;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  caret-color: #575bc7;
+}
+.inputField > input:focus {
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  background: rgba(75, 79, 109, 0.25);
+}
+.inputField > input:hover {
+  background: rgba(75, 79, 109, 0.25);
+}
+.inputField > input::placeholder,
+.inputField > select {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.prompts {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.prompts > p {
+  color: #d49e3d;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.07px;
+}
--- a/frontend/src/app/projects/page.jsx
+++ b/frontend/src/app/projects/page.jsx
@@ -0,0 +1,246 @@
+"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";
+import SuccessToast from "../components/toast/success/successToast";
+import DeleteIcon from "../components/icons/delete";
+import ViewIcon from "../components/icons/view";
+const ProjectsPage = () => {
+  const router = useRouter();
+  const sampleData = [
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+    {
+      name: "DOKS One Cooperative Bank Backend Develop",
+      version: "v1",
+      cpuUsed: "250",
+      cpuLimit: "5000",
+      memoryUsed: "13500",
+      memoryLimit: "20000",
+      storageUsed: "10000",
+      storageLimit: "100000",
+      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
+    },
+  ];
+
+  return (
+    <div className={globalStyle.section}>
+      <SuccessToast message="Project successfully added!" />
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Create Project" topbarTitle="Project" />
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Version</th>
+                  <th>CPU Used/Limit</th>
+                  <th>Memory Used/Limit</th>
+                  <th>Storage Used/Limit</th>
+                  <th>Date Created</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {sampleData.map((project, index) => {
+                  return (
+                    <tr
+                      key={index}
+                      onClick={() => router.push("/projects/view")}
+                    >
+                      <td>{project.name}</td>
+                      <td style={{ textAlign: "center" }}>{project.version}</td>
+                      <td>
+                        <span className={styles.used}>{project.cpuUsed}</span> /{" "}
+                        <span className={styles.limit}>{project.cpuLimit}</span>
+                      </td>
+                      <td>
+                        <span className={styles.used}>
+                          {project.memoryUsed}
+                        </span>{" "}
+                        /{" "}
+                        <span className={styles.limit}>
+                          {project.memoryLimit}
+                        </span>
+                      </td>
+                      <td>
+                        <span className={styles.used}>
+                          {project.storageUsed}
+                        </span>{" "}
+                        /{" "}
+                        <span className={styles.limit}>
+                          {project.storageLimit}
+                        </span>
+                      </td>
+                      <td>{project.dateCreated}</td>
+                      <td>
+                        <div className={styles.actions}>
+                          <div>
+                            <button className={styles.iconButton}>
+                              <ViewIcon />
+                            </button>
+                          </div>
+                          <div>
+                            <button className={styles.iconButton}>
+                              <DeleteIcon />
+                            </button>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectsPage;
--- a/frontend/src/app/projects/styles.module.css
+++ b/frontend/src/app/projects/styles.module.css
@@ -0,0 +1,102 @@
+.tableContainer {
+  width: 100%;
+}
+.tableContainer > table,
+.tableContainer > table > thead {
+  border-collapse: collapse;
+  border: none;
+  width: 100%;
+}
+.tableContainer {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+  position: relative;
+}
+.tableContainer th {
+  background: #1c1d2b;
+  top: 0;
+  position: sticky;
+}
+
+.tableContainer > table > thead > tr > th {
+  text-wrap: nowrap;
+}
+
+.tableContainer > table > thead > tr > th,
+.tableContainer > table > tbody > tr > td {
+  padding: 12px 24px;
+
+  text-align: start;
+  align-self: stretch;
+}
+.tableContainer > table > thead > tr {
+  border-bottom: 1px solid #212235;
+  background: #1c1d2b;
+}
+.tableContainer > table > tbody > tr > td {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.tableContainer > table > tbody > tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+  cursor: pointer;
+}
+.tableContainer > table > tbody > tr:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  background: rgba(129, 135, 255, 0.05);
+}
+.tableContainer > table > thead > tr > th {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+.iconButton {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: rgba(255, 255, 255, 0);
+  outline: none;
+  border: 1px solid #959aff00;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.iconButton:hover {
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+.iconButton:hover path {
+  stroke: white;
+}
+.used {
+  color: #50d85f;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.limit {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
--- a/frontend/src/app/projects/view/AddServicesModal/AddServicesModal.jsx
+++ b/frontend/src/app/projects/view/AddServicesModal/AddServicesModal.jsx
@@ -0,0 +1,128 @@
+"use client";
+import React from "react";
+import styles from "./styles.module.css";
+import { useRouter, usePathname } from "next/navigation";
+import CloseIcon from "@/app/components/icons/close";
+
+const AddServicesModal = (props) => {
+  const router = useRouter();
+  const pathName = usePathname();
+  const servicesList = [
+    {
+      title: "Start from Scratch",
+      linkTo: "add-from-scratch",
+      detail:
+        "Create a new service manually by configuring all the settings yourself",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          fill="none"
+        >
+          <path
+            d="M9.61111 10.8885L4.5 15.9996L9.61111 21.1107M22.3889 10.8885L27.5 15.9996L22.3889 21.1107M18.5556 5.77734L13.4444 26.2218"
+            stroke="white"
+            strokeOpacity="1"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ),
+      isReleased: true,
+    },
+    {
+      title: "Choose Gitea Repository",
+      detail: "Choose a repository from your linked Gitea Account",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          fill="none"
+        >
+          <path
+            d="M4.5 18.5556C5.56056 19.3759 7.15394 19.8551 8.97222 19.8333C10.7905 19.8551 12.3839 19.3759 13.4444 18.5556C14.505 17.7352 16.0984 17.2561 17.9167 17.2778C19.7349 17.2561 21.3283 17.7352 22.3889 18.5556M10.8889 4.5C10.4845 4.79027 10.1568 5.17463 9.9342 5.61988C9.71157 6.06512 9.60069 6.55787 9.61111 7.05556C9.60069 7.55324 9.71157 8.04599 9.9342 8.49124C10.1568 8.93648 10.4845 9.32084 10.8889 9.61111M16 4.5C15.5956 4.79027 15.2679 5.17463 15.0453 5.61988C14.8227 6.06512 14.7118 6.55787 14.7222 7.05556C14.7118 7.55324 14.8227 8.04599 15.0453 8.49124C15.2679 8.93648 15.5956 9.32084 16 9.61111M22.0643 22.0388C22.635 22.3007 23.2613 22.4185 23.8881 22.3818C24.5149 22.345 25.1231 22.1548 25.6592 21.8279C26.1953 21.501 26.6429 21.0474 26.9627 20.507C27.2825 19.9666 27.4646 19.356 27.493 18.7287C27.5215 18.1015 27.3954 17.4768 27.1259 16.9097C26.8564 16.3425 26.4517 15.8503 25.9474 15.4762C25.4431 15.1021 24.8546 14.8577 24.2336 14.7643C23.6127 14.6709 22.9784 14.7315 22.3863 14.9407M4.5 13.4444H22.3889V19.8333C22.3889 21.8667 21.5812 23.8167 20.1434 25.2545C18.7056 26.6923 16.7555 27.5 14.7222 27.5H12.1667C10.1333 27.5 8.18329 26.6923 6.74551 25.2545C5.30774 23.8167 4.5 21.8667 4.5 19.8333V13.4444Z"
+            stroke="white"
+            strokeOpacity="1"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ),
+      isReleased: true,
+    },
+    {
+      title: "Link GitHub Repository",
+      detail: "Import and deploy a service from your GitHub repository",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          fill="none"
+        >
+          <path
+            d="M12.1667 24.9448C6.67222 26.7337 6.67222 21.7503 4.5 21.1115M19.8333 27.5003V23.0281C19.8333 21.7503 19.9611 21.2392 19.1944 20.4726C22.7722 20.0892 26.2222 18.6837 26.2222 12.8059C26.2207 11.2789 25.6249 9.81246 24.5611 8.71701C25.06 7.39063 25.0141 5.92076 24.4333 4.62812C24.4333 4.62812 23.0278 4.24479 19.9611 6.28923C17.3637 5.61276 14.6363 5.61276 12.0389 6.28923C8.97222 4.24479 7.56667 4.62812 7.56667 4.62812C6.98589 5.92076 6.93996 7.39063 7.43889 8.71701C6.37508 9.81246 5.77933 11.2789 5.77778 12.8059C5.77778 18.6837 9.22778 20.0892 12.8056 20.4726C12.0389 21.2392 12.0389 22.0059 12.1667 23.0281V27.5003"
+            stroke="white"
+            strokeOpacity="1"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ),
+      isReleased: false,
+    },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <div>
+            <p>Create New Services</p>
+            <div>
+              <p>Choose how you want to create your service</p>
+            </div>
+          </div>
+
+          <CloseIcon onClick={() => props.trigger(!props.triggerState)} />
+        </div>
+        <div className={styles.content}>
+          {servicesList.map((service, key) => {
+            return (
+              <div
+                className={`${styles.list} ${service.isReleased ? styles.isReleased : styles.isComingSoon}`}
+                key={key}
+                onClick={() => router.push(`${pathName}/${service.linkTo}`)}
+              >
+                <div>
+                  <div className={styles.iconContainer}>{service.icon}</div>
+                  <div className={styles.listDetails}>
+                    <div>
+                      <p>{service.title}</p>
+                      {!service.isReleased && (
+                        <div>
+                          <p>Coming soon</p>
+                        </div>
+                      )}
+                    </div>
+                    <p>{service.detail}</p>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddServicesModal;
--- a/frontend/src/app/projects/view/AddServicesModal/styles.module.css
+++ b/frontend/src/app/projects/view/AddServicesModal/styles.module.css
@@ -0,0 +1,159 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00000037;
+}
+.modal {
+  display: inline-flex;
+  padding: 24px 24px 32px 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 48px;
+  border-radius: 8px;
+  background: #21232f;
+  animation-name: modalAnimation;
+  animation-duration: 200ms;
+}
+@keyframes modalAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.header > svg {
+  cursor: pointer;
+}
+
+.header > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.header > div > p {
+  color: #d2d3e1;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.24px;
+}
+.header > div > div {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+  color: #85869b;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.14px;
+}
+.content {
+  display: flex;
+  width: 545px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  cursor: pointer;
+  transition: all 150ms;
+}
+.isComingSoon {
+  opacity: 0.5;
+}
+.isReleased:hover {
+  border-radius: 8px;
+  background: #2e3242;
+}
+
+.isReleased:hover .iconContainer {
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #959aff 0%, #585b97 100%);
+}
+.list > div {
+  display: flex;
+  padding: 10px;
+  align-items: center;
+  gap: 24px;
+  align-self: stretch;
+}
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  padding: 10px;
+  border: 0.5px solid #959aff;
+}
+.listDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+.listDetails > p {
+  color: #85869b;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.14px;
+}
+.listDetails > div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.listDetails > div > p {
+  color: #d2d3e1;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.18px;
+}
+.listDetails > div > div {
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+
+  gap: 10px;
+  border-radius: 4px;
+  background: #3c4a87;
+}
+.listDetails > div > div > p {
+  color: #d2d3e1;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.14px;
+}
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx
@@ -0,0 +1,389 @@
+"use client";
+import React, { useState } from "react";
+import globalStyle from "@/app/globalStyle.module.css";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import styles from "./styles.module.css";
+import variableStyles from "./variableStyles.module.css";
+import TextField from "@/app/components/fields/textfield";
+import AddVariableModal from "./variableModals/AddVariableModal/AddVariableModal";
+import AddVolumeModal from "./variableModals/AddVolumes/AddVolumeModal";
+import AddConfigMapModal from "./variableModals/AddConfigMap/AddConfigMapModal";
+import DeleteIcon from "@/app/components/icons/delete";
+import CustomCheckbox from "@/app/components/checkbox/CheckBox";
+const AddServices = () => {
+  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
+  const [triggerAddVariable, setTriggerAddVariable] = useState(false);
+  const [triggerAddVolume, setTriggerAddVolume] = useState(false);
+  const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  return (
+    <div className={globalStyle.section}>
+      {triggerAddVariable && (
+        <AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
+      )}
+      {triggerAddVolume && (
+        <AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
+      )}
+      {triggeAddConfigMap && (
+        <AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
+      )}
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            buttonText="Save"
+            cancelButtonText="Cancel"
+            state="add"
+            topbarTitle="Create New Services"
+          />
+          <div className={styles.contentContainer}>
+            <div className={styles.fieldsContainerCreateNew}>
+              <div className={styles.projectDetails}>
+                <div className={styles.projectDetailsHeader}>
+                  <p>Project Details</p>
+                </div>
+                <div className={styles.fieldsCreateNew}>
+                  <div>
+                    <div>
+                      <p>
+                        Repository <span>(Optional)</span>
+                      </p>
+                      <label className={styles.repositoryForm} htmlFor="#repo">
+                        + Link Repository
+                      </label>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <p>Name</p>
+                      <TextField placeHolder="Enter service name" />
+                    </div>
+                    <div>
+                      <p>Version</p>
+                      <TextField placeHolder="Service version" />
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <p>
+                        Image <span>(Optional)</span>
+                      </p>
+                      <TextField placeHolder="Enter image name" />
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <p>Port</p>
+                      <TextField placeHolder="Enter port" />
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <p>Ingress</p>
+                      <select name="" id="">
+                        <option value="">Select</option>
+                      </select>
+                    </div>
+                    <div>
+                      <p>Ingress</p>
+                      <select name="" id="">
+                        <option value="">Select</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.resource}>
+                <div className={styles.projectDetailsHeader}>
+                  <p>Resource</p>
+                </div>
+                <div className={styles.resourceFields}>
+                  <div>
+                    <div>
+                      <p>CPU Request (MB)</p>
+                      <TextField placeHolder="250" />
+                    </div>
+                    <div>
+                      <p>CPU Limit (MB)</p>
+                      <TextField placeHolder="250" />
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <p>Memory Request (MB)</p>
+                      <TextField placeHolder="250" />
+                    </div>
+                    <div>
+                      <p>Memory Limit (MB)</p>
+                      <TextField placeHolder="500" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.additionalDetails}>
+                <div>
+                  <div>
+                    <div className={styles.additionalDetailsHeader}>
+                      <div>
+                        <p>Auto Scaling</p>
+                        <CustomCheckbox id="scalingCheckBox" />
+                      </div>
+                    </div>
+                    <div className={styles.additionalDetailsFields}>
+                      <div>
+                        <div>
+                          <div>
+                            <p>Name</p>
+
+                            <TextField placeHolder="Enter service name" />
+                          </div>
+                          <div>
+                            <p>Version</p>
+                            <TextField placeHolder="Services version" />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <div>
+                    <div className={styles.additionalDetailsHeader}>
+                      <div>
+                        <p>Readiness</p>
+                        <CustomCheckbox id="readiNessCheckBox" />
+                      </div>
+                    </div>
+                    <div className={styles.additionalDetailsFields}>
+                      <div>
+                        <div>
+                          <div>
+                            <p>Readiness Path</p>
+                            <input
+                              type="text"
+                              placeholder="Enter Readiness path"
+                            />
+                          </div>
+                          <div>
+                            <p>Readiness Port</p>
+                            <input
+                              type="text"
+                              placeholder="Enter Readiness port"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <div>
+                    <div className={styles.additionalDetailsHeader}>
+                      <div>
+                        <p>Liveness</p>
+                        <CustomCheckbox id="liveNessCheckBox" />
+                      </div>
+                    </div>
+                    <div className={styles.additionalDetailsFields}>
+                      <div>
+                        <div>
+                          <div>
+                            <p>Liveness Path</p>
+                            <TextField placeHolder="Enter liveness path" />
+                          </div>
+                          <div>
+                            <p>Liveness Port</p>
+
+                            <TextField placeHolder="Enter liveness port" />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className={variableStyles.variables}>
+              <div className={variableStyles.variablesHeader}>
+                <div>
+                  <div className={variableStyles.searchContainer}>
+                    <div className={variableStyles.searchInputGroup}>
+                      <svg
+                        width="20"
+                        height="20"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <g clipPath="url(#clip0)">
+                          <path
+                            d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                          <path
+                            d="M18.7051 18.7061L14.0176 14.0186"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </g>
+                      </svg>
+                      <input type="text" placeholder="Search" />
+                    </div>
+                  </div>
+                  <div className={variableStyles.variablesHeaderDropDown}>
+                    <div
+                      className={variableStyles.variableHeaderDropdownButton}
+                      onClick={() =>
+                        setTriggerVariableDropDown(!triggerVariableDropDown)
+                      }
+                    >
+                      <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="white"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                        <path
+                          d="M5.29102 12H18.7077"
+                          stroke="white"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </div>
+                    {triggerVariableDropDown && (
+                      <div className={variableStyles.dropDownContainer}>
+                        <div
+                          onClick={() => {
+                            setTriggerAddVariable(true);
+                            setTriggerVariableDropDown(
+                              !triggerVariableDropDown,
+                            );
+                          }}
+                        >
+                          <p>Environment Variables</p>
+                        </div>
+                        <div
+                          onClick={() => {
+                            setTriggerAddVolume(true);
+                            setTriggerVariableDropDown(
+                              !triggerVariableDropDown,
+                            );
+                          }}
+                        >
+                          <p>Volumes</p>
+                        </div>
+                        <div
+                          onClick={() => {
+                            setTriggerAddConfigMap(true);
+                            setTriggerVariableDropDown(
+                              !triggerVariableDropDown,
+                            );
+                          }}
+                        >
+                          <p>Config Maps</p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className={variableStyles.variablesContentContainer}>
+                <div>
+                  <div className={variableStyles.variablesContent}>
+                    <div
+                      className={variableStyles.environmentVariablesContainer}
+                    >
+                      <div
+                        className={variableStyles.environmentVariablesHeader}
+                      >
+                        <p>Environment Variables</p>
+                      </div>
+                      <div className={variableStyles.envVariablesHeader}>
+                        <div>
+                          <p>Key</p>
+                          <p>Value</p>
+                        </div>
+                      </div>
+                      <div className={variableStyles.variableList}>
+                        <div className={variableStyles.emptyVariableList}>
+                          <div>
+                            <p>No Environment Variables added</p>
+                          </div>
+                        </div>
+                        {/* <div className={variableStyles.variable}>
+                          <p>REQUEST_SERVICE_GRPC</p>
+                          <p>request-service:50053</p>
+                          <DeleteIcon />
+                        </div> */}
+                      </div>
+                    </div>
+                  </div>
+                  <div className={variableStyles.variablesContent}>
+                    <div
+                      className={variableStyles.environmentVariablesContainer}
+                    >
+                      <div
+                        className={variableStyles.environmentVariablesHeader}
+                      >
+                        <p>Volumes</p>
+                      </div>
+                      <div className={variableStyles.envVariablesHeader}>
+                        <div>
+                          <p>Name</p>
+                          <p>Path</p>
+                          <p>Size/Type</p>
+                          <p>Access Mode</p>
+                          <p>Storage Class</p>
+                        </div>
+                      </div>
+                      <div className={variableStyles.variableList}>
+                        <div className={variableStyles.emptyVariableList}>
+                          <div>
+                            <p>No volume added</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className={variableStyles.variablesContent}>
+                    <div
+                      className={variableStyles.environmentVariablesContainer}
+                    >
+                      <div
+                        className={variableStyles.environmentVariablesHeader}
+                      >
+                        <p>Config maps</p>
+                      </div>
+
+                      <div className={variableStyles.variableList}>
+                        <div className={variableStyles.emptyVariableList}>
+                          <div>
+                            <p>No config map added</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddServices;
--- a/frontend/src/app/projects/view/add-from-scratch/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
@@ -0,0 +1,251 @@
+.contentContainer {
+  display: flex;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.fieldsContainerCreateNew {
+  display: flex;
+  padding-top: 36px;
+  flex-direction: column;
+  width: 550px;
+  align-items: flex-start;
+  gap: 36px;
+  background: #191a24;
+  height: calc(100vh - 175px);
+  overflow-y: scroll;
+  scrollbar-width: none;
+}
+.projectDetails {
+  display: flex;
+  padding: 0 36px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.projectDetailsHeader {
+  display: flex;
+  padding-bottom: 24px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.projectDetailsHeader p {
+  color: #d2d3e1;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.2px;
+}
+.fieldsCreateNew {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.resource {
+  display: flex;
+  padding: 0 36px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.resourceFields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.fieldsCreateNew > div,
+.resourceFields > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.fieldsCreateNew > div:nth-child(1) {
+  display: flex;
+  padding: 16px 0;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+}
+.fieldsCreateNew > div > div,
+.resourceFields > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.fieldsCreateNew > div > div p,
+.resourceFields > div > div p {
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.fieldsCreateNew > div > div p > span,
+.resourceFields > div > div p > span {
+  color: #85869b;
+}
+.fieldsCreateNew > div > div input,
+.fieldsCreateNew > div > div select,
+.resourceFields > div > div input,
+.resourceFields > div > div select {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  background-color: transparent;
+  color: white;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.fieldsCreateNew > div > div input::placeholder,
+.resourceFields > div > div input::placeholder {
+  color: #85869b;
+}
+.repositoryForm {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px dashed #5980f1;
+  color: #5980f1;
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.repositoryForm:hover {
+  background: rgba(83, 89, 242, 0.1);
+}
+.additionalDetails {
+  display: flex;
+  padding: 20px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.additionalDetails > div {
+  display: flex;
+  padding: 20px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #1d1e2a;
+}
+.additionalDetails > div > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.additionalDetailsHeader {
+  display: flex;
+  padding-bottom: 24px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.additionalDetailsHeader div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+}
+
+.additionalDetailsHeader p {
+  color: #d2d3e1;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.2px;
+}
+.additionalDetailsFields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  align-self: stretch;
+}
+.additionalDetailsFields > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.additionalDetailsFields > div > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.additionalDetailsFields > div > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1;
+}
+.additionalDetailsFields p {
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.additionalDetailsFields input {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: 10px;
+  align-self: stretch;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  color: white;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.additionalDetailsFields input::placeholder {
+  color: #85869b;
+}
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import CloseIcon from "@/app/components/icons/close";
+import TextField from "@/app/components/fields/textfield";
+import AddIcon from "@/app/components/icons/add";
+import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
+const AddConfigMapModal = (props) => {
+  const [isGeneric, setIsGeneric] = useState(true);
+  return (
+    <div className={styles.container}>
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <p>Volumes</p>
+          <CloseIcon onClick={() => props.setTriggerAddConfigMap(false)} />
+        </div>
+        <div className={styles.contentContainer}>
+          <div>
+            <div className={styles.fieldContainer}>
+              <div className={styles.fields}>
+                <div className={styles.horizontalInput}>
+                  <div>
+                    <div>
+                      <p>Sub Path</p>
+                      <TextField placeHolder="Enter volume name" />
+                    </div>
+                    <div>
+                      <p>Mount Path</p>
+                      <TextField placeHolder="Enter path    " />
+                    </div>
+                  </div>
+                </div>
+
+                <div className={styles.radioButtonsContainer}>
+                  <div>
+                    <p>Type</p>
+                    <div>
+                      {" "}
+                      <div>
+                        <label className={styles.radio}>
+                          <input type="radio" name="typeOption" />
+                          <span className={styles.custom}></span>
+                          Raw
+                        </label>
+                      </div>
+                      <div>
+                        <label className={styles.radio}>
+                          <input type="radio" name="typeOption" />
+                          <span className={styles.custom}></span>
+                          Credential
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className={styles.verticalInput}>
+                  <div>
+                    <div>
+                      <p>Value</p>
+                    </div>
+
+                    <textarea
+                      name=""
+                      id=""
+                      placeholder="Enter a description"
+                    ></textarea>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.addButtonContainer}>
+          <PrimaryButton />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AddConfigMapModal;
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css
@@ -0,0 +1,253 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00000037;
+}
+.modal {
+  display: flex;
+  width: 593px;
+
+  padding: 16px 16px 24px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 8px;
+  background: #21232f;
+  animation-name: modalAnimation;
+  animation-duration: 200ms;
+}
+
+@keyframes modalAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.header > svg {
+  cursor: pointer;
+}
+
+.header > p {
+  color: #d2d3e1;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.24px;
+}
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentContainer > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentHeader {
+  display: flex;
+  padding-top: 8px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.contentHeader > div {
+  display: flex;
+  padding: 0 6px 6px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.selectActive {
+  border-bottom: 2px solid #8187ff;
+}
+.fieldContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.fields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.horizontalInput {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.horizontalInput > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+}
+
+.horizontalInput > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.verticalInput {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.verticalInput > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+
+  flex: 1 0 0;
+}
+.verticalInput p {
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+
+.verticalInput textarea {
+  display: flex;
+  height: 120px;
+  padding: 12px;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: transparent;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  resize: none;
+  color: #85869b;
+  font-size: 16px;
+  font-family: inter;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.radioButtonsContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.radioButtonsContainer > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.radioButtonsContainer p {
+  display: flex;
+  align-items: flex-start;
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.radioButtonsContainer > div > div {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+}
+.radioButtonsContainer > div > div > div {
+  display: flex;
+  padding: 12px 4px;
+  align-items: center;
+  gap: 12px;
+}
+.radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 8px;
+}
+.radio input {
+  display: none;
+}
+
+.radio .custom {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #4b4f6d;
+  border-radius: 50%;
+  position: relative;
+  background-color: #fff;
+}
+
+.radio .custom::after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  background: #5980f1;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+}
+
+.radio input:checked + .custom::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.addButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import CloseIcon from "@/app/components/icons/close";
+import TextField from "@/app/components/fields/textfield";
+import AddIcon from "@/app/components/icons/add";
+import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
+const AddVariableModal = (props) => {
+  const [isGeneric, setIsGeneric] = useState(true);
+  return (
+    <div className={styles.container}>
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <p>Environment Variables</p>
+          <CloseIcon onClick={() => props.setTriggerAddVariable(false)} />
+        </div>
+        <div className={styles.contentContainer}>
+          <div>
+            <div className={styles.contentHeader}>
+              <div
+                className={isGeneric ? styles.selectActive : ""}
+                onClick={() => setIsGeneric(true)}
+              >
+                <p>Generic</p>
+              </div>
+              <div
+                className={!isGeneric ? styles.selectActive : ""}
+                onClick={() => setIsGeneric(false)}
+              >
+                <p>Connection String</p>
+              </div>
+            </div>
+            <div className={styles.fieldContainer}>
+              <div className={styles.fields}>
+                {isGeneric ? (
+                  <>
+                    <div className={styles.horizontalInput}>
+                      <div>
+                        <div>
+                          <p>Key</p>
+                          <TextField placeHolder="Enter variable key" />
+                        </div>
+                        <div>
+                          <p>Value</p>
+                          <TextField placeHolder="Enter Value" />
+                        </div>
+                      </div>
+                    </div>
+                    <div className={styles.verticalInput}>
+                      <div>
+                        <div>
+                          <p>Description (Optional)</p>
+                        </div>
+
+                        <textarea
+                          name=""
+                          id=""
+                          placeholder="Enter a description"
+                        ></textarea>
+                      </div>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className={styles.verticalInput}>
+                      <div>
+                        <div>
+                          <p>Variable Name</p>
+                        </div>
+                        <TextField />
+                      </div>
+                    </div>
+                    <div className={styles.horizontalInput}>
+                      <div>
+                        <div>
+                          <p>Protocol</p>
+                          <TextField placeHolder="MongoDB" />
+                        </div>
+                        <div>
+                          <p>Service</p>
+                          <TextField placeHolder="Select a service" />
+                        </div>
+                      </div>
+                    </div>
+                    <div className={styles.authenticationContainer}>
+                      <p>Authentication (Optional)</p>
+                      <div className={styles.horizontalInput}>
+                        <div>
+                          <div>
+                            <p>Protocol</p>
+                            <TextField placeHolder="MongoDB" />
+                          </div>
+                          <div>
+                            <p>Service</p>
+                            <TextField placeHolder="Select a service" />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.addButtonContainer}>
+          <PrimaryButton />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AddVariableModal;
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css
@@ -0,0 +1,201 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00000037;
+}
+.modal {
+  display: flex;
+  width: 593px;
+  height: 566px;
+  padding: 16px 16px 24px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 8px;
+  background: #21232f;
+  animation-name: modalAnimation;
+  animation-duration: 200ms;
+}
+@keyframes modalAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.header > svg {
+  cursor: pointer;
+}
+
+.header > p {
+  color: #d2d3e1;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.24px;
+}
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentContainer > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentHeader {
+  display: flex;
+  padding-top: 8px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.contentHeader > div {
+  display: flex;
+  padding: 0 6px 6px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.selectActive {
+  border-bottom: 2px solid #8187ff;
+}
+.fieldContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.fields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.horizontalInput {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.horizontalInput > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+}
+
+.horizontalInput > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.verticalInput {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.verticalInput > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+
+  flex: 1 0 0;
+}
+.verticalInput p {
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+
+.verticalInput textarea {
+  display: flex;
+  height: 120px;
+  padding: 12px;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: transparent;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  resize: none;
+  color: #85869b;
+  font-size: 16px;
+  font-family: inter;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.authenticationContainer {
+  display: flex;
+  padding: 12px 12px 32px 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #272b3a;
+}
+.authenticationContainer > p {
+  color: #85869b;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.addButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import CloseIcon from "@/app/components/icons/close";
+import TextField from "@/app/components/fields/textfield";
+import AddIcon from "@/app/components/icons/add";
+import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
+const AddVolumeModal = (props) => {
+  const [isGeneric, setIsGeneric] = useState(true);
+  return (
+    <div className={styles.container}>
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <p>Volumes</p>
+          <CloseIcon onClick={() => props.setTriggerAddVolume(false)} />
+        </div>
+        <div className={styles.contentContainer}>
+          <div>
+            <div className={styles.fieldContainer}>
+              <div className={styles.fields}>
+                <div className={styles.horizontalInput}>
+                  <div>
+                    <div>
+                      <p>Name</p>
+                      <TextField placeHolder="Enter volume name" />
+                    </div>
+                    <div>
+                      <p>Path</p>
+                      <TextField placeHolder="Enter path    " />
+                    </div>
+                  </div>
+                </div>
+                <div className={styles.horizontalInput}>
+                  <div>
+                    <div>
+                      <p>Existing Claim (Optional)</p>
+                      <TextField placeHolder="Create new PVC" />
+                    </div>
+                    <div>
+                      <p>Volume size (MB)</p>
+                      <TextField placeHolder="0" />
+                    </div>
+                  </div>
+                </div>
+                <div className={styles.verticalInput}>
+                  <div>
+                    <div>
+                      <p>Storage Class name</p>
+                    </div>
+                    <TextField placeHolder="e.g., efs-sc" />
+                  </div>
+                </div>
+                <div className={styles.verticalInput}>
+                  <div>
+                    <div>
+                      <p>Access Mode</p>
+                    </div>
+                    <TextField placeHolder="ReadWriteOnce (RWO) - Single node read-write" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.addButtonContainer}>
+          <PrimaryButton />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AddVolumeModal;
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css
@@ -0,0 +1,201 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00000037;
+}
+.modal {
+  display: flex;
+  width: 593px;
+
+  padding: 16px 16px 24px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 8px;
+  background: #21232f;
+  animation-name: modalAnimation;
+  animation-duration: 200ms;
+}
+@keyframes modalAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.header > svg {
+  cursor: pointer;
+}
+
+.header > p {
+  color: #d2d3e1;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.24px;
+}
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentContainer > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentHeader {
+  display: flex;
+  padding-top: 8px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.contentHeader > div {
+  display: flex;
+  padding: 0 6px 6px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.selectActive {
+  border-bottom: 2px solid #8187ff;
+}
+.fieldContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.fields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.horizontalInput {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.horizontalInput > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+}
+
+.horizontalInput > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.verticalInput {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.verticalInput > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+
+  flex: 1 0 0;
+}
+.verticalInput p {
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+
+.verticalInput textarea {
+  display: flex;
+  height: 120px;
+  padding: 12px;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: transparent;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  resize: none;
+  color: #85869b;
+  font-size: 16px;
+  font-family: inter;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.authenticationContainer {
+  display: flex;
+  padding: 12px 12px 32px 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #272b3a;
+}
+.authenticationContainer > p {
+  color: #85869b;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.addButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
--- a/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
@@ -0,0 +1,253 @@
+.variables {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+
+  background: #161720;
+}
+.variablesHeader {
+  display: flex;
+  padding: 8px 14px 8px 8px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  background: #161720;
+}
+.variablesHeader > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+}
+.searchContainer > div {
+  display: flex;
+  width: 310px;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 9px;
+}
+.searchInputGroup {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+.searchInputGroup input {
+  color: white;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+  outline: none;
+  background-color: transparent;
+  border: none;
+}
+.searchInputGroup input::placeholder {
+  color: #85869b;
+}
+.variablesHeaderDropDown {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  flex-direction: column;
+  align-items: flex-end;
+  position: relative;
+  gap: 6px;
+}
+.variableHeaderDropdownButton {
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  background: #5359f2;
+  border: 1px solid #5358f200;
+}
+.variableHeaderDropdownButton:hover {
+  border-radius: 6px;
+  border: 1px solid #5359f2;
+  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
+}
+.dropDownContainer {
+  display: flex;
+  padding: 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  border-radius: 6px;
+  background: #2d3144;
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.dropDownContainer > div {
+  display: flex;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  text-wrap: nowrap;
+  width: 100%;
+}
+.dropDownContainer > div:hover {
+  background: #3c4159;
+}
+.dropDownContainer > div > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  color: #acb0ff;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.variablesContentContainer {
+  display: flex;
+  padding: 8px;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.variablesContentContainer > div {
+  display: flex;
+  padding-bottom: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  height: calc(100vh - 242px);
+  overflow: auto;
+  flex: 1 0 0;
+}
+.variablesContent {
+  display: flex;
+  padding-bottom: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 4px;
+  background: #1d1e2a;
+}
+.variable {
+  display: flex;
+  padding: 8px 0;
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 0.5px solid #2e3042;
+  width: 100%;
+}
+.variable p {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  align-self: stretch;
+  color: #d2d3e1;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.15px;
+}
+.environmentVariablesContainer {
+  display: flex;
+  min-height: 200px;
+  padding-bottom: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.environmentVariablesHeader {
+  display: flex;
+  padding: 12px 16px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.environmentVariablesHeader p {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  flex: 1 0 0;
+  color: #fff;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.envVariablesHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.envVariablesHeader > div {
+  display: flex;
+  padding: 12px 16px;
+  align-items: flex-start;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2e3f;
+}
+.envVariablesHeader > div p {
+  display: flex;
+  align-items: flex-start;
+  flex: 1 0 0;
+  color: #85869b;
+  font-family: Inter;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.variableList {
+  display: flex;
+  padding: 0 16px 16px 16px;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+}
+.emptyVariableList {
+  display: flex;
+  padding: 24px 16px 0 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  flex: 1 0 0;
+}
+.emptyVariableList > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+}
+.emptyVariableList > div > div {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex: 1 0 0;
+  color: #85869b;
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
--- a/frontend/src/app/projects/view/page.jsx
+++ b/frontend/src/app/projects/view/page.jsx
@@ -0,0 +1,403 @@
+"use client";
+import React, { useState } from "react";
+import globalStyle from "../../globalStyle.module.css";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import styles from "./styles.module.css";
+import AddServicesModal from "./AddServicesModal/AddServicesModal";
+const AddProject = () => {
+  const [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false);
+  const sampleData = [
+    {
+      name: "accounting-service",
+      version: "v1",
+      health: {
+        overall: "Healthy",
+        liveness: "Unreachable",
+        readiness: "Ready",
+      },
+      status: {
+        deployment: "Healthy",
+        replicas: "1/1",
+      },
+      image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
+      ingress: "",
+      ports: "3000:3000, 50054:50054",
+    },
+    {
+      name: "accounting-service",
+      version: "v1",
+      health: {
+        overall: "Healthy",
+        liveness: "Unreachable",
+        readiness: "Ready",
+      },
+      status: {
+        deployment: "Healthy",
+        replicas: "1/1",
+      },
+      image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
+      ingress: "",
+      ports: "3000:3000, 50054:50054",
+    },
+    {
+      name: "accounting-service",
+      version: "v1",
+      health: {
+        overall: "Healthy",
+        liveness: "Unreachable",
+        readiness: "Ready",
+      },
+      status: {
+        deployment: "Healthy",
+        replicas: "1/1",
+      },
+      image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
+      ingress: "",
+      ports: "3000:3000, 50054:50054",
+    },
+    {
+      name: "accounting-service",
+      version: "v1",
+      health: {
+        overall: "Healthy",
+        liveness: "Unreachable",
+        readiness: "Ready",
+      },
+      status: {
+        deployment: "Healthy",
+        replicas: "1/1",
+      },
+      image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
+      ingress: "",
+      ports: "3000:3000, 50054:50054",
+    },
+    {
+      name: "accounting-service",
+      version: "v1",
+      health: {
+        overall: "Healthy",
+        liveness: "Unreachable",
+        readiness: "Ready",
+      },
+      status: {
+        deployment: "Healthy",
+        replicas: "1/1",
+      },
+      image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
+      ingress: "",
+      ports: "3000:3000, 50054:50054",
+    },
+    {
+      name: "accounting-service",
+      version: "v1",
+      health: {
+        overall: "Healthy",
+        liveness: "Unreachable",
+        readiness: "Ready",
+      },
+      status: {
+        deployment: "Healthy",
+        replicas: "1/1",
+      },
+      image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
+      ingress: "",
+      ports: "3000:3000, 50054:50054",
+    },
+    {
+      name: "accounting-service",
+      version: "v1",
+      health: {
+        overall: "Healthy",
+        liveness: "Unreachable",
+        readiness: "Ready",
+      },
+      status: {
+        deployment: "Healthy",
+        replicas: "1/1",
+      },
+      image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
+      ingress: "",
+      ports: "3000:3000, 50054:50054",
+    },
+    {
+      name: "accounting-service",
+      version: "v1",
+      health: {
+        overall: "Healthy",
+        liveness: "Unreachable",
+        readiness: "Ready",
+      },
+      status: {
+        deployment: "Healthy",
+        replicas: "1/1",
+      },
+      image: "xuru.isaachybrid.com/698d24e36c2855a6f0d8cf9b/accounting-service",
+      ingress: "",
+      ports: "3000:3000, 50054:50054",
+    },
+  ];
+  return (
+    <>
+      {triggerAddServicesModal && (
+        <AddServicesModal
+          trigger={setTriggerAddServicesModal}
+          triggerState={triggerAddServicesModal}
+        />
+      )}
+
+      <div className={globalStyle.section}>
+        <div className={globalStyle.mainContainer}>
+          <div className={globalStyle.container}>
+            <TopHeader
+              buttonText="Add Services"
+              cancelButtonText="Cancel"
+              state="view"
+              topbarTitle="Services"
+              trigger={setTriggerAddServicesModal}
+              triggerState={triggerAddServicesModal}
+            />
+            <div className={styles.tableContainer}>
+              <table className={styles.table}>
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Version</th>
+                    <th>Health</th>
+                    <th>Status</th>
+                    <th width="15%">Image</th>
+                    <th>Ingress</th>
+                    <th>Port</th>
+                    <th>Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {sampleData.map((services, index) => {
+                    return (
+                      <tr key={index}>
+                        <td>{services.name}</td>
+                        <td style={{ textAlign: "center" }}>
+                          {services.version}
+                        </td>
+                        <td>
+                          <div className={styles.servicesHealth}>
+                            <div>
+                              <div>
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="8"
+                                  height="8"
+                                  viewBox="0 0 8 8"
+                                  fill="none"
+                                >
+                                  <path
+                                    d="M2.32605 1.02451C2.62107 0.974241 2.92361 0.990823 3.21137 1.07303C3.49913 1.15524 3.76477 1.30098 3.98872 1.49951L4.00105 1.51051L4.01238 1.50051C4.22612 1.31294 4.47739 1.17311 4.74944 1.09034C5.02149 1.00756 5.30807 0.983759 5.59005 1.02051L5.67205 1.03251C6.02748 1.09388 6.35971 1.25023 6.63354 1.485C6.90737 1.71977 7.11261 2.02422 7.22753 2.36612C7.34245 2.70802 7.36278 3.07463 7.28635 3.42713C7.20992 3.77963 7.03959 4.10491 6.79338 4.36851L6.73338 4.43017L6.71738 4.44384L4.23405 6.90351C4.17674 6.96023 4.10082 6.99425 4.02034 6.99928C3.93987 7.0043 3.8603 6.97999 3.79638 6.93084L3.76505 6.90351L1.26738 4.42951C1.00279 4.17206 0.814617 3.8464 0.723703 3.4886C0.63279 3.13079 0.642684 2.75481 0.75229 2.40228C0.861896 2.04975 1.06694 1.73444 1.3447 1.49127C1.62247 1.24809 1.96213 1.08654 2.32605 1.02451Z"
+                                    fill="#4A9D41"
+                                    style={{ fill: "#4A9D41", fillOpacity: 1 }}
+                                  />
+                                </svg>
+                                <p>Overall</p>
+                              </div>
+                              <p>{services.health.overall}</p>
+                            </div>
+                            <div>
+                              <div>
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="8"
+                                  height="8"
+                                  viewBox="0 0 8 8"
+                                  fill="none"
+                                >
+                                  <path
+                                    d="M4.42857 0V3.11111H7L3.57143 8V4.88889H1L4.42857 0Z"
+                                    fill="#CAB111"
+                                    style={{ fill: "#CAB111", fillOpacity: 1 }}
+                                  />
+                                </svg>
+                                <p>Liveness</p>
+                              </div>
+                              <p>{services.health.liveness}</p>
+                            </div>
+
+                            <div>
+                              <div>
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="8"
+                                  height="8"
+                                  viewBox="0 0 8 8"
+                                  fill="none"
+                                >
+                                  <path
+                                    d="M2 1.33343V6.66676C1.99998 6.72607 2.01579 6.78431 2.04579 6.83547C2.0758 6.88663 2.11891 6.92887 2.17067 6.95781C2.22244 6.98675 2.281 7.00135 2.34029 7.00011C2.39959 6.99888 2.45748 6.98184 2.508 6.95076L6.84133 4.28409C6.88987 4.25427 6.92995 4.21251 6.95775 4.16279C6.98555 4.11307 7.00015 4.05706 7.00015 4.00009C7.00015 3.94313 6.98555 3.88712 6.95775 3.8374C6.92995 3.78768 6.88987 3.74592 6.84133 3.71609L2.508 1.04943C2.45748 1.01835 2.39959 1.00131 2.34029 1.00007C2.281 0.998834 2.22244 1.01344 2.17067 1.04238C2.11891 1.07132 2.0758 1.11355 2.04579 1.16472C2.01579 1.21588 1.99998 1.27412 2 1.33343Z"
+                                    fill="#757696"
+                                    style={{ fill: "#757696", fillOpacity: 1 }}
+                                  />
+                                </svg>
+                                <p>Readiness</p>
+                              </div>
+                              <p>{services.health.readiness}</p>
+                            </div>
+                          </div>
+                        </td>
+                        <td>
+                          <div className={styles.servicesStatus}>
+                            <div>
+                              <div>
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="8"
+                                  height="8"
+                                  viewBox="0 0 8 8"
+                                  fill="none"
+                                >
+                                  <path
+                                    d="M2.19128 4.12547C2.33573 3.74214 2.51489 3.37964 2.72878 3.03797C2.94266 2.6963 3.18573 2.37269 3.45794 2.06714L2.81628 1.94214C2.70516 1.9199 2.59544 1.92547 2.48711 1.9588C2.37878 1.99214 2.28573 2.04769 2.20794 2.12547L1.07461 3.26714C1.0135 3.32824 0.991276 3.40185 1.00794 3.48797C1.02461 3.57407 1.07183 3.63381 1.14961 3.66714L2.19128 4.12547ZM7.02461 0.808797C6.41906 0.764353 5.84544 0.86852 5.30378 1.1213C4.76211 1.37407 4.27461 1.71714 3.84128 2.15047C3.56349 2.42824 3.31766 2.72407 3.10378 3.03797C2.88989 3.35185 2.71349 3.69214 2.57461 4.0588C2.55239 4.11436 2.54128 4.1699 2.54128 4.22547C2.54128 4.28102 2.56349 4.33102 2.60794 4.37547L3.73294 5.50047C3.77739 5.5449 3.82739 5.56714 3.88294 5.56714C3.93849 5.56714 3.99406 5.55602 4.04961 5.5338C4.41628 5.40047 4.75656 5.22547 5.07044 5.0088C5.38433 4.79214 5.68016 4.54491 5.95794 4.26714C6.39128 3.83381 6.73573 3.34631 6.99128 2.80464C7.24683 2.26297 7.35239 1.68935 7.30794 1.0838C7.30239 1.05046 7.29266 1.01852 7.27878 0.987963C7.26489 0.957408 7.24406 0.928242 7.21628 0.900463C7.18849 0.872687 7.15933 0.851853 7.12878 0.837963C7.09823 0.824075 7.06349 0.814353 7.02461 0.808797ZM4.88294 3.22547C4.77183 3.11435 4.71628 2.97685 4.71628 2.81297C4.71628 2.64907 4.77183 2.51157 4.88294 2.40047C4.99406 2.28935 5.13156 2.2338 5.29544 2.2338C5.45933 2.2338 5.59683 2.28935 5.70794 2.40047C5.81906 2.51157 5.87461 2.64907 5.87461 2.81297C5.87461 2.97685 5.81906 3.11435 5.70794 3.22547C5.59683 3.33657 5.45933 3.39214 5.29544 3.39214C5.13156 3.39214 4.99406 3.33657 4.88294 3.22547ZM3.99128 5.91714L4.44128 6.95881C4.47461 7.04214 4.53573 7.09074 4.62461 7.10464C4.71349 7.11852 4.78849 7.0949 4.84961 7.0338L5.98294 5.90047C6.06073 5.82269 6.11628 5.72964 6.14961 5.6213C6.18294 5.51297 6.18849 5.40324 6.16628 5.29214L6.04961 4.65047C5.74406 4.92269 5.42044 5.16574 5.07878 5.37964C4.73711 5.59352 4.37461 5.77269 3.99128 5.91714ZM1.34961 5.35047C1.54405 5.15602 1.78016 5.0574 2.05794 5.05464C2.33573 5.05186 2.57183 5.14769 2.76628 5.34214C2.96073 5.53657 3.05794 5.77269 3.05794 6.05047C3.05794 6.32824 2.96073 6.56435 2.76628 6.7588C2.49961 7.02547 2.18433 7.1838 1.82044 7.23381C1.45655 7.28381 1.09128 7.3338 0.724609 7.3838C0.774609 7.01714 0.825998 6.65185 0.878776 6.28797C0.931553 5.92407 1.0885 5.61157 1.34961 5.35047Z"
+                                    fill="#82EEFF"
+                                    style={{ fill: "#82EEFF", fillOpacity: 1 }}
+                                  />
+                                </svg>
+                                <p>Deployment</p>
+                              </div>
+                              <p>{services.status.deployment}</p>
+                            </div>
+
+                            <div>
+                              <div>
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="10"
+                                  height="10"
+                                  viewBox="0 0 10 10"
+                                  fill="none"
+                                >
+                                  <path
+                                    d="M1.40625 3.00358C1.40625 2.68587 1.53246 2.38118 1.75711 2.15653C1.98176 1.93187 2.28646 1.80566 2.60417 1.80566H7.39583C7.71354 1.80566 8.01824 1.93187 8.24289 2.15653C8.46754 2.38118 8.59375 2.68587 8.59375 3.00358V3.80219C8.59375 4.1199 8.46754 4.42459 8.24289 4.64925C8.01824 4.8739 7.71354 5.00011 7.39583 5.00011H2.60417C2.28646 5.00011 1.98176 4.8739 1.75711 4.64925C1.53246 4.42459 1.40625 4.1199 1.40625 3.80219V3.00358Z"
+                                    stroke="#617EE9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                  <path
+                                    d="M1.40625 6.19792C1.40625 5.88021 1.53246 5.57551 1.75711 5.35086C1.98176 5.12621 2.28646 5 2.60417 5H7.39583C7.71354 5 8.01824 5.12621 8.24289 5.35086C8.46754 5.57551 8.59375 5.88021 8.59375 6.19792V6.99653C8.59375 7.31423 8.46754 7.61893 8.24289 7.84358C8.01824 8.06824 7.71354 8.19444 7.39583 8.19444H2.60417C2.28646 8.19444 1.98176 8.06824 1.75711 7.84358C1.53246 7.61893 1.40625 7.31423 1.40625 6.99653V6.19792Z"
+                                    stroke="#617EE9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                  <path
+                                    d="M3.00391 3.40234V3.40599"
+                                    stroke="#617EE9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                  <path
+                                    d="M3.00391 6.59766V6.60131"
+                                    stroke="#617EE9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                  <path
+                                    d="M4.60156 3.40234H6.9974"
+                                    stroke="#617EE9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                  <path
+                                    d="M4.60156 6.59766H6.9974"
+                                    stroke="#617EE9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                </svg>
+                                <p>Replicas</p>
+                              </div>
+                              <p>{services.status.replicas}</p>
+                            </div>
+                          </div>
+                        </td>
+                        <td>{services.image}</td>
+                        <td>{services.ingress}</td>
+                        <td>{services.ports}</td>
+                        <td>
+                          <div className={styles.actions}>
+                            <div>
+                              <button className={styles.iconButton}>
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width={20}
+                                  height={20}
+                                  viewBox="0 0 20 20"
+                                  fill="none"
+                                >
+                                  <path
+                                    d="M8.40234 9.99957C8.40234 10.4232 8.57062 10.8294 8.87016 11.129C9.1697 11.4285 9.57596 11.5968 9.99957 11.5968C10.4232 11.5968 10.8294 11.4285 11.129 11.129C11.4285 10.8294 11.5968 10.4232 11.5968 9.99957C11.5968 9.57596 11.4285 9.1697 11.129 8.87016C10.8294 8.57062 10.4232 8.40234 9.99957 8.40234C9.57596 8.40234 9.1697 8.57062 8.87016 8.87016C8.57062 9.1697 8.40234 9.57596 8.40234 9.99957Z"
+                                    stroke="#969AF9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                  <path
+                                    d="M17.1875 9.99967C15.2708 13.1941 12.875 14.7913 10 14.7913C7.125 14.7913 4.72917 13.1941 2.8125 9.99967C4.72917 6.80523 7.125 5.20801 10 5.20801C12.875 5.20801 15.2708 6.80523 17.1875 9.99967Z"
+                                    stroke="#969AF9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                </svg>
+                              </button>
+                            </div>
+                            <div>
+                              <button className={styles.iconButton}>
+                                <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="#969AF9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                  <path
+                                    d="M8.40234 9.20117V13.9928"
+                                    stroke="#969AF9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                  <path
+                                    d="M11.5977 9.20117V13.9928"
+                                    stroke="#969AF9"
+                                    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="#969AF9"
+                                    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="#969AF9"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                </svg>
+                              </button>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AddProject;
--- a/frontend/src/app/projects/view/styles.module.css
+++ b/frontend/src/app/projects/view/styles.module.css
@@ -0,0 +1,153 @@
+.tableContainer {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+}
+.tableContainer table,
+.tableContainer table thead {
+  border-collapse: collapse;
+  border: none;
+  width: calc(100% -250px);
+}
+
+.tableContainer th {
+  background: #1c1d2b;
+  top: 0;
+  position: sticky;
+  text-wrap: nowrap;
+  color: #85869b;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.tableContainer th,
+.tableContainer td {
+  padding: 12px 0px;
+  padding-left: 24px;
+  text-align: start;
+  align-self: stretch;
+}
+.tableContainer thead tr {
+  border-bottom: 1px solid #212235;
+  background: #1c1d2b;
+}
+.tableContainer tbody td {
+  color: #eeeffd;
+  font-family: Inter;
+  overflow-wrap: anywhere;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.tableContainer tbody tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+  cursor: pointer;
+}
+.tableContainer tbody tr:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  background: rgba(129, 135, 255, 0.05);
+}
+
+.servicesHealth,
+.servicesStatus {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+}
+.servicesHealth > div,
+.servicesStatus > div {
+  display: flex;
+  padding: 4px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  border-radius: 6px;
+  border: 1px solid rgba(22, 159, 49, 0.25);
+  background: rgba(22, 159, 49, 0.05);
+  color: #179f31;
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.servicesHealth > div:nth-child(2) {
+  border: 1px solid rgba(207, 176, 0, 0.25);
+  background: rgba(207, 176, 0, 0.05);
+  color: #cfb000;
+}
+.servicesHealth > div:nth-child(2) > div {
+  color: #cfb000;
+}
+.servicesHealth > div:nth-child(3) {
+  border: 1px solid rgba(117, 118, 153, 0.25);
+  background: rgba(117, 118, 153, 0.05);
+  color: #757696;
+}
+.servicesHealth > div:nth-child(3) > div {
+  color: #757696;
+}
+.servicesHealth > div > div,
+.servicesStatus > div > div {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #179f31;
+  font-family: Inter;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.servicesStatus > div:nth-child(1) {
+  border-radius: 6px;
+  border: 1px solid rgba(80, 241, 255, 0.25);
+  background: rgba(80, 241, 255, 0.05);
+  color: #82eeff;
+}
+.servicesStatus > div:nth-child(1) > div {
+  color: #82eeff;
+}
+.servicesStatus > div:nth-child(2) {
+  border-radius: 6px;
+  border: 1px solid rgba(89, 127, 241, 0.25);
+  background: rgba(89, 127, 241, 0.05);
+  color: #617ee9;
+}
+.servicesStatus > div:nth-child(2) > div {
+  color: #617ee9;
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+.iconButton {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: rgba(255, 255, 255, 0);
+  outline: none;
+  border: 1px solid #959aff00;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.iconButton:hover {
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+.iconButton:hover path {
+  stroke: white;
+}
--- a/frontend/src/app/roles/[rolesId]/page.jsx
+++ b/frontend/src/app/roles/[rolesId]/page.jsx
@@ -0,0 +1,198 @@
+import React from "react";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import globalStyle from "../../globalStyle.module.css";
+import editRoleStyle from "./styles.module.css";
+import TextField from "@/app/components/fields/textfield";
+
+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}>
+                        {/* Static */}
+                        <TextField placeHolder="organization-owner" />
+                      </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}>
+                        {/* Static */}
+                        <TextField placeHolder="67160a5ae69144ff19aafb86" />
+                      </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;
--- a/frontend/src/app/roles/[rolesId]/styles.module.css
+++ 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%
+  );
+}
--- a/frontend/src/app/roles/add/page.jsx
+++ b/frontend/src/app/roles/add/page.jsx
@@ -0,0 +1,109 @@
+import React from "react";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import globalStyle from "../../globalStyle.module.css";
+import addRoleStyle from "./styles.module.css";
+import TextField from "@/app/components/fields/textfield";
+
+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}>
+                        <TextField placeHolder="Enter name" />
+                      </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}>
+                        <TextField placeHolder="Enter organization ID" />
+                      </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;
--- a/frontend/src/app/roles/add/styles.module.css
+++ 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;
+}
--- a/frontend/src/app/roles/page.jsx
+++ b/frontend/src/app/roles/page.jsx
@@ -0,0 +1,97 @@
+"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";
+import ViewIcon from "../components/icons/view";
+import DeleteIcon from "../components/icons/delete";
+import SuccessToast from "../components/toast/success/successToast";
+
+const RolesPage = () => {
+  const router = useRouter();
+
+  const sampleData = [
+    {
+      id: 1,
+      name: "organization-owner",
+      orgId: "67160a5ae69144ff19aafb86",
+      permissions: "35 Permissions",
+    },
+    {
+      id: 2,
+      name: "organization-owner",
+      orgId: "67160a5ae69144ff19aafb86",
+      permissions: "35 Permissions",
+    },
+    {
+      id: 3,
+      name: "organization-owner",
+      orgId: "67160a5ae69144ff19aafb86",
+      permissions: "35 Permissions",
+    },
+    {
+      id: 4,
+      name: "organization-owner",
+      orgId: "67160a5ae69144ff19aafb86",
+      permissions: "35 Permissions",
+    },
+    {
+      id: 5,
+      name: "organization-owner",
+      orgId: "67160a5ae69144ff19aafb86",
+      permissions: "35 Permissions",
+    },
+  ];
+  return (
+    <div className={globalStyle.section}>
+      <SuccessToast message="New Role added successfully!" />
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add Role" topbarTitle="Roles" />
+          {/* Users Table */}
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead className={styles.tableHeader}>
+                <tr>
+                  <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((role, index) => {
+                  //role or user?
+                  return (
+                    <tr
+                      key={role.id}
+                      onClick={() => router.push(`/roles/${role.id}`)}
+                    >
+                      <td>{role.name}</td>
+                      <td>{role.orgId}</td>
+                      <td>{role.permissions}</td>
+                      <td>
+                        <div className={styles.tableActions}>
+                          <button className={styles.viewBtn}>
+                            <ViewIcon />
+                          </button>
+                          <button className={styles.deleteBtn}>
+                            <DeleteIcon />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RolesPage;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Laux Dev	f16b78834c		2026-03-02 11:58:42 +08:00
Laux Dev	c07e79cc58	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-03-02 11:58:11 +08:00
Laux Dev	39154632f4	Add switches	2026-03-02 11:58:06 +08:00
benzbarquilla	caf39da334	changes in input fields	2026-03-01 19:46:07 +08:00
Laux Dev	d86f71ee6a	Added modals	2026-03-01 12:46:48 +08:00
benzbarquilla	da64ef2255	done create credentials	2026-02-28 20:52:41 +08:00
Laux Dev	832e5de433	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-02-27 16:48:43 +08:00
Laux Dev	056a106990	cenvert to components	2026-02-27 16:48:31 +08:00
sigmaBoei	fe977ea4d7	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-02-27 16:43:56 +08:00
sigmaBoei	d0fce8fb05	done create credential	2026-02-27 16:43:50 +08:00
Laux Dev	67d9ebf11f	cenvert to component	2026-02-27 16:33:37 +08:00
Laux Dev	ce8649733f	converted to components	2026-02-27 16:07:26 +08:00
Laux Dev	2e772b2044	convert to components	2026-02-27 16:07:07 +08:00
sigmaBoei	6afc34a96c	role changes	2026-02-27 16:05:27 +08:00
sigmaBoei	d2d881c373	changes in user and role	2026-02-27 14:17:05 +08:00
sigmaBoei	3a9ee85402	users adjustments	2026-02-27 13:52:07 +08:00
sigmaBoei	de692a1248	users page changes	2026-02-27 13:48:05 +08:00
sigmaBoei	e2499cd67e	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-02-27 11:06:15 +08:00
sigmaBoei	fbf9067778	done user and role page	2026-02-27 11:05:53 +08:00
Laux Dev	f13226d379	Added features	2026-02-27 11:05:46 +08:00
sigmaBoei	7ca948c6ad	import changes	2026-02-27 08:16:33 +08:00
sigmaBoei	af243d17cb	done users page	2026-02-26 20:44:19 +08:00
Laux Dev	ccd0caf14d	Added new features	2026-02-26 16:27:44 +08:00
Laux Dev	bd94bb4618	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-02-26 11:59:20 +08:00
Laux Dev	7b99f73a7e	Added projects features	2026-02-26 11:59:16 +08:00
sigmaBoei	f88ef87c2d	profile dropdown changes	2026-02-26 11:27:20 +08:00
sigmaBoei	b1a79b90a1	done profile dropdown	2026-02-26 11:12:41 +08:00
sigmaBoei	c98177c4ee	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-02-25 16:32:52 +08:00
sigmaBoei	48cf9a32bc	continued profile dropdown	2026-02-25 16:32:43 +08:00
Laux Dev	881cc5b8bb	Added add project page	2026-02-25 16:32:40 +08:00
sigmaBoei	8c5d3ef6c9	done roles layout	2026-02-25 15:20:26 +08:00
sigmaBoei	dd0f0f377d	users page layout	2026-02-25 14:30:26 +08:00
Laux Dev	cf54a4a2e8	Add table for agents and credentials	2026-02-25 14:29:13 +08:00
Laux Dev	1c0532efa7	Added add ogranization page and project page	2026-02-25 11:39:22 +08:00
sigmaBoei	03bb2c22aa	done navbar layout	2026-02-25 09:22:47 +08:00
Laux Dev	892ea45f38	Added project table	2026-02-25 09:22:01 +08:00
Laux Dev	205e1d7078	Added conditioned button	2026-02-25 08:12:05 +08:00
sigmaBoei	aeee39852b	added profile section	2026-02-24 21:04:35 +08:00
sigmaBoei	8b2d410738	added comments	2026-02-24 20:31:19 +08:00
sigmaBoei	63375ee272	done dropdown sheesh	2026-02-24 16:28:19 +08:00
Laux Dev	e9c266fe8f	Table added in origanization	2026-02-24 16:26:51 +08:00
sigmaBoei	8580c0c6ac	fixed moving text	2026-02-24 13:48:22 +08:00
sigmaBoei	ef2232958d	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-02-24 13:27:14 +08:00
sigmaBoei	2ccd9f5c26	header update	2026-02-24 13:27:07 +08:00
Laux Dev	27aef888de	Added Topbar Header every page	2026-02-24 13:25:40 +08:00
Laux Dev	a6ae45d9cf	Added navigations pages	2026-02-24 10:50:14 +08:00
Laux Dev	969301e80f	fixed layout	2026-02-24 10:01:14 +08:00
sigmaBoei	a161e72304	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-02-24 09:50:24 +08:00
sigmaBoei	91ccc46b29	updated layout	2026-02-24 09:48:31 +08:00
Laux Dev	49171d5d42	Updated sidebar	2026-02-24 09:43:08 +08:00
sigmaBoei	9797432b7d	added navbar	2026-02-23 21:22:53 +08:00
sigmaBoei	0c634b8294	added logo	2026-02-23 21:20:06 +08:00
Laux Dev	db5b910653	sidebar	2026-02-23 17:00:04 +08:00
sigmaBoei	7978b37203	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-02-23 16:16:04 +08:00
Laux Dev	ce1679fd92	Sidebar layout	2026-02-23 16:14:08 +08:00
sigmaBoei	c95da0891e	initial commit	2026-02-23 16:13:33 +08:00
Laux Dev	9301a90ec8	added folders	2026-02-23 16:01:46 +08:00
Laux Dev	13d420282e	Updated global	2026-02-23 15:52:10 +08:00