diff --git a/_config/filters.js b/_config/filters.js
index 1269aa7..23ea0ed 100644
--- a/_config/filters.js
+++ b/_config/filters.js
@@ -1,3 +1,5 @@
+import { DateTime } from "luxon";
+
 export default function(eleventyConfig) {
 	// Return the keys used in an object
 	eleventyConfig.addFilter("getKeys", target => {
@@ -9,33 +11,44 @@ export default function(eleventyConfig) {
 		let tagline;
 		switch (tag) {
 			case "animals and the outdoors":
-				tagline = "grass touchin'";
+				tagline = "touchin' grass";
 				break;
 			case "art and crafts":
-				/* tagline = */
+				tagline = "makin' stuff";
 				break;
 			case "food and drink":
 				tagline = "good eatin'";
 				break;
 			case "history and science":
-				/* tagline = */
+				tagline = "book learnin'"
 				break;
-			case "home improvement and diy":
+			case "repair and diy":
 				tagline = "fixin' stuff";
 				break;
 			case "interpersonal and life":
-				/* tagline = */
+				tagline = "better livin'";
 				break;
 			case "technology":
 				tagline = "computer touchin'";
 				break;
-			case "writing, editing, and literature":
-				/* tagline = */
+			case "writing editing and literature":
+				tagline = "wordsmithin'";
 				break;
 		};
 		return tagline;
 	});
 
+	/* For <time> elements */
+	eleventyConfig.addFilter("htmlDateString", (dateObj) => {
+		return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat('yyyy-LL-dd');
+	});
+
+	/* Human-readable dates */
+	eleventyConfig.addFilter("readableDate", (dateObj, zone) => {
+		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" })
+			.toLocaleString(DateTime.DATE_FULL);
+	});
+
 	/* Filter out structural tags */
 	eleventyConfig.addFilter("removeCoreTags", (tags) => {
 		return tags.filter(tag => ["all"].indexOf(tag) === -1);
diff --git a/_data/metadata.js b/_data/metadata.js
index d23a3c2..f675ea5 100644
--- a/_data/metadata.js
+++ b/_data/metadata.js
@@ -1,5 +1,5 @@
 export default {
-	title: "Fedi Classifieds",
+	title: "Fediverse Skillshare Classifieds",
 	description: "Skillshares and more",
 	url: "",
 	author: "Lee Cattarin"
diff --git a/_includes/footer.njk b/_includes/footer.njk
index 5e0ea02..f547276 100644
--- a/_includes/footer.njk
+++ b/_includes/footer.njk
@@ -1,2 +1,13 @@
 <footer>
+  <ul>
+    <li>
+      maintained by <a href="https://leecat.art">lee</a>
+    </li>
+    <li>
+      <a href="https://heckin.technology/inherentlee/fedi-classifieds">source code</a>
+    </li>
+    <li>
+      <a href="/submit/">submit your own</a>
+    </li>
+  </ul>
 </footer>
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 989b0a5..f4bef0b 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -37,6 +37,8 @@
     {% include "header.njk" %}
 
     <main id="main">
+      <h1>{{ title }}</h1>
+
       {{ content | safe }}
     </main>
 
diff --git a/css/home.css b/css/home.css
new file mode 100644
index 0000000..a85da40
--- /dev/null
+++ b/css/home.css
@@ -0,0 +1,108 @@
+#ads {
+	columns: 3;
+}
+
+@media (max-width: 1050px) {
+	#ads {
+		columns: 2;
+	}
+}
+
+@media (max-width: 650px) {
+	#ads {
+		columns: 1;
+	}
+}
+
+/* jump links */
+#jump-links {
+	padding-bottom: 1rem;
+	margin-bottom: 1rem;
+	border-bottom: solid var(--color-purple);
+}
+
+#jump-links h2,
+#category-list li {
+	font-family: "Bebas Neue";
+	font-size: 1.3rem;
+	font-weight: normal;
+}
+
+#jump-links * {
+	display: inline;
+}
+
+#category-list li {
+	list-style: none;
+  margin: 0;
+}
+
+#category-list li:not(:last-child)::after {
+	content: "..." / "";
+}
+
+/* categories */
+
+.category {
+	break-inside: avoid;
+	border-bottom: solid var(--color-purple);
+	margin-bottom: 1rem;
+}
+
+.category-title {
+	background-color: var(--color-gray);
+	padding: .25rem;
+	margin-bottom: .5rem;
+}
+
+/* references highlighting */
+/* drawn from https://aarontgrogg.com/blog/2012/05/18/pure-css-highlight-for-link-target/ */
+.category-title:has(h2:target) {
+  animation: hilite 2.5s;
+}
+
+@keyframes hilite {
+	0% {background-color: var(--color-gray);}
+	10% {background-color: var(--color-cyan-flipped);}
+	100% {background-color: var(--color-gray);}
+}
+
+/* remove animation for reduced motion viewers */
+@media (prefers-reduced-motion: reduce) {
+	.category-title:has(h2:target) {
+		animation: none;
+		font-weight: bold;
+	}
+}
+
+.category-title h2 {
+	scroll-margin-top: 4rem;
+	font-family: "Bebas Neue";
+}
+
+.category-title p {
+	text-align: right;
+	font-weight: bold;
+}
+
+/* individual ads */
+
+.ad {
+	margin-bottom: 1rem;
+}
+.ad:not(:last-child) {
+	border-bottom: thin solid var(--color-purple);
+	padding-bottom: 1rem;
+}
+
+.blurb {
+	margin-bottom: .5rem;
+}
+.blurb a {
+	font-weight: bold;
+}
+
+.listed-on {
+	font-size: .85rem;
+	text-align: right;
+}
diff --git a/css/main.css b/css/main.css
index 3cdeef2..37280bf 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,21 @@
+:root {
+	color-scheme: light dark;
+
+	--color-dark: #222;
+	--color-light: #ddd;
+	--color-cyan-dark: #134947;
+	--color-cyan-light: #40c5be;
+	--color-purple-dark: #6007b1;
+	--color-purple-light: #ba99fe;
+
+	--color-text: light-dark(var(--color-dark), var(--color-light));
+	--color-bg: light-dark(var(--color-light), var(--color-dark));
+	--color-gray: rgb(0 0 0 / 15%);
+	--color-cyan: light-dark(var(--color-cyan-dark), var(--color-cyan-light));
+	--color-cyan-flipped: light-dark(var(--color-cyan-light), var(--color-cyan-dark));
+	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
+}
+
 * {
 	box-sizing: border-box;
 	margin: 0;
@@ -5,29 +23,87 @@
 }
 
 body {
+	color: var(--color-text);
+	background-color: var(--color-bg);
 	width: 65%;
+	max-width: 1400px;
 	margin: 0 auto;
+	font-family: "Fraunces";
+	font-weight: 300;
 }
 
-#ads {
-	columns: 3;
+main {
+	padding-bottom: 2rem;
+	border-bottom: solid var(--color-purple);
+}
+
+@media (max-width: 1050px) {
+	body {
+		width: 85%
+	}
+}
+
+@media (max-width: 650px) {
+	body {
+		width: 92%;
+	}
+}
+
+h1, h3 {
+	font-weight: 400;
 }
 
 h1 {
-	font-family: "Fraunces";
-	font-weight: 400;
 	text-align: center;
-	font-size: 4rem;
-	margin: 3rem auto 1rem;
+	font-size: 3rem;
+	margin: 3rem auto;
 }
 
-h2 {
-	font-family: "Bebas Neue";
-	background-color: lightgray;
+@media (max-width: 650px) {
+	h1 {
+		font-size: 2.4rem;
+		margin-top: 1rem;
+	}
 }
 
 h3 {
-	font-family: "Fraunces";
-	font-weight: 400;
 	text-transform: capitalize;
+	margin-bottom: .5rem;
+}
+
+a {
+	color: var(--color-cyan);
+}
+
+a:visited {
+	color: var(--color-purple);
+}
+
+main ul {
+	margin-left: 1rem;
+}
+
+main li {
+	margin-left: 1rem;
+}
+
+footer {
+	padding: 1rem 0;
+}
+
+footer ul {
+	list-style: none;
+	display: flex;
+	justify-content: space-around;
+}
+
+footer li {
+	display: inline;
+	font-family: "Bebas Neue";
+	font-size: 1.15rem;
+}
+
+/* iframe is on submission page */
+iframe {
+	margin: 2rem 0;
 }
diff --git a/eleventy.config.js b/eleventy.config.js
index 611a86f..6269218 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,3 +1,5 @@
+import { IdAttributePlugin } from "@11ty/eleventy";
+
 import pluginFilters from "./_config/filters.js";
 
 export default async function(eleventyConfig) {
@@ -23,6 +25,9 @@ export default async function(eleventyConfig) {
 	/* All filters from _config/filters.js */
 	eleventyConfig.addPlugin(pluginFilters);
 
+	/* `id` attributes */
+	eleventyConfig.addPlugin(IdAttributePlugin);
+
 	/* Shortcodes */
 	eleventyConfig.addShortcode("currentBuildDate", () => {
 		return (new Date()).toISOString();
@@ -44,4 +49,3 @@ export const config = {
 	htmlTemplateEngine: "njk",
 	templateFormats: ["html", "md", "njk"],
 };
-
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..e257a13
Binary files /dev/null and b/favicon.ico differ
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index f7cf6ac..3160ad2 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "Fediverse Classifieds",
+  "name": "fediverse-classifieds",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
diff --git a/package-lock.json b/package-lock.json
index bbf6544..1e10e5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,16 @@
 {
-  "name": "Fediverse Classifieds",
+  "name": "fediverse-classifieds",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "Fediverse Classifieds",
+      "name": "fediverse-classifieds",
       "version": "1.0.0",
       "license": "AGPL-3.0-only",
       "devDependencies": {
-        "@11ty/eleventy": "^3.1.5"
+        "@11ty/eleventy": "^3.1.5",
+        "luxon": "^3.7.2"
       }
     },
     "node_modules/@11ty/dependency-tree": {
diff --git a/package.json b/package.json
index 08075b7..86e2a11 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "license": "AGPL-3.0-only",
   "type": "module",
   "devDependencies": {
-    "@11ty/eleventy": "^3.1.5"
+    "@11ty/eleventy": "^3.1.5",
+    "luxon": "^3.7.2"
   }
 }
diff --git a/src/ads/00-test-test.md b/src/ads/00-test-test.md
index 537528d..56e153d 100644
--- a/src/ads/00-test-test.md
+++ b/src/ads/00-test-test.md
@@ -4,4 +4,5 @@ handle: 00
 server: test.test
 tags: art and crafts
 blurb: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+date: 2026-04-21
 ---
diff --git a/src/ads/01-test-test.md b/src/ads/01-test-test.md
index 10ca4c9..bd25c4c 100644
--- a/src/ads/01-test-test.md
+++ b/src/ads/01-test-test.md
@@ -4,4 +4,5 @@ handle: 01
 server: test.test
 tags: history and science
 blurb: Quisque mauris erat, tempor non egestas sollicitudin, feugiat id risus. Duis eget ornare nunc. Cras sodales, eros quis finibus luctus, enim sem dictum ante, sed sodales ipsum ante a metus.
+date: 2026-04-22
 ---
diff --git a/src/ads/02-test-test.md b/src/ads/02-test-test.md
index d8dcc67..41cdd68 100644
--- a/src/ads/02-test-test.md
+++ b/src/ads/02-test-test.md
@@ -4,4 +4,5 @@ handle: 02
 server: test.test
 tags: interpersonal and life
 blurb: Fusce faucibus mauris ut metus molestie viverra. In varius erat in lectus scelerisque, vitae ornare sapien euismod. Pellentesque ornare aliquam erat, pellentesque eleifend tellus consequat ut. Donec mollis, lacus vitae bibendum hendrerit, nisi metus dignissim lacus, nec tincidunt nisl ligula vel metus.
+date: 2026-04-23
 ---
diff --git a/src/ads/03-test-test.md b/src/ads/03-test-test.md
index fe2b18e..d23f316 100644
--- a/src/ads/03-test-test.md
+++ b/src/ads/03-test-test.md
@@ -4,4 +4,5 @@ handle: 03
 server: test.test
 tags: writing editing and literature
 blurb: Sed a commodo lectus. Curabitur tincidunt, eros vel mollis dapibus, mauris dui pharetra mauris, et dapibus leo nisi vitae eros.
+date: 2026-04-24
 ---
diff --git a/src/ads/04-test-test.md b/src/ads/04-test-test.md
index 196eda3..8e3442a 100644
--- a/src/ads/04-test-test.md
+++ b/src/ads/04-test-test.md
@@ -4,4 +4,5 @@ handle: 04
 server: test.test
 tags: food and drink
 blurb: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vitae augue ac neque congue pellentesque vitae a enim. Donec euismod dolor sit amet dui dapibus posuere. Donec eget blandit ligula, ac tempor nunc.
+date: 2026-04-25
 ---
diff --git a/src/ads/05-test-test.md b/src/ads/05-test-test.md
index 42810d0..673b81c 100644
--- a/src/ads/05-test-test.md
+++ b/src/ads/05-test-test.md
@@ -4,4 +4,5 @@ handle: 05
 server: test.test
 tags: animals and the outdoors
 blurb: Duis interdum purus non iaculis convallis. Nunc mi lorem, consequat sed luctus vitae, lobortis in arcu.
+date: 2026-04-26
 ---
diff --git a/src/ads/06-test-test.md b/src/ads/06-test-test.md
index 078ac58..d884d0f 100644
--- a/src/ads/06-test-test.md
+++ b/src/ads/06-test-test.md
@@ -2,6 +2,7 @@
 title: fix your sink or toilet
 handle: 06
 server: test.test
-tags: home improvement and diy
+tags: repair and diy
 blurb: Aliquam justo justo, scelerisque a ligula sed, elementum pharetra quam. Ut augue nibh, finibus vel dui nec, sagittis bibendum leo. Quisque libero diam, maximus in dui ac, sollicitudin congue enim.
+date: 2026-04-27
 ---
diff --git a/src/ads/07-test-test.md b/src/ads/07-test-test.md
new file mode 100644
index 0000000..1c3feea
--- /dev/null
+++ b/src/ads/07-test-test.md
@@ -0,0 +1,8 @@
+---
+title: Navigating Workplace Transition
+handle: 07
+server: test.test
+tags: interpersonal and life
+blurb: Donec nisl ligula, mollis sit amet gravida eget, aliquam vitae nibh. Fusce diam nulla, interdum a ex a, semper lacinia elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia fermentum arcu, molestie ornare purus lobortis eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc convallis turpis nisi, nec volutpat dui semper at.
+date: 2026-04-28
+---
diff --git a/src/ads/inherentlee-flipping-rocks.md b/src/ads/inherentlee-flipping-rocks.md
index 30f3f71..7c32816 100644
--- a/src/ads/inherentlee-flipping-rocks.md
+++ b/src/ads/inherentlee-flipping-rocks.md
@@ -1,7 +1,8 @@
 ---
-title: intro web development and terminal basics
+title: introductory web development and terminal basics
 handle: inherentlee
 server: flipping.rocks
 tags: technology
 blurb: I'm happy to help you set up a personal or hobby site with HTML, CSS, and JS basics, or maybe a static site generator! Alternately, I'll talk about git and the terminal.
+date: 2026-04-29
 ---
diff --git a/src/ads/template.md b/src/ads/template.md
index 3b5fe35..f408ccd 100644
--- a/src/ads/template.md
+++ b/src/ads/template.md
@@ -4,4 +4,5 @@ handle:
 server:
 tags:
 blurb:
+date:
 ---
diff --git a/src/index.njk b/src/index.njk
index c97bd4d..c087662 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -1,18 +1,40 @@
 ---
 layout: base.njk
+title: Fediverse Skillshare Classifieds
 ---
+{% css %}{% include "css/home.css" %}{% endcss %}
 
-<h1>Fediverse Classifieds</h1>
+<div id="jump-links">
+  <h2>jump to...</h2>
+  <ul id="category-list">
+  {% for tag in collections | getKeys | removeCoreTags | sortAlphabetically %}
+    <li>
+      <a href="#{{ tag | slugify }}">{{ tag }}</a>
+    </li>
+  {% endfor %}
+  </ul>
+</div>
 
 <div id="ads">
   {% for tag in collections | getKeys | removeCoreTags | sortAlphabetically %}
-    <h2 class="category">{{ tag }}</h2>
-    <p class="tagline">{{ tag | getTagline }}</p>
-    {% for post in collections[tag] %}
-      <h3>{{ post.data.title }}</h3>
-      <a href="https://{{ post.data.server }}/@{{ post.data.handle }}"
-        target="_blank">@{{ post.data.handle }}@{{ post.data.server}}</a>
-      <p>{{ post.data.blurb }}</p>
-    {% endfor %}
+    <div class="category">
+      <div class="category-title">
+        <h2>{{ tag }}</h2>
+        <p>{{ tag | getTagline }}</p>
+      </div>
+      {% for ad in collections[tag] %}
+        <div class="ad">
+          <h3>{{ ad.data.title }}</h3>
+          <p class="blurb">
+            <a href="https://{{ ad.data.server }}/@{{ ad.data.handle }}"
+              target="_blank">@{{ ad.data.handle }}@{{ ad.data.server}}</a>
+            offers: {{ ad.data.blurb }}
+          </p>
+          <p class="listed-on">
+            listed on <time datetime="{{ ad.date | htmlDateString }}">{{ ad.date | readableDate() }}</time>
+          </p>
+        </div>
+      {% endfor %}
+    </div>
   {% endfor %}
 </div>
diff --git a/src/submit.njk b/src/submit.njk
new file mode 100644
index 0000000..1136273
--- /dev/null
+++ b/src/submit.njk
@@ -0,0 +1,21 @@
+---
+layout: base.njk
+title: Submit an Ad
+---
+
+<p>To submit to the Skillshare Classifieds, you'll need:</p>
+
+<ul>
+  <li>your fediverse handle</li>
+  <li>the most relevant category for your listing</li>
+  <li>a title for your offering</li>
+  <li>a short description</li>
+</ul>
+
+<p>See <a href="/">the home page</a> for inspiration.</p>
+
+<iframe class="airtable-embed"
+  src="https://airtable.com/embed/appbdRJ59MLprB1iC/pagfJTOl4KPwh7trd/form"
+  frameborder="0" onmousewheel="" width="100%" height="533"
+  style="background: transparent; border: 1px solid #ccc;">
+</iframe>