diff --git a/src/components/shortcodes/LinkCard.astro b/src/components/shortcodes/LinkCard.astro
index 8575860..b8097d4 100644
--- a/src/components/shortcodes/LinkCard.astro
+++ b/src/components/shortcodes/LinkCard.astro
@@ -4,10 +4,12 @@ interface Props {
     showArchive?: boolean;
     title?: string;
     description?: string;
+    pubDate?: Date | string;
+    updatedDate?: Date | string;
     siteName?: string;
 }
 
-const { url, showArchive = true} = Astro.props;
+const { url, showArchive = false, pubDate, updatedDate} = Astro.props;
 
 const siteMetadata = {
     title: Astro.props.title || '',
@@ -17,6 +19,16 @@ const siteMetadata = {
     domain: new URL(url).hostname || ''
 };
 
+// Format date to number only format (YYYYMMDD) for archive.org apis
+function formatDateToNumber(date: Date | string | undefined): string {
+    if (!date) return '';
+    const d = new Date(date);
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}${month}${day}`;
+}
+
 // Get metadata from the URL
 async function fetchMetadata(url: string) {
     try {
@@ -60,10 +72,13 @@ async function fetchMetadata(url: string) {
     }
 }
 
-// Check if the URL is archived on the Wayback Machine at the build time
+// Check if the URL is archived on the Wayback Machine at the updated/build time
+// TODO: bringing user's own archive service link
 async function checkArchive(url: string) {
     try {
-        const archiveUrl = `https://archive.org/wayback/available?url=${encodeURIComponent(url)}`;
+        // Determine which date to use (prefer updatedDate if available, or fallback to the build time)
+        const timestamp = (updatedDate ? formatDateToNumber(updatedDate) : formatDateToNumber(pubDate)) || formatDateToNumber(new Date());
+        const archiveUrl = `https://archive.org/wayback/available?url=${encodeURIComponent(url)}&timestamp=${timestamp}`;
         const response = await fetch(archiveUrl);
         const data = await response.json();
 
diff --git a/src/content/posts/markdown-example/index.mdx b/src/content/posts/markdown-example/index.mdx
index de1689f..322b2ab 100644
--- a/src/content/posts/markdown-example/index.mdx
+++ b/src/content/posts/markdown-example/index.mdx
@@ -91,10 +91,21 @@ You can use callouts to highlight important information or warnings in your cont
 ### LinkCard
 You can use the `LinkCard` component to create cards that link to external resources or pages. This is useful for showcasing projects, documentation, or any other relevant links.
 
+This most simple one can be used like this:
 <LinkCard url="https://astro.build"/>
 ```mdx
 <LinkCard url="https://astro.build"/>
 ```
+or with a archive link:
+<LinkCard url="https://astro.build" showArchive="true" pubDate={frontmatter.pubDate} updatedDate={frontmatter.updatedDate} />
+```mdx
+<LinkCard url="https://astro.build" showArchive="true" pubDate={frontmatter.pubDate} updatedDate={frontmatter.updatedDate} />
+```
+<Callout type="info">
+    The `pubDate` or `updatedDate` props is optional, but in order to make the component to display the archived version around the date correctly, they should be passed.
+
+    Choose one or both of them according to your needs.
+</Callout>
 <Callout type="warning">
     On a machine with bad network, this will significantly increase build time when no other params are passed to the component.
 </Callout>