diff --git a/replacements.dev.json b/replacements.dev.json
index b7b328fb..4a1d329e 100644
--- a/replacements.dev.json
+++ b/replacements.dev.json
@@ -6,5 +6,6 @@
   "REPL_NEAR_URL": "test.near.org",
   "REPL_NEARWEEK": "discom-dev.testnet",
   "REPL_QUERYAPI_FEED": "discom-dev.testnet/widget/Posts",
-  "REPL_FEATURED_COMP_MANAGER": "discom.testnet"
+  "REPL_FEATURED_COMP_MANAGER": "discom.testnet",
+  "REPL_TIME_AGO_VERSION": ""
 }
diff --git a/replacements.mainnet.json b/replacements.mainnet.json
index e04dcde5..48074251 100644
--- a/replacements.mainnet.json
+++ b/replacements.mainnet.json
@@ -6,5 +6,6 @@
   "REPL_NEAR_URL": "near.org",
   "REPL_NEARWEEK": "nearweekapp.near",
   "REPL_QUERYAPI_FEED": "dataplatform.near/widget/QueryApi.Feed",
-  "REPL_FEATURED_COMP_MANAGER": "bosfeaturedmanager.near"
+  "REPL_FEATURED_COMP_MANAGER": "bosfeaturedmanager.near",
+  "REPL_TIME_AGO_VERSION": "@97556750"
 }
diff --git a/replacements.testnet.json b/replacements.testnet.json
index ed160383..b5bf46cd 100644
--- a/replacements.testnet.json
+++ b/replacements.testnet.json
@@ -6,5 +6,6 @@
   "REPL_NEAR_URL": "test.near.org",
   "REPL_NEARWEEK": "discom-dev.testnet",
   "REPL_QUERYAPI_FEED": "discom.testnet/widget/Posts",
-  "REPL_FEATURED_COMP_MANAGER": "discom.testnet"
+  "REPL_FEATURED_COMP_MANAGER": "discom.testnet",
+  "REPL_TIME_AGO_VERSION": ""
 }
diff --git a/src/AccountProfile.jsx b/src/AccountProfile.jsx
index 9d009d75..ea6f5873 100644
--- a/src/AccountProfile.jsx
+++ b/src/AccountProfile.jsx
@@ -94,7 +94,7 @@ const AccountProfile = (
           <Text small style={{ marginLeft: "auto" }}>
             Joined{" "}
             <Widget
-              src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+              src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
               props={{ blockHeight: props.blockHeight }}
             />{" "}
             ago
diff --git a/src/Comments/Comment.jsx b/src/Comments/Comment.jsx
index f950fc49..afbc6933 100644
--- a/src/Comments/Comment.jsx
+++ b/src/Comments/Comment.jsx
@@ -159,7 +159,7 @@ return (
               ) : (
                 <Text>
                   <Widget
-                    src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                    src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                     props={{ blockHeight }}
                   />{" "}
                   ago
diff --git a/src/ComponentCard.jsx b/src/ComponentCard.jsx
index 4962db9a..6b1ae9a7 100644
--- a/src/ComponentCard.jsx
+++ b/src/ComponentCard.jsx
@@ -152,7 +152,7 @@ return (
       <CardTag>
         <i className="bi bi-clock"></i>{" "}
         <Widget
-          src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+          src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
           props={{
             blockHeight: props.blockHeight,
             keyPath: `${accountId}/widget/${widgetName}`,
diff --git a/src/ComponentDetailsPage.jsx b/src/ComponentDetailsPage.jsx
index 6382a092..46ac5114 100644
--- a/src/ComponentDetailsPage.jsx
+++ b/src/ComponentDetailsPage.jsx
@@ -279,7 +279,7 @@ return (
               <i className="bi bi-clock"></i>
               Last updated
               <Widget
-                src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                 props={{ keyPath: `${accountId}/widget/${widgetName}` }}
               />{" "}
               ago.
diff --git a/src/DIG/Dialog.jsx b/src/DIG/Dialog.jsx
new file mode 100644
index 00000000..e7bf8f19
--- /dev/null
+++ b/src/DIG/Dialog.jsx
@@ -0,0 +1,170 @@
+let {
+  type,
+  title,
+  description,
+  onCancel,
+  onConfirm,
+  cancelButtonText,
+  confirmButtonText,
+  cancelButton,
+  confirmButton,
+  ...forwardedProps
+} = props;
+
+type = type ?? "dialog";
+
+if (["alert", "dialog"].indexOf(type) < 0) {
+  return "Unsupported type of component. `type` could be only 'alert' or 'dialog'";
+}
+
+const variant = type === "alert" ? "AlertDialog" : "Dialog";
+
+const Root = styled(`${variant}.Root`)``;
+
+const Overlay = styled(`${variant}.Overlay`)`
+  background-color: var(--blackA3);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 2147483648;
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+const Content = styled(`${variant}.Content`)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0px 4px 8px 0px var(--blackA3), 0px 0px 0px 1px var(--blackA4);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 409px;
+  max-height: 85vh;
+  padding: 24px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const Title = styled(`${variant}.Title`)`
+  font: var(--text-base);
+  font-weight: 700;
+  color: var(--sand12);
+`;
+
+const Description = styled(`${variant}.Description`)`
+  font: var(--text-s);
+  color: var(--sand11);
+`;
+
+const ActionWrapper = styled.div`
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+`;
+
+const Close = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  transition: all 200ms;
+  cursor: pointer;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--violet6);
+    color: var(--violet8);
+  }
+
+  &:focus-within {
+    box-shadow: 0 0 0 4px var(--violet4);
+  }
+`;
+
+cancelButton = cancelButton ?? (
+  <Widget
+    src="${REPL_ACCOUNT}/widget/DIG.Button"
+    props={{
+      label: cancelButtonText ?? "Cancel",
+      variant: "secondary",
+      onClick: onCancel,
+    }}
+  />
+);
+
+confirmButton = confirmButton ?? (
+  <Widget
+    src="${REPL_ACCOUNT}/widget/DIG.Button"
+    props={{
+      label: confirmButtonText ?? "Confirm",
+      variant: "primary",
+      onClick: onConfirm,
+    }}
+  />
+);
+
+return (
+  <Root {...forwardedProps}>
+    {type === "alert" ? (
+      <AlertDialog.Trigger asChild>{trigger}</AlertDialog.Trigger>
+    ) : (
+      <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
+    )}
+    <Overlay />
+    <Content>
+      {title && <Title>{title}</Title>}
+      {description && <Description>{description}</Description>}
+      <ActionWrapper>
+        {type === "alert" ? (
+          <AlertDialog.Cancel asChild>
+            <div className="d-inline-block">{cancelButton}</div>
+          </AlertDialog.Cancel>
+        ) : (
+          <Dialog.Close asChild>
+            <div className="d-inline-block">{confirmButton}</div>
+          </Dialog.Close>
+        )}
+
+        {type === "alert" && (
+          <AlertDialog.Action asChild>
+            <div className="d-inline-block">{confirmButton}</div>
+          </AlertDialog.Action>
+        )}
+      </ActionWrapper>
+      {type === "dialog" && (
+        <Dialog.Close asChild>
+          <Close>
+            <i class="ph ph-x" />
+          </Close>
+        </Dialog.Close>
+      )}
+    </Content>
+  </Root>
+);
diff --git a/src/DIG/Dialog.metadata.json b/src/DIG/Dialog.metadata.json
new file mode 100644
index 00000000..ca8c0f23
--- /dev/null
+++ b/src/DIG/Dialog.metadata.json
@@ -0,0 +1,7 @@
+{
+  "description": "This Dialog is built with the Radix primitive: https://www.radix-ui.com/primitives/docs/components/dialog\n\nExample:\n\n```jsx\n<Widget\n  src=\"near/widget/DIG.Dialog\"\n  props={{\n    type: \"dialog\",\n    title: \"Header\",\n    description: \"Some description\",\n    onCancel: handleCancelFunction,\n    onConfirm: handleConfirmFunction,\n    cancelButtonText: \"Cancel\",\n    confirmButtonText: \"Confirm,\n  }}\n/>\n```\n\n### Props\n\n`type`\n\n- type: `string` (variants: `\"alert\"` or `\"dialog\"`)\n- `\"alert\"` - https://www.radix-ui.com/primitives/docs/components/alert-dialog\n- `\"dialog\"` - https://www.radix-ui.com/primitives/docs/components/dialog\n- Defines type of Dialog.\n\n`title`\n\n- type: `string`\n- Title of Dialog.\n\n`description`\n\n- type: `string`\n- Description of Dialog.\n\n`onCancel`\n\n- type: `function`\n- Event handler called when the user clicks on cancel button.\n\n`cancelButtonText`\n\n- type: `string`\n- Label on cancel button.\n\n`onConfirm`\n\n- type: `function`\n- Event handler called when the user clicks on confirm button.\n\n`confirmButtonText`\n\n- type: `string`\n- Label on confirm button.\n\n`cancelButton`\n\n- type: `JSX`\n- A custom button that closes the dialog.\n- Overrides `cancelButtonText`.\n- _note:_ pass `onCancel` event handler to specify custom action on cancel.\n\n`confirmButton`\n\n- type: `JSX`\n- A custom button that closes the dialog.\n- Overrides `confirmButtonText`.\n- _note:_ pass `onConfirm` event handler to specify custom action on cancel.\n\nThis component also accepts all `Alert.Dialog` or `Dialog` (depends on selected `type`) props as outlined in the Radix documentation.",
+  "name": "DIG.Dialog",
+  "tags": {
+    "dig": ""
+  }
+}
diff --git a/src/Flagged/Feed.jsx b/src/Flagged/Feed.jsx
index 64e168f3..26ae794e 100644
--- a/src/Flagged/Feed.jsx
+++ b/src/Flagged/Feed.jsx
@@ -59,7 +59,7 @@ const renderItem = (a) => {
         </div>
         <div>
           <Widget
-            src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+            src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
             props={{ blockHeight: a.blockHeight }}
           />
         </div>
diff --git a/src/LatestFollowActivity.jsx b/src/LatestFollowActivity.jsx
index 731de558..eb965fd0 100644
--- a/src/LatestFollowActivity.jsx
+++ b/src/LatestFollowActivity.jsx
@@ -67,7 +67,7 @@ return (
             <i className="bi bi-arrow-right"></i>
             <br />
             <Widget
-              src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+              src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
               props={{ blockHeight: item.blockHeight }}
             />
           </Text>
diff --git a/src/LatestNews.jsx b/src/LatestNews.jsx
index d00af758..9b1e2dc7 100644
--- a/src/LatestNews.jsx
+++ b/src/LatestNews.jsx
@@ -127,7 +127,7 @@ return (
             </Text>
             <Text small>
               <Widget
-                src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                 props={{ blockHeight: item.blockHeight }}
               />{" "}
               ago
diff --git a/src/NestedDiscussions/Preview.jsx b/src/NestedDiscussions/Preview.jsx
index 468ba245..8256fc7f 100644
--- a/src/NestedDiscussions/Preview.jsx
+++ b/src/NestedDiscussions/Preview.jsx
@@ -126,7 +126,7 @@ return (
               <Text as="span">･</Text>
               <Text>
                 <Widget
-                  src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                  src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                   props={{ blockHeight }}
                 />{" "}
                 ago
diff --git a/src/Notification.jsx b/src/Notification.jsx
index 59ef05bc..c98b5cdb 100644
--- a/src/Notification.jsx
+++ b/src/Notification.jsx
@@ -176,7 +176,7 @@ return (
           {notificationMessage[type]}
         </Text>
         <Widget
-          src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+          src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
           props={{ blockHeight: props.blockHeight }}
         />
         ago
diff --git a/src/Onboarding/ComponentCard.jsx b/src/Onboarding/ComponentCard.jsx
index a8764f20..e6f3a5d7 100644
--- a/src/Onboarding/ComponentCard.jsx
+++ b/src/Onboarding/ComponentCard.jsx
@@ -63,7 +63,7 @@ return (
       <Text as="div" className="d-flex align-items-center">
         <i className="ph ph-clock" style={{ fontSize: "20px" }} />
         <Widget
-          src={`${REPL_MOB_2}/widget/TimeAgo@97556750`}
+          src={`${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}`}
           props={{
             blockHeight: props.commits[props.commits.length - 1],
             className: "description",
diff --git a/src/Posts/Post.jsx b/src/Posts/Post.jsx
index a475700b..5c60b362 100644
--- a/src/Posts/Post.jsx
+++ b/src/Posts/Post.jsx
@@ -234,7 +234,7 @@ return (
                     ) : (
                       <>
                         <Widget
-                          src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                          src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                           props={{ blockHeight }}
                         />{" "}
                         ago
diff --git a/src/Search/AccountProfile.jsx b/src/Search/AccountProfile.jsx
index 7210055b..13d1f921 100644
--- a/src/Search/AccountProfile.jsx
+++ b/src/Search/AccountProfile.jsx
@@ -99,7 +99,7 @@ const AccountProfile = (
           <Text small style={{ marginLeft: "auto" }}>
             Joined{" "}
             <Widget
-              src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+              src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
               props={{ blockHeight: props.blockHeight }}
             />{" "}
             ago
diff --git a/src/v1/Posts/Post.jsx b/src/v1/Posts/Post.jsx
index 939b23e3..b355869a 100644
--- a/src/v1/Posts/Post.jsx
+++ b/src/v1/Posts/Post.jsx
@@ -112,7 +112,7 @@ return (
                     ) : (
                       <>
                         <Widget
-                          src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                          src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                           props={{ blockHeight }}
                         />{" "}
                         ago