diff --git a/frontend/public/PROFILE.svg b/frontend/public/profile/PROFILE.svg
similarity index 100%
rename from frontend/public/PROFILE.svg
rename to frontend/public/profile/PROFILE.svg
diff --git a/frontend/src/app/components/header/Header.jsx b/frontend/src/app/components/header/Header.jsx
index 1713508..23c5ebd 100644
--- a/frontend/src/app/components/header/Header.jsx
+++ b/frontend/src/app/components/header/Header.jsx
@@ -2,218 +2,12 @@
 
 import React from "react";
 import styles from "./styles.module.css";
-import { useState } from "react";
+import HeaderDetails from "./components/HeaderDetails";
 
 const Header = () => {
-  const orgList = [
-    { name: "Project Moonshot Inc." },
-    { name: "Organization X" },
-    { name: "Organization Y" },
-    { name: "Organization Z" },
-  ];
-  const [open, setOpen] = useState(false);
-  const [selectedOrg, setSelectedOrg] = useState(null);
-
-  const handleOrgSelect = (index) => {
-    setSelectedOrg(index);
-  };
-
   return (
     <div className={styles.mainContainer}>
-      {/* Organization and Dropdown Section*/}
-      <div className={styles.organizationContainer}>
-        <div className={styles.orgContainer}>
-          {/* Logo */}
-          <div className={styles.orgLogo}></div>
-          <div className={styles.orgName}>
-            <p>Organization</p>
-            <div className={styles.dropdownContainer}>
-              {/* Dropdown Menu*/}
-              {open && (
-                <div className={styles.dropdown}>
-                  {/* Organization Header and Search  */}
-                  <div className={styles.orgSearchContainer}>
-                    {/* Header */}
-                    <div className={styles.createBtnContainer}>
-                      <p>Organization</p>
-                      <div className={styles.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={styles.srchInputContainer}>
-                      <div className={styles.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={styles.placeholderTxt}
-                          type="text"
-                          name="search"
-                          id=""
-                          placeholder="Search"
-                        />
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Select Options */}
-                  <div className={styles.optionsContainer}>
-                    {orgList.map((org, index) => {
-                      return (
-                        <div
-                          className={styles.orgList}
-                          key={index}
-                          onClick={() => handleOrgSelect(index)}
-                        >
-                          <div
-                            className={`${styles.iconTxt} ${index === selectedOrg ? styles.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={styles.dropdownBtn}
-                onClick={() => setOpen(!open)}
-              >
-                <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={styles.profileContainer}>
-        {/* Profile */}
-        <div className={styles.profileBadge}>
-          {/* Username and Role*/}
-          <div className={styles.nameRole}>
-            <p className={styles.userName}>JM Grills</p>
-            <p className={styles.userRole}>Super Admin</p>
-          </div>
-
-          {/* User profile*/}
-          <div className={styles.userImgContainer}>
-            <div className={styles.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 */}
-        <div></div>
-      </div>
+      <HeaderDetails />
     </div>
   );
 };
diff --git a/frontend/src/app/components/header/components/HeaderDetails.jsx b/frontend/src/app/components/header/components/HeaderDetails.jsx
new file mode 100644
index 0000000..18f7347
--- /dev/null
+++ b/frontend/src/app/components/header/components/HeaderDetails.jsx
@@ -0,0 +1,227 @@
+"use client";
+
+import React from "react";
+import orgStyles from "./Organization.module.css";
+import profileStyles 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 [open, setOpen] = useState(false);
+  const [selectedOrg, setSelectedOrg] = useState(null);
+
+  const handleOrgSelect = (index) => {
+    setSelectedOrg(index);
+  };
+
+  return (
+    <>
+      {/* Organization and Dropdown Section*/}
+      <div className={orgStyles.organizationContainer}>
+        <div className={orgStyles.orgContainer}>
+          {/* Logo */}
+          <div className={orgStyles.orgLogo}></div>
+          <div className={orgStyles.orgName}>
+            <p>Organization</p>
+            <div className={orgStyles.dropdownContainer}>
+              {/* Dropdown Menu*/}
+              {open && (
+                <div className={orgStyles.dropdown}>
+                  {/* Organization Header and Search  */}
+                  <div className={orgStyles.orgSearchContainer}>
+                    {/* Header */}
+                    <div className={orgStyles.createBtnContainer}>
+                      <p>Organization</p>
+                      <div className={orgStyles.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={orgStyles.srchInputContainer}>
+                      <div className={orgStyles.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={orgStyles.placeholderTxt}
+                          type="text"
+                          name="search"
+                          id=""
+                          placeholder="Search"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Select Options */}
+                  <div className={orgStyles.optionsContainer}>
+                    {orgList.map((org, index) => {
+                      return (
+                        <div
+                          className={orgStyles.orgList}
+                          key={index}
+                          onClick={() => handleOrgSelect(index)}
+                        >
+                          <div
+                            className={`${orgStyles.iconTxt} ${index === selectedOrg ? orgStyles.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={orgStyles.dropdownBtn}
+                onClick={() => setOpen(!open)}
+              >
+                <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={profileStyles.profileContainer}>
+        {/* Profile */}
+        <div className={profileStyles.profileBadge}>
+          {/* Username and Role*/}
+          <div className={profileStyles.nameRole}>
+            <p className={profileStyles.userName}>JM Grills</p>
+            <p className={profileStyles.userRole}>Super Admin</p>
+          </div>
+
+          {/* User profile*/}
+          <div className={profileStyles.userImgContainer}>
+            <div className={profileStyles.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>
+
+        {/* do later */}
+        {/* Dropdown */}
+        <div className={profileStyles.dropdownContainer}>
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default HeaderDetails;
diff --git a/frontend/src/app/components/header/components/Organization.module.css b/frontend/src/app/components/header/components/Organization.module.css
new file mode 100644
index 0000000..99bbaf2
--- /dev/null
+++ b/frontend/src/app/components/header/components/Organization.module.css
@@ -0,0 +1,232 @@
+/* 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;
+  top: 100%;
+  margin-top: 8px;
+  left: 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;
+  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;
+}
+.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;
+}
diff --git a/frontend/src/app/components/header/components/Profile.module.css b/frontend/src/app/components/header/components/Profile.module.css
new file mode 100644
index 0000000..ac83eb6
--- /dev/null
+++ b/frontend/src/app/components/header/components/Profile.module.css
@@ -0,0 +1,70 @@
+/* Profile and Dropdown */
+.profileContainer {
+  display: flex;
+  height: 44px;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.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;
+}
diff --git a/frontend/src/app/components/header/styles.module.css b/frontend/src/app/components/header/styles.module.css
index 9bac787..43f803c 100644
--- a/frontend/src/app/components/header/styles.module.css
+++ b/frontend/src/app/components/header/styles.module.css
@@ -8,296 +8,3 @@
   border-bottom: 1px solid #2c2d3d;
   border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
 }
-.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 */
-.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;
-  top: 100%;
-  margin-top: 8px;
-  left: 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;
-  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;
-}
-.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;
-}
-/* Profile */
-.profileContainer {
-  display: flex;
-  height: 44px;
-  flex-direction: column;
-  align-items: flex-end;
-}
-.profileBadge {
-  display: flex;
-  padding: 6px 0 6px 8px;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 10px;
-}
-.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% */
-  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% */
-  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.svg) lightgray 50% / cover no-repeat;
-}