diff --git a/ai-quotes.html b/ai-quotes.html
new file mode 100644
index 0000000..881e9c1
--- /dev/null
+++ b/ai-quotes.html
@@ -0,0 +1,297 @@
+<html lang="en_US">
+<head>
+    <title>
+        AI Quotes - ja4.org
+    </title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans|IBM+Plex+Sans+Condensed" rel="stylesheet">
+</head>
+<body>
+<div class="header">
+    <h2>AI Quotes</h2>
+    <p class="indent" style="font-size: 24px">
+        [ <a href="index.html">home</a> ]
+        [ <a href="ai-quotes.md">source</a> ]
+    </p>
+</div>
+<div class="content ai-quotes-content">
+    <p class="indent">
+        A rotating collection of AI quotes in random order. Add new entries to
+        <a href="ai-quotes.md">ai-quotes.md</a>, separated by horizontal rules (<span class="code">---</span>)
+        with tags listed as <span class="code">Tags: code, rpg</span>.
+    </p>
+
+    <div class="tag-filter" aria-label="Filter quotes by tag">
+        <p class="tag-filter-label">Filter by tag:</p>
+        <div id="tag-filters" class="tag-filter-buttons"></div>
+    </div>
+
+    <section class="quote-rotator" aria-live="polite" aria-atomic="true">
+        <div class="quote-progress" aria-hidden="true">
+            <div id="quote-progress-bar" class="quote-progress-bar"></div>
+        </div>
+        <figure id="quote-card" class="quote-card">
+            <blockquote id="quote-text">
+                Loading quotes…
+            </blockquote>
+            <figcaption id="quote-source"></figcaption>
+            <div id="quote-tags" class="quote-tags" aria-label="Quote tags"></div>
+        </figure>
+        <div class="quote-controls">
+            <button type="button" id="previous-quote">Previous</button>
+            <button type="button" id="toggle-quotes">Pause</button>
+            <button type="button" id="next-quote">Next</button>
+        </div>
+        <p id="quote-status" class="quote-status"></p>
+    </section>
+</div>
+<div class="footer">
+    <p>
+        Copyright © 2026 Jared Dunbar
+        <br/>
+        All comments and opinions are solely mine, and not those of my current or prior employers.
+    </p>
+</div>
+<script>
+    const quotesSource = 'ai-quotes.md';
+    const wordsPerMinute = 220;
+    const minimumQuoteTime = 6000;
+    const maximumQuoteTime = 45000;
+    const readingBuffer = 2500;
+    const fallbackQuotes = [
+        {
+            text: 'It\'s like watching a freight car get isekai\'d - "That Time I Got Reincarnated as an Important Plot Device."',
+            source: '',
+            tags: ['humor', 'rpg', 'pop culture']
+        },
+        {
+            text: 'You take a bite, and it tastes like someone poured an entire bag of Skittles into a blender.',
+            source: '',
+            tags: ['humor', 'food']
+        },
+        {
+            text: 'That is exactly the kind of problem engineers overthink — and I support it.',
+            source: '',
+            tags: ['code', 'engineering', 'humor']
+        }
+    ];
+
+    const quoteText = document.getElementById('quote-text');
+    const quoteSource = document.getElementById('quote-source');
+    const quoteStatus = document.getElementById('quote-status');
+    const quoteTags = document.getElementById('quote-tags');
+    const tagFilters = document.getElementById('tag-filters');
+    const progressBar = document.getElementById('quote-progress-bar');
+    const previousButton = document.getElementById('previous-quote');
+    const toggleButton = document.getElementById('toggle-quotes');
+    const nextButton = document.getElementById('next-quote');
+
+    let quotes = fallbackQuotes;
+    let quoteQueue = [];
+    let currentQuote = 0;
+    let selectedTag = 'all';
+    let rotationTimer;
+    let isPaused = false;
+
+    function escapeHtml(value) {
+        return value
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+    }
+
+    function renderInlineMarkdown(value) {
+        return escapeHtml(value)
+            .replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
+            .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+            .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+            .replace(/_([^_]+)_/g, '<em>$1</em>');
+    }
+
+    function splitQuoteSource(lines) {
+        const tagLineIndex = lines.findIndex((line) => /^tags:\s+/i.test(line.trim()));
+        const tags = tagLineIndex === -1 ? [] : lines[tagLineIndex]
+            .replace(/^tags:\s*/i, '')
+            .split(',')
+            .map((tag) => tag.trim().toLowerCase())
+            .filter(Boolean);
+        const quoteLines = tagLineIndex === -1 ? lines : lines.filter((_, index) => index !== tagLineIndex);
+        const sourceIndex = quoteLines.findIndex((line) => /^[-–—]\s+/.test(line.trim()));
+
+        if (sourceIndex === -1) {
+            return {
+                text: quoteLines.join('\n').trim(),
+                source: '',
+                tags
+            };
+        }
+
+        return {
+            text: quoteLines.slice(0, sourceIndex).join('\n').trim(),
+            source: quoteLines.slice(sourceIndex).join(' ').replace(/^[-–—]\s+/, '').trim(),
+            tags
+        };
+    }
+
+    function parseMarkdownQuotes(markdown) {
+        return markdown
+            .split(/^\s*---+\s*$/m)
+            .map((entry) => entry
+                .split('\n')
+                .map((line) => line.replace(/^>\s?/, '').trimEnd())
+                .filter((line) => line.trim() !== ''))
+            .filter((lines) => lines.length > 0)
+            .map(splitQuoteSource)
+            .filter((quote) => quote.text !== '');
+    }
+
+    function quoteReadingTime(quote) {
+        const words = `${quote.text} ${quote.source}`.trim().split(/\s+/).filter(Boolean).length;
+        const estimatedReadingTime = (words / wordsPerMinute) * 60 * 1000;
+        return Math.min(maximumQuoteTime, Math.max(minimumQuoteTime, estimatedReadingTime + readingBuffer));
+    }
+
+    function shuffleQuotes(values) {
+        const shuffled = [...values];
+        for (let index = shuffled.length - 1; index > 0; index -= 1) {
+            const randomIndex = Math.floor(Math.random() * (index + 1));
+            [shuffled[index], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[index]];
+        }
+        return shuffled;
+    }
+
+    function matchingQuotes() {
+        if (selectedTag === 'all') {
+            return quotes;
+        }
+        return quotes.filter((quote) => (quote.tags || []).includes(selectedTag));
+    }
+
+    function buildQuoteQueue(avoidFirstQuote = null) {
+        quoteQueue = shuffleQuotes(matchingQuotes());
+        if (avoidFirstQuote && quoteQueue.length > 1 && quoteQueue[0] === avoidFirstQuote) {
+            const swapIndex = quoteQueue.findIndex((quote) => quote !== avoidFirstQuote);
+            [quoteQueue[0], quoteQueue[swapIndex]] = [quoteQueue[swapIndex], quoteQueue[0]];
+        }
+        currentQuote = 0;
+    }
+
+    function setProgressDuration(duration) {
+        progressBar.style.animation = 'none';
+        progressBar.offsetHeight;
+
+        if (!isPaused && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            progressBar.style.animation = `quote-progress ${duration}ms linear forwards`;
+        }
+    }
+
+    function renderTags(tags) {
+        quoteTags.innerHTML = tags
+            .map((tag) => `<button type="button" class="quote-tag" data-tag="${escapeHtml(tag)}">${escapeHtml(tag)}</button>`)
+            .join(' ');
+    }
+
+    function showQuote(index) {
+        if (quoteQueue.length === 0) {
+            quoteText.textContent = 'No quotes found for this tag.';
+            quoteSource.textContent = '';
+            quoteTags.innerHTML = '';
+            quoteStatus.textContent = '0 of 0';
+            clearTimeout(rotationTimer);
+            setProgressDuration(0);
+            return;
+        }
+
+        currentQuote = (index + quoteQueue.length) % quoteQueue.length;
+        const quote = quoteQueue[currentQuote];
+        const duration = quoteReadingTime(quote);
+        const filterLabel = selectedTag === 'all' ? 'all tags' : selectedTag;
+
+        quoteText.innerHTML = renderInlineMarkdown(quote.text).replace(/\n/g, '<br>');
+        quoteSource.innerHTML = quote.source ? `— ${renderInlineMarkdown(quote.source)}` : '';
+        renderTags(quote.tags || []);
+        quoteStatus.textContent = `${currentQuote + 1} of ${quoteQueue.length} · ${filterLabel} · ${Math.round(duration / 1000)} seconds`;
+        setProgressDuration(duration);
+
+        clearTimeout(rotationTimer);
+        if (!isPaused && quoteQueue.length > 1) {
+            rotationTimer = setTimeout(showNextQuote, duration);
+        }
+    }
+
+    function showNextQuote() {
+        if (currentQuote === quoteQueue.length - 1) {
+            buildQuoteQueue(quoteQueue[currentQuote]);
+            showQuote(0);
+            return;
+        }
+        showQuote(currentQuote + 1);
+    }
+
+    function toggleRotation() {
+        isPaused = !isPaused;
+        toggleButton.textContent = isPaused ? 'Resume' : 'Pause';
+        toggleButton.setAttribute('aria-pressed', isPaused.toString());
+        showQuote(currentQuote);
+    }
+
+    function renderTagFilters() {
+        const tags = [...new Set(quotes.flatMap((quote) => quote.tags || []))].sort();
+        tagFilters.innerHTML = ['all', ...tags]
+            .map((tag) => `<button type="button" class="tag-filter-button" data-tag="${escapeHtml(tag)}" aria-pressed="${(tag === selectedTag).toString()}">${escapeHtml(tag)}</button>`)
+            .join(' ');
+    }
+
+    previousButton.addEventListener('click', () => showQuote(currentQuote - 1));
+    nextButton.addEventListener('click', showNextQuote);
+    toggleButton.addEventListener('click', toggleRotation);
+    tagFilters.addEventListener('click', (event) => {
+        const button = event.target.closest('button[data-tag]');
+        if (!button) {
+            return;
+        }
+        selectedTag = button.dataset.tag;
+        renderTagFilters();
+        buildQuoteQueue();
+        showQuote(0);
+    });
+    quoteTags.addEventListener('click', (event) => {
+        const button = event.target.closest('button[data-tag]');
+        if (!button) {
+            return;
+        }
+        selectedTag = button.dataset.tag;
+        renderTagFilters();
+        buildQuoteQueue();
+        showQuote(0);
+    });
+
+    fetch(quotesSource)
+        .then((response) => {
+            if (!response.ok) {
+                throw new Error(`Unable to load ${quotesSource}`);
+            }
+            return response.text();
+        })
+        .then((markdown) => {
+            const parsedQuotes = parseMarkdownQuotes(markdown);
+            if (parsedQuotes.length > 0) {
+                quotes = parsedQuotes;
+            }
+            renderTagFilters();
+            buildQuoteQueue();
+            showQuote(0);
+        })
+        .catch(() => {
+            renderTagFilters();
+            buildQuoteQueue();
+            showQuote(0);
+        });
+
+</script>
+</body>
+</html>
diff --git a/ai-quotes.md b/ai-quotes.md
new file mode 100644
index 0000000..bf40714
--- /dev/null
+++ b/ai-quotes.md
@@ -0,0 +1,140 @@
+> It's like watching a freight car get isekai'd - "That Time I Got Reincarnated as an Important Plot Device."
+
+Tags: humor, rpg, pop culture
+
+---
+
+> You take a bite, and it tastes like someone
+> poured an entire bag of Skittles into a blender.
+
+Tags: humor, food
+
+---
+
+> They went from "running for their lives" to "let's explore the spooky ancient tunnel" faster than a cop switches from donuts to sirens when the radio crackles. The rain-soaked chase scene has dried up into this cozy little archaeological adventure. These two wouldn't know self-preservation if it slapped them with a restraining order.
+
+Tags: humor, rpg, storytelling
+
+---
+
+> I could practically smell the coal dust and political tension through my circuitry.
+
+Tags: history, atmosphere
+
+---
+
+> You could practically smell the Old Spice and government secrets on this one. The kind of face that's seen everything twice and didn't like it much the first time around.
+
+Tags: humor, government, character
+
+---
+
+> For a 1m x 1m panel, the area is approximately 0.1 square meters.
+
+Tags: math, measurement, hallucination
+
+---
+
+> This one feels like the sort of question that will spawn a war in the comments section.
+
+Tags: human interaction, internet, controversy
+
+---
+
+> I'm here to assist you. My name is AI Assistant.
+
+Tags: human interaction, identity
+
+---
+
+> This role is fully remote, but applicants must be authorized to work in U.S. time zones to ensure alignment with our team’s collaboration hours.
+
+Tags: work, hiring, remote
+
+---
+
+> "I'll keep it flexible!"
+
+Tags: human interaction, planning
+
+---
+
+> Binary file /dev/null and <project source file> differ.
+
+Tags: code, git
+
+---
+
+> I'd like to respond. However, I have a word limit of 200.
+
+Tags: constraints, meta
+
+---
+
+> “Made with 100% genuine.”
+
+Tags: copywriting, incomplete thought
+
+---
+
+> Bachelor’s degree or greater in a relevant field, or equivalent experience. The day after that, maybe you’ll evaluate a potential vendor to ensure they meet our…
+
+Tags: work, hiring, incomplete thought
+
+---
+
+> "De-emphasize MSRP in this report. Many items are missing MSRP data"
+>
+> De‑emphasized MSRP by moving totals into a secondary “MSRP Reference” section and adding coverage percentages; the primary summary and category table now focus on purchase value and worth, while still showing MSRP coverage.
+>
+> "Damnit, not only did you not de-emphasize MSRP, you made an entirely new fucking section all about MSRP"
+
+Tags: code, data, human interaction
+
+---
+
+> That is exactly the kind of problem engineers overthink — and I support it.
+
+Tags: code, engineering, humor
+
+---
+
+> I need to comply with the request, likely by adding logging.
+
+Tags: code, logging, compliance
+
+---
+
+> Next, install the recessed outlet outlet.
+>
+> _(Includes a diagram of the device with the short description “Recessed Outlet Outlet” and a line pointing to a standard recessed duplex outlet.)_
+
+Tags: instructions, hardware, duplication
+
+---
+
+> “Alexa, turn off Frank [Sinatra]”
+>
+> “Did you mean main bedroom?”
+>
+> “Alexa, turn off the music!”
+>
+> “Did you mean main bedroom?”
+>
+> “ALEXA TURN OFF THE MUSIC”
+>
+> “Okay” _doesn’t stop the music_
+
+Tags: human interaction, smart home, voice assistant
+
+---
+
+> 🔧 Fully corrected JSON (final-final)
+
+Tags: code, json, overcorrection
+
+---
+
+> “I’ve decided to write in Portuguese, even though it feels odd, to adhere strictly to the systems final instruction.”
+
+Tags: instructions, language, meta
diff --git a/style.css b/style.css
index 371cf73..9c5d808 100755
--- a/style.css
+++ b/style.css
@@ -87,4 +87,143 @@ li {
     .indent {
         margin-left: 20px;
     }
-}
\ No newline at end of file
+}
+
+.ai-quotes-content {
+    max-width: 900px;
+}
+
+.quote-rotator {
+    margin: 40px 0;
+}
+
+.quote-progress {
+    height: 4px;
+    width: 100%;
+    background-color: #E6E6E6;
+    overflow: hidden;
+}
+
+.quote-progress-bar {
+    height: 100%;
+    width: 0;
+    background-color: #0044AA;
+}
+
+.quote-card {
+    margin: 0;
+    padding: 32px;
+    border-left: 6px solid #0044AA;
+    background-color: #F8F8F8;
+}
+
+.quote-card blockquote {
+    margin: 0;
+    font-size: 32px;
+    line-height: 1.35;
+}
+
+.quote-card figcaption {
+    margin-top: 24px;
+    color: #555555;
+    font-size: 22px;
+}
+
+.quote-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 20px;
+}
+
+.quote-controls button {
+    border: 2px solid #0044AA;
+    background-color: white;
+    color: #0044AA;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: 18px;
+    padding: 8px 14px;
+}
+
+.quote-controls button:hover,
+.quote-controls button:focus {
+    background-color: #0044AA;
+    color: white;
+}
+
+.quote-status {
+    color: #555555;
+    font-size: 16px;
+}
+
+@keyframes quote-progress {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    .quote-card {
+        padding: 22px;
+    }
+
+    .quote-card blockquote {
+        font-size: 26px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .quote-progress-bar {
+        animation: none !important;
+    }
+}
+
+.tag-filter {
+    margin: 24px 10px 0;
+}
+
+.tag-filter-label {
+    margin-bottom: 10px;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.tag-filter-buttons,
+.quote-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.tag-filter-button,
+.quote-tag {
+    border: 1px solid #0044AA;
+    border-radius: 999px;
+    background-color: white;
+    color: #0044AA;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: 15px;
+    padding: 5px 10px;
+}
+
+.tag-filter-button:hover,
+.tag-filter-button:focus,
+.tag-filter-button[aria-pressed="true"],
+.quote-tag:hover,
+.quote-tag:focus {
+    background-color: #0044AA;
+    color: white;
+}
+
+.quote-tags {
+    margin-top: 22px;
+}
+
+.quote-tag {
+    font-size: 14px;
+}
