diff --git a/_components/html/h2.webc b/_components/html/h2.webc
new file mode 100644
index 0000000..b38428b
--- /dev/null
+++ b/_components/html/h2.webc
@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="heading.css">
+<script webc:type="js" webc:root="override">
+let slug = slugify(slots.text.default);
+`<h2 id="${slug}">
+	<a href="#${slug}" class="heading-link"><span aria-hidden="true">#</span><visually-hidden>anchor</visually-hidden></a>
+	${slots.text.default}
+</h2>`
+</script>
\ No newline at end of file
diff --git a/_components/html/h3.webc b/_components/html/h3.webc
new file mode 100644
index 0000000..93466b4
--- /dev/null
+++ b/_components/html/h3.webc
@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="heading.css">
+<script webc:type="js" webc:root="override">
+let slug = slugify(slots.text.default);
+`<h3 id="${slug}">
+	<a href="#${slug}" class="heading-link"><span aria-hidden="true">#</span><visually-hidden>anchor</visually-hidden></a>
+	${slots.text.default}
+</h3>`
+</script>
\ No newline at end of file
diff --git a/_components/html/h4.webc b/_components/html/h4.webc
new file mode 100644
index 0000000..86f72b1
--- /dev/null
+++ b/_components/html/h4.webc
@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="heading.css">
+<script webc:type="js" webc:root="override">
+let slug = slugify(slots.text.default);
+`<h4 id="${slug}">
+	<a href="#${slug}" class="heading-link"><span aria-hidden="true">#</span><visually-hidden>anchor</visually-hidden></a>
+	${slots.text.default}
+</h4>`
+</script>
\ No newline at end of file
diff --git a/_components/html/heading.css b/_components/html/heading.css
new file mode 100644
index 0000000..3ad324a
--- /dev/null
+++ b/_components/html/heading.css
@@ -0,0 +1,14 @@
+.heading-link {
+	font-size: 1.125rem; /* 18px /16 */
+	text-decoration: none;
+	padding: .1em .2em .1em 0;
+}
+@media (min-width: 43.75em) { /* 700px */
+	page-layout-sidebar .heading-link {
+		margin-left: -1.222222222222rem; /* -22px /18 */
+	}
+}
+a.heading-link[href],
+a.heading-link[href]:visited {
+	color: var(--color-accent);
+}
\ No newline at end of file
diff --git a/content/archive/fourthpost/fourthpost.md b/content/archive/fourthpost/fourthpost.md
index 4846006..96c8bbe 100644
--- a/content/archive/fourthpost/fourthpost.md
+++ b/content/archive/fourthpost/fourthpost.md
@@ -1,4 +1,5 @@
 ---
+templateEngineOverride: webc,md
 title: This is my fourth post.
 description: This is a post on My Blog about touchpoints and circling wagons.
 date: 2018-09-30
@@ -12,7 +13,7 @@ Leverage agile frameworks to provide a robust synopsis for high level overviews.
 
 Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
 
-{% image "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %}
+<img webc:is="eleventy-image" width="288,350" sizes="100vw" src="/img/possum.png" formats="avif,webp,png" alt="A possum parent and two possum kids hanging from the iconic red balloon">
 
 ## Section Header
 
diff --git a/eleventy.config.js b/eleventy.config.js
index 8ced8b4..fa2cda2 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -4,7 +4,8 @@ import pluginRss from "@11ty/eleventy-plugin-rss";
 import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
 import pluginBundle from "@11ty/eleventy-plugin-bundle";
 import pluginNavigation from "@11ty/eleventy-navigation";
-import { EleventyHtmlBasePlugin } from "@11ty/eleventy";
+import { EleventyHtmlBasePlugin, EleventyRenderPlugin } from "@11ty/eleventy";
+import pluginWebc from "@11ty/eleventy-plugin-webc";
 
 import pluginDrafts from "./eleventy.config.drafts.js";
 import pluginImages from "./eleventy.config.images.js";
@@ -28,6 +29,14 @@ export default async function(eleventyConfig) {
 	eleventyConfig.addPlugin(pluginImages);
 
 	// Official plugins
+	eleventyConfig.addPlugin(pluginWebc, {
+		components: [
+			"./_components/**/*.webc",
+			// "npm:@11ty/eleventy-img/*.webc",
+		],
+	});
+	eleventyConfig.addPlugin(EleventyRenderPlugin);
+
 	eleventyConfig.addPlugin(pluginRss);
 	eleventyConfig.addPlugin(IdAttributePlugin);
 	eleventyConfig.addPlugin(pluginSyntaxHighlight, {
diff --git a/package.json b/package.json
index faf46b2..794de0d 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
 		"@11ty/eleventy-plugin-bundle": "^2.0.2",
 		"@11ty/eleventy-plugin-rss": "^2.0.2",
 		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+		"@11ty/eleventy-plugin-webc": "^0.11.2",
 		"@famebot/chromagen": "^1.0.1",
 		"luxon": "^3.4.4"
 	}
diff --git a/content/archive/fourthpost/possum.png b/public/img/possum.png
similarity index 100%
rename from content/archive/fourthpost/possum.png
rename to public/img/possum.png