diff --git a/.eslintignore b/.eslintignore
index 3f5a819d..290c9003 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,3 @@
 workspaces/
-build/
\ No newline at end of file
+build/
+apps/
\ No newline at end of file
diff --git a/apps/homepage/widget/MetadataEditor.jsx b/apps/homepage/widget/MetadataEditor.jsx
new file mode 100644
index 00000000..9f53547c
--- /dev/null
+++ b/apps/homepage/widget/MetadataEditor.jsx
@@ -0,0 +1,204 @@
+const initialMetadata = props.initialMetadata ?? {};
+const onChange = props.onChange;
+const options = props.options;
+
+State.init({
+  initialMetadata,
+  metadata: initialMetadata,
+  reportedMetadata: initialMetadata,
+  linktree: initialMetadata.linktree ?? {},
+  image: initialMetadata.image,
+  backgroundImage: initialMetadata.backgroundImage,
+  screenshots: initialMetadata.screenshots ?? {},
+});
+
+const metadata = {
+  name: options.name ? state.metadata.name : undefined,
+  description: options.name ? state.metadata.description : undefined,
+  linktree:
+    options.linktree && Object.keys(state.linktree).length > 0
+      ? state.linktree
+      : undefined,
+  image:
+    options.image && state.image && Object.keys(state.image).length > 0
+      ? state.image
+      : undefined,
+  backgroundImage:
+    options.backgroundImage &&
+    state.backgroundImage &&
+    Object.keys(state.backgroundImage).length > 0
+      ? state.backgroundImage
+      : undefined,
+  tags: options.tags ? state.metadata.tags : undefined,
+  screenshots: options.screenshots ? state.metadata.screenshots : undefined,
+};
+
+if (
+  onChange &&
+  JSON.stringify(state.reportedMetadata) !== JSON.stringify(metadata)
+) {
+  State.update({
+    reportedMetadata: metadata,
+  });
+  onChange(metadata);
+}
+
+const Container = styled.div`
+  color: #fff;
+`;
+
+const CustomTagEditor = styled.div`
+  .form-control {
+    background: #23242b;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+`;
+
+const CustomImageUpload = styled.div`
+  .nav-link {
+    background: transparent;
+    color: #fff;
+    border: none;
+  }
+
+  .nav.nav-tabs {
+    border: none;
+  }
+
+  .nav-link.active {
+    color: #fff;
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-bottom: none;
+  }
+
+  .p-2 {
+    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    /* border-top: 0; */
+    background: #23242b !important;
+    color: #fff !important;
+  }
+
+  .form-control {
+    background: #23242b;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+`;
+
+return (
+  <Container>
+    {options.name && (
+      <div className="mb-3">
+        <label className="mb-2">{options.name.label ?? "Name"}</label>
+        <input
+          type="text"
+          value={state.metadata.name}
+          style={{
+            background: "#23242b",
+            color: "#fff",
+            border: "1px solid rgba(255, 255, 255, 0.20)",
+          }}
+        />
+      </div>
+    )}
+    {options.image && (
+      <div className="mb-3" style={{ color: "#000" }}>
+        <label className="mb-2 text-white">
+          {options.image.label ?? "Image"}
+        </label>
+        <CustomImageUpload>
+          <Widget
+            src="mob.near/widget/ImageEditorTabs"
+            props={{
+              image: state.image,
+              onChange: (image) => State.update({ image }),
+            }}
+          />
+        </CustomImageUpload>
+      </div>
+    )}
+    {options.backgroundImage && (
+      <div className="mb-3">
+        <label className="mb-2">
+          {options.backgroundImage.label ?? "Background image"}
+        </label>
+        <Widget
+          src="mob.near/widget/ImageEditorTabs"
+          props={{
+            image: state.backgroundImage,
+            onChange: (backgroundImage) => State.update({ backgroundImage }),
+          }}
+        />
+      </div>
+    )}
+    {options.description && (
+      <div className="mb-3">
+        <label className="mb-2">
+          {options.description.label ?? "Description"}
+        </label>
+        <span className="text-secondary"> (supports markdown)</span>
+        <textarea
+          className="form-control"
+          rows={5}
+          value={state.metadata.description}
+          onChange={(e) => {
+            state.metadata.description = e.target.value;
+            State.update();
+          }}
+          style={{
+            background: "#23242b",
+            color: "#fff",
+            border: "1px solid rgba(255, 255, 255, 0.20)",
+          }}
+        />
+      </div>
+    )}
+    {options.tags && (
+      <CustomTagEditor className="mb-3">
+        <label className="mb-2">{options.tags.label ?? "Tags"}</label>
+        <Widget
+          src="mob.near/widget/TagsEditor"
+          props={{
+            initialTagsObject: metadata.tags,
+            tagsPattern: options.tags.pattern,
+            placeholder:
+              options.tags.placeholder ??
+              "rust, engineer, artist, humanguild, nft, learner, founder",
+            setTagsObject: (tags) => {
+              state.metadata.tags = tags;
+              State.update();
+            },
+          }}
+        />
+      </CustomTagEditor>
+    )}
+    {options.linktree &&
+      (options.linktree.links ?? []).map((link) => (
+        <div className="mb-3">
+          <label class="mb-2">{link.label}</label>
+          <div className="input-group">
+            <span
+              className="input-group-text"
+              style={{
+                background: "#23242b",
+                color: "#fff",
+                border: "1px solid rgba(255, 255, 255, 0.20)",
+              }}
+            >
+              {link.prefix}
+            </span>
+            <input
+              type="text"
+              value={state.linktree[link.name]}
+              style={{
+                background: "#23242b",
+                color: "#fff",
+                border: "1px solid rgba(255, 255, 255, 0.20)",
+              }}
+            />
+          </div>
+        </div>
+      ))}
+  </Container>
+);
diff --git a/apps/homepage/widget/WidgetMetadata.jsx b/apps/homepage/widget/WidgetMetadata.jsx
new file mode 100644
index 00000000..774d9591
--- /dev/null
+++ b/apps/homepage/widget/WidgetMetadata.jsx
@@ -0,0 +1,181 @@
+const accountId = props.accountId;
+const widgetName = props.widgetName;
+const widgetPath = `${accountId}/widget/${widgetName}`;
+const blockHeight = props.blockHeight;
+const metadata = props.metadata ?? Social.getr(`${widgetPath}/metadata`);
+const renderTag = props.renderTag;
+
+const name = metadata.name ?? widgetName;
+const description = metadata.description;
+const image = metadata.image;
+const tags = Object.keys(metadata.tags ?? {});
+const expanded = !!props.expanded;
+
+const linktree = Object.entries(metadata.linktree ?? {});
+const linktreeElements = {
+  website: {
+    prefix: "https://",
+    icon: "bi-globe2",
+  },
+};
+
+const CustomProfileLink = styled.div`
+  * {
+    color: #fff !important;
+  }
+`;
+
+const linktreeObjects = linktree.map((o, i) => {
+  const key = o[0];
+  let value = o[1];
+  if (!value) {
+    return null;
+  }
+  const e = linktreeElements[key];
+  if (e.prefix) {
+    value = value && value.replace(e.prefix, "");
+  }
+  const icon = e.icon ? (
+    <i className={`bi ${e.icon ?? ""} text-secondary me-1`}></i>
+  ) : (
+    ""
+  );
+  return e.prefix ? (
+    <div key={i} className="text-truncate">
+      <a href={`${e.prefix}${value}`}>
+        {icon}
+        {value}
+      </a>
+    </div>
+  ) : (
+    <div key={i} className="text-truncate">
+      {key}: {icon}
+      {value}
+    </div>
+  );
+});
+
+const descriptionKey = `${widgetPath}-description`.replaceAll(/[._\/-]/g, "--");
+
+return (
+  <div
+    className="card text-white"
+    style={{ borderRadius: "1rem", background: "#23242b" }}
+  >
+    <div className="row py-3 g-1">
+      <div className="m-auto text-center" style={{ maxWidth: "12em" }}>
+        <div
+          className="d-inline-block"
+          style={{ width: "10em", height: "10em" }}
+        >
+          <Widget
+            src="mob.near/widget/Image"
+            props={{
+              image,
+              className: "w-100 h-100",
+              style: {
+                objectFit: "cover",
+                borderRadius: "0.5rem",
+                background: "#000",
+              },
+              thumbnail: false,
+              fallbackUrl:
+                "https://ipfs.near.social/ipfs/bafkreifzm3fvsuzjbnyik6iikfi6iy3jpqxyx2cdc7pwfwxkexy24326wu",
+              alt: widgetName,
+            }}
+          />
+        </div>
+      </div>
+      <div className="col px-2">
+        <div className="position-relative">
+          <h5 className="card-title">{name}</h5>
+          <div className="text-truncate mb-1">
+            <a className="stretched-link" href={`#/${widgetPath}`}>
+              <i className="bi bi-box-arrow-up-right text-secondary me-1" />
+              {widgetPath}
+            </a>
+          </div>
+        </div>
+        <div className="card-text" style={{ color: "#fff" }}>
+          {tags.length > 0 && (
+            <div>
+              {tags.map((tag, i) => {
+                const tagBadge = (
+                  <span key={i} className="me-1 mb-1 badge bg-secondary">
+                    #{tag}
+                  </span>
+                );
+                return renderTag ? renderTag(tag, tagBadge) : tagBadge;
+              })}
+            </div>
+          )}
+          {!expanded && (description || linktreeObjects.length > 0) && (
+            <button
+              className="btn btn-sm btn-outline-secondary border-0"
+              data-bs-toggle="collapse"
+              data-bs-target={`#${descriptionKey}`}
+              aria-expanded="false"
+              aria-controls={descriptionKey}
+            >
+              <i className="bi bi-arrows-angle-expand me-1"></i>Show details
+            </button>
+          )}
+          <a
+            href={`#/mob.near/widget/WidgetSource?src=${widgetPath}`}
+            className="btn btn-sm btn-outline-secondary border-0"
+            target="_blank"
+          >
+            <i className="bi bi-file-earmark-code me-1"></i>Source
+          </a>
+          <a
+            href={`#/bozon.near/widget/WidgetHistory?widgetPath=${widgetPath}`}
+            className="btn btn-sm btn-outline-secondary border-0"
+            target="_blank"
+          >
+            <i className="bi bi-clock-history me-1"></i>History
+          </a>
+          <a
+            href={`#/edit/${widgetPath}`}
+            className="btn btn-sm btn-outline-secondary border-0"
+          >
+            <i className="bi bi-pencil-square me-1"></i>
+            {accountId === context.accountId ? "Edit" : "Fork"}
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      className={`card-text p-2 pt-0 ${expanded ? "" : "collapse"}`}
+      id={descriptionKey}
+    >
+      <Markdown text={description} />
+      {linktreeObjects}
+    </div>
+    <div
+      className="card-footer"
+      style={{
+        borderBottomLeftRadius: "1rem",
+        borderBottomRightRadius: "1rem",
+      }}
+    >
+      <div className="d-flex justify-content-start">
+        <CustomProfileLink className="flex-grow-1 me-1 text-truncate">
+          <span className="text-secondary me-1">By</span>
+          <Widget
+            src="mob.near/widget/ProfileLine"
+            props={{ accountId, link: props.profileLink }}
+          />
+        </CustomProfileLink>
+        <div>
+          <small className="ps-1 text-nowrap text-muted ms-auto">
+            <i className="bi bi-clock me-1"></i>
+            <Widget
+              src="mob.near/widget/TimeAgo"
+              props={{ keyPath: widgetPath, now: props.metadata, blockHeight }}
+            />
+          </small>
+        </div>
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/homepage/widget/WidgetMetadataEditor.jsx b/apps/homepage/widget/WidgetMetadataEditor.jsx
new file mode 100644
index 00000000..34c6d5c9
--- /dev/null
+++ b/apps/homepage/widget/WidgetMetadataEditor.jsx
@@ -0,0 +1,38 @@
+const widgetPath = props.widgetPath;
+const onChange = props.onChange;
+
+let metadata = Social.getr(`${widgetPath}/metadata`);
+
+if (metadata === null) {
+  return "Loading";
+}
+
+return (
+  <Widget
+    key={widgetPath}
+    src="builddao.near/widget/MetadataEditor"
+    props={{
+      initialMetadata: metadata,
+      onChange,
+      options: {
+        name: { label: "Title" },
+        image: { label: "Icon" },
+        description: { label: "Description" },
+        tags: {
+          label: "Tags",
+          pattern: "*/widget/*/metadata/tags/*",
+          placeholder: "profile, editor, social, finance, app, image, nft",
+        },
+        linktree: {
+          links: [
+            {
+              label: "Website",
+              prefix: "https://",
+              name: "website",
+            },
+          ],
+        },
+      },
+    }}
+  />
+);
diff --git a/apps/homepage/widget/community/join.jsx b/apps/homepage/widget/community/join.jsx
new file mode 100644
index 00000000..e2169701
--- /dev/null
+++ b/apps/homepage/widget/community/join.jsx
@@ -0,0 +1,147 @@
+const accountId = context.accountId;
+const roleId = props.roleId ?? "community";
+const daoId = props.daoId ?? "build.sputnik-dao.near";
+const proposalId =
+  props.proposalId ?? Near.view(daoId, "get_last_proposal_id") - 1;
+
+if (!accountId) {
+  return "";
+}
+
+State.init({
+  isMember: false,
+});
+
+// get DAO policy, deposit, and group
+const policy = Near.view(daoId, "get_policy");
+
+if (policy === null) {
+  return "";
+}
+
+const deposit = policy.proposal_bond;
+
+const group = policy.roles
+  .filter((role) => role.name === roleId)
+  .map((role) => role.kind.Group);
+
+// get data from last proposal
+const proposal = Near.view(daoId, "get_proposal", {
+  id: proposalId,
+});
+
+if (proposal === null) {
+  return "";
+}
+
+// check if the potential member submitted last proposal
+const canJoin = accountId && accountId !== proposal.proposer;
+
+const handleJoin = () => {
+  Near.call([
+    {
+      contractName: daoId,
+      methodName: "add_proposal",
+      args: {
+        proposal: {
+          description: `add ${accountId} to the ${roleId} group`,
+          kind: {
+            AddMemberToRole: {
+              member_id: accountId,
+              role: roleId,
+            },
+          },
+        },
+      },
+      gas: 219000000000000,
+      deposit: deposit,
+    },
+  ]);
+};
+
+const groupMembers = group.join(", ");
+
+const checkMembership = (groupMembers) => {
+  if (groupMembers.indexOf(accountId) !== -1) {
+    return State.update({ isMember: true });
+  }
+};
+
+const validMember = checkMembership(groupMembers);
+
+// check if the potential member is a verified human
+let human = false;
+const userSBTs = Near.view("registry.i-am-human.near", "sbt_tokens_by_owner", {
+  account: accountId,
+});
+
+for (let i = 0; i < userSBTs.length; i++) {
+  if ("fractal.i-am-human.near" == userSBTs[i][0]) {
+    human = true;
+  }
+}
+
+// check if the potential member is connected
+const connectEdge = Social.keys(
+  `${accountId}/graph/connect/${daoId}`,
+  undefined,
+  {
+    values_only: true,
+  }
+);
+
+const loading = connectEdge === null || inverseEdge === null;
+const isConnected = connectEdge && Object.keys(connectEdge).length;
+
+return (
+  <div>
+    {!isConnected ? (
+      <Widget src="hack.near/widget/dao.connect" />
+    ) : (
+      <>
+        {!validMember ? (
+          <>
+            {canJoin ? (
+              <button
+                className="btn btn-success m-1 rounded-5"
+                onClick={handleJoin}
+              >
+                Join DAO
+              </button>
+            ) : (
+              <>
+                <button
+                  disabled={!canJoin}
+                  className="btn btn-success m-1 rounded-5"
+                >
+                  Pending
+                </button>
+                <a
+                  href="/hack.near/widget/dao.page.settings"
+                  className="btn btn-outline-success rounded-5"
+                >
+                  Customize
+                </a>
+              </>
+            )}
+          </>
+        ) : (
+          <>
+            <button
+              disabled={validMember}
+              className="btn btn-success m-1 rounded-5"
+            >
+              Joined
+            </button>
+            <a
+              href="/hack.near/widget/dao.page.settings"
+              className="btn btn-outline-success rounded-5"
+            >
+              Customize
+            </a>
+          </>
+        )}
+      </>
+    )}
+  </div>
+);
diff --git a/apps/homepage/widget/create-something.jsx b/apps/homepage/widget/create-something.jsx
new file mode 100644
index 00000000..dfd5a860
--- /dev/null
+++ b/apps/homepage/widget/create-something.jsx
@@ -0,0 +1,280 @@
+const [isMember, setIsMember] = useState(false);
+
+if (!context.accountId) {
+  return "Login to continue...";
+}
+
+const JoinContainer = styled.div`
+  padding: 3rem;
+  background-color: #0b0c14;
+  color: #fff;
+  height: 100%;
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Card = styled.div`
+  display: flex;
+  max-width: 500px;
+  width: 100%;
+  max-height: 550px;
+  padding: 80px 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+
+  border-radius: 32px;
+  background: var(--bg-2, #23242b);
+
+  img {
+    width: auto;
+    height: 54px;
+  }
+
+  h1 {
+    color: var(--white-100, #fff);
+    text-align: center;
+
+    /* H1/small */
+    font-size: 2rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 100%; /* 32px */
+  }
+`;
+
+const CTASection = styled.div`
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  align-self: stretch;
+
+  h3 {
+    color: var(--white-50, rgba(255, 255, 255, 0.7));
+    text-align: center;
+
+    /* H3/Small */
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 140%; /* 28px */
+  }
+
+  a,
+  button {
+    all: unset;
+    display: flex;
+    padding: 10px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    &:hover {
+      text-decoration: none;
+      color: #000 !important;
+      cursor: pointer;
+      background: var(--Yellow, #ffaf51);
+    }
+
+    border-radius: 8px;
+    background: var(--Yellow, #ffaf51);
+
+    color: var(--black-100, #000);
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+
+  span.pending {
+    display: flex;
+    padding: 4px 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    border-radius: 8px;
+    border: 1px solid rgba(81, 182, 255, 0.2);
+    background: rgba(81, 182, 255, 0.2);
+
+    color: var(--Blue, #51b6ff);
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+
+  span.joined {
+    display: flex;
+    padding: 4px 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    border-radius: 8px;
+    border: 1px solid rgba(81, 255, 234, 0.2);
+    background: rgba(81, 255, 234, 0.2);
+
+    color: var(--Sea-Blue, #51ffea);
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+`;
+
+const userWidgets = Social.keys(`${context.accountId}/widget/**`) || [];
+
+const daoId = "build.sputnik-dao.near";
+const accountId = context.accountId;
+
+// get DAO policy, deposit, and group
+const policy = Near.view(daoId, "get_policy");
+
+if (policy === null) {
+  return "";
+}
+
+const deposit = policy.proposal_bond;
+const roleId = "community";
+const group = policy.roles
+  .filter((role) => role.name === roleId)
+  .map((role) => role.kind.Group);
+
+const handleJoin = () => {
+  Near.call([
+    {
+      contractName: daoId,
+      methodName: "add_proposal",
+      args: {
+        proposal: {
+          description: `add ${accountId} to the ${roleId} group`,
+          kind: {
+            AddMemberToRole: {
+              member_id: accountId,
+              role: roleId,
+            },
+          },
+        },
+      },
+      gas: 219000000000000,
+      deposit: deposit,
+    },
+  ]);
+};
+
+const proposalId = Near.view(daoId, "get_last_proposal_id") - 1;
+
+// get data from last proposal
+const proposal = Near.view(daoId, "get_proposal", {
+  id: proposalId,
+});
+
+if (proposal === null) {
+  return "";
+}
+
+// check if the potential member submitted last proposal
+const canJoin = accountId && accountId !== proposal.proposer;
+
+const groupMembers = group.join(", ");
+
+const checkMembership = (groupMembers) => {
+  if (groupMembers.indexOf(accountId) !== -1) {
+    return setIsMember(true);
+  }
+};
+
+const validMember = checkMembership(groupMembers);
+
+const CreateSomethingView = (props) => {
+  return (
+    <JoinContainer>
+      <Card>
+        {" "}
+        <img src="https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya" />
+        <h1>
+          Designed to connect and empower builders in a multi-chain ecosystem
+        </h1>
+        <CTASection>
+          {userWidgets.length === 0 ? (
+            <>
+              <h3>In order to join Build DAO, you need to create a widget</h3>
+              <a href="/edit">
+                Create Something{" "}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="17"
+                  viewBox="0 0 16 17"
+                  fill="none"
+                >
+                  <path
+                    d="M10.7809 7.83327L7.2049 4.25726L8.1477 3.31445L13.3332 8.49993L8.1477 13.6853L7.2049 12.7425L10.7809 9.1666H2.6665V7.83327H10.7809Z"
+                    fill="black"
+                  />
+                </svg>
+              </a>
+            </>
+          ) : (
+            <>
+              {canJoin ? (
+                <button onClick={handleJoin}>
+                  Join Build DAO{" "}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="17"
+                    viewBox="0 0 16 17"
+                    fill="none"
+                  >
+                    <path
+                      d="M10.7809 7.83327L7.2049 4.25726L8.1477 3.31445L13.3332 8.49993L8.1477 13.6853L7.2049 12.7425L10.7809 9.1666H2.6665V7.83327H10.7809Z"
+                      fill="black"
+                    />
+                  </svg>
+                </button>
+              ) : (
+                <>
+                  <span className={!validMember ? "pending" : "joined"}>
+                    {!validMember ? "Pending..." : "Joined"}
+                  </span>
+                  <a href={"/propose"}>
+                    Propose Changes{" "}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="17"
+                      viewBox="0 0 16 17"
+                      fill="none"
+                    >
+                      <path
+                        d="M10.7809 7.83327L7.2049 4.25726L8.1477 3.31445L13.3332 8.49993L8.1477 13.6853L7.2049 12.7425L10.7809 9.1666H2.6665V7.83327H10.7809Z"
+                        fill="black"
+                      />
+                    </svg>
+                  </a>
+                </>
+              )}
+            </>
+          )}{" "}
+        </CTASection>
+      </Card>
+    </JoinContainer>
+  );
+};
+
+return <CreateSomethingView {...props} />;
diff --git a/apps/homepage/widget/home.jsx b/apps/homepage/widget/home.jsx
index aafed715..db50e0b5 100644
--- a/apps/homepage/widget/home.jsx
+++ b/apps/homepage/widget/home.jsx
@@ -1,842 +1,22 @@
-let theme = props.theme;
-let variables = props.variables;
-
-if (!variables) {
-  variables = `
-    --bg-1: #0B0C14;
-    --bg-2: #23242B;
-    --white-100: #FFF;
-    --white-50: rgba(255, 255, 255, 0.70);
-    --yellow: #FFAF51;
-    --stroke-color:  rgba(255, 255, 255, 0.2);
-    --sea-blue: #51FFEA;
-  `;
-}
-
-if (!theme) {
-  theme = ``;
-}
+const ownerId = "builddao.near";
 
 const Root = styled.div`
-  ${variables}
-  ${theme}
-`;
-
-const Container = styled.div`
-  display: flex;
-  width: 100vw;
-  flex-direction: column;
-  align-items: flex-start;
-
-  background-color: var(--bg-1);
-
-  overflow-x: hidden;
-`;
-
-const Hero = styled.div`
-  display: flex;
-  width: 100%;
-  padding: 150px 48px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 40px;
-  align-self: stretch;
-
-  text-align: center;
-  position: relative;
-
-  // overflow-x: hidden;
-`;
+  background-color: #0b0c14;
+  color: #ffffff;
+  font-family: Satoshi;
 
-const Grid = styled.img`
-  position: absolute;
-  margin: 0 !important;
-  left: 0rem;
   width: 100%;
-  object-fit: cover;
-  z-index: 0;
-
-  opacity: 0.01;
-`;
-
-const Blur = styled.div`
-  width: 560px;
-  height: 560px;
-  position: absolute;
-  border-radius: 560px;
-  background: rgba(${(props) => props.color}, 0.1);
-  filter: blur(129.5px);
-
-  ${(props) =>
-    props.position === "left" &&
-    `
-    left: -216px;
-    bottom: -31px;
-  `}
-
-  ${(props) =>
-    props.position === "right" &&
-    `
-    right: -216px;
-    bottom: -269px;
-  `}
-`;
-
-const Logo = styled.img`
-  width: 138px;
-  height: 54px;
-`;
-
-const Headline = styled.h1`
-  color: var(--white-100);
-  max-width: 700px;
-
-  font-size: 48px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 120%;
-
-  white-space: pre-line;
-`;
-
-const ColoredText = styled.span`
-  color: ${(props) => props.color};
-`;
-
-const FrameChild = styled.img`
-  height: 100%;
-  object-fit: cover;
-`;
-
-const Goals = styled.div`
-  display: flex;
-  padding: 100px 48px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 50px;
-  align-self: stretch;
 `;
 
-const Tag = styled.div`
-  display: flex;
-  padding: 8px 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: 100px;
-  border: 1px solid var(--yellow);
-  background: rgba(255, 189, 52, 0.2);
-
-  color: var(--yellow);
-  text-align: center;
-  leading-trim: both;
-  text-edge: cap;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-  text-transform: capitalize;
-`;
-
-const SectionHeader = styled.h2`
-  max-width: 600px;
-
-  color: var(--white-100);
-  text-align: center;
-
-  font-size: 40px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 120%;
-
-  white-space: pre-line;
-`;
-
-const SectionSubtitle = styled.div`
-  max-width: 500px;
-
-  color: var(--white-50);
-  text-align: center;
-
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-const Objectives = styled.div`
-  display: flex;
-  max-width: 1200px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 40px;
-`;
-
-const ObjectivesTop = styled.div`
-  display: flex;
-  padding: 40px;
-  justify-content: center;
-  align-items: center;
-  gap: 24px;
-
-  border-radius: 16px;
-  border: 1px solid #51ffea;
-  background: var(--bg-2);
-`;
-
-const ObjectivesTopLeft = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 16px;
-  flex: 1 0 0;
-`;
-
-const ObjectiveTitle = styled.div`
-  color: var(--yellow);
-
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 160%;
-  text-transform: uppercase;
-`;
-
-const ObjectiveSubtitle = styled.h3`
-  color: var(--white-100);
-
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 140%;
-`;
-
-const ObjectiveBody = styled.div`
-  color: var(--white-50);
-
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%;
-`;
-
-const ObjectivesTopRight = styled.div`
-  display: flex;
-  height: 434px;
-  padding: 36px 48.872px 36.231px 49px;
-  justify-content: center;
-  align-items: center;
-  flex: 1 0 0;
-`;
-
-const ObjectivesBottom = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 40px;
-`;
-
-const ObjectiveCard = styled.div`
-  display: flex;
-  height: 635.75px;
-  padding: 40px;
-  flex-direction: column;
-  justify-content: center;
-  gap: 24px;
-  flex: 1 0 0;
-
-  border-radius: 16px;
-  border: 1px solid var(--stroke-color);
-  background: var(--bg-2, #23242b);
-`;
-
-const ObjectiveImage = styled.div`
-  display: flex;
-  height: 265px;
-  padding: 20.125px 96.964px 20.125px 96px;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-`;
-
-const EducationImage = styled.div`
-  width: 307.036px;
-  height: 224.75px;
-
-  border-radius: 14.124px;
-  background: url("https://ipfs.near.social/ipfs/bafkreigdor4dtdj5sfq6g2m6wvsfihx72psb7sc5wtx6mbp7g7kxetrpsi"),
-    lightgray 50% / contain no-repeat;
-`;
-
-const CommunityImage = styled.div`
-  width: 307px;
-  height: 224.724px;
-
-  border-radius: 14.124px;
-  background: url("https://ipfs.near.social/ipfs/bafkreie2iztiiskycciokdlvqxy5z63lq7iac7r72zoybinya6p6yzf6nu"),
-    lightgray 50% / contain no-repeat;
-`;
-
-const Join = styled.div`
-  display: flex;
-  padding: 100px 48px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 40px;
-  align-self: stretch;
-`;
-
-const JoinHeading = styled.div`
-  display: flex;
-  width: 700px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
-`;
-
-const JoinItems = styled.div`
-  display: flex;
-  width: 600px;
-  height: 312px;
-  max-width: 600px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 16px;
-`;
-
-const JoinItem = styled.div`
-  display: flex;
-  padding: 12px;
-  align-items: flex-start;
-  gap: 16px;
-  align-self: stretch;
-
-  border-radius: 12px;
-  border: 1px solid var(--stroke-color);
-  background: var(--bg-2);
-`;
-
-const JoinItemIcon = styled.div`
-  display: flex;
-  width: 64px;
-  height: 64px;
-  padding: 20px;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 8px;
-  border: 1px solid var(--sea-blue);
-`;
-
-const JoinItemBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 8px;
-  flex: 1 0 0;
-`;
-
-const JoinItemTitle = styled.h4`
-  color: var(--white-100);
-
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 160%; /* 28.8px */
-`;
-
-const JoinItemSubtitle = styled.h4`
-  color: var(--white-50);
-
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-const HowToJoinContainer = styled.div`
-  display: flex;
-  max-width: 1200px;
-  padding: 40px;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 40px;
-  align-self: stretch;
-
-  border-radius: 16px;
-  border: 1px solid var(--sea-blue);
-  background: rgba(81, 255, 234, 0.1);
-  box-shadow: 4px 24px 48px 0px rgba(81, 255, 234, 0.1);
-`;
-
-const HowToJoin = styled.h2`
-  max-width: 500px;
-  flex: 1 0 0;
-  color: var(--white-100);
-
-  font-size: 40px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 120%; /* 48px */
-`;
-
-const HowToJoinRight = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 24px;
-  flex: 1 0 0;
-`;
-
-const HowToJoinInstructions = styled.div`
-  color: var(--sea-blue);
-
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-const JoinButton = styled.div`
-  display: flex;
-  padding: 10px 20px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: 8px;
-  background: var(--yellow);
-`;
-
-const Governance = styled.div`
-  display: flex;
-  padding: 100px 48px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 40px;
-  align-self: stretch;
-`;
-
-const GovernanceImage = styled.img`
-  height: 447px;
-  max-width: 1200px;
-`;
-
-const CTA = styled.div`
-  postition: relative;
-  display: flex;
-  height: 816px;
-  padding: 100px 48px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 40px;
-  align-self: stretch;
-`;
-
-const CTAWrapper = styled.div`
-  display: flex;
-  width: 600px;
-  padding: 40px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 40px;
-
-  border-radius: 16px;
-  border: 1px solid #51b6ff;
-  background: var(--black-100);
-  box-shadow: 4px 24px 48px 0px rgba(255, 189, 52, 0.1);
-`;
-
-const CTABody = styled.h1`
-  color: var(--white-100);
-  text-align: center;
-
-  font-size: 48px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 120%; /* 57.6px */
-`;
-
-const Footer = styled.div`
-  display: flex;
-  padding: 50px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 24px;
-  align-self: stretch;
-`;
-
-const Socials = styled.div`
-  display: flex;
-  align-items: flex-start;
-  align-content: flex-start;
-  gap: 12px;
-  flex-wrap: wrap;
-`;
-
-const FooterReserved = styled.div`
-  color: var(--white-50);
-  text-align: center;
-
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
+const sections = ["hero", "goals", "join", "governance", "cta", "footer"];
 
 return (
   <Root>
-    <Container>
-      <Hero>
-        <Grid
-          src="https://ipfs.near.social/ipfs/bafkreiay3ytllrxhtyunppqxcazpistttwdzlz3jefdbsq5tosxuryauu4"
-          alt="grid"
-        />
-        <Logo
-          src={
-            "https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya"
-          }
-          alt="Build DAO"
-        />
-        <Headline>
-          {`Designed to connect and empower builders in a `}
-          <ColoredText color={"var(--white-50)"}>
-            multi-chain ecosystem
-          </ColoredText>
-        </Headline>
-        <Blur color="81, 182, 255" position="left" />
-        <Blur color="255, 175, 81" position="right" />
-      </Hero>
-      <Goals>
-        <Tag>
-          Goals{" "}
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="13"
-            height="12"
-            viewBox="0 0 13 12"
-            fill="none"
-          >
-            <g clip-path="url(#clip0_1459_196)">
-              <path
-                d="M3.5 10.5L11 3L9.5 1.5L2 9L3.5 10.5Z"
-                stroke="#FFAF51"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M8 3L9.5 4.5"
-                stroke="#FFAF51"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M5 1.5C5 1.76522 5.10536 2.01957 5.29289 2.20711C5.48043 2.39464 5.73478 2.5 6 2.5C5.73478 2.5 5.48043 2.60536 5.29289 2.79289C5.10536 2.98043 5 3.23478 5 3.5C5 3.23478 4.89464 2.98043 4.70711 2.79289C4.51957 2.60536 4.26522 2.5 4 2.5C4.26522 2.5 4.51957 2.39464 4.70711 2.20711C4.89464 2.01957 5 1.76522 5 1.5Z"
-                stroke="#FFAF51"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M10 6.5C10 6.76522 10.1054 7.01957 10.2929 7.20711C10.4804 7.39464 10.7348 7.5 11 7.5C10.7348 7.5 10.4804 7.60536 10.2929 7.79289C10.1054 7.98043 10 8.23478 10 8.5C10 8.23478 9.89464 7.98043 9.70711 7.79289C9.51957 7.60536 9.26522 7.5 9 7.5C9.26522 7.5 9.51957 7.39464 9.70711 7.20711C9.89464 7.01957 10 6.76522 10 6.5Z"
-                stroke="#FFAF51"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_1459_196">
-                <rect
-                  width="12"
-                  height="12"
-                  fill="white"
-                  transform="translate(0.5)"
-                />
-              </clipPath>
-            </defs>
-          </svg>
-        </Tag>
-        <SectionHeader>
-          Primary <ColoredText color={"var(--yellow)"}>Objectives</ColoredText>
-        </SectionHeader>
-        <Objectives>
-          <ObjectivesTop>
-            <ObjectivesTopLeft>
-              <ObjectiveTitle>Development</ObjectiveTitle>
-              <ObjectiveSubtitle>Support builders</ObjectiveSubtitle>
-              <ObjectiveBody>
-                {`The core mission is to build open-source infrastructure and web applications for everyone. By creating systems to reward useful contributions, we can grow successful projects that solve problems and generate sustainable value.`}
-              </ObjectiveBody>
-            </ObjectivesTopLeft>
-            <ObjectivesTopRight>
-              <FrameChild
-                alt="development"
-                src="https://ipfs.near.social/ipfs/bafkreiezfdf2y4zz3nm2dgfhfs2lq3wjuwm647vdn75c3rdwidru4l3ufy"
-              />
-            </ObjectivesTopRight>
-          </ObjectivesTop>
-          <ObjectivesBottom>
-            <ObjectiveCard>
-              <ObjectiveImage>
-                <FrameChild
-                  src="https://ipfs.near.social/ipfs/bafkreigdor4dtdj5sfq6g2m6wvsfihx72psb7sc5wtx6mbp7g7kxetrpsi"
-                  alt="education"
-                />
-              </ObjectiveImage>
-              <ObjectiveTitle>Education</ObjectiveTitle>
-              <ObjectiveSubtitle>Learn together</ObjectiveSubtitle>
-              <ObjectiveBody>
-                {`We are cultivating a worldwide community of builders who are motivated to help others. Members can earn badges and get necessary resources for training potential contributors.`}
-              </ObjectiveBody>
-            </ObjectiveCard>
-            <ObjectiveCard>
-              <ObjectiveImage>
-                <FrameChild
-                  src="https://ipfs.near.social/ipfs/bafkreie2iztiiskycciokdlvqxy5z63lq7iac7r72zoybinya6p6yzf6nu"
-                  alt="education"
-                />
-              </ObjectiveImage>
-              <ObjectiveTitle>Community</ObjectiveTitle>
-              <ObjectiveSubtitle>Facilitate Governance</ObjectiveSubtitle>
-              <ObjectiveBody>
-                {`We introduced on-chain feedback channels to gather input from participants. This will be crucial for understanding common issues, optimizing documentation, and improving quality of experience.`}
-              </ObjectiveBody>
-            </ObjectiveCard>
-          </ObjectivesBottom>
-        </Objectives>
-      </Goals>
-      <Join>
-        <JoinHeading>
-          <Tag>
-            Join{" "}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="13"
-              height="12"
-              viewBox="0 0 13 12"
-              fill="none"
-            >
-              <g clip-path="url(#clip0_1459_196)">
-                <path
-                  d="M3.5 10.5L11 3L9.5 1.5L2 9L3.5 10.5Z"
-                  stroke="#FFAF51"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M8 3L9.5 4.5"
-                  stroke="#FFAF51"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M5 1.5C5 1.76522 5.10536 2.01957 5.29289 2.20711C5.48043 2.39464 5.73478 2.5 6 2.5C5.73478 2.5 5.48043 2.60536 5.29289 2.79289C5.10536 2.98043 5 3.23478 5 3.5C5 3.23478 4.89464 2.98043 4.70711 2.79289C4.51957 2.60536 4.26522 2.5 4 2.5C4.26522 2.5 4.51957 2.39464 4.70711 2.20711C4.89464 2.01957 5 1.76522 5 1.5Z"
-                  stroke="#FFAF51"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M10 6.5C10 6.76522 10.1054 7.01957 10.2929 7.20711C10.4804 7.39464 10.7348 7.5 11 7.5C10.7348 7.5 10.4804 7.60536 10.2929 7.79289C10.1054 7.98043 10 8.23478 10 8.5C10 8.23478 9.89464 7.98043 9.70711 7.79289C9.51957 7.60536 9.26522 7.5 9 7.5C9.26522 7.5 9.51957 7.39464 9.70711 7.20711C9.89464 7.01957 10 6.76522 10 6.5Z"
-                  stroke="#FFAF51"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_1459_196">
-                  <rect
-                    width="12"
-                    height="12"
-                    fill="white"
-                    transform="translate(0.5)"
-                  />
-                </clipPath>
-              </defs>
-            </svg>
-          </Tag>
-          <SectionHeader>
-            {`Open call for members to `}
-            <ColoredText color={"var(--sea-blue)"}>
-              join and contribute
-            </ColoredText>
-          </SectionHeader>
-          <SectionSubtitle>
-            Build DAO is an innovative, community-led organization intended to
-            serve the open web ecosystem in multiple ways:
-          </SectionSubtitle>
-        </JoinHeading>
-        <JoinItems>
-          <JoinItem>
-            <JoinItemIcon>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="25"
-                viewBox="0 0 24 25"
-                fill="none"
-              >
-                <path
-                  d="M10 8.75H14V7.25C14 5.317 15.567 3.75 17.5 3.75C19.433 3.75 21 5.317 21 7.25C21 9.183 19.433 10.75 17.5 10.75H16V14.75H17.5C19.433 14.75 21 16.317 21 18.25C21 20.183 19.433 21.75 17.5 21.75C15.567 21.75 14 20.183 14 18.25V16.75H10V18.25C10 20.183 8.433 21.75 6.5 21.75C4.567 21.75 3 20.183 3 18.25C3 16.317 4.567 14.75 6.5 14.75H8V10.75H6.5C4.567 10.75 3 9.183 3 7.25C3 5.317 4.567 3.75 6.5 3.75C8.433 3.75 10 5.317 10 7.25V8.75ZM8 8.75V7.25C8 6.42157 7.32843 5.75 6.5 5.75C5.67157 5.75 5 6.42157 5 7.25C5 8.07843 5.67157 8.75 6.5 8.75H8ZM8 16.75H6.5C5.67157 16.75 5 17.4216 5 18.25C5 19.0784 5.67157 19.75 6.5 19.75C7.32843 19.75 8 19.0784 8 18.25V16.75ZM16 8.75H17.5C18.3284 8.75 19 8.07843 19 7.25C19 6.42157 18.3284 5.75 17.5 5.75C16.6716 5.75 16 6.42157 16 7.25V8.75ZM16 16.75V18.25C16 19.0784 16.6716 19.75 17.5 19.75C18.3284 19.75 19 19.0784 19 18.25C19 17.4216 18.3284 16.75 17.5 16.75H16ZM10 10.75V14.75H14V10.75H10Z"
-                  fill="#51FFEA"
-                />
-              </svg>
-            </JoinItemIcon>
-            <JoinItemBody>
-              <JoinItemTitle>Vote on Important Decisions</JoinItemTitle>
-              <JoinItemSubtitle>
-                Members collectively shape community programs and policies.
-              </JoinItemSubtitle>
-            </JoinItemBody>
-          </JoinItem>
-          <JoinItem>
-            <JoinItemIcon>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="25"
-                viewBox="0 0 24 25"
-                fill="none"
-              >
-                <path
-                  d="M10 8.75H14V7.25C14 5.317 15.567 3.75 17.5 3.75C19.433 3.75 21 5.317 21 7.25C21 9.183 19.433 10.75 17.5 10.75H16V14.75H17.5C19.433 14.75 21 16.317 21 18.25C21 20.183 19.433 21.75 17.5 21.75C15.567 21.75 14 20.183 14 18.25V16.75H10V18.25C10 20.183 8.433 21.75 6.5 21.75C4.567 21.75 3 20.183 3 18.25C3 16.317 4.567 14.75 6.5 14.75H8V10.75H6.5C4.567 10.75 3 9.183 3 7.25C3 5.317 4.567 3.75 6.5 3.75C8.433 3.75 10 5.317 10 7.25V8.75ZM8 8.75V7.25C8 6.42157 7.32843 5.75 6.5 5.75C5.67157 5.75 5 6.42157 5 7.25C5 8.07843 5.67157 8.75 6.5 8.75H8ZM8 16.75H6.5C5.67157 16.75 5 17.4216 5 18.25C5 19.0784 5.67157 19.75 6.5 19.75C7.32843 19.75 8 19.0784 8 18.25V16.75ZM16 8.75H17.5C18.3284 8.75 19 8.07843 19 7.25C19 6.42157 18.3284 5.75 17.5 5.75C16.6716 5.75 16 6.42157 16 7.25V8.75ZM16 16.75V18.25C16 19.0784 16.6716 19.75 17.5 19.75C18.3284 19.75 19 19.0784 19 18.25C19 17.4216 18.3284 16.75 17.5 16.75H16ZM10 10.75V14.75H14V10.75H10Z"
-                  fill="#51FFEA"
-                />
-              </svg>
-            </JoinItemIcon>
-            <JoinItemBody>
-              <JoinItemTitle>Earn Recognition and Rewards</JoinItemTitle>
-              <JoinItemSubtitle>
-                Members develop their own reputations as builders.
-              </JoinItemSubtitle>
-            </JoinItemBody>
-          </JoinItem>
-          <JoinItem>
-            <JoinItemIcon>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="25"
-                viewBox="0 0 24 25"
-                fill="none"
-              >
-                <path
-                  d="M10 8.75H14V7.25C14 5.317 15.567 3.75 17.5 3.75C19.433 3.75 21 5.317 21 7.25C21 9.183 19.433 10.75 17.5 10.75H16V14.75H17.5C19.433 14.75 21 16.317 21 18.25C21 20.183 19.433 21.75 17.5 21.75C15.567 21.75 14 20.183 14 18.25V16.75H10V18.25C10 20.183 8.433 21.75 6.5 21.75C4.567 21.75 3 20.183 3 18.25C3 16.317 4.567 14.75 6.5 14.75H8V10.75H6.5C4.567 10.75 3 9.183 3 7.25C3 5.317 4.567 3.75 6.5 3.75C8.433 3.75 10 5.317 10 7.25V8.75ZM8 8.75V7.25C8 6.42157 7.32843 5.75 6.5 5.75C5.67157 5.75 5 6.42157 5 7.25C5 8.07843 5.67157 8.75 6.5 8.75H8ZM8 16.75H6.5C5.67157 16.75 5 17.4216 5 18.25C5 19.0784 5.67157 19.75 6.5 19.75C7.32843 19.75 8 19.0784 8 18.25V16.75ZM16 8.75H17.5C18.3284 8.75 19 8.07843 19 7.25C19 6.42157 18.3284 5.75 17.5 5.75C16.6716 5.75 16 6.42157 16 7.25V8.75ZM16 16.75V18.25C16 19.0784 16.6716 19.75 17.5 19.75C18.3284 19.75 19 19.0784 19 18.25C19 17.4216 18.3284 16.75 17.5 16.75H16ZM10 10.75V14.75H14V10.75H10Z"
-                  fill="#51FFEA"
-                />
-              </svg>
-            </JoinItemIcon>
-            <JoinItemBody>
-              <JoinItemTitle>Discover Opportunities</JoinItemTitle>
-              <JoinItemSubtitle>
-                Members gain exposure to new gigs and interesting projects.
-              </JoinItemSubtitle>
-            </JoinItemBody>
-          </JoinItem>
-        </JoinItems>
-        <HowToJoinContainer>
-          <HowToJoin>How to Join</HowToJoin>
-          <HowToJoinRight>
-            <HowToJoinInstructions>
-              <ol>1. Sign membership agreement (on-chain)</ol>
-              <ol>2. Propose to be added to the “Community” role</ol>
-              <ol>3. Fulfill contribution requirements</ol>
-            </HowToJoinInstructions>
-            <JoinButton>Join</JoinButton>
-          </HowToJoinRight>
-        </HowToJoinContainer>
-      </Join>
-      <Governance>
-        <JoinHeading>
-          <Tag>
-            Goverance{" "}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="13"
-              height="12"
-              viewBox="0 0 13 12"
-              fill="none"
-            >
-              <g clip-path="url(#clip0_1459_196)">
-                <path
-                  d="M3.5 10.5L11 3L9.5 1.5L2 9L3.5 10.5Z"
-                  stroke="#FFAF51"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M8 3L9.5 4.5"
-                  stroke="#FFAF51"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M5 1.5C5 1.76522 5.10536 2.01957 5.29289 2.20711C5.48043 2.39464 5.73478 2.5 6 2.5C5.73478 2.5 5.48043 2.60536 5.29289 2.79289C5.10536 2.98043 5 3.23478 5 3.5C5 3.23478 4.89464 2.98043 4.70711 2.79289C4.51957 2.60536 4.26522 2.5 4 2.5C4.26522 2.5 4.51957 2.39464 4.70711 2.20711C4.89464 2.01957 5 1.76522 5 1.5Z"
-                  stroke="#FFAF51"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M10 6.5C10 6.76522 10.1054 7.01957 10.2929 7.20711C10.4804 7.39464 10.7348 7.5 11 7.5C10.7348 7.5 10.4804 7.60536 10.2929 7.79289C10.1054 7.98043 10 8.23478 10 8.5C10 8.23478 9.89464 7.98043 9.70711 7.79289C9.51957 7.60536 9.26522 7.5 9 7.5C9.26522 7.5 9.51957 7.39464 9.70711 7.20711C9.89464 7.01957 10 6.76522 10 6.5Z"
-                  stroke="#FFAF51"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_1459_196">
-                  <rect
-                    width="12"
-                    height="12"
-                    fill="white"
-                    transform="translate(0.5)"
-                  />
-                </clipPath>
-              </defs>
-            </svg>
-          </Tag>
-          <SectionHeader>Let's coordinate!</SectionHeader>
-          <SectionSubtitle>
-            {`Build DAO upholds the principles of openness and accountability in its decision-making processes. We believe success depends on metagovernance of builders, by builders, for builders.`}
-          </SectionSubtitle>
-        </JoinHeading>
-        <GovernanceImage
-          src="https://ipfs.near.social/ipfs/bafybeifaeuepgsffn32kjsaboqrnruv7blhfy2mwe74yvjuo4vggeppr3y"
-          alt="governance"
-        />
-      </Governance>
-      <CTA>
-        <Grid
-          src="https://ipfs.near.social/ipfs/bafkreiay3ytllrxhtyunppqxcazpistttwdzlz3jefdbsq5tosxuryauu4"
-          alt="grid"
-        />
-        <CTAWrapper>
-          <Logo
-            src={
-              "https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya"
-            }
-            alt="Build DAO"
-          />
-          <CTABody>Together, we can build a better future.</CTABody>
-          <JoinButton>Join</JoinButton>
-        </CTAWrapper>
-        <Blur color="81, 182, 255" position="left" />
-        <Blur color="255, 175, 81" position="right" />
-      </CTA>
-      <Footer>
-        <Socials></Socials>
-        <FooterReserved>@2023 BuildDAO all rights reserved</FooterReserved>
-      </Footer>
-    </Container>
+    {sections.map((section) => (
+      <Widget
+        src={`${ownerId}/widget/section.${section}`}
+        key={`Home-Section-${section}`}
+      />
+    ))}
   </Root>
 );
diff --git a/apps/homepage/widget/login.jsx b/apps/homepage/widget/login.jsx
new file mode 100644
index 00000000..9d05322b
--- /dev/null
+++ b/apps/homepage/widget/login.jsx
@@ -0,0 +1,94 @@
+const LoginContainer = styled.div`
+  background-color: #0b0c14;
+  color: #fff;
+  height: 100%;
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    max-height: 100vh;
+    object-fit: cover;
+    object-position: center top;
+    position: absolute;
+    top: 0%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .card {
+    z-index: 5;
+    background: transparent;
+    display: flex;
+    max-width: 500px;
+    width: 100%;
+    max-height: 550px;
+    padding: 80px 24px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+
+    img {
+      width: auto;
+      height: 54px;
+      object-fit: cover;
+    }
+
+    h1 {
+      color: var(--white-100, #fff);
+      text-align: center;
+
+      /* H1/small */
+      font-size: 2rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 100%; /* 32px */
+    }
+
+    a {
+      display: flex;
+      padding: 16px 20px;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      align-self: stretch;
+
+      border-radius: 8px;
+      border: 1px solid var(--white-100, #fff);
+      background: #fff;
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      color: var(--black-100, #000);
+
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+    }
+  }
+`;
+
+const LoginView = () => {
+  return (
+    <LoginContainer>
+      <div className="card">
+        <img src="https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya" />
+        <h1>
+          Designed to connect and empower builders in a multi-chain ecosystem
+        </h1>
+        <a href="/signin">Login</a>
+      </div>
+      <img src="https://ipfs.near.social/ipfs/bafybeibqnkvafyflci4iap73prugmjw4wlwmrazbiudvnsyr34yzmk75i4" />
+    </LoginContainer>
+  );
+};
+
+return <LoginView />;
diff --git a/apps/homepage/widget/propose-widget.jsx b/apps/homepage/widget/propose-widget.jsx
new file mode 100644
index 00000000..a4444aba
--- /dev/null
+++ b/apps/homepage/widget/propose-widget.jsx
@@ -0,0 +1,28 @@
+const [proposalWidget, setProposalWidget] = useState("");
+
+return (
+  <>
+    <h1>Propose a new page</h1>
+    <input
+      placeholder="Enter a widget src"
+      value={proposalWidget}
+      onChange={(e) => setProposalWidget(e.target.value)}
+    />
+    <a href="#">
+      {" "}
+      Propose{" "}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="17"
+        viewBox="0 0 16 17"
+        fill="none"
+      >
+        <path
+          d="M10.7814 7.83327L7.20539 4.25726L8.14819 3.31445L13.3337 8.49993L8.14819 13.6853L7.20539 12.7425L10.7814 9.1666H2.66699V7.83327H10.7814Z"
+          fill="black"
+        />
+      </svg>
+    </a>
+  </>
+);
diff --git a/apps/homepage/widget/propose.jsx b/apps/homepage/widget/propose.jsx
new file mode 100644
index 00000000..d34b1891
--- /dev/null
+++ b/apps/homepage/widget/propose.jsx
@@ -0,0 +1,198 @@
+const [view, setView] = useState("selection");
+const [selection, setSelection] = useState(0);
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  background: #0b0c14;
+  color: #fff;
+`;
+
+const Card = styled.div`
+  display: flex;
+  padding: 80px 24px;
+  max-width: 500px;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+
+  h1 {
+    color: var(--white-100, #fff);
+    text-align: center;
+
+    /* H1/small */
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 100%; /* 32px */
+  }
+
+  span.disabled {
+    cursor: not-allowed !important;
+  }
+
+  input {
+    border-radius: 4px;
+    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+
+    padding: 12px;
+
+    color: var(--white-50, rgba(255, 255, 255, 0.7));
+    /* Body/Small */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 170%; /* 23.8px */
+
+    background-color: #0b0c14;
+  }
+
+  .form-control:focus {
+    color: var(--white-50, rgba(255, 255, 255, 0.7));
+    background-color: #0b0c14;
+  }
+
+  input::placeholder {
+    color: var(--white-50, rgba(255, 255, 255, 0.7));
+    /* Body/Small */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 170%; /* 23.8px */
+  }
+
+  a {
+    display: flex;
+    padding: 10px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    border-radius: 8px;
+    background: var(--Yellow, #ffaf51);
+
+    color: var(--black-100, #000) !important;
+
+    ${selection === 0 && "pointer-events: none;"}
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+`;
+
+const Box = styled.div`
+  display: flex;
+  width: 200px;
+  padding: 40px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+
+  border-radius: 16px;
+  background: var(--bg-2, #23242b);
+
+  cursor: pointer;
+
+  h3 {
+    color: var(--white-100, #fff);
+
+    /* H3/Small */
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 140%; /* 28px */
+  }
+`;
+
+const SelectionBox = ({ title, selected, value }) => {
+  return (
+    <Box onClick={() => setSelection(value)}>
+      {selected ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path
+            d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"
+            fill="#FFAF51"
+          />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path
+            d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"
+            fill="white"
+          />
+        </svg>
+      )}
+      <h3>{title}</h3>
+    </Box>
+  );
+};
+
+return (
+  <Container>
+    <Card>
+      {view === "selection" ? (
+        <>
+          <h1>What would you like to do?</h1>
+          <div className="d-flex gap-4">
+            <SelectionBox
+              title={"Make changes to the existing page"}
+              selected={selection === 1}
+              value={1}
+            />
+            <SelectionBox
+              title={"Propose a new page"}
+              selected={selection === 2}
+              value={2}
+            />
+          </div>
+          <span className={`${selection === 0 && "disabled"}`}>
+            <a
+              href={selection === 1 ? "/edit" : "#"}
+              onClick={() => selection === 2 && setView("proposal")}
+            >
+              Continue{" "}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="17"
+                viewBox="0 0 16 17"
+                fill="none"
+              >
+                <path
+                  d="M10.7814 7.83327L7.20539 4.25726L8.14819 3.31445L13.3337 8.49993L8.14819 13.6853L7.20539 12.7425L10.7814 9.1666H2.66699V7.83327H10.7814Z"
+                  fill="black"
+                />
+              </svg>
+            </a>
+          </span>
+        </>
+      ) : (
+        <Widget src="builddao.near/widget/propose-widget" />
+      )}
+    </Card>
+  </Container>
+);
diff --git a/apps/homepage/widget/section/cta.jsx b/apps/homepage/widget/section/cta.jsx
new file mode 100644
index 00000000..ddf8b860
--- /dev/null
+++ b/apps/homepage/widget/section/cta.jsx
@@ -0,0 +1,142 @@
+const logoLink =
+  "https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya";
+const gridLink =
+  "https://ipfs.near.social/ipfs/bafkreiay3ytllrxhtyunppqxcazpistttwdzlz3jefdbsq5tosxuryauu4";
+const leftBlur =
+  "https://ipfs.near.social/ipfs/bafkreig2cgzqloepedal5ypphzhzcakl5uoedxjtvbpxbxnywerjbzmfpm";
+const rightBlur =
+  "https://ipfs.near.social/ipfs/bafkreierwhnzytfajagidxim5mzdphu5fopjmlrxehatywzuy6ahr5q7pe";
+
+const CTAContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2.5rem;
+
+  position: relative;
+
+  padding: 6.25rem 3rem;
+
+  @media screen and (max-width: 768px) {
+    padding: 6.25rem 1.5rem;
+  }
+`;
+
+const LeftBlur = styled.img`
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  object-fit: cover;
+  width: 25%;
+
+  @media screen and (max-width: 768px) {
+    width: 50%;
+    opacity: 0.5;
+  }
+`;
+
+const RightBlur = styled.img`
+  position: absolute;
+  right: 0;
+  top: 75%;
+  transform: translateY(-50%);
+  object-fit: cover;
+  width: 25%;
+
+  @media screen and (max-width: 768px) {
+    width: 50%;
+    opacity: 0.5;
+  }
+`;
+
+const Grid = styled.img`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.05;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+`;
+
+const Card = styled.div`
+  z-index: 2;
+  display: flex;
+  max-width: 37.5rem;
+  padding: 2.5rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2.5rem;
+
+  border-radius: 16px;
+  border: 1px solid #51b6ff;
+  background: #000;
+  box-shadow: 4px 24px 48px 0px rgba(255, 189, 52, 0.1);
+
+  h1 {
+    color: #fff;
+    text-align: center;
+
+    /* H1/large */
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 120%; /* 57.6px */
+    margin: 0;
+  }
+
+  a {
+    display: flex;
+    padding: 10px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    border-radius: 8px;
+    background: #ffaf51;
+
+    color: #000;
+    margin: 0;
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    text-decoration: none;
+    transition: all 300ms;
+
+    &:hover {
+      background: #c98a40;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    h1 {
+      font-size: 2rem;
+    }
+  }
+`;
+
+const Logo = styled.img`
+  height: 2.875rem;
+  object-fit: cover;
+`;
+
+return (
+  <CTAContainer>
+    <Card>
+      <Logo src={logoLink} />
+      <h1>Together, we can build a better future.</h1>
+      <a href="#">Join Now</a>
+    </Card>
+    <Grid src={gridLink} />
+    <LeftBlur src={leftBlur} />
+    <RightBlur src={rightBlur} />
+  </CTAContainer>
+);
diff --git a/apps/homepage/widget/section/footer.jsx b/apps/homepage/widget/section/footer.jsx
new file mode 100644
index 00000000..3c6e89c4
--- /dev/null
+++ b/apps/homepage/widget/section/footer.jsx
@@ -0,0 +1,92 @@
+const Footer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 3.125rem;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  align-self: stretch;
+  background-color: #0b0c14;
+  width: 100%;
+
+  p {
+    max-width: 700px;
+
+    align-self: stretch;
+
+    color: var(--white-50, rgba(255, 255, 255, 0.7));
+    text-align: center;
+
+    /* Body/Large */
+    font-family: Satoshi;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 170%; /* 27.2px */
+    margin: 0 auto;
+  }
+`;
+
+const InstagramIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+  >
+    <path
+      d="M12.001 9.75C10.3436 9.75 9.00098 11.0931 9.00098 12.75C9.00098 14.4073 10.3441 15.75 12.001 15.75C13.6583 15.75 15.001 14.4069 15.001 12.75C15.001 11.0927 13.6579 9.75 12.001 9.75ZM12.001 7.75C14.7614 7.75 17.001 9.9871 17.001 12.75C17.001 15.5105 14.7639 17.75 12.001 17.75C9.24051 17.75 7.00098 15.5129 7.00098 12.75C7.00098 9.98953 9.23808 7.75 12.001 7.75ZM18.501 7.49915C18.501 8.18926 17.9402 8.74917 17.251 8.74917C16.5609 8.74917 16.001 8.1884 16.001 7.49915C16.001 6.8099 16.5617 6.25 17.251 6.25C17.9393 6.24913 18.501 6.8099 18.501 7.49915ZM12.001 4.75C9.5265 4.75 9.12318 4.75655 7.97227 4.8078C7.18815 4.84461 6.66253 4.95007 6.17416 5.13967C5.74016 5.30799 5.42709 5.50898 5.09352 5.84255C4.75867 6.1774 4.55804 6.48963 4.3904 6.92383C4.20036 7.41332 4.09493 7.93811 4.05878 8.72115C4.00703 9.8252 4.00098 10.2111 4.00098 12.75C4.00098 15.2245 4.00753 15.6278 4.05877 16.7786C4.0956 17.5624 4.2012 18.0888 4.39034 18.576C4.5591 19.0106 4.7605 19.3244 5.09246 19.6564C5.42863 19.9921 5.74179 20.1934 6.17187 20.3594C6.66619 20.5505 7.19148 20.6561 7.97212 20.6922C9.07618 20.7439 9.46203 20.75 12.001 20.75C14.4755 20.75 14.8788 20.7434 16.0296 20.6922C16.8117 20.6555 17.3385 20.5496 17.827 20.3606C18.2604 20.1923 18.5752 19.9902 18.9074 19.6585C19.2436 19.3218 19.4445 19.0094 19.6107 18.5783C19.8013 18.0858 19.9071 17.5598 19.9432 16.7789C19.9949 15.6748 20.001 15.2889 20.001 12.75C20.001 10.2755 19.9944 9.87221 19.9432 8.72137C19.9064 7.93906 19.8005 7.41149 19.6113 6.92318C19.4434 6.49038 19.2417 6.17635 18.9084 5.84255C18.573 5.50715 18.2616 5.30693 17.8271 5.13942C17.338 4.94954 16.8124 4.84396 16.0298 4.80781C14.9258 4.75605 14.5399 4.75 12.001 4.75ZM12.001 2.75C14.7176 2.75 15.0568 2.76 16.1235 2.81C17.1876 2.85917 17.9135 3.0275 18.551 3.275C19.2101 3.52917 19.7668 3.8725 20.3226 4.42833C20.8776 4.98417 21.221 5.5425 21.476 6.2C21.7226 6.83667 21.891 7.56333 21.941 8.6275C21.9885 9.69417 22.001 10.0333 22.001 12.75C22.001 15.4667 21.991 15.8058 21.941 16.8725C21.8918 17.9367 21.7226 18.6625 21.476 19.3C21.2218 19.9592 20.8776 20.5158 20.3226 21.0717C19.7668 21.6267 19.2076 21.97 18.551 22.225C17.9135 22.4717 17.1876 22.64 16.1235 22.69C15.0568 22.7375 14.7176 22.75 12.001 22.75C9.28431 22.75 8.94514 22.74 7.87848 22.69C6.81431 22.6408 6.08931 22.4717 5.45098 22.225C4.79264 21.9708 4.23514 21.6267 3.67931 21.0717C3.12348 20.5158 2.78098 19.9567 2.52598 19.3C2.27848 18.6625 2.11098 17.9367 2.06098 16.8725C2.01348 15.8058 2.00098 15.4667 2.00098 12.75C2.00098 10.0333 2.01098 9.69417 2.06098 8.6275C2.11014 7.5625 2.27848 6.8375 2.52598 6.2C2.78014 5.54167 3.12348 4.98417 3.67931 4.42833C4.23514 3.8725 4.79348 3.53 5.45098 3.275C6.08848 3.0275 6.81348 2.86 7.87848 2.81C8.94514 2.7625 9.28431 2.75 12.001 2.75Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const XIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+  >
+    <path
+      d="M8 2.75H1L9.26086 13.7645L1.44995 22.7499H4.09998L10.4883 15.401L16 22.75H23L14.3917 11.2723L21.8001 2.75H19.1501L13.1643 9.63578L8 2.75ZM17 20.75L5 4.75H7L19 20.75H17Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const YoutubeIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+  >
+    <path
+      d="M19.6069 7.74482C19.5307 7.44695 19.3152 7.22221 19.0684 7.15288C18.6299 7.03062 16.501 6.75 12.001 6.75C7.50098 6.75 5.37252 7.03073 4.93225 7.15323C4.68776 7.22123 4.4723 7.44593 4.3951 7.74482C4.2863 8.16923 4.00098 9.94595 4.00098 12.75C4.00098 15.554 4.2863 17.3308 4.3954 17.7564C4.47126 18.0531 4.68676 18.2778 4.93251 18.3468C5.37252 18.4693 7.50098 18.75 12.001 18.75C16.501 18.75 18.6299 18.4694 19.0697 18.3468C19.3142 18.2788 19.5297 18.0541 19.6069 17.7552C19.7157 17.3308 20.001 15.55 20.001 12.75C20.001 9.95 19.7157 8.16923 19.6069 7.74482ZM21.5442 7.24818C22.001 9.03 22.001 12.75 22.001 12.75C22.001 12.75 22.001 16.47 21.5442 18.2518C21.2897 19.2373 20.547 20.0118 19.6056 20.2736C17.8971 20.75 12.001 20.75 12.001 20.75C12.001 20.75 6.10837 20.75 4.39637 20.2736C3.45146 20.0082 2.70879 19.2336 2.45774 18.2518C2.00098 16.47 2.00098 12.75 2.00098 12.75C2.00098 12.75 2.00098 9.03 2.45774 7.24818C2.71227 6.26273 3.45495 5.48818 4.39637 5.22636C6.10837 4.75 12.001 4.75 12.001 4.75C12.001 4.75 17.8971 4.75 19.6056 5.22636C20.5505 5.49182 21.2932 6.26636 21.5442 7.24818ZM10.001 16.25V9.25L16.001 12.75L10.001 16.25Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const SocialContainer = styled.div`
+  display: flex;
+  gap: 1.25rem;
+  align-items: center;
+`;
+
+const date = new Date();
+
+return (
+  <Footer>
+    <SocialContainer>
+      <a href="#">{InstagramIcon}</a>
+      <a href="#">{XIcon}</a>
+      <a href="#">{YoutubeIcon}</a>
+    </SocialContainer>
+    <p>{date.getFullYear()} BuildDAO all rights reserved</p>
+  </Footer>
+);
diff --git a/apps/homepage/widget/section/goals.jsx b/apps/homepage/widget/section/goals.jsx
index e69de29b..90b324b7 100644
--- a/apps/homepage/widget/section/goals.jsx
+++ b/apps/homepage/widget/section/goals.jsx
@@ -0,0 +1,245 @@
+const GoalsContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 3.125rem;
+
+  position: relative;
+
+  padding: 6.25rem 3rem;
+
+  @media screen and (max-width: 768px) {
+    padding: 6.25rem 1.5rem;
+  }
+`;
+
+const SectionPill = ({ title, icon }) => {
+  const Pill = styled.div`
+    display: flex;
+    padding: 8px 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    border-radius: 100px;
+    border: 1px solid var(--Yellow, #ffaf51);
+    background: rgba(255, 189, 52, 0.2);
+
+    color: var(--Yellow, #ffaf51);
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    text-transform: capitalize;
+
+    width: max-content;
+  `;
+
+  return (
+    <Pill>
+      <span>{title}</span> {icon}
+    </Pill>
+  );
+};
+
+const MagicIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="13"
+    viewBox="0 0 12 13"
+    fill="none"
+  >
+    <g clipPath="url(#clip0_1459_202)">
+      <path
+        d="M3 11.25L10.5 3.75L9 2.25L1.5 9.75L3 11.25Z"
+        stroke="#ffaf51"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.5 3.75L9 5.25"
+        stroke="#ffaf51"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.5 2.25C4.5 2.51522 4.60536 2.76957 4.79289 2.95711C4.98043 3.14464 5.23478 3.25 5.5 3.25C5.23478 3.25 4.98043 3.35536 4.79289 3.54289C4.60536 3.73043 4.5 3.98478 4.5 4.25C4.5 3.98478 4.39464 3.73043 4.20711 3.54289C4.01957 3.35536 3.76522 3.25 3.5 3.25C3.76522 3.25 4.01957 3.14464 4.20711 2.95711C4.39464 2.76957 4.5 2.51522 4.5 2.25Z"
+        stroke="#ffaf51"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.5 7.25C9.5 7.51522 9.60536 7.76957 9.79289 7.95711C9.98043 8.14464 10.2348 8.25 10.5 8.25C10.2348 8.25 9.98043 8.35536 9.79289 8.54289C9.60536 8.73043 9.5 8.98478 9.5 9.25C9.5 8.98478 9.39464 8.73043 9.20711 8.54289C9.01957 8.35536 8.76522 8.25 8.5 8.25C8.76522 8.25 9.01957 8.14464 9.20711 7.95711C9.39464 7.76957 9.5 7.51522 9.5 7.25Z"
+        stroke="#ffaf51"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1459_202">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="translate(0 0.75)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const Title = styled.h2`
+  color: #fff;
+  text-align: center;
+  font-size: 2.5rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%; /* 48px */
+  margin: 0;
+
+  span.yellow {
+    color: var(--Yellow, #ffaf51);
+  }
+
+  @media screen and (max-width: 768px) {
+    font-size: 1.5rem;
+  }
+`;
+
+const GridContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2.5rem;
+
+  @media screen and (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+  }
+`;
+
+const GridItem = ({ tag, title, description, image, isFirst }) => {
+  const Card = styled.div`
+    display: flex;
+    max-height: 635.75px;
+    padding: 2.5rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
+    ${isFirst && "grid-column: 1 / span 2;"}
+    ${isFirst && "flex-direction: row-reverse;"}
+
+    border-radius: 16px;
+    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+    background: var(--bg-2, #23242b);
+
+    ${isFirst && "border: 1px solid #51FFEA;"}
+
+    div {
+      flex: 0 1 auto;
+    }
+
+    div.content {
+      width: 100%;
+      ${isFirst && "max-width: 50%;"}
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+
+      span.tag {
+        color: var(--Yellow, #ffaf51);
+
+        /* Other/CAPS */
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 160%; /* 22.4px */
+        text-transform: uppercase;
+      }
+
+      h3 {
+        color: var(--white-100, #fff);
+
+        /* H3/Large */
+        font-size: 1.5rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 140%; /* 33.6px */
+        margin: 0;
+      }
+
+      p {
+        color: var(--white-50, rgba(255, 255, 255, 0.7));
+
+        /* Body/Large */
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 170%; /* 27.2px */
+        margin: 0;
+      }
+    }
+
+    div.image img {
+      width: 100%;
+      max-width: 600px;
+      max-height: 400px;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    @media screen and (max-width: 768px) {
+      flex-direction: column;
+      div.content {
+        max-width: 100%;
+      }
+    }
+  `;
+  return (
+    <Card>
+      <div className="image">
+        <img src={image} />
+      </div>
+      <div className="content">
+        <span className="tag">{tag}</span>
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </Card>
+  );
+};
+
+return (
+  <GoalsContainer className="container-xl">
+    <SectionPill title="Goals" icon={MagicIcon} />
+    <Title>
+      Primary <span className="yellow">Objectives</span>
+    </Title>
+    <GridContainer>
+      <GridItem
+        title="Support Builders"
+        tag="Development"
+        description="The core mission is to build open-source infrastructure and web applications for everyone. By creating systems to reward useful contributions, we can grow successful projects that solve problems and generate sustainable value."
+        image="https://ipfs.near.social/ipfs/bafkreiezfdf2y4zz3nm2dgfhfs2lq3wjuwm647vdn75c3rdwidru4l3ufy"
+        isFirst
+      />
+      <GridItem
+        title="Learn Togeter"
+        tag="Education"
+        description="We are cultivating a worldwide community of builders who are motivated to help others. Members can earn badges and get necessary resources for training potential contributors."
+        image="https://ipfs.near.social/ipfs/bafkreigdor4dtdj5sfq6g2m6wvsfihx72psb7sc5wtx6mbp7g7kxetrpsi"
+      />
+      <GridItem
+        title="Community"
+        tag="Facilitate Governance"
+        description="We introduced on-chain feedback channels to gather input from participants. This will be crucial for understanding common issues, optimizing documentation, and improving quality of experience."
+        image="https://ipfs.near.social/ipfs/bafkreiggevnacu45yy72igqlmq4gkdyea2jj7hswvolonjoqzvifdf57nq"
+      />
+    </GridContainer>
+  </GoalsContainer>
+);
diff --git a/apps/homepage/widget/section/governance.jsx b/apps/homepage/widget/section/governance.jsx
new file mode 100644
index 00000000..0c25d027
--- /dev/null
+++ b/apps/homepage/widget/section/governance.jsx
@@ -0,0 +1,162 @@
+const imageLink =
+  "https://ipfs.near.social/ipfs/bafybeifaeuepgsffn32kjsaboqrnruv7blhfy2mwe74yvjuo4vggeppr3y";
+
+const SectionPill = ({ title, icon }) => {
+  const Pill = styled.div`
+    display: flex;
+    padding: 8px 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    border-radius: 100px;
+    border: 1px solid var(--Blue, #51b6ff);
+    background: rgba(81, 182, 255, 0.2);
+
+    color: var(--Blue, #51b6ff);
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    text-transform: capitalize;
+
+    width: max-content;
+  `;
+
+  return (
+    <Pill>
+      <span>{title}</span> {icon}
+    </Pill>
+  );
+};
+
+const MagicIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="13"
+    viewBox="0 0 12 13"
+    fill="none"
+  >
+    <g clipPath="url(#clip0_1459_202)">
+      <path
+        d="M3 11.25L10.5 3.75L9 2.25L1.5 9.75L3 11.25Z"
+        stroke="#51B6FF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.5 3.75L9 5.25"
+        stroke="#51B6FF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.5 2.25C4.5 2.51522 4.60536 2.76957 4.79289 2.95711C4.98043 3.14464 5.23478 3.25 5.5 3.25C5.23478 3.25 4.98043 3.35536 4.79289 3.54289C4.60536 3.73043 4.5 3.98478 4.5 4.25C4.5 3.98478 4.39464 3.73043 4.20711 3.54289C4.01957 3.35536 3.76522 3.25 3.5 3.25C3.76522 3.25 4.01957 3.14464 4.20711 2.95711C4.39464 2.76957 4.5 2.51522 4.5 2.25Z"
+        stroke="#51B6FF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.5 7.25C9.5 7.51522 9.60536 7.76957 9.79289 7.95711C9.98043 8.14464 10.2348 8.25 10.5 8.25C10.2348 8.25 9.98043 8.35536 9.79289 8.54289C9.60536 8.73043 9.5 8.98478 9.5 9.25C9.5 8.98478 9.39464 8.73043 9.20711 8.54289C9.01957 8.35536 8.76522 8.25 8.5 8.25C8.76522 8.25 9.01957 8.14464 9.20711 7.95711C9.39464 7.76957 9.5 7.51522 9.5 7.25Z"
+        stroke="#51B6FF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1459_202">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="translate(0 0.75)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const GovernanceContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2.5rem;
+
+  position: relative;
+
+  padding: 6.25rem 3rem;
+
+  @media screen and (max-width: 768px) {
+    padding: 6.25rem 1.5rem;
+  }
+
+  img {
+    max-height: 447px;
+    width: 100%;
+  }
+`;
+
+const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  h2 {
+    color: #fff;
+    text-align: center;
+    font-size: 2.5rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 120%; /* 48px */
+    margin: 0;
+  }
+
+  span.blue {
+    color: #51b6ff;
+  }
+
+  p {
+    max-width: 500px;
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+
+    /* Body/Large */
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 170%; /* 27.2px */
+    margin: 0;
+  }
+
+  @media screen and (max-widht: 768px) {
+    h2 {
+      font-size: 1.5rem;
+    }
+
+    p {
+      font-size: 0.875rem;
+    }
+  }
+`;
+
+return (
+  <GovernanceContainer>
+    <ContentContainer>
+      <SectionPill title="Governance" icon={MagicIcon} />
+      <h1>
+        Let's <span className="blue">coordinate!</span>
+      </h1>
+      <p>
+        Build DAO upholds the principles of openness and accountability in its
+        decision-making processes. We believe success depends on metagovernance
+        of builders, by builders, for builders.
+      </p>
+    </ContentContainer>
+    <img src={imageLink} />
+  </GovernanceContainer>
+);
diff --git a/apps/homepage/widget/section/hero.jsx b/apps/homepage/widget/section/hero.jsx
index e69de29b..ed91a2c7 100644
--- a/apps/homepage/widget/section/hero.jsx
+++ b/apps/homepage/widget/section/hero.jsx
@@ -0,0 +1,106 @@
+const logoLink =
+  "https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya";
+const gridLink =
+  "https://ipfs.near.social/ipfs/bafkreiay3ytllrxhtyunppqxcazpistttwdzlz3jefdbsq5tosxuryauu4";
+const leftBlur =
+  "https://ipfs.near.social/ipfs/bafkreig2cgzqloepedal5ypphzhzcakl5uoedxjtvbpxbxnywerjbzmfpm";
+const rightBlur =
+  "https://ipfs.near.social/ipfs/bafkreierwhnzytfajagidxim5mzdphu5fopjmlrxehatywzuy6ahr5q7pe";
+
+const HeroContainer = styled.div`
+  width: 100%;
+  position: relative;
+
+  padding: 6.25rem 3rem;
+
+  @media screen and (max-width: 768px) {
+    padding: 6.25rem 1.5rem;
+  }
+`;
+
+const LeftBlur = styled.img`
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  object-fit: cover;
+  width: 25%;
+
+  @media screen and (max-width: 768px) {
+    width: 50%;
+    opacity: 0.5;
+  }
+`;
+
+const RightBlur = styled.img`
+  position: absolute;
+  right: 0;
+  top: 100%;
+  transform: translateY(-50%);
+  object-fit: cover;
+  width: 25%;
+
+  @media screen and (max-width: 768px) {
+    width: 50%;
+    opacity: 0.5;
+  }
+`;
+
+const Grid = styled.img`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.05;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+`;
+
+const Logo = styled.img`
+  height: 54px;
+  object-fit: cover;
+`;
+
+const Tagline = styled.h1`
+  max-width: 700px;
+
+  text-align: center;
+  font-size: 3rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%; /* 57.6px */
+  margin: 0;
+
+  span.muted {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  @media screen and (max-width: 768px) {
+    font-size: 2rem;
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2.5rem;
+
+  margin: 0 auto;
+`;
+
+return (
+  <HeroContainer>
+    <Content>
+      <Logo src={logoLink} />
+      <Tagline>
+        Designed to connect and empower builders in a{" "}
+        <span className="muted">multi-chain ecosystem</span>
+      </Tagline>
+    </Content>
+    <Grid src={gridLink} />
+    <LeftBlur src={leftBlur} />
+    <RightBlur src={rightBlur} />
+  </HeroContainer>
+);
diff --git a/apps/homepage/widget/section/join.jsx b/apps/homepage/widget/section/join.jsx
new file mode 100644
index 00000000..26df90a0
--- /dev/null
+++ b/apps/homepage/widget/section/join.jsx
@@ -0,0 +1,361 @@
+const SectionPill = ({ title, icon }) => {
+  const Pill = styled.div`
+    display: flex;
+    padding: 8px 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    border-radius: 100px;
+    border: 1px solid var(--Sea-Blue, #51ffea);
+    background: rgba(81, 255, 234, 0.2);
+
+    color: var(--Sea-Blue, #51ffea);
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    text-transform: capitalize;
+
+    width: max-content;
+  `;
+
+  return (
+    <Pill>
+      <span>{title}</span> {icon}
+    </Pill>
+  );
+};
+
+const MagicIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="13"
+    height="13"
+    viewBox="0 0 13 13"
+    fill="none"
+  >
+    <g clipPath="url(#clip0_1459_190)">
+      <path
+        d="M3.5 11.25L11 3.75L9.5 2.25L2 9.75L3.5 11.25Z"
+        stroke="#51FFEA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 3.75L9.5 5.25"
+        stroke="#51FFEA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 2.25C5 2.51522 5.10536 2.76957 5.29289 2.95711C5.48043 3.14464 5.73478 3.25 6 3.25C5.73478 3.25 5.48043 3.35536 5.29289 3.54289C5.10536 3.73043 5 3.98478 5 4.25C5 3.98478 4.89464 3.73043 4.70711 3.54289C4.51957 3.35536 4.26522 3.25 4 3.25C4.26522 3.25 4.51957 3.14464 4.70711 2.95711C4.89464 2.76957 5 2.51522 5 2.25Z"
+        stroke="#51FFEA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 7.25C10 7.51522 10.1054 7.76957 10.2929 7.95711C10.4804 8.14464 10.7348 8.25 11 8.25C10.7348 8.25 10.4804 8.35536 10.2929 8.54289C10.1054 8.73043 10 8.98478 10 9.25C10 8.98478 9.89464 8.73043 9.70711 8.54289C9.51957 8.35536 9.26522 8.25 9 8.25C9.26522 8.25 9.51957 8.14464 9.70711 7.95711C9.89464 7.76957 10 7.51522 10 7.25Z"
+        stroke="#51FFEA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1459_190">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="translate(0.5 0.75)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const JoinContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2.5rem;
+
+  position: relative;
+
+  padding: 6.25rem 3rem;
+
+  @media screen and (max-width: 768px) {
+    padding: 6.25rem 1.5rem;
+  }
+`;
+
+const ContentContainer = styled.div`
+  max-width: 700px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  h2 {
+    color: #fff;
+    text-align: center;
+    font-size: 2.5rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 120%; /* 48px */
+    margin: 0;
+  }
+
+  span.blue {
+    color: var(--Sea-Blue, #51ffea);
+  }
+
+  p {
+    max-width: 500px;
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+
+    /* Body/Large */
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 170%; /* 27.2px */
+    margin: 0;
+  }
+
+  @media screen and (max-width: 768px) {
+    h2 {
+      font-size: 1.5rem;
+    }
+
+    p {
+      font-size: 0.875rem;
+    }
+  }
+`;
+
+const CardContainer = styled.div`
+  max-width: 36rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const CardIcon = () => {
+  const Icon = styled.div`
+    display: flex;
+    width: 64px;
+    height: 64px;
+    padding: 1.25rem;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 0.5rem;
+    border: 1px solid var(--Sea-Blue, #51ffea);
+
+    @media screen and (max-width: 768px) {
+      width: 2.5rem;
+      height: 2.5rem;
+      padding: 7.875px 0.5rem 8.125px 0.5rem;
+    }
+  `;
+
+  return (
+    <Icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+      >
+        <path
+          d="M10 8.75H14V7.25C14 5.317 15.567 3.75 17.5 3.75C19.433 3.75 21 5.317 21 7.25C21 9.183 19.433 10.75 17.5 10.75H16V14.75H17.5C19.433 14.75 21 16.317 21 18.25C21 20.183 19.433 21.75 17.5 21.75C15.567 21.75 14 20.183 14 18.25V16.75H10V18.25C10 20.183 8.433 21.75 6.5 21.75C4.567 21.75 3 20.183 3 18.25C3 16.317 4.567 14.75 6.5 14.75H8V10.75H6.5C4.567 10.75 3 9.183 3 7.25C3 5.317 4.567 3.75 6.5 3.75C8.433 3.75 10 5.317 10 7.25V8.75ZM8 8.75V7.25C8 6.42157 7.32843 5.75 6.5 5.75C5.67157 5.75 5 6.42157 5 7.25C5 8.07843 5.67157 8.75 6.5 8.75H8ZM8 16.75H6.5C5.67157 16.75 5 17.4216 5 18.25C5 19.0784 5.67157 19.75 6.5 19.75C7.32843 19.75 8 19.0784 8 18.25V16.75ZM16 8.75H17.5C18.3284 8.75 19 8.07843 19 7.25C19 6.42157 18.3284 5.75 17.5 5.75C16.6716 5.75 16 6.42157 16 7.25V8.75ZM16 16.75V18.25C16 19.0784 16.6716 19.75 17.5 19.75C18.3284 19.75 19 19.0784 19 18.25C19 17.4216 18.3284 16.75 17.5 16.75H16ZM10 10.75V14.75H14V10.75H10Z"
+          fill="#51FFEA"
+        />
+      </svg>
+    </Icon>
+  );
+};
+
+const Card = ({ title, description }) => {
+  const Body = styled.div`
+    display: flex;
+    padding: 0.75rem;
+    align-items: flex-start;
+    gap: 1rem;
+    align-self: stretch;
+
+    border-radius: 12px;
+    border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+    background: var(--bg-2, #23242b);
+
+    h4 {
+      color: var(--white-100, #fff);
+
+      /* H4/Large */
+      font-size: 1.125rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 160%; /* 28.8px */
+      margin: 0;
+    }
+
+    p {
+      color: var(--white-50, rgba(255, 255, 255, 0.7));
+
+      /* Body/Large */
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 170%; /* 27.2px */
+      margin: 0;
+    }
+  `;
+
+  return (
+    <Body>
+      <CardIcon />
+      <div>
+        <h4>{title}</h4>
+        <p>{description}</p>
+      </div>
+    </Body>
+  );
+};
+
+const CTAContainer = styled.div`
+  display: flex;
+  max-width: 75rem;
+  width: 100%;
+  padding: 2.5rem;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 2.5rem;
+  margin: 0 auto;
+
+  border-radius: 1rem;
+  border: 1px solid var(--Sea-Blue, #51ffea);
+  background: rgba(81, 255, 234, 0.1);
+  box-shadow: 0.25rem 1.5rem 3rem 0rem rgba(81, 255, 234, 0.1);
+
+  h2 {
+    max-width: 500px;
+    flex: 1 0 0;
+
+    color: var(--white-100, #fff);
+
+    /* H2/Large */
+    font-family: Satoshi;
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 120%; /* 48px */
+  }
+
+  span.blue {
+    color: var(--Sea-Blue, #51ffea);
+  }
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    padding: 2.5rem 1.5rem;
+
+    h2 {
+      font-size: 1.5rem;
+    }
+  }
+`;
+
+const CTAContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+  flex: 1 0 0;
+
+  p {
+    color: var(--Sea-Blue, #51ffea);
+    /* Body/Large */
+    font-family: Satoshi;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 170%; /* 27.2px */
+  }
+
+  a {
+    display: flex;
+    padding: 10px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    border-radius: 8px;
+    background: #ffaf51;
+
+    color: #000;
+    margin: 0;
+
+    /* Other/Button_text */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    text-decoration: none;
+    transition: all 300ms;
+
+    &:hover {
+      background: #c98a40;
+    }
+  }
+`;
+
+return (
+  <JoinContainer>
+    <ContentContainer>
+      <SectionPill title="Join" icon={MagicIcon} />
+      <h2>
+        Open call for members to{" "}
+        <span className="blue">join and contribute</span>
+      </h2>
+      <p>
+        Build DAO is an innovative, community-led organization designed to serve
+        the open web ecosystem in multiple ways:
+      </p>
+    </ContentContainer>
+    <CardContainer>
+      <Card
+        title="Vote on Important Decisions"
+        description="Members collectively shape community programs and policies."
+      />
+      <Card
+        title="Earn Recognition and Rewards"
+        description="Members develop their own reputations as builders."
+      />
+      <Card
+        title="Discover Opportunities"
+        description="Members gain exposure to new gigs and interesting projects."
+      />
+    </CardContainer>
+    <CTAContainer>
+      <h2>
+        How to <span className="blue">join</span>
+      </h2>
+      <CTAContent>
+        <p>
+          1. Sign membership agreement (on-chain)
+          <br />
+          2. Propose to be added to the “Community” role
+          <br />
+          3. Fulfill contribution requirements
+        </p>
+        <a href="/join">Join Now</a>
+      </CTAContent>
+    </CTAContainer>
+  </JoinContainer>
+);
diff --git a/public/index.html b/public/index.html
index b0d4af7c..421d68ef 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,16 +11,20 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="/manifest.json" />
-    <meta
-        name="description"
-        content="Support Systems for Open Web Builders"
+    <meta name="description" content="Support Systems for Open Web Builders" />
+    <link
+      href="https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,301,701,300,501,401,901,400&display=swap"
+      rel="stylesheet"
     />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@NearBuilders">
-    <meta property="og:image" content="https://nearbuilders.org/app.png">
-    <meta property="og:type" content="website">
+    <meta name="twitter:site" content="@NearBuilders" />
+    <meta property="og:image" content="https://nearbuilders.org/app.png" />
+    <meta property="og:type" content="website" />
     <meta property="og:title" content="Build DAO" />
-    <meta property="og:description" content="Support Systems for Open Web Developers" />
+    <meta
+      property="og:description"
+      content="Support Systems for Open Web Developers"
+    />
     <title>Build DAO</title>
   </head>
   <body>
diff --git a/src/App.js b/src/App.js
index 722bbc4f..5ae0bb56 100644
--- a/src/App.js
+++ b/src/App.js
@@ -35,6 +35,8 @@ import EmbedPage from "./pages/EmbedPage";
 import Flags from "./pages/Flags";
 import SignInPage from "./pages/SignInPage";
 import ViewPage from "./pages/ViewPage";
+import JoinPage from "./pages/JoinPage";
+import ProposePage from "./pages/ProposePage";
 
 export const refreshAllowanceObj = {};
 const documentationHref = "https://github.com/NearBuilders/docs";
@@ -166,7 +168,7 @@ function App() {
   };
 
   return (
-    <div className="App">
+    <div className="App" style={{ height: "100vh" }}>
       <EthersProviderContext.Provider value={ethersProviderContext}>
         <Router basename={process.env.PUBLIC_URL}>
           <Switch>
@@ -177,6 +179,12 @@ function App() {
               <NavigationWrapper {...passProps} />
               <SignInPage {...passProps} />
             </Route>
+            <Route path={"/join"}>
+              <JoinPage {...passProps} />
+            </Route>
+            <Route path={"/propose"}>
+              <ProposePage {...passProps} />
+            </Route>
             <Route path={"/embed/:widgetSrc*"}>
               <EmbedPage {...passProps} />
             </Route>
diff --git a/src/App.scss b/src/App.scss
index 413020d1..9d5bd7c4 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -6,6 +6,7 @@ body {
 
 body, html {
   -webkit-font-smoothing: antialiased;
+  height: 100%;
 }
 
 .pointer {
diff --git a/src/components/Editor/FileTab.js b/src/components/Editor/FileTab.js
index b64443b9..1d7a7298 100644
--- a/src/components/Editor/FileTab.js
+++ b/src/components/Editor/FileTab.js
@@ -1,6 +1,7 @@
 import { Nav } from "react-bootstrap";
 import React, { useEffect, useState } from "react";
 import { useAccountId, useCache, useNear } from "near-social-vm";
+import styled from "styled-components";
 
 export const Filetype = {
   Widget: "widget",
@@ -85,17 +86,69 @@ export function FileTab(props) {
     updateSaved && updateSaved(jp, !saved, localCode);
   }, [saved, updateSaved, localCode]);
 
+  const Button = styled.button`
+    all: unset;
+
+    display: flex;
+    padding: 10px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+
+    color: var(--black-100, #000);
+    /* Other/Button_text */
+    font-family: Satoshi;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    border-radius: 8px;
+    background: var(--Blue, #51b6ff);
+
+    ${active && "box-shadow:0px 0px 0px 2px #fff inset;"}
+  `;
+
+  const CloseButton = styled.button`
+    all: unset;
+    padding: 4px;
+    font-size: 12px;
+
+    height: 8px;
+    width: 8px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: #000;
+    border-radius: 50%;
+    transition: all 300ms;
+
+    &:hover {
+      background-color: #fff;
+    }
+  `;
+
   return (
-    <Nav.Item>
-      <Nav.Link className="text-decoration-none" eventKey={jp}>
+    <Nav.Link
+      className="text-decoration-none d-flex align-items-center"
+      style={{ all: "unset" }}
+      eventKey={jp}
+    >
+      <Button>
         {p.name}
         {saved && (
           <sup key="unsaved">
-            <i className="bi bi-asterisk text-secondary" title="Unsaved"></i>
+            <i
+              className="bi bi-asterisk"
+              style={{ fontSize: "0.5rem" }}
+              title="Unsaved"
+            ></i>
           </sup>
         )}
-        <button
-          className={`btn btn-sm border-0 py-0 px-1 ms-1 rounded-circle ${
+        <CloseButton
+          className={`ms-1 ${
             active ? "btn-outline-light" : "btn-outline-secondary"
           }`}
           onClick={(e) => {
@@ -111,9 +164,9 @@ export function FileTab(props) {
             }
           }}
         >
-          <i className="bi bi-x"></i>
-        </button>
-      </Nav.Link>
-    </Nav.Item>
+          <i className="bi bi-x text-black"></i>
+        </CloseButton>
+      </Button>
+    </Nav.Link>
   );
 }
diff --git a/src/components/navigation/Logotype.js b/src/components/navigation/Logotype.js
index 2170afe9..fe04846e 100644
--- a/src/components/navigation/Logotype.js
+++ b/src/components/navigation/Logotype.js
@@ -3,14 +3,16 @@ import React from "react";
 export function Logotype({ color = "white" }) {
   return (
     <svg
-    width="155"
-    height="39"
-    viewBox="0 0 155 23"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className="logotype"
-  >
-  <text x="23" y="21" font-size="35" fill="white" font-family="Courier New">build</text>
-</svg>
+      width="155"
+      height="39"
+      viewBox="0 0 155 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="logotype"
+    >
+      <text x="23" y="21" fontSize="35" fill="white" fontFamily="Courier New">
+        build
+      </text>
+    </svg>
   );
-}
\ No newline at end of file
+}
diff --git a/src/data/widgets.js b/src/data/widgets.js
index e2132842..7318a705 100644
--- a/src/data/widgets.js
+++ b/src/data/widgets.js
@@ -18,13 +18,12 @@ const TestnetWidgets = {
   notificationButton: "eugenethedream/widget/NotificationButton",
 };
 
-
 const MainnetWidgets = {
   image: "mob.near/widget/Image",
   default: "builddao.near/widget/home",
   viewSource: "mob.near/widget/WidgetSource",
-  widgetMetadataEditor: "mob.near/widget/WidgetMetadataEditor",
-  widgetMetadata: "mob.near/widget/WidgetMetadata",
+  widgetMetadataEditor: "builddao.near/widget/WidgetMetadataEditor",
+  widgetMetadata: "builddao.near/widget/WidgetMetadata",
   profileImage: "mob.near/widget/ProfileImage",
   notificationButton: "mob.near/widget/NotificationButton",
   profilePage: "near/widget/ProfilePage",
diff --git a/src/pages/EditorPage.js b/src/pages/EditorPage.js
index ba1f98e1..901629e0 100644
--- a/src/pages/EditorPage.js
+++ b/src/pages/EditorPage.js
@@ -23,6 +23,8 @@ import {
 } from "../components/Editor/FileTab";
 import { useHashRouterLegacy } from "../hooks/useHashRouterLegacy";
 import vmTypesDeclaration from "raw-loader!near-social-vm-types";
+import styled from "styled-components";
+import { useBosLoaderStore } from "../stores/bos-loader";
 
 const LsKey = "social.near:v01:";
 const EditorLayoutKey = LsKey + "editorLayout:";
@@ -31,6 +33,65 @@ const EditorUncommittedPreviewsKey = LsKey + "editorUncommittedPreviews:";
 
 const DefaultEditorCode = "return <div>Hello World</div>;";
 
+const NavPill = styled.button`
+  all: unset;
+
+  display: flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  border-radius: 8px;
+  background: var(--bg-2, #23242b);
+
+  color: var(--white-100, #fff);
+
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+
+const Container = styled.div`
+  background: #0b0c14;
+  color: #fff;
+
+  min-height: 100%;
+`;
+
+const CustomSearch = styled.div`
+  .form-control {
+    background: #23242b;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: #fff;
+  }
+  input::placeholder {
+    color: #c7c7c7;
+  }
+`;
+
+const Button = styled.button`
+  all: unset;
+
+  display: flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+
+  /* Other/Button_text */
+  font-family: Satoshi;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+
+  border-radius: 8px;
+  background: #51b6ff;
+  color: black;
+`;
+
 const Tab = {
   Editor: "Editor",
   Props: "Props",
@@ -47,6 +108,7 @@ export default function EditorPage(props) {
   useHashRouterLegacy();
   const { widgetSrc } = useParams();
   const history = useHistory();
+  const redirectMapStore = useBosLoaderStore();
   const setWidgetSrc = props.setWidgetSrc;
 
   const [loading, setLoading] = useState(false);
@@ -224,7 +286,7 @@ export default function EditorPage(props) {
           c
         );
         if (code) {
-          const name = widgetSrc.split("/").slice(2).join("/");
+          // const name = widgetSrc.split("/").slice(2).join("/");
           openFile(toPath(Filetype.Widget, widgetSrc), code);
         }
       };
@@ -353,7 +415,7 @@ export default function EditorPage(props) {
     [openFile, createFile]
   );
 
-  const layoutClass = layout === Layout.Split ? "col-lg-6" : "";
+  const layoutClass = layout === Layout.Split ? "w-50" : "";
 
   const onLayoutChange = useCallback(
     (e) => {
@@ -400,7 +462,17 @@ export default function EditorPage(props) {
 
   const commitButton = (
     <CommitButton
-      className="btn btn-primary"
+      style={{
+        all: "unset",
+        backgroundColor: "#51b6ff",
+        color: "black",
+        padding: "10px 20px",
+        borderRadius: 8,
+        fontFamily: "Satoshi",
+        fontWeight: "500",
+        fontSize: "0.875rem",
+      }}
+      className="ms-3"
       disabled={!widgetName}
       near={near}
       data={{
@@ -426,7 +498,7 @@ export default function EditorPage(props) {
   };
 
   return (
-    <div className="container-fluid mt-1">
+    <Container>
       <RenameModal
         key={`rename-modal-${jpath}`}
         show={showRenameModal}
@@ -444,11 +516,19 @@ export default function EditorPage(props) {
         }
         onHide={() => setShowOpenModal(false)}
       />
-      <div className="mb-3">
+      <div
+        className="d-flex flex-column-reverse gap-3 mt-2 mt-md-0 flex-md-row-reverse justify-content-between align-items-center"
+        style={{
+          padding: "0.75rem 3rem",
+          borderBottom:
+            "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))",
+        }}
+      >
         <Nav
-          variant="pills mb-1"
+          variant="pills"
           activeKey={jpath}
           onSelect={(key) => openFile(JSON.parse(key))}
+          className="gap-3"
         >
           {files?.map((p, idx) => {
             const jp = JSON.stringify(p);
@@ -472,24 +552,28 @@ export default function EditorPage(props) {
             );
           })}
           <Nav.Item>
-            <Nav.Link
-              className="text-decoration-none"
+            <NavPill
+              className="text-decoration-none d-flex align-items-center gap-2"
               onClick={() => setShowOpenModal(true)}
             >
-              <i className="bi bi-file-earmark-plus"></i> Add
-            </Nav.Link>
+              <i
+                className="bi bi-file-earmark-plus"
+                style={{ fontSize: "0.75rem" }}
+              ></i>{" "}
+              Add
+            </NavPill>
           </Nav.Item>
           <Nav.Item>
-            <Nav.Link
+            <NavPill
               className="text-decoration-none"
               onClick={() => closeCommitted(path, allSaved)}
             >
-              <i className="bi bi-x-lg"></i> Close unchanged
-            </Nav.Link>
+              <i className="bi bi-x"></i> Close unchanged
+            </NavPill>
           </Nav.Item>
         </Nav>
         {props.widgets.editorComponentSearch && (
-          <div>
+          <CustomSearch style={{ marginBottom: "-0.5rem" }}>
             <Widget
               src={props.widgets.editorComponentSearch}
               props={useMemo(
@@ -499,7 +583,7 @@ export default function EditorPage(props) {
                       placement="auto"
                       overlay={
                         <Tooltip>
-                          Open "{widgetName}" component in the editor
+                          {`Open "${widgetName}" component in the editor`}
                         </Tooltip>
                       }
                     >
@@ -519,11 +603,15 @@ export default function EditorPage(props) {
                 [loadFile]
               )}
             />
-          </div>
+          </CustomSearch>
         )}
       </div>
       <div className="d-flex align-content-start">
-        <div className="me-2">
+        <div
+          style={{
+            margin: "4rem 1rem",
+          }}
+        >
           <div
             className="btn-group-vertical"
             role="group"
@@ -531,7 +619,7 @@ export default function EditorPage(props) {
           >
             <input
               type="radio"
-              className="btn-check"
+              className="btn-check p-3"
               name="layout-radio"
               id="layout-tabs"
               autoComplete="off"
@@ -541,7 +629,18 @@ export default function EditorPage(props) {
               title={"Set layout to Tabs mode"}
             />
             <label className="btn btn-outline-secondary" htmlFor="layout-tabs">
-              <i className="bi bi-square" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M21 3C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21ZM20 5H4V19H20V5ZM18 7V9H6V7H18Z"
+                  fill="white"
+                />
+              </svg>
             </label>
 
             <input
@@ -556,17 +655,55 @@ export default function EditorPage(props) {
               onChange={onLayoutChange}
             />
             <label className="btn btn-outline-secondary" htmlFor="layout-split">
-              <i className="bi bi-layout-split" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M11 5H5V19H11V5ZM13 5V19H19V5H13ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3Z"
+                  fill="white"
+                />
+              </svg>
             </label>
           </div>
         </div>
         <div className="flex-grow-1">
-          <div className="row">
-            <div className={layoutClass}>
-              <ul className={`nav nav-tabs mb-2`}>
+          <div
+            // className="row"
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              flexDirection: `${layout === Layout.Split ? "row" : "column"}`,
+              borderLeft:
+                "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))",
+              height: "100%",
+            }}
+          >
+            <div
+              className={layoutClass}
+              style={{
+                paddingTop: "1rem",
+                borderRight:
+                  "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))",
+              }}
+            >
+              <ul
+                className={`nav nav-tabs`}
+                style={{ margin: "0 0 0 1.5rem", border: 0 }}
+              >
                 <li className="nav-item">
                   <button
                     className={`nav-link ${tab === Tab.Editor ? "active" : ""}`}
+                    style={{
+                      background: `${
+                        tab === Tab.Editor ? "#23242b" : "#0b0c14"
+                      }`,
+                      color: "white",
+                      border: "none",
+                    }}
                     aria-current="page"
                     onClick={() => setTab(Tab.Editor)}
                   >
@@ -576,6 +713,13 @@ export default function EditorPage(props) {
                 <li className="nav-item">
                   <button
                     className={`nav-link ${tab === Tab.Props ? "active" : ""}`}
+                    style={{
+                      background: `${
+                        tab === Tab.Props ? "#23242b" : "#0b0c14"
+                      }`,
+                      color: "white",
+                      border: "none",
+                    }}
                     aria-current="page"
                     onClick={() => setTab(Tab.Props)}
                   >
@@ -585,6 +729,13 @@ export default function EditorPage(props) {
                 {props.widgets.widgetMetadataEditor && (
                   <li className="nav-item">
                     <button
+                      style={{
+                        background: `${
+                          tab === Tab.Metadata ? "#23242b" : "#0b0c14"
+                        }`,
+                        color: "white",
+                        border: "none",
+                      }}
                       className={`nav-link ${
                         tab === Tab.Metadata ? "active" : ""
                       }`}
@@ -598,6 +749,13 @@ export default function EditorPage(props) {
                 {layout === Layout.Tabs && (
                   <li className="nav-item">
                     <button
+                      style={{
+                        background: `${
+                          tab === Tab.Widget ? "#23242b" : "#0b0c14"
+                        }`,
+                        color: "white",
+                        border: "none",
+                      }}
                       className={`nav-link ${
                         tab === Tab.Widget ? "active" : ""
                       }`}
@@ -614,8 +772,9 @@ export default function EditorPage(props) {
               </ul>
 
               <div className={`${tab === Tab.Editor ? "" : "visually-hidden"}`}>
-                <div className="form-control mb-3" style={{ height: "70vh" }}>
+                <div className="mb-3" style={{ height: "70vh" }}>
                   <Editor
+                    theme="vs-dark"
                     value={code}
                     path={widgetPath}
                     defaultLanguage="javascript"
@@ -625,9 +784,9 @@ export default function EditorPage(props) {
                     }}
                   />
                 </div>
-                <div className="mb-3 d-flex gap-2 flex-wrap">
-                  <button
-                    className="btn btn-success"
+                <div className="ms-4 mb-3 d-flex gap-3 flex-wrap">
+                  <Button
+                    // className="btn btn-success"
                     onClick={() => {
                       renderPreview(code);
                       if (layout === Layout.Tabs) {
@@ -635,20 +794,25 @@ export default function EditorPage(props) {
                       }
                     }}
                   >
-                    Render preview
-                  </button>
+                    Render Preview
+                  </Button>
                   {!path?.unnamed && commitButton}
-                  <button
-                    className={`btn ${
-                      path?.unnamed ? "btn-primary" : "btn-secondary"
-                    }`}
+                  <Button
+                    style={{
+                      color: "white",
+                      background: "#0b0c14",
+                      border: "1px solid white",
+                    }}
+                    // className={`btn ${
+                    //   path?.unnamed ? "btn-primary" : "btn-secondary"
+                    // }`}
                     onClick={() => {
                       setShowRenameModal(true);
                     }}
                   >
                     Rename {path?.type}
-                  </button>
-                  {path && accountId && (
+                  </Button>
+                  {/* {path && accountId && (
                     <a
                       key="open-comp"
                       className="btn btn-outline-primary"
@@ -658,8 +822,8 @@ export default function EditorPage(props) {
                     >
                       Open Component in a new tab
                     </a>
-                  )}
-                  <button
+                  )} */}
+                  {/* <button
                     type="button"
                     onClick={() => {
                       const v = !uncommittedPreviews;
@@ -676,12 +840,13 @@ export default function EditorPage(props) {
                   >
                     <i className="bi bi-asterisk"></i> Multi-file previews (
                     {uncommittedPreviews ? "ON" : "OFF"})
-                  </button>
+                  </button> */}
                 </div>
               </div>
               <div className={`${tab === Tab.Props ? "" : "visually-hidden"}`}>
-                <div className="form-control" style={{ height: "70vh" }}>
+                <div className="mb-3" style={{ height: "70vh" }}>
                   <Editor
+                    theme="vs-dark"
                     value={widgetProps}
                     defaultLanguage="json"
                     onChange={(props) => setWidgetProps(props)}
@@ -702,10 +867,20 @@ export default function EditorPage(props) {
                     : "visually-hidden"
                 }`}
               >
-                <div className="mb-3">
+                <div
+                  className="mb-3"
+                  style={{
+                    background: "#23242b",
+                    padding: 24,
+                    color: "#000",
+                  }}
+                >
                   <Widget
                     src={props.widgets.widgetMetadataEditor}
                     key={`metadata-editor-${jpath}`}
+                    config={{
+                      redirectMap: redirectMapStore.redirectMap,
+                    }}
                     props={useMemo(
                       () => ({
                         widgetPath,
@@ -726,7 +901,7 @@ export default function EditorPage(props) {
                   : "visually-hidden"
               }`}
             >
-              <div className="container">
+              <div className="container mt-4">
                 <div className="row">
                   <div className="d-inline-block position-relative overflow-hidden">
                     {renderCode ? (
@@ -750,10 +925,13 @@ export default function EditorPage(props) {
             >
               <div className="container">
                 <div className="row">
-                  <div className="d-inline-block position-relative overflow-hidden">
+                  <div className="d-inline-block position-relative overflow-hidden mt-4">
                     <Widget
                       key={`metadata-${jpath}`}
                       src={props.widgets.widgetMetadata}
+                      config={{
+                        redirectMap: redirectMapStore.redirectMap,
+                      }}
                       props={useMemo(
                         () => ({ metadata, accountId, widgetName }),
                         [metadata, accountId, widgetName]
@@ -766,6 +944,6 @@ export default function EditorPage(props) {
           </div>
         </div>
       </div>
-    </div>
+    </Container>
   );
 }
diff --git a/src/pages/JoinPage.js b/src/pages/JoinPage.js
new file mode 100644
index 00000000..01943c60
--- /dev/null
+++ b/src/pages/JoinPage.js
@@ -0,0 +1,33 @@
+import React from "react";
+import { UserDropdown } from "../components/navigation/desktop/UserDropdown";
+import { Widget } from "near-social-vm";
+import { useBosLoaderStore } from "../stores/bos-loader";
+
+export default function JoinPage(props) {
+  const redirectMapStore = useBosLoaderStore();
+
+  const CurrentView = props.signedIn
+    ? "builddao.near/widget/create-something"
+    : "builddao.near/widget/login";
+  return (
+    <div className="h-100">
+      {props.signedIn && (
+        <div
+          className="position-absolute z-2"
+          style={{ top: "3rem", right: "3rem" }}
+        >
+          <UserDropdown {...props} />
+        </div>
+      )}
+      <Widget
+        src={CurrentView}
+        props={{
+          ...props,
+        }}
+        config={{
+          redirectMap: redirectMapStore.redirectMap,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/ProposePage.js b/src/pages/ProposePage.js
new file mode 100644
index 00000000..58a1dbc9
--- /dev/null
+++ b/src/pages/ProposePage.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { Widget } from "near-social-vm";
+import { useBosLoaderStore } from "../stores/bos-loader";
+
+export default function ProposePage(props) {
+  const redirectMapStore = useBosLoaderStore();
+  return (
+    <div className="h-100">
+      <Widget
+        src="builddao.near/widget/propose"
+        props={{
+          ...props,
+        }}
+        config={{
+          redirectMap: redirectMapStore.redirectMap,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/ViewPage.js b/src/pages/ViewPage.js
index 2d234d5a..d94be60e 100644
--- a/src/pages/ViewPage.js
+++ b/src/pages/ViewPage.js
@@ -40,25 +40,15 @@ export default function ViewPage(props) {
   }, [src, query, setWidgetSrc, viewSourceWidget]);
 
   return showMenu ? (
-    <div className="container-xl">
-      <div className="row">
-        <div
-          className="d-inline-block position-relative overflow-hidden"
-          style={{
-            "--body-top-padding": "24px",
-            paddingTop: "var(--body-top-padding)",
-          }}
-        >
-          <Widget
-            key={src}
-            src={src}
-            props={widgetProps}
-            config={{
-              redirectMap: redirectMapStore.redirectMap,
-            }}
-          />
-        </div>
-      </div>
+    <div>
+      <Widget
+        key={src}
+        src={src}
+        props={widgetProps}
+        config={{
+          redirectMap: redirectMapStore.redirectMap,
+        }}
+      />{" "}
     </div>
   ) : (
     <Widget