diff --git a/src/DevHub/entity/community/Activity.jsx b/src/DevHub/entity/community/Activity.jsx
new file mode 100644
index 000000000..4c2e932b0
--- /dev/null
+++ b/src/DevHub/entity/community/Activity.jsx
@@ -0,0 +1,56 @@
+const {
+  nearDevGovGigsWidgetsAccountId,
+  nearDevGovGigsContractAccountId,
+  handle,
+} = props;
+
+const { getCommunity } = VM.require(
+  `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.modules.contract-sdk`
+);
+
+const communityData = getCommunity(nearDevGovGigsContractAccountId, { handle });
+
+if (communityData === null) {
+  return <div>Loading...</div>;
+}
+
+return (
+  <div class="row">
+    <div class="col-md-9">
+      <div class="d-flex align-items-center justify-content-between mb-2">
+        <small class="text-muted">
+          <span>Required tags:</span>
+          <Widget
+            src={`${nearDevGovGigsWidgetsAccountId}/widget/gigs-board.components.atom.tag`}
+            props={{
+              linkTo: "Feed",
+              ...communityData,
+            }}
+          />
+        </small>
+        <Widget
+          src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.components.molecule.PostControls`}
+          props={{ labels: communityData.tag  }}
+        />
+      </div>
+      <Widget
+        src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.entity.post.List`}
+        props={{
+          nearDevGovGigsContractAccountId,
+          nearDevGovGigsWidgetsAccountId,
+          tag: communityData.tag,
+        }}
+      />
+    </div>
+    <div class="col-md-3 container-fluid">
+      <Widget
+        src={`${nearDevGovGigsWidgetsAccountId}/widget/gigs-board.entity.community.sidebar`}
+        props={{
+          nearDevGovGigsContractAccountId,
+          nearDevGovGigsWidgetsAccountId,
+          handle: communityData.handle,
+        }}
+      />
+    </div>
+  </div>
+);
diff --git a/src/DevHub/entity/community/BrandingConfigurator.jsx b/src/DevHub/entity/community/BrandingConfigurator.jsx
index e35970822..1462dc382 100644
--- a/src/DevHub/entity/community/BrandingConfigurator.jsx
+++ b/src/DevHub/entity/community/BrandingConfigurator.jsx
@@ -76,21 +76,34 @@ const cidToURL = (cid) => `https://ipfs.near.social/ipfs/${cid}`;
 
 const { data, onSubmit, hasConfigurePermissions, link } = props;
 
-State.init({
-  banner: { cid: data.banner_url.split("/").at(-1) },
-  logo: { cid: data.logo_url.split("/").at(-1) },
-})
-
-// const [banner, setBanner] = useState(data.banner_url.split("/").at(-1));
-// const [logo, setLogo] = useState(data.logo_url.split("/").at(-1));
-
-useEffect(() => {
-  // console.log(state.banner);
-  onSubmit({
-    banner_url: cidToURL(state.banner.cid),
-    logo_url: cidToURL(state.logo.cid),
+const initialInput = { banner: null, logo: null };
+
+  const initialValues = {
+    banner: { cid: data.banner_url.split("/").at(-1) },
+    logo: { cid: data.logo_url.split("/").at(-1) },
+  };
+
+  State.init({
+    input: initialInput,
   });
-}, [state.logo, state.banner]);
+
+  const hasUnsubmittedChanges = Object.values(state.input).some(
+    (value) => value !== null
+  );
+
+  const isSynced = state.input === initialValues;
+
+  if (hasUnsubmittedChanges && !isSynced) {
+    onSubmit({
+      banner_url: cidToURL(state.input.banner?.cid ?? initialValues.banner.cid),
+      logo_url: cidToURL(state.input.logo?.cid ?? initialValues.logo.cid),
+    });
+
+    State.update((lastKnownState) => ({
+      ...lastKnownState,
+      input: initialInput,
+    }));
+  }
 
 return (
   <div style={{ height: 280 }}>
@@ -98,10 +111,12 @@ return (
       alt="Community banner preview"
       className="card-img-top d-flex flex-column justify-content-end align-items-end p-4"
       style={{
-        background: `center / cover no-repeat url(${cidToURL(state.banner.cid)})`,
+        background: `center / cover no-repeat url(${cidToURL(
+          initialValues.banner.cid
+        )})`,
       }}
     >
-      {hasConfigurePermissions && <IpfsImageUpload image={state.banner.cid} />}
+      {hasConfigurePermissions && <IpfsImageUpload image={state.input.banner} />}
     </Banner>
     <Logo
       alt="Community logo preview"
@@ -114,10 +129,10 @@ return (
         width: 128,
         height: 128,
 
-        background: `center / cover no-repeat url(${cidToURL(state.logo.cid)})`,
+        background: `center / cover no-repeat url(${cidToURL(initialValues.logo.cid)})`,
       }}
     >
-      {hasConfigurePermissions && <IpfsImageUpload image={state.logo.cid} />}
+      {hasConfigurePermissions && <IpfsImageUpload image={state.input.logo} />}
     </Logo>
 
     <div
diff --git a/src/DevHub/entity/community/Teams.jsx b/src/DevHub/entity/community/Teams.jsx
new file mode 100644
index 000000000..687381dae
--- /dev/null
+++ b/src/DevHub/entity/community/Teams.jsx
@@ -0,0 +1,67 @@
+const {
+  nearDevGovGigsWidgetsAccountId,
+  nearDevGovGigsContractAccountId,
+  handle,
+} = props;
+
+const { getCommunity } = VM.require(
+  `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.modules.contract-sdk`
+);
+
+const communityData = getCommunity(nearDevGovGigsContractAccountId, { handle });
+
+if (communityData === null) {
+  return <div>Loading...</div>;
+}
+
+const UserList = ({ name, users }) => (
+  <div>
+    {(users ?? []).map((user, i) => (
+      <div className={`row ${i < users.length - 1 ? "mb-3" : ""}`}>
+        <div class="col-3">
+          <b>{name + " #" + (i + 1)}</b>
+        </div>
+
+        <div class="col-9">
+          <span
+            key={user}
+            className="d-inline-flex"
+            style={{ fontWeight: 500 }}
+          >
+            <Widget
+              src="mob.near/widget/ProfileLine"
+              props={{ accountId: user, hideAccountId: true, tooltip: true }}
+            />
+          </span>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+return (
+  <div
+    className="d-flex flex-column align-items-center gap-4 w-100"
+  >
+    <Widget
+      src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.components.molecule.Tile`}
+      props={{
+        className: "p-3 w-100",
+        style: { "maxWidth": 960 },
+        children: (
+          <div>
+            <div
+              className="d-flex align-items-center justify-content-between w-100 pb-3"
+              style={{ minHeight: 30 }}
+            >
+              <h5 className="h5 d-inline-flex gap-2 m-0">
+                <span>Admins</span>
+              </h5>
+            </div>
+            <UserList name="Admin" users={communityData.admins} />
+          </div>
+        ),
+      }}
+    />
+  </div>
+);
diff --git a/src/DevHub/modules/Struct.jsx b/src/DevHub/modules/utils.jsx
similarity index 80%
rename from src/DevHub/modules/Struct.jsx
rename to src/DevHub/modules/utils.jsx
index e53a4b9cd..0dc0879dd 100644
--- a/src/DevHub/modules/Struct.jsx
+++ b/src/DevHub/modules/utils.jsx
@@ -48,4 +48,15 @@ const Struct = {
     input !== null && typeof input === "object" && !Array.isArray(input),
 };
 
-return { Struct };
+function href({ gateway, widgetSrc, params }) {
+  params = Object.entries(params)
+    .filter(([_key, nullable]) => (nullable ?? null) !== null)
+    .map(([key, value]) => `${key}=${value}`)
+    .join("&");
+
+  return `${gateway ? `https://${gateway}` : ""}/${widgetSrc}/${
+    params ? `?${params}` : ""
+  }`;
+}
+
+return { href, Struct };
diff --git a/src/DevHub/pages/Communities.jsx b/src/DevHub/pages/Communities.jsx
index 86831cadb..cf8fd8589 100644
--- a/src/DevHub/pages/Communities.jsx
+++ b/src/DevHub/pages/Communities.jsx
@@ -1,31 +1,28 @@
-const {
-  nearDevGovGigsWidgetsAccountId,
-  nearDevGovGigsContractAccountId,
-  createCommunity,
-} = props;
+const { nearDevGovGigsWidgetsAccountId, nearDevGovGigsContractAccountId } =
+  props;
 
-const { getAllCommunitiesMetadata } = VM.require(
+const { getAllCommunitiesMetadata, createCommunity } = VM.require(
   `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.modules.contract-sdk`
 );
 
-if (!getAllCommunitiesMetadata) {
+if (!getAllCommunitiesMetadata || !createCommunity) {
   return <p>Loading modules...</p>;
 }
 
 const { Struct } = VM.require(
-  `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.modules.Struct`
+  `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.modules.utils`
 );
 
 if (!Struct) {
   return <p>Loading modules...</p>;
 }
 
-const CommunityInputsDefaults = {
+State.init({
   handle: "",
   name: "",
   tag: "",
   description: "",
-};
+});
 
 const CommunityInputsPartialSchema = {
   handle: {
@@ -114,20 +111,31 @@ const [showSpawner, setShowSpawner] = useState(false);
 
 const CommunitySpawner = () => (
   <Widget
-    src={`${nearDevGovGigsWidgetsAccountId}/widget/gigs-board.components.organism.configurator`}
+    src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.components.molecule.Tile`}
     props={{
-      heading: "Community information",
-      externalState: CommunityInputsDefaults,
-      fullWidth: true,
-      isActive: true,
-      isHidden,
-      isUnlocked: true,
-      isValid: communityInputsValidator,
-      onSubmit: onCommunitySubmit,
-      schema: CommunityInputsPartialSchema,
-      submitIcon: { type: "bootstrap_icon", variant: "bi-rocket-takeoff-fill" },
-      submitLabel: "Launch",
-      onCancel: () => setShowSpawner(false),
+      className: "p-3",
+      children: (
+        <Widget
+          src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.components.organism.Configurator`}
+          props={{
+            heading: "Community information",
+            externalState: CommunityInputsDefaults,
+            fullWidth: true,
+            isActive: true,
+            isUnlocked: true,
+            isValid: communityInputsValidator,
+            onSubmit: onCommunitySubmit,
+            schema: CommunityInputsPartialSchema,
+            submitIcon: {
+              type: "bootstrap_icon",
+              variant: "bi-rocket-takeoff-fill",
+            },
+            submitLabel: "Launch",
+            onCancel: () => setShowSpawner(false),
+            nearDevGovGigsWidgetsAccountId,
+          }}
+        />
+      ),
     }}
   />
 );
@@ -248,19 +256,20 @@ return (
           Discover NEAR developer communities
         </p>
       </div>
-
-      <div className="d-flex flex-column justify-content-center">
-        <Widget
-          src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.components.molecule.Button`}
-          props={{
-            icon: { type: "bootstrap_icon", variant: "bi-people-fill" },
-            onClick: () => setShowSpawner(!showSpawner),
-            className: "btn btn-primary",
-            label: "Create Community",
-            nearDevGovGigsWidgetsAccountId,
-          }}
-        />
-      </div>
+      {context.accountId && (
+        <div className="d-flex flex-column justify-content-center">
+          <Widget
+            src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.components.molecule.Button`}
+            props={{
+              icon: { type: "bootstrap_icon", variant: "bi-people-fill" },
+              onClick: () => setShowSpawner(!showSpawner),
+              className: "btn btn-primary",
+              label: "Create Community",
+              nearDevGovGigsWidgetsAccountId,
+            }}
+          />
+        </div>
+      )}
     </div>
     {/* // TODO: Align centers */}
     <div className="d-flex flex-wrap align-content-start gap-4 p-4 w-100 h-100">
diff --git a/src/DevHub/pages/community/configuration.jsx b/src/DevHub/pages/community/configuration.jsx
index 10cc1f94b..1621d4c04 100644
--- a/src/DevHub/pages/community/configuration.jsx
+++ b/src/DevHub/pages/community/configuration.jsx
@@ -1,15 +1,10 @@
-// Pulls community data
-// Cycles through the addons
-// Creates a tile
-// Supplies the onSubmit and data
-
 const {
   nearDevGovGigsWidgetsAccountId,
   permissions,
   handle,
   community,
-  communityAddonConfigs,
-  availableAddons,
+  // communityAddonConfigs, Commenting out to reduce scope on root merge
+  // availableAddons,
   deleteCommunity,
   updateCommunity,
 } = props;
@@ -19,6 +14,7 @@ const [selectedAddon, setSelectedAddon] = useState(null);
 const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
 const sectionSubmit = (sectionData) => {
+  console.log(sectionData);
   const updatedCommunityData = {
     ...Object.entries(sectionData).reduce(
       (update, [propertyKey, propertyValue]) => ({
@@ -79,21 +75,6 @@ function CommunityAddonConfigurator({ addonConfig }) {
   );
 }
 
-function handleCreateAddon(addonId, value) {
-  console.log(value);
-  // const uuid = UUID.generate("xxxxxxx");
-  // addCommunityAddon({
-  //   handle,
-  //   config: {
-  //     name: "Wiki",
-  //     config_id: uuid,
-  //     addon_id: addonId,
-  //     parameters: JSON.stringify(value),
-  //     enabled: true,
-  //   },
-  // });
-}
-
 return (
   <div
     className="d-flex flex-column align-items-center gap-4 w-100 p-4"
@@ -199,7 +180,7 @@ return (
     {(communityAddonConfigs || []).map((addonConfig) => (
       <CommunityAddonConfigurator addonConfig={addonConfig} />
     ))}
-    {hasConfigurePermissions && (
+    {/* {hasConfigurePermissions && (
       <Widget
         src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.entity.community.NewAddon`}
         props={{
@@ -208,7 +189,7 @@ return (
           nearDevGovGigsWidgetsAccountId,
         }}
       />
-    )}
+    )} */}
     {hasDeletePermissions && (
       <div
         className="d-flex justify-content-center gap-4 p-4 w-100"
@@ -219,7 +200,7 @@ return (
           props={{
             classNames: { root: "btn-lg btn-outline-danger border-none" },
             label: "Delete community",
-            onClick: () => deleteCommunity({ handle }),
+            onClick: () => deleteCommunity(nearDevGovGigsContractAccountId, { handle }),
           }}
         />
       </div>
diff --git a/src/DevHub/pages/community/index.jsx b/src/DevHub/pages/community/index.jsx
index 83107f09b..bb02e9b41 100644
--- a/src/DevHub/pages/community/index.jsx
+++ b/src/DevHub/pages/community/index.jsx
@@ -37,6 +37,7 @@ const NavUnderline = styled.ul`
 
 const {
   nearDevGovGigsWidgetsAccountId,
+  nearDevGovGigsContractAccountId,
   handle,
   tab,
   permissions,
@@ -45,6 +46,14 @@ const {
   availableAddons,
 } = props;
 
+const { href } = VM.require(
+  `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.modules.utils`
+);
+
+if (!href) {
+  return <></>;
+}
+
 if (!tab) {
   tab = "Activity";
 }
@@ -53,32 +62,50 @@ const [isLinkCopied, setLinkCopied] = useState(false);
 
 const tabs = [
   {
-    iconClass: "bi bi-house-door",
-    viewer: "devgovgigs.near/widget/gigs-board.pages.community.activity",
     title: "Activity",
+    iconClass: "bi bi-house-door",
+    view: `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.entity.community.Activity`,
+    params: {
+      handle,
+    },
   },
-  ...(communityAddonConfigs || []).map((addon) => ({
-    title: addon.name,
-    route: availableAddons.find((it) => it.id === addon.config_id).viewer,
-    viewer: availableAddons.find((it) => it.id === addon.config_id).viewer,
-    iconClass: addon.icon,
+  {
+    title: "Teams",
+    iconClass: "bi bi-people-fill",
+    view: `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.entity.community.Teams`,
     params: {
-      viewer: availableAddons.find((it) => it.id === addon.config_id).viewer,
-      data: addon.parameters || "", // @elliotBraem not sure which will work better I guess this is needed for the wiki data but we can also add another data object inside the addon's parameters
-      ...JSON.parse(addon.parameters), // this seems to work witht the wiki for now
+      handle,
     },
-  })),
+  },
+
+  // Commenting the below out to reduce scope
+
+  // ...(communityAddonConfigs || []).map((addon) => ({
+  //   title: addon.name,
+  //   route: availableAddons.find((it) => it.id === addon.config_id).viewer,
+  //   viewer: availableAddons.find((it) => it.id === addon.config_id).viewer,
+  //   iconClass: addon.icon,
+  //   params: {
+  //     viewer: availableAddons.find((it) => it.id === addon.config_id).viewer,
+  //     data: addon.parameters || "", // @elliotBraem not sure which will work better I guess this is needed for the wiki data but we can also add another data object inside the addon's parameters
+  //     ...JSON.parse(addon.parameters), // this seems to work witht the wiki for now
+  //   },
+  // })),
 ];
 
 const onShareClick = () =>
   clipboard
     .writeText(
-      `https://near.org/${nearDevGovGigsWidgetsAccountId}/widget/DevHub.App?page=community?handle=${handle}`
-    ) // TODO: how should this be determined?
+      href({
+        gateway: "near.org",
+        widgetSrc: `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.App`,
+        params: { page: "community", handle },
+      })
+    )
     .then(setLinkCopied(true));
-// TODO;
-let currentTab = tabs.find((tab) => tab.title == props.tab);
-console.log(currentTab);
+
+let currentTab = tabs.find((it) => it.title === tab);
+
 return (
   <div className="d-flex flex-column gap-3 bg-white w-100">
     <Banner
@@ -106,27 +133,27 @@ return (
         <div className="d-flex flex-column ps-3 pt-3 pb-2">
           <span className="h1 text-nowrap">{community.name}</span>
           <span className="text-secondary">{community.description}</span>
-          <span className="text-secondary">{props.tab}</span>
         </div>
       </div>
 
       <div className="d-flex align-items-end gap-3 ms-auto">
         {permissions.can_configure && (
-          <Widget
-            src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.components.molecule.Button`}
-            props={{
-              classNames: { root: "btn-outline-light text-dark" },
-              // Need to calculate href
-              href: `http://localhost:3000/${nearDevGovGigsWidgetsAccountId}/widget/DevHub.App?page=community.configuration&handle=${handle}`,
-              icon: {
-                type: "bootstrap_icon",
-                variant: "bi-gear-wide-connected",
-              },
-              label: "Configure community",
-              type: "link",
-              nearDevGovGigsWidgetsAccountId,
-            }}
-          />
+          <Link
+            to={`/${nearDevGovGigsWidgetsAccountId}/widget/DevHub.App?page=community.configuration&handle=${handle}`}
+          >
+            <Widget
+              src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.components.molecule.Button`}
+              props={{
+                classNames: { root: "btn-outline-light text-dark" },
+                icon: {
+                  type: "bootstrap_icon",
+                  variant: "bi-gear-wide-connected",
+                },
+                label: "Configure community",
+                nearDevGovGigsWidgetsAccountId,
+              }}
+            />
+          </Link>
         )}
 
         <Widget
@@ -149,32 +176,38 @@ return (
       </div>
     </div>
     <NavUnderline className="nav">
-      {tabs.map(({ defaultActive, params, route, title }) =>
-        title ? (
-          <li className="nav-item" key={title}>
-            <Link
-              to={`/${nearDevGovGigsWidgetsAccountId}/widget/DevHub.App?page=community&handle=${handle}&tab=${title}`}
-              aria-current={defaultActive && "page"}
-              className={[
-                "d-inline-flex gap-2",
-                tab === title ? "nav-link active" : "nav-link",
-              ].join(" ")}
-              // href={href(route, { handle, ...(params ?? {}) })}
-            >
-              <span>{title}</span>
-            </Link>
-          </li>
-        ) : null
+      {tabs.map(
+        ({ title }) =>
+          title && (
+            <li className="nav-item" key={title}>
+              <Link
+                to={href({
+                  widgetSrc: `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.App`,
+                  params: { page: "community", handle, tab: title },
+                })}
+                aria-current={tab === title && "page"}
+                className={[
+                  "d-inline-flex gap-2",
+                  tab === title ? "nav-link active" : "nav-link",
+                ].join(" ")}
+              >
+                <span>{title}</span>
+              </Link>
+            </li>
+          )
       )}
     </NavUnderline>
-    {/* TODO: remove */}
-    <div>{tabs.find((tab) => tab.viewer == props.tab)[0]}</div>
-    <div>{tabs.map((tab) => tab.viewer).join(",")}</div>
-    <Widget
-      src={currentTab.viewer}
-      props={{
-        tab: currentTab,
-      }}
-    />
+    <div className="d-flex w-100 h-100">
+      {currentTab && (
+        <Widget
+          src={currentTab.view}
+          props={{
+            ...currentTab.params,
+            nearDevGovGigsContractAccountId, // TEMP
+            nearDevGovGigsWidgetsAccountId, // TEMP
+          }}
+        />
+      )}
+    </div>
   </div>
 );