diff --git a/apps/new/widget/Index.jsx b/apps/new/widget/Index.jsx
index 024f5c08..3fe06f53 100644
--- a/apps/new/widget/Index.jsx
+++ b/apps/new/widget/Index.jsx
@@ -36,6 +36,14 @@ const config = {
           name: "Projects",
         },
       },
+      project: {
+        path: "${config_account}/widget/page.project.Index",
+        blockHeight: "final",
+        init: {
+          name: "Project",
+        },
+        hide: true,
+      },
       resources: {
         path: "${config_account}/widget/page.resources.Index",
         blockHeight: "final",
diff --git a/apps/new/widget/components/project/Card.jsx b/apps/new/widget/components/project/Card.jsx
index 9482422b..52cb40d7 100644
--- a/apps/new/widget/components/project/Card.jsx
+++ b/apps/new/widget/components/project/Card.jsx
@@ -111,7 +111,7 @@ const ProjectCard = ({ data, variant }) => {
   return (
     <Link
       href={href({
-        widgetSrc: `${alias_old}/widget/app`,
+        widgetSrc: `${config_account}/widget/Index`,
         params: {
           page: "project",
           id: `${accountId}/${type}/${projectID}`,
diff --git a/apps/new/widget/page/project/Index.jsx b/apps/new/widget/page/project/Index.jsx
new file mode 100644
index 00000000..713687b2
--- /dev/null
+++ b/apps/new/widget/page/project/Index.jsx
@@ -0,0 +1,64 @@
+const { Layout } = VM.require(
+  "${config_account}/widget/page.project.Layout",
+) || {
+  Layout: () => <></>,
+};
+const config = {
+  theme: {},
+  layout: {
+    src: "${alias_devs}/widget/Layout",
+    props: {
+      variant: "sidebar",
+    },
+  },
+  blocks: {
+    // these get passed to the layout and children
+    Header: () => <></>,
+    Sidebar: () => (
+      <Widget
+        src="${config_account}/widget/components.Sidebar"
+        props={{
+          routes: config.router.routes,
+          currentRoute: "/${config_account}/widget/Index?page=projects",
+          ...props,
+        }}
+      />
+    ),
+    Footer: () => <></>,
+  },
+  router: {
+    param: "tab",
+    routes: {
+      myProjects: {
+        init: {
+          name: "My Projects",
+          icon: "bi bi-star",
+        },
+      },
+      myToolkits: {
+        init: {
+          name: "My Toolkits",
+          icon: "bi bi-database",
+        },
+      },
+      projectsInvolved: {
+        init: {
+          name: "Projects Involved",
+          icon: "bi bi-clipboard",
+        },
+      },
+      project: {
+        path: "${config_account}/widget/page.project.Main",
+        blockHeight: "final",
+        default: true,
+        hide: true,
+      },
+    },
+  },
+};
+
+return (
+  <div className="mt-3 container-xl">
+    <Widget src="${alias_old}/widget/app.view" props={{ config, ...props }} />
+  </div>
+);
diff --git a/apps/new/widget/page/project/Layout.jsx b/apps/new/widget/page/project/Layout.jsx
new file mode 100644
index 00000000..591c3470
--- /dev/null
+++ b/apps/new/widget/page/project/Layout.jsx
@@ -0,0 +1,118 @@
+const { Metadata } = VM.require(
+  "${config_account}/widget/page.project.Metadata",
+) || {
+  Metadata: () => <></>,
+};
+
+const { href } = VM.require("${alias_old}/widget/lib.url") || {
+  href: () => {},
+};
+const Layout = ({
+  projectAccountId,
+  profile,
+  routes,
+  children,
+  project,
+  id,
+  tab,
+}) => {
+  const { title } = project;
+
+  if (!projectAccountId) {
+    return <p className="fw-bold text-white">No Account ID</p>;
+  }
+
+  const Nav = styled.div`
+    .nav-pills {
+      background: var(--bg-1, #0b0c14);
+      font-weight: 500;
+      --bs-nav-pills-border-radius: 0;
+      --bs-nav-link-color: var(--font-color, #fff);
+      --bs-nav-pills-link-active-color: var(--font-color, #fff);
+      --bs-nav-pills-link-active-bg: var(--bg-1, #0b0c14);
+      --bs-nav-link-padding-y: 0.75rem;
+      border-bottom: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
+      padding-top: 3px;
+    }
+    .nav-link.active {
+      border-bottom: 2px solid var(--Yellow, #ffaf51);
+    }
+
+    .nav-item:not(:has(> .disabled)):hover {
+      background: rgba(13, 110, 253, 0.15);
+    }
+  `;
+  return (
+    <>
+      <div className="my-3 w-100">
+        <Link
+          style={{ textDecoration: "none" }}
+          to={href({
+            widgetSrc: "${config_account}/widget/Index",
+            params: {
+              page: "projects",
+            },
+          })}
+        >
+          <span className="text-white">
+            <i className="bi bi-chevron-left"></i> Back to Projects
+          </span>
+        </Link>
+      </div>
+      <Metadata
+        title={title}
+        profile={profile}
+        projectAccountId={projectAccountId}
+      />
+      <Nav>
+        <ul className="nav nav-pills nav-fill" id="pills-tab" role="tablist">
+          {routes &&
+            Object.keys(routes).map((it) => (
+              <li className="nav-item" role="presentation" key={it}>
+                <Link
+                  to={href({
+                    widgetSrc: `${config_account}/widget/Index`,
+                    params: {
+                      page: "project",
+                      id: id,
+                      tab: it,
+                    },
+                  })}
+                  key={it}
+                  style={{ textDecoration: "none" }}
+                >
+                  <button
+                    className={`nav-link ${it === tab ? "active" : ""}`}
+                    id={`pills-${id}-tab`}
+                    data-bs-toggle="pill"
+                    data-bs-target={`#pills-${it}`}
+                    type="button"
+                    role="tab"
+                    aria-controls={`pills-${it}`}
+                    aria-selected={i === 0}
+                  >
+                    {it.slice(0, 1).toUpperCase() + it.slice(1)}
+                  </button>
+                </Link>
+              </li>
+            ))}
+        </ul>
+      </Nav>
+      <div
+        className="tab-content"
+        style={{ marginTop: 8 }}
+        id="pills-tabContent"
+      >
+        <div
+          className="tab-pane fade show active"
+          id="pills-overview"
+          role="tabpanel"
+          aria-labelledby="pills-overview-tab"
+        >
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+return { Layout };
diff --git a/apps/new/widget/page/project/Main.jsx b/apps/new/widget/page/project/Main.jsx
new file mode 100644
index 00000000..d3a23276
--- /dev/null
+++ b/apps/new/widget/page/project/Main.jsx
@@ -0,0 +1,126 @@
+const { id } = props;
+
+const data = JSON.parse(Social.get(id, "final") ?? {});
+if (!id || !data) {
+  return "Loading...";
+}
+
+const profileData = {
+  name: data.title,
+  description: data.description,
+  linktree: {
+    github: data.github,
+    telegram: data.telegram,
+    twitter: data.twitter,
+    website: data.website,
+  },
+  backgroundImage: data.backgroundImage?.image ?? data.backgroundImage,
+  image: data.profileImage?.image ?? data.profileImage,
+};
+
+const profile = Social.getr(`${data.projectAccountId}/profile`);
+
+const { Layout } = VM.require(
+  "${config_account}/widget/page.project.Layout",
+) || {
+  Layout: () => <></>,
+};
+const config = {
+  theme: {},
+  layout: {
+    src: "${alias_devs}/widget/Layout",
+    props: {
+      variant: "standard",
+    },
+  },
+  blocks: {
+    // these get passed to the layout and children
+    Header: () => (
+      <>
+        <Layout
+          profile={profileData}
+          projectAccountId={data.projectAccountId}
+          page={page}
+          routes={config.router.routes}
+          project={project}
+          id={id}
+          {...props}
+        ></Layout>
+      </>
+    ),
+    Sidebar: () => (
+      <Widget
+        src="${config_account}/widget/components.Sidebar"
+        props={{
+          routes: config.router.routes,
+          currentRoute: "/${config_account}/widget/Index?page=project",
+          ...props,
+        }}
+      />
+    ),
+    Footer: () => <></>,
+  },
+  router: {
+    param: "tab",
+    routes: {
+      overview: {
+        path: "${config_account}/widget/page.project.tabs.Overview",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+        default: "true",
+      },
+      activity: {
+        path: "${config_account}/widget/page.project.tabs.Discussion",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+      },
+      discussion: {
+        path: "${config_account}/widget/page.project.tabs.Discussion",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+      },
+      tasks: {
+        path: "${config_account}/widget/page.project.tabs.Task",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+      },
+      code: {
+        path: "${config_account}/widget/page.project.tabs.Code",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+      },
+      roadmap: {
+        path: "${config_account}/widget/page.project.tabs.Roadmap",
+        blockHeight: "final",
+        init: {
+          ...props,
+        },
+      },
+    },
+  },
+};
+
+// remove unselected tabs
+if (Array.isArray(data?.tabs)) {
+  Object.keys(config.router.routes).forEach((key) => {
+    if (!data.tabs.includes(key)) {
+      delete config.router.routes[key];
+    }
+  });
+}
+
+return (
+  <div className="mt-3 container-xl">
+    <Widget src="${alias_old}/widget/app.view" props={{ config, ...props }} />
+  </div>
+);
diff --git a/apps/new/widget/page/project/Metadata.jsx b/apps/new/widget/page/project/Metadata.jsx
new file mode 100644
index 00000000..a5a01947
--- /dev/null
+++ b/apps/new/widget/page/project/Metadata.jsx
@@ -0,0 +1,125 @@
+const BackgroundImage = styled.div`
+  img {
+    height: 252px;
+  }
+
+  @media screen and (max-width: 768px) {
+    img {
+      height: 126px;
+    }
+  }
+`;
+
+const ProfileInfo = styled.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  gap: 24px;
+
+  .left {
+    img {
+      width: 100px;
+      height: 100px;
+      border-radius: 100px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .left {
+      img {
+        width: 64px;
+        height: 64px;
+      }
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+
+    .info {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+      flex-direction: column;
+      h3 {
+        color: var(--white-100, #fff);
+        font-size: 24px;
+        font-weight: 500;
+        margin: 0;
+      }
+
+      p {
+        color: var(--white-50, #b0b0b0);
+        font-size: 16px;
+        margin: 0;
+      }
+    }
+
+    .links {
+      color: var(--white-100, #fff);
+      font-size: 13px;
+
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
+`;
+const Metadata = ({ profile, title, projectAccountId }) => {
+  return (
+    <div>
+      {" "}
+      <BackgroundImage>
+        {profile.backgroundImage && (
+          <Widget
+            src="${alias_mob}/widget/Image"
+            props={{
+              image: profile.backgroundImage,
+              alt: "profile background",
+              className: "w-100",
+              style: { objectFit: "cover", left: 0, top: 0 },
+              fallbackUrl:
+                "https://ipfs.near.social/ipfs/bafkreifn654yar6dv4ztyijkag3lgh274iqfajgjhvnny6gv22pkkhxllm",
+            }}
+          />
+        )}
+      </BackgroundImage>
+      <ProfileInfo className="mt-3">
+        <div className="left">
+          <Widget
+            src="${alias_mob}/widget/Image"
+            props={{
+              image: profile.image,
+              alt: "profile image",
+              style: { objectFit: "cover", left: 0, top: 0 },
+              fallbackUrl:
+                "https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm",
+            }}
+          />
+        </div>
+        <div className="right">
+          <div className="info">
+            <h3>{title ?? profile.name}</h3>
+            <p>@{projectAccountId}</p>
+          </div>
+
+          <div className="links">
+            <span>Links</span>
+            <Widget
+              src="${alias_old}/widget/components.profile.Linktree"
+              loading=""
+              props={{
+                profile,
+              }}
+            />
+          </div>
+        </div>
+      </ProfileInfo>
+    </div>
+  );
+};
+
+return { Metadata };
diff --git a/apps/new/widget/page/project/tabs/Code.jsx b/apps/new/widget/page/project/tabs/Code.jsx
new file mode 100644
index 00000000..b4da66b0
--- /dev/null
+++ b/apps/new/widget/page/project/tabs/Code.jsx
@@ -0,0 +1,30 @@
+const { Button } = VM.require("${alias_old}/widget/components") || {
+  Button: () => <></>,
+};
+
+const { getProjectMeta } = VM.require(
+  "${alias_old}/widget/lib.project-data",
+) || {
+  getProjectMeta: () => {},
+};
+
+const { id } = props;
+
+const project = getProjectMeta(id);
+
+const { gitHub } = project;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+`;
+
+return (
+  <Container className="text-white">
+    <Button variant="secondary" href={gitHub} target="_blank" noLink={true}>
+      GitHub Repo
+    </Button>
+  </Container>
+);
diff --git a/apps/new/widget/page/project/tabs/Discussion.jsx b/apps/new/widget/page/project/tabs/Discussion.jsx
new file mode 100644
index 00000000..3f760881
--- /dev/null
+++ b/apps/new/widget/page/project/tabs/Discussion.jsx
@@ -0,0 +1,69 @@
+const { Feed } = VM.require("${alias_devs}/widget/Feed") ?? {
+  Feed: () => <></>,
+};
+const { Post } = VM.require("${alias_old}/widget/components") || {
+  Post: () => <></>,
+};
+const { getProjectMeta } = VM.require(
+  "${alias_old}/widget/lib.project-data",
+) || {
+  getProjectMeta: () => {},
+};
+
+const { id } = props;
+
+const project = getProjectMeta(id);
+const { projectAccountId } = project;
+
+return (
+  <div className="mt-3">
+    <Widget
+      loading={
+        <div
+          className="placeholder-glow h-100 w-100"
+          style={{ height: 400 }}
+        ></div>
+      }
+      src="${alias_old}/widget/Compose"
+      props={{
+        draftKey: id + "_discussions",
+      }}
+    />
+    <Feed
+      index={[
+        {
+          action: "post",
+          key: "main",
+          options: {
+            limit: 10,
+            order: "desc",
+            accountId: [projectAccountId],
+          },
+          cacheOptions: {
+            ignoreCache: true,
+          },
+        },
+        {
+          action: "repost",
+          key: "main",
+          options: {
+            limit: 10,
+            order: "desc",
+            accountId: [projectAccountId],
+          },
+          cacheOptions: {
+            ignoreCache: true,
+          },
+        },
+      ]}
+      Item={(p) => (
+        <Post
+          accountId={p.accountId}
+          blockHeight={p.blockHeight}
+          noBorder={true}
+          currentPath={`/${alias_old}/widget/app?page=feed`}
+        />
+      )}
+    />
+  </div>
+);
diff --git a/apps/new/widget/page/project/tabs/Overview.jsx b/apps/new/widget/page/project/tabs/Overview.jsx
new file mode 100644
index 00000000..75142cb6
--- /dev/null
+++ b/apps/new/widget/page/project/tabs/Overview.jsx
@@ -0,0 +1,110 @@
+const { User, Hashtag } = VM.require("${alias_old}/widget/components") || {
+  User: () => <></>,
+  Hashtag: () => <></>,
+};
+
+const { getProjectMeta } = VM.require(
+  "${alias_old}/widget/lib.project-data",
+) || {
+  getProjectMeta: () => {},
+};
+
+const { id } = props;
+
+const project = getProjectMeta(id);
+
+const { description, tags, contributors, accountId, location, teamSize } =
+  project;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .heading {
+    color: var(--white-100, #fff);
+    line-height: 170%; /* 27.2px */
+    margin: 0;
+  }
+
+  .description {
+    color: var(--white-50, #b0b0b0);
+    line-height: 170%; /* 27.2px */
+    margin: 0;
+  }
+`;
+
+const MapIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <g clip-path="url(#clip0_777_6945)">
+      <path
+        d="M7.33335 11.9587C4.70248 11.6306 2.66669 9.38638 2.66669 6.66665C2.66669 3.72113 5.0545 1.33331 8.00002 1.33331C10.9456 1.33331 13.3334 3.72113 13.3334 6.66665C13.3334 9.38638 11.2976 11.6306 8.66669 11.9587V14H7.33335V11.9587ZM8.00002 10.6666C10.2092 10.6666 12 8.87578 12 6.66665C12 4.45751 10.2092 2.66665 8.00002 2.66665C5.79088 2.66665 4.00002 4.45751 4.00002 6.66665C4.00002 8.87578 5.79088 10.6666 8.00002 10.6666ZM3.33335 14.6666H12.6667V16H3.33335V14.6666Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_777_6945">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+return (
+  <Container>
+    <div className="section">
+      <p className="heading">About</p>
+      <p className="description">
+        {description ? (
+          <Markdown text={description} />
+        ) : (
+          "No information available"
+        )}
+      </p>
+    </div>
+    <div className="d-flex gap-5">
+      <div className="section">
+        <p className="heading">Location</p>
+        <p className="description d-flex align-items-center gap-2">
+          <MapIcon /> {location ?? "No Location"}
+        </p>
+      </div>
+      <div className="section">
+        <p className="heading">Team Size</p>
+        <p className="description d-flex align-items-center gap-2">
+          <i className="bi bi-person"></i>
+          {teamSize || "unspecified"}
+        </p>
+      </div>
+    </div>
+    <div className="section">
+      <p className="heading">Contributors</p>
+      {!contributors && <p className="description">No Contributors</p>}
+      <div className="d-flex gap-4">
+        {contributors &&
+          contributors.map((teammate) => (
+            <User accountId={teammate} variant={"mobile"} />
+          ))}
+      </div>
+    </div>
+    <div className="section">
+      <p className="heading">Project Tags</p>
+      <div className="d-flex flex-align-center flex-wrap" style={{ gap: 12 }}>
+        {tags && tags.map((it) => <Hashtag key={it}>{it}</Hashtag>)}
+        {tags.length === 0 && <p className="description">No tags</p>}
+      </div>
+    </div>
+  </Container>
+);
diff --git a/apps/new/widget/page/project/tabs/Roadmap.jsx b/apps/new/widget/page/project/tabs/Roadmap.jsx
new file mode 100644
index 00000000..5155d5cc
--- /dev/null
+++ b/apps/new/widget/page/project/tabs/Roadmap.jsx
@@ -0,0 +1,28 @@
+const { Button } = VM.require("${alias_old}/widget/components") || {
+  Button: () => <></>,
+};
+
+const { getProjectMeta } = VM.require(
+  "${alias_old}/widget/lib.project-data",
+) || {
+  getProjectMeta: () => {},
+};
+
+const { id } = props;
+
+const project = getProjectMeta(id);
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: center;
+  .link {
+    display: flex;
+    gap: 16px;
+    flex-direction: row;
+    align-items: center;
+  }
+`;
+
+return <Container className="text-white"></Container>;
diff --git a/apps/new/widget/page/project/tabs/Roles.jsx b/apps/new/widget/page/project/tabs/Roles.jsx
new file mode 100644
index 00000000..42875683
--- /dev/null
+++ b/apps/new/widget/page/project/tabs/Roles.jsx
@@ -0,0 +1 @@
+return <div className="text-white">Roles</div>;
diff --git a/apps/new/widget/page/project/tabs/Task.jsx b/apps/new/widget/page/project/tabs/Task.jsx
new file mode 100644
index 00000000..b08821d0
--- /dev/null
+++ b/apps/new/widget/page/project/tabs/Task.jsx
@@ -0,0 +1,840 @@
+const { Modal, Button, ProgressState } = VM.require(
+  "${alias_old}/widget/components",
+) || {
+  Modal: () => <></>,
+  Button: () => <></>,
+  ProgressState: () => <></>,
+};
+
+const { normalize } = VM.require("${alias_devs}/widget/lib.stringUtils") || {
+  normalize: () => {},
+};
+
+const { getProjectMeta } = VM.require(
+  "${alias_old}/widget/lib.project-data",
+) || {
+  getProjectMeta: () => {},
+};
+
+const { id } = props;
+
+const project = getProjectMeta(id);
+const app = props.app || "${alias_old}";
+const type = props.type || "task";
+const projectTask = "project-task";
+
+const ThemeContainer =
+  props.ThemeContainer ||
+  styled.div`
+    --primary-color: rgb(255, 175, 81);
+    --border-color: rgba(255, 255, 255, 0.2);
+    --font-color: #fff;
+    --menu-bg-color: #0b0c14;
+    --secondary-font-color: rgba(176, 176, 176, 1);
+    --card-bg-color: rgba(35, 36, 43, 1);
+  `;
+
+const Wrapper = styled.div`
+  color: white;
+
+  .border {
+    border-color: var(--border-color) !important;
+  }
+  input::placeholder {
+    color: var(--secondary-font-color) !important;
+  }
+
+  .form-control {
+    background: #23242b !important;
+    color: #fff !important;
+    border: 1px solid var(--border-color) !important;
+  }
+
+  .form-check-input:checked {
+    background-color: var(--primary-color) !important;
+    border-color: var(--primary-color) !important;
+  }
+
+  .cbx:hover span:first-child {
+    border-color: var(--primary-color) !important;
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+
+  .red {
+    color: #dc3545;
+  }
+
+  .badge {
+    border: 1px solid var(--primary-color) !important;
+  }
+
+  .hashtag {
+    color: var(--primary-color) !important;
+  }
+
+  .secondary-text {
+    color: var(--secondary-font-color) !important;
+  }
+
+  .dropdown-menu {
+    background-color: var(--menu-bg-color) !important;
+    color: var(--font-color) !important;
+
+    li.dropdown-item {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      cursor: pointer;
+      color: var(--font-color) !important;
+      &:hover {
+        a {
+          color: var(--menu-bg-color) !important;
+        }
+      }
+    }
+
+    .link-dark,
+    .dropdown-item {
+      color: var(--font-color) !important;
+
+      &:hover {
+        color: var(--menu-bg-color) !important;
+
+        span {
+          color: var(--menu-bg-color) !important;
+        }
+      }
+    }
+
+    .dropdown-item.active,
+    .dropdown-item:active {
+      background-color: var(--primary-color) !important;
+    }
+  }
+
+  .container {
+    border: none !important;
+  }
+
+  .assignee-item {
+    display: inline-block;
+    padding: 0.2em 0.4em;
+    border-radius: 10px;
+    border: 0.8px solid lightgray;
+    position: relative;
+  }
+
+  .flex-1 {
+    flex: 1;
+  }
+`;
+
+const projectID = normalize(project?.title, "-");
+
+const StatusValues = {
+  PROPOSED: "proposed",
+  PROGRESS: "progress",
+  COMPLETED: "completed",
+};
+
+const listItem = { title: "", isCompleted: false };
+const task = {
+  title: "",
+  description: "",
+  author: context.accountId,
+  tags: [],
+  list: [], // listItem
+  status: "",
+  priority: "",
+  assignees: [],
+  startDate: "",
+  endDate: "",
+};
+
+const [proposedTasks, setProposedTasks] = useState([]);
+const [progressTasks, setProgresTasks] = useState([]);
+const [completedTasks, setCompletedTasks] = useState([]);
+const [showAddTaskModal, setShowAddTaskModal] = useState(false);
+const [taskDetail, setTaskDetail] = useState({});
+const [showDropdownIndex, setShowDropdownIndex] = useState(null);
+const [isEditTask, setIsEdit] = useState(false);
+const [showDeleteConfirmationModalIndex, setDeleteConfirmationIndex] =
+  useState(null);
+const [showViewTaskModal, setViewTaskModal] = useState(false);
+const [currentEditTaskId, setCurrentTaskId] = useState(null); // if user change title we need the same earlier key to update the data
+
+const isAllowedToEdit = (project.contributors ?? []).includes(
+  context.accountId,
+);
+
+const flattenObject = (obj) => {
+  let paths = [];
+
+  try {
+    Object.keys(obj).forEach((key) => {
+      const projects = Object.keys(
+        obj?.[key]?.[app]?.[projectTask]?.[projectID]?.[type] ?? {},
+      );
+      projects.map((path) => {
+        if (!path || !path.includes("_")) {
+          return;
+        }
+        const convertedStr = path.replace(/_/g, "/");
+        paths.push(convertedStr);
+      });
+    });
+  } catch (e) {}
+  return paths;
+};
+
+const processData = useCallback(
+  (data) => {
+    const accounts = Object.entries(data ?? {});
+    const allTasks = accounts
+      .map((account) => {
+        return Object.entries(account?.[1]?.[type] ?? {}).map((kv) => {
+          const metadata = JSON.parse(kv[1]);
+          return {
+            ...metadata,
+            oldTitle: kv[0],
+          };
+        });
+      })
+      .flat();
+    return allTasks;
+  },
+  [type],
+);
+
+function fetchTasks() {
+  if (!projectID) {
+    return;
+  }
+  const keys = Social.keys(
+    `*/${app}/${projectTask}/${projectID}/${type}/*`,
+    "final",
+    {
+      order: "desc",
+      subscribe: true,
+    },
+  );
+  if (!keys) {
+    return "Loading...";
+  }
+  let flattenedKeys = flattenObject(keys);
+
+  const data = Social.get(flattenedKeys, "final");
+  // check if task is singular (since we have to update the return format for parsing)
+  const isSingular = flattenedKeys.length === 1;
+  if (isSingular) {
+    const [name, task, taskName] = flattenedKeys?.[0]?.split("/").slice(0, 3);
+    return {
+      [name]: {
+        [task]: {
+          [taskName]: data,
+        },
+      },
+    };
+  }
+  return data;
+}
+
+const data = fetchTasks();
+const tasks = processData(data);
+
+function sortByPriority(a, b) {
+  const priorityOrder = { P0: 0, P1: 1, P2: 2, P3: 3 };
+  return priorityOrder[a.priority] - priorityOrder[b.priority];
+}
+
+useEffect(() => {
+  if (Array.isArray(tasks)) {
+    setProposedTasks(
+      tasks
+        .filter((i) => i.status === StatusValues.PROPOSED)
+        .sort(sortByPriority),
+    );
+    setProgresTasks(
+      tasks
+        .filter((i) => i.status === StatusValues.PROGRESS)
+        .sort(sortByPriority),
+    );
+    setCompletedTasks(
+      tasks
+        .filter((i) => i.status === StatusValues.COMPLETED)
+        .sort(sortByPriority),
+    );
+  }
+}, [tasks]);
+
+const updateTaskDetail = (data) => {
+  setTaskDetail((prevState) => ({
+    ...prevState,
+    ...data,
+  }));
+};
+
+const updateTaskListItem = (index, updatedItem) => {
+  const updatedList = [...taskDetail.list];
+  updatedList[index] = updatedItem;
+  updateTaskDetail({ list: updatedList });
+};
+
+const deleteTaskListItem = (index) => {
+  const updatedList = [
+    ...taskDetail.list.slice(0, index),
+    ...taskDetail.list.slice(index + 1),
+  ];
+  updateTaskDetail({ list: updatedList });
+};
+
+const onAddTask = () => {
+  const taskId = normalize(taskDetail.title, "-");
+  const data = {
+    [type]: {
+      [taskId]: {
+        "": JSON.stringify(taskDetail),
+        metadata: taskDetail,
+      },
+    },
+    [app]: {
+      [projectTask]: {
+        [projectID]: {
+          [type]: {
+            [`${context.accountId}_task_${taskId}`]: "",
+          },
+        },
+      },
+    },
+  };
+  Social.set(data, {
+    onCommit: () => setShowAddTaskModal(false),
+  });
+};
+
+const onEditTask = useCallback(
+  (data) => {
+    const newData = data ?? taskDetail;
+    const taskId = currentEditTaskId;
+    const updatedData = {
+      [type]: {
+        [taskId]: {
+          "": JSON.stringify(newData),
+          metadata: newData,
+        },
+      },
+      [app]: {
+        [projectTask]: {
+          [projectID]: {
+            [type]: {
+              [`${context.accountId}_task_${taskId}`]: "",
+            },
+          },
+        },
+      },
+    };
+    Social.set(updatedData, {
+      force: true,
+      onCommit: () => setShowAddTaskModal(false),
+    });
+  },
+  [taskDetail, currentEditTaskId],
+);
+
+const onDeleteTask = useCallback(() => {
+  const taskId = currentEditTaskId;
+  const updatedData = {
+    [type]: {
+      [taskId]: null,
+    },
+    [app]: {
+      [projectTask]: {
+        [projectID]: {
+          [type]: {
+            [`${context.accountId}_task_${taskId}`]: null,
+          },
+        },
+      },
+    },
+  };
+  Social.set(updatedData, {
+    force: true,
+  });
+}, [taskDetail, currentEditTaskId]);
+
+function handleDropdownToggle(columnTitle, index, value) {
+  setShowDropdownIndex((prevState) => ({
+    ...prevState,
+    [columnTitle + index]: value ?? !prevState[columnTitle + index] ?? true,
+  }));
+}
+
+const DropdownMenu = ({ columnTitle, item, index, changeStatusOptions }) => {
+  return (
+    <span
+      className="ms-auto flex-shrink-0"
+      onClick={(event) => event.stopPropagation()}
+      tabIndex="0"
+      onBlur={() => handleDropdownToggle(columnTitle, index, false)}
+    >
+      <div
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+        onClick={() => {
+          handleDropdownToggle(columnTitle, index);
+          setTaskDetail(item);
+          setCurrentTaskId(normalize(item.oldTitle));
+        }}
+      >
+        <i class="bi bi-three-dots h5 pointer"></i>
+      </div>
+      {showDropdownIndex[columnTitle + index] && (
+        <ul className="dropdown-menu show border">
+          <li
+            className="dropdown-item"
+            onClick={() => {
+              handleDropdownToggle(columnTitle, index);
+              setIsEdit(true);
+              setShowAddTaskModal(true);
+            }}
+          >
+            <i class="bi bi-pencil"></i>Edit Task
+          </li>
+          <li
+            className="dropdown-item"
+            onClick={() => {
+              handleDropdownToggle(columnTitle, index);
+              setDeleteConfirmationIndex(index);
+            }}
+          >
+            <i class="bi bi-trash3"></i>Delete Task
+          </li>
+          {(changeStatusOptions ?? []).length > 0 && (
+            <div>
+              <hr />
+              <div
+                style={{ color: "var(--secondary-font-color)" }}
+                className="px-2 mb-1"
+              >
+                Change Status
+              </div>
+              {changeStatusOptions.map((i) => (
+                <li
+                  className="dropdown-item"
+                  onClick={() => {
+                    const data = { status: i.value };
+                    updateTaskDetail(data);
+                    handleDropdownToggle(columnTitle, index);
+                    onEditTask({ ...taskDetail, ...data });
+                  }}
+                >
+                  <i class="bi bi-check2"></i>
+                  {i.label}
+                </li>
+              ))}
+            </div>
+          )}
+        </ul>
+      )}
+    </span>
+  );
+};
+
+const DeleteConfirmationModal = () => {
+  return (
+    <Modal
+      open={typeof showDeleteConfirmationModalIndex === "number"}
+      title={"Delete Task"}
+      onOpenChange={() => setDeleteConfirmationIndex(null)}
+    >
+      <div className="d-flex flex-column gap-2">
+        Are you sure you want to delete the task ?
+        <div className="d-flex justify-content-end gap-3 align-items-center mt-3">
+          <Button
+            variant="outline"
+            onClick={() => setDeleteConfirmationIndex(null)}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            onClick={() => {
+              setDeleteConfirmationIndex(null);
+              onDeleteTask();
+            }}
+          >
+            Delete
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+const today = new Date().toISOString().split("T")[0];
+
+const AddTaskModal = () => {
+  return (
+    <Modal
+      open={showAddTaskModal}
+      title={(isEditTask ? "Edit" : "Add") + " Task"}
+      onOpenChange={() => {
+        setShowAddTaskModal(!showAddTaskModal);
+        setTaskDetail(null);
+      }}
+    >
+      <div className="d-flex flex-column gap-4">
+        <div>
+          <label class="mb-1">Title</label>
+          <input
+            placeholder="Enter task title"
+            type="text"
+            value={taskDetail?.title ?? ""}
+            onChange={(e) => updateTaskDetail({ title: e.target.value })}
+          />
+        </div>
+        <div>
+          <label class="mb-1">Description</label>
+          <input
+            placeholder="Enter description"
+            type="text"
+            value={taskDetail?.description ?? ""}
+            onChange={(e) => updateTaskDetail({ description: e.target.value })}
+          />
+        </div>
+        <div className="form-group">
+          <label class="mb-1">Priority</label>
+          <select
+            name="proposal-type"
+            id="proposal-type"
+            data-bs-theme={"dark"}
+            class="form-select"
+            onChange={(e) => updateTaskDetail({ priority: e.target.value })}
+            value={taskDetail.priority}
+          >
+            <option selected value="">
+              Select
+            </option>
+            <option value="P0">P0</option>
+            <option value="P1">P1</option>
+            <option value="P2">P2</option>
+            <option value="P3">P3</option>
+          </select>
+        </div>
+        <div className="form-group">
+          <label class="mb-1">Assignee/s</label>
+          <Typeahead
+            multiple
+            options={project.contributors}
+            allowNew
+            placeholder="Add task assignee"
+            selected={taskDetail?.assignees ?? []}
+            onChange={(e) => {
+              const data = e.map((i) => (i.label ? i.label : i));
+              updateTaskDetail({ assignees: data });
+            }}
+          />
+        </div>
+        <div className="form-group">
+          <label class="mb-1">Labels</label>
+          <Typeahead
+            multiple
+            options={project.tags}
+            allowNew
+            placeholder="Add labels"
+            selected={taskDetail?.tags ?? []}
+            onChange={(e) => {
+              const data = e.map((i) => (i.label ? i.label : i));
+              updateTaskDetail({ tags: data });
+            }}
+          />
+        </div>
+        <div className="d-flex gap-2">
+          <div className="form-group flex-1">
+            <label>Start Date</label>
+            <input
+              placeholder="Enter start date"
+              min={today}
+              type="date"
+              value={taskDetail?.startDate ?? ""}
+              onChange={(e) => updateTaskDetail({ startDate: e.target.value })}
+            />
+          </div>
+
+          <div className="form-group flex-1">
+            <label>End Date</label>
+            <input
+              placeholder="Enter end date"
+              type="date"
+              min={today}
+              value={taskDetail?.endDate ?? ""}
+              onChange={(e) => updateTaskDetail({ endDate: e.target.value })}
+            />
+          </div>
+        </div>
+        <div>
+          <div className="d-flex justify-content-between mb-1 align-items-center">
+            <label>Task List</label>
+            <div
+              onClick={() =>
+                updateTaskDetail({
+                  list: [...(taskDetail.list ?? []), { ...listItem }],
+                })
+              }
+            >
+              <i class="bi bi-plus-circle h5 pointer"></i>
+            </div>
+          </div>
+          <div className="d-flex flex-column gap-2">
+            {Array.isArray(taskDetail.list) &&
+              taskDetail.list?.map((item, index) => (
+                <div>
+                  <div className="d-flex gap-2 justify-content-between align-items-center">
+                    <input
+                      type="checkbox"
+                      className="form-check-input"
+                      disabled={!isAllowedToEdit}
+                      checked={item.isCompleted}
+                      onChange={(e) =>
+                        updateTaskListItem(index, {
+                          title: item.title,
+                          isCompleted: e.target.checked,
+                        })
+                      }
+                    />
+                    <input
+                      type="text"
+                      value={item.title}
+                      placeholder="Task Detail"
+                      onChange={(e) =>
+                        updateTaskListItem(index, {
+                          title: e.target.value,
+                          isCompleted: false,
+                        })
+                      }
+                    />
+                    <div onClick={() => deleteTaskListItem(index)}>
+                      <i class="bi bi-trash3 h6 red pointer"></i>
+                    </div>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </div>
+        <div className="d-flex justify-content-end gap-3 align-items-center mt-3">
+          {!isEditTask && (
+            <Button variant="outline" onClick={() => setTaskDetail(null)}>
+              Clear Inputs
+            </Button>
+          )}
+          <Button
+            variant="primary"
+            onClick={isEditTask ? () => onEditTask() : onAddTask}
+          >
+            {isEditTask ? "Save" : "Add Task"}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+function formatDate(date) {
+  return date;
+}
+
+const ViewTaskModal = () => {
+  return (
+    <Modal
+      open={showViewTaskModal}
+      title={"Task Details"}
+      onOpenChange={() => {
+        setViewTaskModal(!showViewTaskModal);
+        setTaskDetail(null);
+      }}
+    >
+      <div className="d-flex flex-column gap-4">
+        <div>
+          <label class="mb-1">Title</label>
+          <div className="secondary-text">{taskDetail.title}</div>
+        </div>
+        <div>
+          <label class="mb-1">Description</label>
+          <div className="secondary-text">{taskDetail.description}</div>
+        </div>
+        <div>
+          <label class="mb-1">Priority</label>
+          <div className="secondary-text">{taskDetail.priority ?? "None"}</div>
+        </div>
+        <div>
+          <label class="mb-1">Assignee</label>
+          <div className="d-flex gap-2 align-items-center">
+            {Array.isArray(taskDetail.assignees) &&
+              taskDetail.assignees.map((assignee) => (
+                <div className="assignee-item" key={index}>
+                  <Widget
+                    src={
+                      "devhub.near/widget/devhub.components.molecule.ProfileCard"
+                    }
+                    props={{
+                      accountId: assignee,
+                      openLinkInNewTab: true,
+                    }}
+                  />
+                </div>
+              ))}
+          </div>
+        </div>
+        <div>
+          <label class="mb-1">Labels</label>
+          <div className="d-flex gap-2 align-items-center">
+            {Array.isArray(taskDetail.tags) &&
+              taskDetail.tags.map((tag) => (
+                <span key={i} className="badge p-2 rounded-0">
+                  <span className="hashtag">#</span>
+                  {tag}
+                </span>
+              ))}
+          </div>
+        </div>
+        <div className="d-flex gap-4 align-items-center">
+          <div>
+            <label>Start Date</label>
+            <div className="secondary-text">
+              {formatDate(taskDetail.startDate)}
+            </div>
+          </div>
+
+          <div>
+            <label>End Date</label>
+            <div className="secondary-text">
+              {formatDate(taskDetail.endDate)}
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className="d-flex justify-content-between mb-1 align-items-center">
+            <label>Task List</label>
+          </div>
+          <div className="d-flex flex-column gap-2">
+            {Array.isArray(taskDetail.list) &&
+              taskDetail.list?.map((item) => (
+                <div>
+                  <div className="d-flex gap-2">
+                    <input
+                      className="form-check-input"
+                      type="checkbox"
+                      checked={item.isCompleted}
+                      disabled={true}
+                    />
+                    <label>{item.title}</label>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+const Column = ({ title, addTask, columnTasks, changeStatusOptions }) => {
+  return (
+    <div className="d-flex flex-column gap-1 col-md-4">
+      <div className="border p-3 rounded-2 d-flex justify-content-between align-items-center h6">
+        {title}
+        {isAllowedToEdit && (
+          <div onClick={addTask}>
+            <i class="bi bi-plus-lg pointer"></i>
+          </div>
+        )}
+      </div>
+      <div className="d-flex flex-column gap-2">
+        {columnTasks.map((item, index) => (
+          <div
+            onClick={() => {
+              setViewTaskModal(true);
+              setTaskDetail(item);
+            }}
+            style={{ backgroundColor: "var(--card-bg-color)" }}
+            className="p-3 d-flex justify-content-between rounded-2 gap-2 pointer"
+          >
+            <div className="d-flex flex-column gap-2">
+              <div className="h6 bold">{item.title}</div>
+              <div className="h6">Author: {item.author}</div>
+              <div className="h6">Priority: {item.priority}</div>
+              {/* <div className="h6">Last edited: </div> */}
+            </div>
+            {isAllowedToEdit && (
+              <DropdownMenu
+                columnTitle={title}
+                item={item}
+                index={index}
+                changeStatusOptions={changeStatusOptions}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const columns = [
+  {
+    title: "Proposed",
+    columnTasks: proposedTasks,
+    addTask: () => {
+      setTaskDetail({ ...task, status: StatusValues.PROPOSED });
+      setShowAddTaskModal(true);
+    },
+    changeStatusOptions: [
+      { label: "In Progress", value: StatusValues.PROGRESS },
+    ],
+  },
+  {
+    title: "In Progress",
+    columnTasks: progressTasks,
+    addTask: () => {
+      setTaskDetail({ ...task, status: StatusValues.PROGRESS });
+      setShowAddTaskModal(true);
+    },
+    changeStatusOptions: [
+      { label: "Completed", value: StatusValues.COMPLETED },
+    ],
+  },
+  {
+    title: "Completed",
+    columnTasks: completedTasks,
+    addTask: () => {
+      setTaskDetail({ ...task, status: StatusValues.COMPLETED });
+      setShowAddTaskModal(true);
+    },
+    changeStatusOptions: [],
+  },
+];
+
+return (
+  <ThemeContainer>
+    <Wrapper>
+      <AddTaskModal />
+      <ViewTaskModal />
+      <DeleteConfirmationModal />
+      <div className="container">
+        <div className="row">
+          {columns.map((item) => (
+            <Column
+              title={item.title}
+              addTask={item.addTask}
+              columnTasks={item.columnTasks}
+              changeStatusOptions={item.changeStatusOptions}
+            />
+          ))}
+        </div>
+      </div>
+    </Wrapper>
+  </ThemeContainer>
+);
diff --git a/apps/old/widget/lib/project-data.jsx b/apps/old/widget/lib/project-data.jsx
index a3386622..6e917de5 100644
--- a/apps/old/widget/lib/project-data.jsx
+++ b/apps/old/widget/lib/project-data.jsx
@@ -2,13 +2,13 @@
 
 const getProjectMeta = (id) => {
   if (!id) {
-    throw new Error("Invalid project ID");
+    console.log("Invalid project ID");
   }
 
   const data = Social.get(id, "final");
 
   if (!data) {
-    throw new Error("Failed to fetch project data");
+    console.log("Failed to fetch project data");
   }
 
   try {