diff --git a/.eleventy.js b/.eleventy.js
index 795904cd..bf57cfa6 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -73,6 +73,9 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy({
     'node_modules/youtube-video-element/youtube-video-element.js': 'assets/scripts/components/youtube-video-element.js'
   })
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/@daviddarnes/link-peek/link-peek.js': 'assets/scripts/components/link-peek.js'
+  })
 
   // enable merging of tags
   eleventyConfig.setDataDeepMerge(true)
diff --git a/package-lock.json b/package-lock.json
index af28e327..54635d55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@cdransf/api-text": "^1.2.2",
         "@cdransf/select-pagination": "^1.0.4",
         "@cdransf/theme-toggle": "^1.2.3",
+        "@daviddarnes/link-peek": "^1.0.0",
         "@daviddarnes/mastodon-post": "^1.1.1",
         "@remy/webmention": "^1.5.0",
         "@zachleat/webcare-webshare": "^1.0.3",
@@ -1240,6 +1241,11 @@
       "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.2.3.tgz",
       "integrity": "sha512-K2NniEup/OFgSH+cqG2plY5iPFBevu7mMrz10HL1KzcEulA8AxPyPDcuOAC0Hdt7OpWAIzAk0hB0wvI7g8KW3A=="
     },
+    "node_modules/@daviddarnes/link-peek": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@daviddarnes/link-peek/-/link-peek-1.0.0.tgz",
+      "integrity": "sha512-Chix5Lhb/+hLvUkNMCeakP+hojOZ5FhiDxT8uqd0vQMI5jxeATjh/WEMNNH6fR7U7wdJaKa24SKPkWLg8MdIFg=="
+    },
     "node_modules/@daviddarnes/mastodon-post": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@daviddarnes/mastodon-post/-/mastodon-post-1.2.0.tgz",
diff --git a/package.json b/package.json
index a4f5eca9..32b775c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "9.10.4",
+  "version": "9.11.4",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
@@ -22,6 +22,7 @@
     "@cdransf/api-text": "^1.2.2",
     "@cdransf/select-pagination": "^1.0.4",
     "@cdransf/theme-toggle": "^1.2.3",
+    "@daviddarnes/link-peek": "^1.0.0",
     "@daviddarnes/mastodon-post": "^1.1.1",
     "@remy/webmention": "^1.5.0",
     "@zachleat/webcare-webshare": "^1.0.3",
diff --git a/src/_includes/partials/link-peek.liquid b/src/_includes/partials/link-peek.liquid
new file mode 100644
index 00000000..69f8f78a
--- /dev/null
+++ b/src/_includes/partials/link-peek.liquid
@@ -0,0 +1,20 @@
+{% capture css %}
+  {% render "../../assets/styles/components/link-peek.css" %}
+{% endcapture %}
+<style>{{ css }}</style>
+<script type="module" src="/assets/scripts/components/link-peek.js"></script>
+<template id="link-peek-template">
+  <figure>
+    <figcaption>
+      <a data-key="data.title, link"></a>
+      <p data-key="data.description"></p>
+      <img data-key="data.logo.url" />
+      <small data-key="data.publisher"></small>
+    </figcaption>
+    <img data-key="data.image.url" />
+  </figure>
+</template>
+
+<link-peek api="https://api.microlink.io/?url={{ url }}">
+  <a href="{{ url }}">{{ title }}</a>
+</link-peek>
\ No newline at end of file
diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css
index 62ad7335..f5a818e5 100644
--- a/src/assets/styles/components/banners.css
+++ b/src/assets/styles/components/banners.css
@@ -2,7 +2,7 @@
   margin: var(--sizing-base) 0;
   padding: var(--sizing-md);
   border: 1px solid;
-  border-radius: var(--rounded-lg);
+  border-radius: var(--sizing-xs);
 }
 
 .banner.old-post {
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index 087452b9..69586b66 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -14,7 +14,7 @@ textarea {
   padding: var(--sizing-sm);
   font-size: var(--font-size-base);
   width: 100%;
-  border-radius: var(--rounded-md);
+  border-radius: var(--sizing-xs);
   outline: none;
   margin-bottom: var(--sizing-base);
   font-weight: var(--font-weight-base);
diff --git a/src/assets/styles/components/link-peek.css b/src/assets/styles/components/link-peek.css
new file mode 100644
index 00000000..fb7e0f24
--- /dev/null
+++ b/src/assets/styles/components/link-peek.css
@@ -0,0 +1,36 @@
+link-peek:defined a:not([data-key]) {
+  display: none;
+}
+
+link-peek:defined figure {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
+  gap: 1rem;
+  max-inline-size: max-content;
+  border: 1px solid var(--gray-light);
+  border-radius: var(--sizing-xs);
+  padding: 1rem;
+  margin: 0 0 var(--sizing-base);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+}
+
+link-peek:defined a[data-key="data.title.link"],
+link-peek:defined figure p {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+}
+
+link-peek img[data-key="data.logo.url"] {
+  margin-right: var(--sizing-xs);
+  inline-size: var(--sizing-lg);
+  block-size: var(--sizing-lg);
+  vertical-align: middle;
+}
+
+link-peek img[data-key="data.image.url"] {
+  max-inline-size: 100%;
+  block-size: auto;
+  border-radius: var(--sizing-xs);
+}
\ No newline at end of file
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index 092f08d5..bc7af3d6 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -49,7 +49,7 @@
   content: '';
   top: 0;
   left: 1px;
-  border-radius: calc(var(--rounded-md) * .85);
+  border-radius: calc(var(--sizing-xs) * .85);
   box-shadow: inset 0 -70px 50px -40px #000;
   width: 100%;
   height: calc(100% - 1px);
@@ -84,7 +84,7 @@
 
 .media__grid img {
   border: 1px solid var(--accent-color);
-  border-radius: var(--rounded-md);
+  border-radius: var(--sizing-xs);
   transition-property: border-color;
   transition-timing-function: var(--transition-ease-in-out);
   transition-duration: 300ms;
diff --git a/src/assets/styles/components/track-chart.css b/src/assets/styles/components/track-chart.css
index 8465ccea..878b53d5 100644
--- a/src/assets/styles/components/track-chart.css
+++ b/src/assets/styles/components/track-chart.css
@@ -51,7 +51,7 @@
 
 .track__chart--item img {
   border: 1px solid var(--accent-color);
-  border-radius: var(--rounded-md);
+  border-radius: var(--sizing-xs);
 }
 
 .track__chart--item img,
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 9a9df638..7fc7262f 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -118,7 +118,7 @@ table {
   max-width: fit-content;
   margin: 0 auto;
   white-space: nowrap;
-  border-radius: var(--rounded-lg);
+  border-radius: var(--sizing-xs);
   border: 1px solid var(--gray-light);
 }
 
@@ -375,7 +375,7 @@ li {
 /* images */
 .image__banner {
   border: 1px solid var(--accent-color);
-  border-radius: var(--rounded-lg);
+  border-radius: var(--sizing-xs);
   height: auto;
 }
 
diff --git a/src/assets/styles/plugins/prism.css b/src/assets/styles/plugins/prism.css
index b520042a..8a8a78c8 100644
--- a/src/assets/styles/plugins/prism.css
+++ b/src/assets/styles/plugins/prism.css
@@ -20,7 +20,7 @@ pre[class*="language-"] {
   padding: 1rem;
   margin: 1.25rem 0;
   overflow: auto;
-  border-radius: var(--rounded-md);
+  border-radius: var(--sizing-xs);
 }
 
 :not(pre) > code[class*="language-"],
@@ -31,7 +31,7 @@ pre[class*="language-"] {
 /* Inline code */
 :not(pre) > code[class*="language-"] {
   padding: 0.1rem;
-  border-radius: var(--rounded-md);
+  border-radius: var(--sizing-xs);
   white-space: normal;
 }
 
diff --git a/src/posts/2024/enhancing-pagination-with-a-page-selector.md b/src/posts/2024/enhancing-pagination-with-a-page-selector.md
index e2e86ac9..8d127602 100644
--- a/src/posts/2024/enhancing-pagination-with-a-page-selector.md
+++ b/src/posts/2024/enhancing-pagination-with-a-page-selector.md
@@ -38,8 +38,8 @@ window.onload = () => {
 
 We wait for the document to load, select the pagination DOM node, get the current `pathname`, split it at '/' delimited segments, filter empty values and look for a number representing the current page. We then set the `selected` attribute on the appropriate `<option>` node for the current page.
 
-  Within the `change` event listener I check whether we've extracted a url segment *and* that the last segment is a valid number — if not, we add a new numeric segment. If it is numeric, we replace it with the new page number. Finally, we have special handling for the root section — because my first page is at `/` and the second is at `/1/` we need to correctly navigate the user should the pageNumber be `0`.
+Within the `change` event listener I check whether we've extracted a url segment *and* that the last segment is a valid number — if not, we add a new numeric segment. If it is numeric, we replace it with the new page number. Finally, we have special handling for the root section — because my first page is at `/` and the second is at `/1/` we need to correctly navigate the user should the pageNumber be `0`.
 
-  With that, we have quicker and more convenient page navigation for users that have JavaScript enabled and a handy page count for users that have disabled JavaScript in their browser.
+With that, we have quicker and more convenient page navigation for users that have JavaScript enabled and a handy page count for users that have disabled JavaScript in their browser.
 
-  {% render "partials/banners/npm.liquid", url: 'https://www.npmjs.com/package/@cdransf/select-pagination', command: 'npm i @cdransf/select-pagination' %}
\ No newline at end of file
+{% render "partials/banners/npm.liquid", url: 'https://www.npmjs.com/package/@cdransf/select-pagination', command: 'npm i @cdransf/select-pagination' %}
\ No newline at end of file