diff --git a/apps/builddao/widget/components/ImageUploader.jsx b/apps/builddao/widget/components/ImageUploader.jsx
index 926b33d5..547246f6 100644
--- a/apps/builddao/widget/components/ImageUploader.jsx
+++ b/apps/builddao/widget/components/ImageUploader.jsx
@@ -1,5 +1,8 @@
 const image = props.image;
 const onChange = props.onChange;
+const { InputField } = VM.require("buildhub.near/widget/components") || {
+  InputField: () => <></>,
+};
 
 const Tab = {
   Upload: "Upload",
@@ -93,6 +96,30 @@ const onImageChange = debounce((e) => {
   });
 });
 
+const Button = styled.div`
+  .btn {
+    all: unset;
+    display: inline-flex;
+    padding: 10px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: normal;
+    font-family: "Poppins", sans-serif;
+    transition: all 300ms;
+    background: var(--button-outline-bg, transparent);
+    color: var(--button-outline-color, #fff);
+    border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
+    &:hover:not(:disabled) {
+      background: var(--button-outline-hover-bg, rgba(255, 255, 255, 0.2));
+      cursor: pointer;
+    }
+  }
+`;
+
 return (
   <div>
     <ul className={`nav nav-tabs`}>
@@ -124,32 +151,51 @@ return (
         </button>
       </li>
     </ul>
-    <div className="p-2">
-      <div className={`${state.tab === Tab.Upload ? "" : "visually-hidden"}`}>
+    <div
+      className="p-2"
+      style={{
+        border: "solid 1px #FFFFFF33",
+        borderTop: 0,
+        borderBottomLeftRadius: ".375rem",
+        borderBottomRightRadius: ".375rem",
+        minHeight: "9em",
+      }}
+    >
+      <Button
+        className={`${state.tab === Tab.Upload ? "" : "visually-hidden"}`}
+      >
         <IpfsImageUpload image={state.img} />
-      </div>
-      <div className={`${state.tab === Tab.NFT ? "" : "visually-hidden"}`}>
-        NFT contract
-        <input
-          type="text"
-          id="contractId"
-          defaultValue={state.nft.contractId}
+      </Button>
+      <div
+        className={`${
+          state.tab === Tab.NFT ? "d-flex flex-column gap-2" : "visually-hidden"
+        }`}
+      >
+        <InputField
+          key={"contractId"}
+          label={"NFT contract"}
+          placeholder={"nft contract id"}
+          value={state.nft.contractId}
           onChange={onNFTChange}
         />
-        NFT token id
-        <input
-          type="text"
-          id="tokenId"
-          defaultValue={state.nft.tokenId}
+        <InputField
+          key={"tokenId"}
+          label={"NFT token id"}
+          placeholder={"nft token id"}
+          value={state.nft.tokenId}
           onChange={onNFTChange}
         />
       </div>
-      <div className={`${state.tab === Tab.URL ? "" : "visually-hidden"}`}>
-        Image URL
-        <input
-          type="text"
-          id="url"
-          defaultValue={state.url}
+      <div
+        className={`${
+          state.tab === Tab.URL ? "d-flex flex-column gap-2" : "visually-hidden"
+        }`}
+      >
+        <InputField
+          key={"url"}
+          label={"Image URL"}
+          placeholder={"image url"}
+          value={state.url}
           onChange={onImageChange}
         />
       </div>
diff --git a/apps/builddao/widget/components/InputField.jsx b/apps/builddao/widget/components/InputField.jsx
index 1f7f330f..949d9e9f 100644
--- a/apps/builddao/widget/components/InputField.jsx
+++ b/apps/builddao/widget/components/InputField.jsx
@@ -23,11 +23,12 @@ const Input = styled.input`
   gap: 10px;
 
   border-radius: 8px;
-  border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
+  border-width: 1px;
+  border-style: solid;
   background: var(--bg-1, #000000);
-
+  border-color: var(--stroke-color, rgba(255, 255, 255, 0.2));
   flex: 1 0 0;
-
+  outline: none;
   color: var(--font-muted-color, #cdd0d5);
 
   /* Body/16px */
@@ -35,6 +36,12 @@ const Input = styled.input`
   font-style: normal;
   font-weight: 400;
   line-height: 170%; /* 27.2px */
+  &.invalid {
+    border-color: #ed5a5a;
+    :focus-within {
+      border: 1px solid #ed5a5a;
+    }
+  }
 `;
 
 function InputField({
@@ -44,6 +51,7 @@ function InputField({
   placeholder,
   value,
   onChange,
+  error,
   maxWidth,
 }) {
   return (
@@ -55,6 +63,7 @@ function InputField({
       <Input
         key={`input-field-${key}`}
         value={value}
+        className={error ? "invalid" : ""}
         onChange={onChange}
         placeholder={placeholder}
         type={type ?? "text"}
diff --git a/apps/builddao/widget/components/Modal.jsx b/apps/builddao/widget/components/Modal.jsx
index 024c86d4..98a11648 100644
--- a/apps/builddao/widget/components/Modal.jsx
+++ b/apps/builddao/widget/components/Modal.jsx
@@ -24,7 +24,7 @@ const Content = styled.div`
   max-width: 1000px;
   padding: 24px;
   outline: none !important;
-  background: var(--modal-background-color, #23242b);
+  background: var(--modal-background-color, #000);
   border-radius: 16px;
   color: var(--modal-text-color, #fff);
 
diff --git a/apps/builddao/widget/components/modals/CreateProject.jsx b/apps/builddao/widget/components/modals/CreateProject.jsx
new file mode 100644
index 00000000..0b5870f8
--- /dev/null
+++ b/apps/builddao/widget/components/modals/CreateProject.jsx
@@ -0,0 +1,292 @@
+const accountId = context.accountId;
+const { Modal, Button, InputField, TextEditor } = VM.require(
+  "buildhub.near/widget/components"
+) || {
+  Modal: () => <></>,
+  Button: () => <></>,
+  InputField: () => <></>,
+  TextEditor: () => <></>,
+};
+
+const showModal = props.showModal;
+const toggleModal = props.toggleModal;
+const toggle = props.toggle;
+
+const tabs = [
+  { id: "overview", label: "Overview", disabled: true, checked: true },
+  { id: "discussion", label: "Discussion", checked: false },
+  { id: "tasks", label: "Tasks", checked: false },
+  { id: "code", label: "Code", checked: false },
+  { id: "roadmap", label: "Roadmap", checked: false },
+];
+
+const [tags, setTags] = useState(props.filters.tags ?? []);
+const [title, setTitle] = useState("");
+const [description, setDescription] = useState("");
+const [location, setLocation] = useState("");
+const [contributors, setDistributors] = useState("");
+const [twitter, setTwitter] = useState("");
+const [gitHub, setGitHub] = useState("");
+const [telegram, setTelegram] = useState("");
+const [website, setWebsite] = useState("");
+const [selectedTabs, setSelectedTabs] = useState(
+  new Set(tabs.filter((tab) => tab.checked).map((tab) => tab.id.toLowerCase()))
+);
+const [avatar, setAvatar] = useState("");
+const [coverImage, setCoverImage] = useState("");
+
+const handleCheckboxChange = (event) => {
+  const { id } = event.target;
+  const newSelectedTabs = new Set(selectedTabs); // Create a copy to avoid mutation
+  if (event.target.checked) {
+    newSelectedTabs.add(id.toLowerCase());
+  } else {
+    newSelectedTabs.delete(id.toLowerCase());
+  }
+  setSelectedTabs(newSelectedTabs);
+};
+
+const following = Social.get(`${context.accountId}/graph/follow/*`);
+
+const accounts = following && Object.keys(following);
+
+const handleTags = (tags) => {
+  let filtered = tags.map((tag) => (tag.customOption ? tag.label : tag));
+  setTags(filtered);
+};
+
+const handleContributors = (contributors) => {
+  let filtered = contributors.map((contributor) =>
+    contributor.customOption ? contributor.label : contributor
+  );
+  setDistributors(filtered);
+};
+
+function isValidUrl(url) {
+  const regex = /^(?:(http|https):\/\/)?([^\s]+\.[^\s]+)?(?:\/[\w\-\.]+)*\/?$/;
+  return regex.test(url);
+}
+
+const websiteUrlHandler = (e) => {
+  const url = e.target.value;
+  setWebsite(url);
+};
+
+const Main = styled.div`
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    .lhs,
+    .rhs {
+      width: 100%;
+    }
+  }
+  .form-control {
+    background: transparent;
+  }
+  .lhs {
+    min-width: 400px;
+    > div {
+      width: 100%;
+    }
+  }
+  .rhs {
+    min-width: 400px;
+  }
+  .form-group {
+    width: 100%;
+    & > div > div.p-2 {
+      background: transparent !important;
+      border: 1px solid var(--border-color, #ccc);
+      border-width: 0px 1px 1px;
+      border-top-style: initial;
+      border-right-style: solid;
+      border-bottom-style: solid;
+      border-left-style: solid;
+      border-top-color: initial;
+      border-right-color: rgb(222, 226, 230);
+      border-bottom-color: rgb(222, 226, 230);
+      border-left-color: rgb(222, 226, 230);
+      border-image: initial;
+      border-bottom-left-radius: 0.375rem;
+      border-bottom-right-radius: 0.375rem;
+      min-height: 9em;
+      * {
+        color: var(--text-color, #fff);
+      }
+    }
+    .nav-link {
+      color: var(--text-color, #fff);
+    }
+  }
+  .form-check {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-left: 0px;
+  }
+  .form-check-input {
+    background-color: transparent;
+    border: 1px solid var(--border-color, #ccc);
+    &:checked {
+      background-color: var(--primary-color, #38c793);
+      border-color: var(--primary-color, #38c793);
+      &:focus {
+        box-shadow: none;
+      }
+    }
+    &:focus {
+      box-shadow: none;
+    }
+    &:not(:checked):not(:focus) {
+      background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23fff%27/%3e%3c/svg%3e");
+    }
+  }
+`;
+
+return (
+  <Modal
+    open={showModal}
+    title={"Create Project"}
+    onOpenChange={toggleModal}
+    toggle={toggle}
+  >
+    <Main>
+      <div className="lhs d-flex flex-column gap-4">
+        <InputField
+          key={"Project-Title"}
+          label={"Project Title"}
+          placeholder={"Enter Project Title"}
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+
+        <div className="form-group">
+          <label className="mb-1">Description</label>
+          <TextEditor
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </div>
+        <InputField
+          key={"Location"}
+          label={"Location"}
+          placeholder={"Enter location"}
+          value={location}
+          onChange={(e) => setLocation(e.target.value)}
+        />
+        <div className="form-group">
+          <label className="mb-1">Project Contributors</label>
+          <Typeahead
+            multiple
+            options={
+              allMainnetAddresses ?? ["frank.near", "ellie.near", "jane.near"]
+            }
+            allowNew
+            placeholder="Enter Contributors username e.g frank.near, ellie.near"
+            selected={contributors}
+            onChange={(e) => handleContributors(e)}
+          />
+        </div>
+
+        <InputField
+          key={"twitter"}
+          label={"Twitter"}
+          placeholder={"twitter handle"}
+          value={twitter}
+          onChange={(e) => setTwitter(e.target.value)}
+        />
+
+        <InputField
+          key={"github"}
+          label={"GitHub"}
+          placeholder={"github handle"}
+          value={gitHub}
+          onChange={(e) => setGitHub(e.target.value)}
+        />
+
+        <InputField
+          key={"telegram"}
+          label={"Telegram"}
+          placeholder={"telegram handle"}
+          value={telegram}
+          onChange={(e) => setTelegram(e.target.value)}
+        />
+
+        <InputField
+          key={"website"}
+          label={"Website"}
+          error={website && !isValidUrl(website)}
+          placeholder={"website link"}
+          value={website}
+          onChange={websiteUrlHandler}
+        />
+
+        <div className="form-group">
+          <label className="mb-3">Tabs</label>
+          <div className="d-flex flex-column gap-1">
+            {tabs.map((tab) => (
+              <div className="form-check form-switch" key={tab.id}>
+                <label className="form-check-label" htmlFor={tab.id}>
+                  {tab.label}
+                </label>
+                <input
+                  className="form-check-input"
+                  type="checkbox"
+                  role="switch"
+                  id={tab.id}
+                  checked={selectedTabs.has(tab.id.toLowerCase())}
+                  onChange={handleCheckboxChange}
+                  disabled={tab.disabled}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="form-group">
+          <label className="mb-1">Tags</label>
+          <Typeahead
+            multiple
+            options={
+              props.tagFilters ?? ["Community", "Open Source", "Weekly", "DAO"]
+            }
+            allowNew
+            placeholder="Start Typing"
+            selected={tags}
+            onChange={(e) => handleTags(e)}
+          />
+        </div>
+      </div>
+      <div className="rhs">
+        <div className="form-group mb-3">
+          <label className="pb-2">Avatar</label>
+          <Widget
+            src="buildhub.near/widget/components.ImageUploader"
+            props={{
+              image: avatar,
+              onChange: (image) => setAvatar({ image }),
+            }}
+          />
+        </div>
+        <div className="form-group mb-3">
+          <label className="pb-2">Cover Image</label>
+          <Widget
+            src="buildhub.near/widget/components.ImageUploader"
+            props={{
+              image: coverImage,
+              onChange: (image) => setCoverImage({ image }),
+            }}
+          />
+        </div>
+      </div>
+    </Main>
+    <div className="d-flex align-items-center justify-content-end gap-2">
+      <Button variant="primary" onClick={() => null}>
+        Create
+      </Button>
+    </div>
+  </Modal>
+);
diff --git a/apps/builddao/widget/page/project-feed.jsx b/apps/builddao/widget/page/project-feed.jsx
index b1f73d8c..86d31e23 100644
--- a/apps/builddao/widget/page/project-feed.jsx
+++ b/apps/builddao/widget/page/project-feed.jsx
@@ -93,10 +93,14 @@ const Wrapper = styled.div`
 const [filters, setFilters] = useState({
   title: "",
 });
-const [showModal, setShowModal] = useState(false);
+const [showFilterModal, setShowFilterModal] = useState(false);
+const [showCreateModal, setShowCreateModal] = useState(false);
 
-const toggleModal = () => {
-  setShowModal((prev) => !prev);
+const toggleFilterModal = () => {
+  setShowFilterModal((prev) => !prev);
+};
+const toggleCreateModal = () => {
+  setShowCreateModal((prev) => !prev);
 };
 
 const filteredProjects = useMemo(() => {
@@ -154,8 +158,19 @@ return (
       src="${config_account}/widget/components.modals.FilterProjects"
       loading=""
       props={{
-        showModal: showModal,
-        toggleModal: toggleModal,
+        showModal: showFilterModal,
+        toggleModal: toggleFilterModal,
+        filters: filters,
+        setFilters: setFilters,
+        tagFilters,
+      }}
+    />
+    <Widget
+      src="buildhub.near/widget/components.modals.CreateProject"
+      loading=""
+      props={{
+        showModal: showCreateModal,
+        toggleModal: toggleCreateModal,
         filters: filters,
         setFilters: setFilters,
         tagFilters,
@@ -165,7 +180,9 @@ return (
       <h2 style={{ color: "var(--text-color, #fff)", fontSize: "18px" }}>
         Projects
       </h2>
-      <Button variant="primary">Create Project</Button>
+      <Button variant="primary" onClick={() => setShowCreateModal(true)}>
+        Create Project
+      </Button>
     </div>
     <div className="form-group d-flex gap-4 align-items-center justify-content-between">
       <div className="input-group">
@@ -183,7 +200,7 @@ return (
       <Button
         className="d-flex align-items-center"
         style={{ gap: 10, padding: "10px 26px" }}
-        onClick={() => setShowModal(true)}
+        onClick={() => setShowFilterModal(true)}
       >
         Filter <i className="bi bi-sliders"></i>
       </Button>