diff --git a/src/devhub/components/molecule/BadgeDetails.jsx b/src/devhub/components/molecule/BadgeDetails.jsx
new file mode 100644
index 000000000..c3a8c2d27
--- /dev/null
+++ b/src/devhub/components/molecule/BadgeDetails.jsx
@@ -0,0 +1,78 @@
+const nearDevGovBadgesContractId = "neardevgov.near";
+
+let badgeId, ownerAccountId;
+if (props.tokenId) {
+  let [_badgeId, _ownerAccountId] = props.tokenId.split(":", 2);
+  badgeId = _badgeId;
+  ownerAccountId = _ownerAccountId;
+} else {
+  badgeId = props.badgeId;
+}
+
+if (!badgeId) {
+  return (
+    <>
+      Please, provide <pre>badgeId</pre> or <pre>tokenId</pre> to the
+      DevGovBadgeDetails component
+    </>
+  );
+}
+
+let badgeMetadata =
+  props.badgeMetadata ??
+  Near.view(nearDevGovBadgesContractId, "get_badge", {
+    badge_id: badgeId,
+  }).badge_metadata;
+
+if (!badgeMetadata) {
+  return <>Loading...</>;
+}
+
+return (
+  <>
+    <div className="bg-white shadow rounded overflow-hidden">
+      <div className="px-4 pt-0 pb-5 bg-dark position-relative">
+        <div
+          className="profile-picture d-inline-block"
+          style={{ transform: "translateY(7rem)" }}
+        >
+          <Widget
+            src="${REPL_MOB}/widget/NftImage"
+            props={{
+              style: { width: "10em", height: "10em" },
+              className: "rounded-circle w-100 h-100 img-thumbnail d-block",
+              nft: {
+                tokenMetadata: badgeMetadata,
+                contractId: nearDevGovBadgesContractId,
+              },
+              alt: badgeMetadata.title,
+            }}
+          />
+        </div>
+      </div>
+      <div className="bg-light px-4 pb-4">
+        <div className="d-md-flex justify-content-between pt-3 mb-2">
+          <div style={{ paddingTop: "3rem" }}>
+            <div className="me-2 d-sm-flex gap-1 flex-row align-items-center">
+              <div className="me-2 position-relative">
+                <h4 className="mt-0 mb-0 text-truncate">
+                  {badgeMetadata.title}
+                </h4>
+              </div>
+            </div>
+            <div className="d-flex flex-row">
+              <div className="me-4">
+                <span className="text-muted">Awarded to</span>
+                <span className="fw-bolder">{badgeMetadata.copies}</span>
+                <span className="text-muted">developers</span>
+              </div>
+            </div>
+            <div>
+              <Markdown text={badgeMetadata.description} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </>
+);
diff --git a/src/devhub/components/molecule/MarkdownViewer.jsx b/src/devhub/components/molecule/MarkdownViewer.jsx
index e53b6b37a..ace6662f9 100644
--- a/src/devhub/components/molecule/MarkdownViewer.jsx
+++ b/src/devhub/components/molecule/MarkdownViewer.jsx
@@ -43,7 +43,7 @@ const renderMention =
   ((accountId) => (
     <span key={accountId} className="d-inline-flex" style={{ fontWeight: 500 }}>
       <Widget
-        src="neardevgov.near/widget/ProfileLine"
+        src="${REPL_DEVHUB}/widget/devhub.components.molecule.ProfileLine"
         props={{
           accountId: accountId.toLowerCase(),
           hideAccountId: true,
diff --git a/src/devhub/components/molecule/ProfileCard.jsx b/src/devhub/components/molecule/ProfileCard.jsx
index 6c9462f27..dbea03d66 100644
--- a/src/devhub/components/molecule/ProfileCard.jsx
+++ b/src/devhub/components/molecule/ProfileCard.jsx
@@ -96,7 +96,7 @@ const ProfileCard = (props) => {
     <div className="d-flex flex-row align-items-center">
       {inner}
       <Widget
-        src="neardevgov.near/widget/BadgesList"
+        src="${REPL_DEVHUB}/widget/devhub.components.molecule.BadgesList"
         props={{
           accountId,
           mode: "compact",
diff --git a/src/devhub/components/molecule/ProfileLine.jsx b/src/devhub/components/molecule/ProfileLine.jsx
new file mode 100644
index 000000000..c567724bf
--- /dev/null
+++ b/src/devhub/components/molecule/ProfileLine.jsx
@@ -0,0 +1,21 @@
+const accountId = props.accountId ?? context.accountId;
+
+return (
+  <span>
+    <Widget
+      src="${REPL_MOB}/widget/ProfileLine"
+      props={{
+        ...props,
+        accountId,
+        link: `#/${REPL_MOB}/widget/ProfilePage?accountId=${accountId}`,
+      }}
+    />
+    <Widget
+      src="${REPL_DEVHUB}/widget/devhub.components.molecule.BadgesList"
+      props={{
+        accountId,
+        mode: "compact",
+      }}
+    />
+  </span>
+);
diff --git a/src/devhub/entity/community/Teams.jsx b/src/devhub/entity/community/Teams.jsx
index 7d099569e..e5bf76376 100644
--- a/src/devhub/entity/community/Teams.jsx
+++ b/src/devhub/entity/community/Teams.jsx
@@ -33,7 +33,7 @@ const UserList = ({ name, users }) => (
             style={{ fontWeight: 500 }}
           >
             <Widget
-              src="neardevgov.near/widget/ProfileLine"
+              src="${REPL_DEVHUB}/widget/devhub.components.molecule.ProfileLine"
               props={{ accountId: user, hideAccountId: true, tooltip: true }}
             />
           </span>
diff --git a/src/devhub/entity/post/Post.jsx b/src/devhub/entity/post/Post.jsx
index dbddc77bc..700c26507 100644
--- a/src/devhub/entity/post/Post.jsx
+++ b/src/devhub/entity/post/Post.jsx
@@ -648,7 +648,7 @@ const postExtra =
       <h6 class="card-subtitle mb-2 text-muted">
         Supervisor:{" "}
         <Widget
-          src={"neardevgov.near/widget/ProfileLine"}
+          src={"${REPL_DEVHUB}/widget/devhub.components.molecule.ProfileLine"}
           props={{ accountId: snapshot.supervisor }}
         />
       </h6>
@@ -721,6 +721,12 @@ const clampedContent = needClamp
   ? contentArray.slice(0, 3).join("\n")
   : snapshot.description;
 
+const SeeMore = styled.a`
+  cursor: pointer;
+  color: #00b774 !important;
+  font-weight: bold;
+`;
+
 // Should make sure the posts under the currently top viewed post are limited in size.
 const descriptionArea = isUnderPost ? (
   <LimitedMarkdown className="overflow-auto" key="description-area">
@@ -749,13 +755,9 @@ const descriptionArea = isUnderPost ? (
     </div>
     {state.clamp ? (
       <div class="d-flex justify-content-start">
-        <a
-          style={{ cursor: "pointer", color: "#00ec97" }}
-          class="btn-link text-dark fw-bold text-decoration-none"
-          onClick={() => State.update({ clamp: false })}
-        >
+        <SeeMore onClick={() => State.update({ clamp: false })}>
           See more
-        </a>
+        </SeeMore>
       </div>
     ) : (
       <></>
diff --git a/src/devhub/page/admin/moderatorsTab.jsx b/src/devhub/page/admin/moderatorsTab.jsx
index 5c83dce84..c98534efc 100644
--- a/src/devhub/page/admin/moderatorsTab.jsx
+++ b/src/devhub/page/admin/moderatorsTab.jsx
@@ -108,7 +108,7 @@ return (
                 moderators.map((child) => (
                   <Tile className="w-25 p-3 m-1" minHeight={10}>
                     <Widget
-                      src={`neardevgov.near/widget/ProfileLine`}
+                      src={`${REPL_DEVHUB}/widget/devhub.components.molecule.ProfileLine`}
                       props={{ accountId: child }}
                     />
                   </Tile>