diff --git a/frontend/public/images/BadgeImage.png b/frontend/public/images/BadgeImage.png
new file mode 100644
index 0000000..9444049
Binary files /dev/null and b/frontend/public/images/BadgeImage.png differ
diff --git a/frontend/src/app/components/sidebar/Sidebar.jsx b/frontend/src/app/components/sidebar/Sidebar.jsx
index 2201a46..8dfad43 100644
--- a/frontend/src/app/components/sidebar/Sidebar.jsx
+++ b/frontend/src/app/components/sidebar/Sidebar.jsx
@@ -91,7 +91,7 @@ const Sidebar = () => {
         {/* Navigations */}
         <div className={styles.navContainer}>
           <div
-            className={`${styles.nav} ${pathname === "/home" ? styles.active : ""}`}
+            className={`${styles.nav} ${pathname.includes("/home") ? styles.active : ""}`}
             onClick={navToHome}
           >
             <svg
@@ -126,7 +126,7 @@ const Sidebar = () => {
             <p>Home</p>
           </div>
           <div
-            className={`${styles.nav} ${pathname === "/organization" ? styles.active : ""}`}
+            className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
             onClick={navToOrganization}
           >
             <svg
@@ -148,7 +148,7 @@ const Sidebar = () => {
           </div>
           <div
             onClick={navToProject}
-            className={`${styles.nav} ${pathname === "/projects" ? styles.active : ""}`}
+            className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -169,7 +169,7 @@ const Sidebar = () => {
           </div>
           <div
             onClick={navToUsers}
-            className={`${styles.nav} ${pathname === "/users" ? styles.active : ""}`}
+            className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -190,7 +190,7 @@ const Sidebar = () => {
           </div>
           <div
             onClick={navToRoles}
-            className={`${styles.nav} ${pathname === "/roles" ? styles.active : ""}`}
+            className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -240,7 +240,7 @@ const Sidebar = () => {
           </div>
           <div
             onClick={navToCredentials}
-            className={`${styles.nav} ${pathname === "/credentials" ? styles.active : ""}`}
+            className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -261,7 +261,7 @@ const Sidebar = () => {
           </div>
           <div
             onClick={navToAgents}
-            className={`${styles.nav} ${pathname === "/agents" ? styles.active : ""}`}
+            className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/app/components/sidebar/styles.module.css b/frontend/src/app/components/sidebar/styles.module.css
index 17f6cc3..fece52f 100644
--- a/frontend/src/app/components/sidebar/styles.module.css
+++ b/frontend/src/app/components/sidebar/styles.module.css
@@ -9,6 +9,8 @@
   align-self: stretch;
   border-right: 1px solid #2c2d3d;
   user-select: none;
+  border-right: 1px solid #2c2d3d;
+  background: #191a24;
 }
 .topContainer {
   display: flex;
diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx
index df32d71..7367589 100644
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -1,34 +1,39 @@
 "use client";
 import React from "react";
 import styles from "./styles.module.css";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 
 const TopHeader = (props) => {
   const pathName = usePathname();
-  console.log(pathName);
+  const router = useRouter();
+  const handleNavigateToAdd = () => {
+    router.push(`${pathName}/add`);
+  };
   return (
     <div className={styles.container}>
       <div className={styles.title}>
         <p>{props.topbarTitle}</p>
       </div>
       <div className={styles.actionBar}>
-        <div className={styles.searchBarContainer}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width={24}
-            height={24}
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <path
-              d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
-              stroke="#858699"
-              strokeWidth={1.5}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </div>
+        {!props.state && (
+          <div className={styles.searchBarContainer}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width={24}
+              height={24}
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <path
+                d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
+                stroke="#858699"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+        )}
         {pathName === "/credentials" ? (
           <div className={styles.mngEnvKeyButton}>
             <svg
@@ -72,33 +77,62 @@ const TopHeader = (props) => {
         ) : (
           ""
         )}
-        <div className={styles.button}>
-          <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="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>
-          <p>{props.buttonText}</p>
-        </div>
+        {!props.state && (
+          <div className={styles.button} onClick={handleNavigateToAdd}>
+            <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="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>
+            <p>{props.buttonText}</p>
+          </div>
+        )}
+        {props.state === "add" ? (
+          <>
+            <div className={styles.button}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={20}
+                height={20}
+                viewBox="0 0 20 20"
+                fill="none"
+              >
+                <path
+                  d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
+                  stroke="white"
+                  strokeWidth={1.5}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+              <p>{props.buttonText}</p>
+            </div>
+            <div className={styles.cancelButton} onClick={() => router.back()}>
+              <p>{props.cancelButtonText}</p>
+            </div>
+          </>
+        ) : (
+          ""
+        )}
       </div>
     </div>
   );
diff --git a/frontend/src/app/components/topHeader/styles.module.css b/frontend/src/app/components/topHeader/styles.module.css
index e36243d..7f6b869 100644
--- a/frontend/src/app/components/topHeader/styles.module.css
+++ b/frontend/src/app/components/topHeader/styles.module.css
@@ -55,6 +55,7 @@
   border-radius: 6px;
   border-radius: 6px;
   border: 1px solid #5358f200;
+  cursor: pointer;
 }
 .mngEnvKeyButton > p {
   color: #8187ff;
@@ -75,3 +76,19 @@
 .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%);
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index ea52196..90815f3 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,11 +1,11 @@
 :root {
   --background: #d2d3e0;
-  --foreground: #1c1d28;
+  --foreground: #191a24;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #1c1d28;
+    --background: #191a24;
     --foreground: #d2d3e0;
   }
 }
diff --git a/frontend/src/app/organization/add/page.jsx b/frontend/src/app/organization/add/page.jsx
new file mode 100644
index 0000000..2a2a07f
--- /dev/null
+++ b/frontend/src/app/organization/add/page.jsx
@@ -0,0 +1,148 @@
+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";
+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}>
+            <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>
+            <div className={styles.createProjectForm}>
+              <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}>
+                  <input type="text" 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;
diff --git a/frontend/src/app/organization/add/styles.module.css b/frontend/src/app/organization/add/styles.module.css
new file mode 100644
index 0000000..082363a
--- /dev/null
+++ b/frontend/src/app/organization/add/styles.module.css
@@ -0,0 +1,191 @@
+.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;
+}
+.createProjectForm {
+  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;
+  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: #85869b;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.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;
+}
diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx
index 798935d..a3ad9e0 100644
--- a/frontend/src/app/organization/page.jsx
+++ b/frontend/src/app/organization/page.jsx
@@ -69,9 +69,9 @@ const OrganizationPage = () => {
             <table className={styles.table}>
               <thead>
                 <tr>
-                  <th>Organization Name</th>
-                  <th>Date Created</th>
-                  <th>Actions</th>
+                  <th width="45%">Organization Name</th>
+                  <th width="45%">Date Created</th>
+                  <th width="10%">Actions</th>
                 </tr>
               </thead>
 
diff --git a/frontend/src/app/organization/styles.module.css b/frontend/src/app/organization/styles.module.css
index 304fecd..349bf30 100644
--- a/frontend/src/app/organization/styles.module.css
+++ b/frontend/src/app/organization/styles.module.css
@@ -17,7 +17,6 @@
   padding: 12px 24px;
   gap: 17px;
   text-align: start;
-  align-self: stretch;
 }
 .tableContainer > table > thead > tr {
   border-bottom: 1px solid #212235;