diff --git a/demo/index.html b/demo/index.html
index c67b624..e97aa2a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -472,6 +472,7 @@ <h3>Pendo Demo Controls</h3>
         <button class="demo-btn" onclick="showGuide('nps-survey')">Show NPS Survey</button>
         <button class="demo-btn" onclick="showGuide('feedback')">Show Feedback Poll</button>
         <button class="demo-btn" onclick="showGuide('banner')">Show Banner</button>
+        <button class="demo-btn" onclick="showGuide('yes-no-poll')">Show Yes/No Poll</button>
     </div>
 
     <!-- Load guide-components -->
@@ -483,6 +484,9 @@ <h3>Pendo Demo Controls</h3>
     <script src="/demo/mock-guides.js"></script>
 
     <script>
+        // Register guide-components custom elements
+        PendoGuideComponents.registerGuideComponents();
+
         // Initialize mock pendo
         window.pendo = new MockPendo({
             visitor: { id: 'demo-visitor-123' },
diff --git a/demo/mock-guides.js b/demo/mock-guides.js
index dd9441c..6946b9e 100644
--- a/demo/mock-guides.js
+++ b/demo/mock-guides.js
@@ -269,6 +269,29 @@ const mockGuides = [
                             <pendo-paragraph>On a scale of 1-10, how easy was the onboarding process?</pendo-paragraph>
                             <pendo-number-scale poll-id="ease-rating" min="1" max="10" low-label="Very Difficult" high-label="Very Easy"></pendo-number-scale>
                         </pendo-guide-content>
+                        <pendo-guide-footer>
+                            <pendo-button action="previous-step" variant="secondary">Back</pendo-button>
+                            <pendo-button action="next-step" variant="primary">Continue</pendo-button>
+                        </pendo-guide-footer>
+                    </pendo-guide>
+                `
+            },
+            {
+                id: 'feedback-step-4',
+                layoutType: 'lightbox',
+                htmlContent: `
+                    <pendo-guide>
+                        <pendo-close-button></pendo-close-button>
+                        <pendo-guide-content>
+                            <pendo-title>Tell Us About You</pendo-title>
+                            <pendo-paragraph>What is your primary role?</pendo-paragraph>
+                            <pendo-pick-list poll-id="role-select" display="select"
+                                options='{"pm":"Product Manager","eng":"Engineer","design":"Designer","qa":"QA","other":"Other"}'
+                                placeholder="Choose your role…"></pendo-pick-list>
+                            <pendo-paragraph style="margin-top: 16px;">Which feature do you use most?</pendo-paragraph>
+                            <pendo-pick-list poll-id="feature-pick" display="radio"
+                                options='{"dash":"Dashboard","reports":"Reports","integrations":"Integrations","admin":"Admin Settings"}'></pendo-pick-list>
+                        </pendo-guide-content>
                         <pendo-guide-footer>
                             <pendo-button action="previous-step" variant="secondary">Back</pendo-button>
                             <pendo-button action="dismiss" variant="primary">Submit</pendo-button>
@@ -339,6 +362,74 @@ const mockGuides = [
                 fontColor: '#ffffff'
             }
         }
+    },
+
+    // Yes/No Poll - PositiveNegative poll type
+    {
+        id: 'yes-no-poll',
+        name: 'Yes/No Poll',
+        steps: [
+            {
+                id: 'yes-no-step-1',
+                layoutType: 'lightbox',
+                htmlContent: `
+                    <pendo-guide>
+                        <pendo-close-button></pendo-close-button>
+                        <pendo-guide-content>
+                            <pendo-title>Quick Question</pendo-title>
+                            <pendo-yes-no
+                                poll-id="feature-useful"
+                                question="Did you find this feature helpful?"
+                                yes-label="Yes, very helpful"
+                                no-label="Not really">
+                            </pendo-yes-no>
+                        </pendo-guide-content>
+                        <pendo-guide-footer>
+                            <pendo-button action="next-step" variant="primary">Next</pendo-button>
+                        </pendo-guide-footer>
+                    </pendo-guide>
+                `
+            },
+            {
+                id: 'yes-no-step-2',
+                layoutType: 'lightbox',
+                htmlContent: `
+                    <pendo-guide>
+                        <pendo-close-button></pendo-close-button>
+                        <pendo-guide-content>
+                            <pendo-title>Thumbs Up or Down?</pendo-title>
+                            <pendo-yes-no
+                                poll-id="thumbs-rating"
+                                question="Would you recommend this to a colleague?"
+                                display="thumbs">
+                            </pendo-yes-no>
+                        </pendo-guide-content>
+                        <pendo-guide-footer>
+                            <pendo-button action="dismiss" variant="primary">Done</pendo-button>
+                        </pendo-guide-footer>
+                    </pendo-guide>
+                `
+            }
+        ],
+        buildingBlocks: {
+            container: {
+                background: '#ffffff',
+                borderRadius: '12px',
+                shadowColor: 'rgba(0, 0, 0, 0.15)',
+                shadowOffsetVertical: '8px',
+                shadowRadius: '24px'
+            },
+            primaryButton: {
+                background: '#4F46E5',
+                fontColor: '#ffffff'
+            },
+            title: {
+                fontColor: '#1f2937'
+            },
+            paragraph: {
+                fontColor: '#6b7280'
+            }
+        }
     }
 ];
 
diff --git a/demo/mock-pendo.js b/demo/mock-pendo.js
index 7f6e6a5..6bcb055 100644
--- a/demo/mock-pendo.js
+++ b/demo/mock-pendo.js
@@ -479,33 +479,38 @@ class MockPendo {
 
         // Listen for pendo-action events
         container.addEventListener('pendo-action', (e) => {
-            const { action, params } = e.detail;
-            console.log('[MockPendo] Action:', action, params);
-
-            switch (action) {
-                case 'next-step':
-                    step._guide.advanceStep();
-                    break;
-
-                case 'previous-step':
-                    step._guide.previousStep();
-                    break;
-
-                case 'dismiss':
-                    step._guide.hide();
-                    break;
-
-                case 'link':
-                    if (params?.url) {
-                        window.open(params.url, params.target || '_blank');
-                    }
-                    break;
-
-                case 'launch-guide':
-                    if (params?.guideId) {
-                        pendo.showGuideById(params.guideId);
-                    }
-                    break;
+            const { actions } = e.detail;
+            console.log('[MockPendo] Actions:', actions);
+
+            // Process each action in the array
+            for (const actionObj of actions) {
+                const { action } = actionObj;
+
+                switch (action) {
+                    case 'next-step':
+                        step._guide.advanceStep();
+                        break;
+
+                    case 'previous-step':
+                        step._guide.previousStep();
+                        break;
+
+                    case 'dismiss':
+                        step._guide.hide();
+                        break;
+
+                    case 'link':
+                        if (actionObj.url) {
+                            window.open(actionObj.url, actionObj.target || '_blank');
+                        }
+                        break;
+
+                    case 'launch-guide':
+                        if (actionObj.guideId) {
+                            pendo.showGuideById(actionObj.guideId);
+                        }
+                        break;
+                }
             }
         });
 
diff --git a/package.json b/package.json
index 831a7a0..befb7f1 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "serve": "npx serve -l 3001",
-    "harness": "npm run build && npx serve -l 3001",
+    "serve": "npx serve -l 8082",
+    "harness": "npm run build && npx serve -l 8082",
     "test": "vitest",
     "test:a11y": "vitest run --grep a11y"
   },
diff --git a/src/elements/pendo-button.js b/src/elements/pendo-button.js
index bb419c3..7fd4e9f 100644
--- a/src/elements/pendo-button.js
+++ b/src/elements/pendo-button.js
@@ -138,6 +138,4 @@ class PendoButton extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-button', PendoButton);
-
 export { PendoButton };
diff --git a/src/elements/pendo-close-button.js b/src/elements/pendo-close-button.js
index 3241dee..0d7135e 100644
--- a/src/elements/pendo-close-button.js
+++ b/src/elements/pendo-close-button.js
@@ -37,6 +37,4 @@ class PendoCloseButton extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-close-button', PendoCloseButton);
-
 export { PendoCloseButton };
diff --git a/src/elements/pendo-divider.js b/src/elements/pendo-divider.js
index 1ce9ecc..89777c5 100644
--- a/src/elements/pendo-divider.js
+++ b/src/elements/pendo-divider.js
@@ -13,6 +13,4 @@ class PendoDivider extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-divider', PendoDivider);
-
 export { PendoDivider };
diff --git a/src/elements/pendo-guide.js b/src/elements/pendo-guide.js
index d126d30..400bd7c 100644
--- a/src/elements/pendo-guide.js
+++ b/src/elements/pendo-guide.js
@@ -118,6 +118,4 @@ class PendoGuide extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-guide', PendoGuide);
-
 export { PendoGuide };
diff --git a/src/elements/pendo-image.js b/src/elements/pendo-image.js
index 4ced0c9..077b425 100644
--- a/src/elements/pendo-image.js
+++ b/src/elements/pendo-image.js
@@ -41,6 +41,4 @@ class PendoImage extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-image', PendoImage);
-
 export { PendoImage };
diff --git a/src/elements/pendo-input.js b/src/elements/pendo-input.js
index 0c0a1bb..f3c02d2 100644
--- a/src/elements/pendo-input.js
+++ b/src/elements/pendo-input.js
@@ -232,4 +232,3 @@ export class PendoInput extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-input', PendoInput);
diff --git a/src/elements/pendo-link.js b/src/elements/pendo-link.js
index edd792c..e1acc5c 100644
--- a/src/elements/pendo-link.js
+++ b/src/elements/pendo-link.js
@@ -40,4 +40,3 @@ export class PendoLink extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-link', PendoLink);
diff --git a/src/elements/pendo-list.js b/src/elements/pendo-list.js
index 04c086a..b10518d 100644
--- a/src/elements/pendo-list.js
+++ b/src/elements/pendo-list.js
@@ -69,5 +69,3 @@ export class PendoListItem extends PendoBaseElement {
     // Content is processed by parent PendoList
 }
 
-customElements.define('pendo-list', PendoList);
-customElements.define('pendo-list-item', PendoListItem);
diff --git a/src/elements/pendo-text.js b/src/elements/pendo-text.js
index 22da89f..e88fee5 100644
--- a/src/elements/pendo-text.js
+++ b/src/elements/pendo-text.js
@@ -12,6 +12,4 @@ class PendoText extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-text', PendoText);
-
 export { PendoText };
diff --git a/src/elements/pendo-title.js b/src/elements/pendo-title.js
index 73ce3b3..63f7609 100644
--- a/src/elements/pendo-title.js
+++ b/src/elements/pendo-title.js
@@ -21,6 +21,4 @@ class PendoTitle extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-title', PendoTitle);
-
 export { PendoTitle };
diff --git a/src/elements/pendo-video.js b/src/elements/pendo-video.js
index 8782e06..273dede 100644
--- a/src/elements/pendo-video.js
+++ b/src/elements/pendo-video.js
@@ -101,6 +101,4 @@ class PendoVideo extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-video', PendoVideo);
-
 export { PendoVideo };
diff --git a/src/index.js b/src/index.js
index 5948453..ce33ad6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@
  * @pendo/guide-components
  *
  * Custom elements for rendering Pendo HTML guides.
- * Import this module to register all pendo-* custom elements.
+ * Call registerGuideComponents() to register all pendo-* custom elements.
  */
 
 // Base class (exported for extension)
@@ -31,9 +31,14 @@ export { PendoNps } from './polls/pendo-nps.js';
 export { PendoNumberScale } from './polls/pendo-number-scale.js';
 export { PendoOpenText } from './polls/pendo-open-text.js';
 export { PendoEmojiScale } from './polls/pendo-emoji-scale.js';
+export { PendoPickList } from './polls/pendo-pick-list.js';
+export { PendoYesNo } from './polls/pendo-yes-no.js';
 
 // Configuration API
 export { configurePendoComponents } from './configure.js';
 
+// Registration (deferred — consumers call this when ready)
+export { registerGuideComponents } from './register.js';
+
 // Import styles (will be extracted by build)
 import './styles/defaults.css';
diff --git a/src/polls/pendo-emoji-scale.js b/src/polls/pendo-emoji-scale.js
index f920885..e60ecf3 100644
--- a/src/polls/pendo-emoji-scale.js
+++ b/src/polls/pendo-emoji-scale.js
@@ -122,4 +122,3 @@ export class PendoEmojiScale extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-emoji-scale', PendoEmojiScale);
diff --git a/src/polls/pendo-nps.js b/src/polls/pendo-nps.js
index 4bacbd1..3b192cf 100644
--- a/src/polls/pendo-nps.js
+++ b/src/polls/pendo-nps.js
@@ -120,4 +120,3 @@ export class PendoNps extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-nps', PendoNps);
diff --git a/src/polls/pendo-number-scale.js b/src/polls/pendo-number-scale.js
index 0264464..8ec48aa 100644
--- a/src/polls/pendo-number-scale.js
+++ b/src/polls/pendo-number-scale.js
@@ -125,4 +125,3 @@ export class PendoNumberScale extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-number-scale', PendoNumberScale);
diff --git a/src/polls/pendo-open-text.js b/src/polls/pendo-open-text.js
index 84b16b7..8dae0b6 100644
--- a/src/polls/pendo-open-text.js
+++ b/src/polls/pendo-open-text.js
@@ -137,4 +137,3 @@ export class PendoOpenText extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-open-text', PendoOpenText);
diff --git a/src/polls/pendo-pick-list.js b/src/polls/pendo-pick-list.js
new file mode 100644
index 0000000..987509b
--- /dev/null
+++ b/src/polls/pendo-pick-list.js
@@ -0,0 +1,159 @@
+import { PendoBaseElement } from '../base-element.js';
+
+/**
+ * <pendo-pick-list> - Multiple choice poll component (select dropdown or radio buttons)
+ *
+ * Renders a PickList poll as either a <select> dropdown or radio button group,
+ * controlled by the `display` attribute.
+ *
+ * Attributes:
+ * - question: The question text to display
+ * - poll-id: The poll identifier (injected by backend)
+ * - display: Render mode — "select" (default) or "radio"
+ * - options: JSON string mapping response IDs to display labels
+ *            e.g. '{"id1":"Option A","id2":"Option B"}'
+ * - value: Pre-selected response ID
+ * - placeholder: Placeholder text for select mode (default: "Select…")
+ *
+ * Events:
+ * - pendo-response: Fired when user picks an option { pollId, value, type: 'PickList' }
+ *
+ * Example (dropdown):
+ *   <pendo-pick-list question="What is your role?"
+ *       options='{"pm":"Product Manager","eng":"Engineer"}'></pendo-pick-list>
+ *
+ * Example (radio):
+ *   <pendo-pick-list question="What is your role?" display="radio"
+ *       options='{"pm":"Product Manager","eng":"Engineer"}'></pendo-pick-list>
+ */
+export class PendoPickList extends PendoBaseElement {
+    connectedCallback() {
+        this.pollId = this.getAttribute('poll-id') || this.generateId();
+        this.question = this.getAttribute('question') || '';
+        this.display = this.getAttribute('display') || 'select';
+        this.placeholder = this.getAttribute('placeholder') || 'Select\u2026';
+        this.value = this.getAttribute('value') || null;
+
+        this._options = {};
+        try {
+            this._options = JSON.parse(this.getAttribute('options') || '{}');
+        } catch (e) {
+            // invalid JSON — render with no options
+        }
+
+        this.classList.add('pendo-poll', 'pendo-pick-list');
+        this.render();
+    }
+
+    render() {
+        const questionId = this.generateId();
+
+        if (this.display === 'radio') {
+            this.innerHTML = `
+                <fieldset class="pendo-poll__fieldset" role="radiogroup" aria-labelledby="${questionId}">
+                    ${this.question ? `<legend id="${questionId}" class="pendo-poll__question">${this.escapeHtml(this.question)}</legend>` : ''}
+                    <div class="pendo-pick-list__options">
+                        ${this.renderRadioOptions()}
+                    </div>
+                </fieldset>
+            `;
+            this.setupRadioListeners();
+        } else {
+            const selectId = this.generateId();
+            this.innerHTML = `
+                <div class="pendo-pick-list__wrapper">
+                    ${this.question ? `<label id="${questionId}" for="${selectId}" class="pendo-poll__question">${this.escapeHtml(this.question)}</label>` : ''}
+                    <select id="${selectId}" class="pendo-pick-list__select" aria-labelledby="${this.question ? questionId : ''}">
+                        <option value="" disabled ${!this.value ? 'selected' : ''}>${this.escapeHtml(this.placeholder)}</option>
+                        ${this.renderSelectOptions()}
+                    </select>
+                </div>
+            `;
+            this.setupSelectListeners();
+        }
+    }
+
+    renderSelectOptions() {
+        let html = '';
+        for (const [id, label] of Object.entries(this._options)) {
+            const isSelected = this.value === id;
+            html += `<option value="${this.escapeHtml(id)}" ${isSelected ? 'selected' : ''}>${this.escapeHtml(label)}</option>`;
+        }
+        return html;
+    }
+
+    renderRadioOptions() {
+        let html = '';
+        for (const [id, label] of Object.entries(this._options)) {
+            const isSelected = this.value === id;
+            const inputId = `${this.pollId}-opt-${id}`;
+            html += `
+                <label class="pendo-pick-list__option ${isSelected ? 'pendo-pick-list__option--selected' : ''}"
+                       data-value="${this.escapeHtml(id)}">
+                    <input type="radio"
+                           name="${this.pollId}"
+                           id="${inputId}"
+                           value="${this.escapeHtml(id)}"
+                           ${isSelected ? 'checked' : ''}
+                           class="pendo-sr-only">
+                    <span class="pendo-pick-list__option-label">${this.escapeHtml(label)}</span>
+                </label>
+            `;
+        }
+        return html;
+    }
+
+    setupSelectListeners() {
+        const select = this.querySelector('select');
+        select.addEventListener('change', () => {
+            this.selectOption(select.value);
+        });
+    }
+
+    setupRadioListeners() {
+        const options = this.querySelectorAll('.pendo-pick-list__option');
+
+        options.forEach((option) => {
+            const value = option.dataset.value;
+
+            option.addEventListener('click', () => this.selectOption(value));
+
+            const input = option.querySelector('input');
+            input.addEventListener('change', () => this.selectOption(value));
+        });
+    }
+
+    selectOption(value) {
+        this.value = value;
+
+        if (this.display === 'radio') {
+            const options = this.querySelectorAll('.pendo-pick-list__option');
+            options.forEach((option) => {
+                option.classList.toggle('pendo-pick-list__option--selected', option.dataset.value === value);
+            });
+        }
+
+        // Emit response — value is the response ID, backend maps to label
+        this.emitResponse(this.pollId, value, 'PickList');
+    }
+
+    /**
+     * Get the current selected value (response ID)
+     */
+    getValue() {
+        return this.value;
+    }
+
+    /**
+     * Set the value programmatically
+     */
+    setValue(value) {
+        this.selectOption(value);
+        if (this.display === 'select') {
+            const select = this.querySelector('select');
+            if (select) {
+                select.value = value;
+            }
+        }
+    }
+}
diff --git a/src/polls/pendo-star-rating.js b/src/polls/pendo-star-rating.js
index 86f747e..9a9b726 100644
--- a/src/polls/pendo-star-rating.js
+++ b/src/polls/pendo-star-rating.js
@@ -119,4 +119,3 @@ export class PendoStarRating extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-star-rating', PendoStarRating);
diff --git a/src/polls/pendo-yes-no.js b/src/polls/pendo-yes-no.js
new file mode 100644
index 0000000..d9605c0
--- /dev/null
+++ b/src/polls/pendo-yes-no.js
@@ -0,0 +1,116 @@
+import { PendoBaseElement } from '../base-element.js';
+
+/**
+ * <pendo-yes-no> - Yes/No (PositiveNegative) poll component
+ *
+ * Renders a binary choice poll as text buttons or thumbs-up/down icons.
+ *
+ * Attributes:
+ * - question: The question text to display
+ * - poll-id: The poll identifier (injected by backend)
+ * - display: Render mode — "button" (default) or "thumbs"
+ * - yes-label: Label for the affirmative option (default: "Yes")
+ * - no-label: Label for the negative option (default: "No")
+ * - value: Pre-selected value ("0" or "1")
+ *
+ * Events:
+ * - pendo-response: Fired when user picks an option { pollId, value, type: 'PositiveNegative' }
+ *   value is numeric: 1 for yes, 0 for no
+ *
+ * Example (buttons):
+ *   <pendo-yes-no question="Did you find this helpful?"></pendo-yes-no>
+ *
+ * Example (thumbs):
+ *   <pendo-yes-no question="Was this useful?" display="thumbs"></pendo-yes-no>
+ */
+export class PendoYesNo extends PendoBaseElement {
+    connectedCallback() {
+        this.pollId = this.getAttribute('poll-id') || this.generateId();
+        this.question = this.getAttribute('question') || '';
+        this.display = this.getAttribute('display') || 'button';
+        this.yesLabel = this.getAttribute('yes-label') || 'Yes';
+        this.noLabel = this.getAttribute('no-label') || 'No';
+        this.value = this.hasAttribute('value') ? parseInt(this.getAttribute('value'), 10) : null;
+
+        this.classList.add('pendo-poll', 'pendo-yes-no');
+        if (this.display === 'thumbs') {
+            this.classList.add('pendo-yes-no--thumbs');
+        }
+        this.render();
+    }
+
+    render() {
+        const questionId = this.generateId();
+
+        this.innerHTML = `
+            <fieldset class="pendo-poll__fieldset" role="radiogroup" aria-labelledby="${questionId}">
+                ${this.question ? `<legend id="${questionId}" class="pendo-poll__question">${this.escapeHtml(this.question)}</legend>` : ''}
+                <div class="pendo-yes-no__options">
+                    ${this.renderOption(1, this.yesLabel)}
+                    ${this.renderOption(0, this.noLabel)}
+                </div>
+            </fieldset>
+        `;
+
+        this.setupEventListeners();
+    }
+
+    renderOption(value, label) {
+        const isSelected = this.value === value;
+        const inputId = `${this.pollId}-opt-${value}`;
+        const isThumbs = this.display === 'thumbs';
+
+        const content = isThumbs
+            ? `<svg class="pendo-yes-no__icon${value === 0 ? ' pendo-yes-no__icon--down' : ''}" viewBox="0 0 24 24" aria-hidden="true">
+                   <path d="M2 20h2V10H2v10zm20-9a2 2 0 0 0-2-2h-6.31l.95-4.57.03-.32a1.49 1.49 0 0 0-.44-1.06L13.17 2 7.59 7.59C7.22 7.95 7 8.45 7 9v10a2 2 0 0 0 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/>
+               </svg>
+               <span class="pendo-sr-only">${this.escapeHtml(label)}</span>`
+            : `<span class="pendo-yes-no__option-label">${this.escapeHtml(label)}</span>`;
+
+        return `
+            <label class="pendo-yes-no__option ${isSelected ? 'pendo-yes-no__option--selected' : ''}"
+                   data-value="${value}">
+                <input type="radio"
+                       name="${this.pollId}"
+                       id="${inputId}"
+                       value="${value}"
+                       ${isSelected ? 'checked' : ''}
+                       ${isThumbs ? `aria-label="${this.escapeHtml(label)}"` : ''}
+                       class="pendo-sr-only">
+                ${content}
+            </label>
+        `;
+    }
+
+    setupEventListeners() {
+        const options = this.querySelectorAll('.pendo-yes-no__option');
+
+        options.forEach((option) => {
+            const value = parseInt(option.dataset.value, 10);
+
+            option.addEventListener('click', () => this.selectOption(value));
+
+            const input = option.querySelector('input');
+            input.addEventListener('change', () => this.selectOption(value));
+        });
+    }
+
+    selectOption(value) {
+        this.value = value;
+
+        const options = this.querySelectorAll('.pendo-yes-no__option');
+        options.forEach((option) => {
+            option.classList.toggle('pendo-yes-no__option--selected', parseInt(option.dataset.value, 10) === value);
+        });
+
+        this.emitResponse(this.pollId, value, 'PositiveNegative');
+    }
+
+    getValue() {
+        return this.value;
+    }
+
+    setValue(value) {
+        this.selectOption(value);
+    }
+}
diff --git a/src/register.js b/src/register.js
new file mode 100644
index 0000000..4aa5839
--- /dev/null
+++ b/src/register.js
@@ -0,0 +1,52 @@
+import { PendoGuide } from './elements/pendo-guide.js';
+import { PendoTitle } from './elements/pendo-title.js';
+import { PendoText } from './elements/pendo-text.js';
+import { PendoButton } from './elements/pendo-button.js';
+import { PendoCloseButton } from './elements/pendo-close-button.js';
+import { PendoImage } from './elements/pendo-image.js';
+import { PendoDivider } from './elements/pendo-divider.js';
+import { PendoVideo } from './elements/pendo-video.js';
+import { PendoLink } from './elements/pendo-link.js';
+import { PendoList, PendoListItem } from './elements/pendo-list.js';
+import { PendoInput } from './elements/pendo-input.js';
+import { PendoStarRating } from './polls/pendo-star-rating.js';
+import { PendoNps } from './polls/pendo-nps.js';
+import { PendoNumberScale } from './polls/pendo-number-scale.js';
+import { PendoOpenText } from './polls/pendo-open-text.js';
+import { PendoEmojiScale } from './polls/pendo-emoji-scale.js';
+import { PendoPickList } from './polls/pendo-pick-list.js';
+import { PendoYesNo } from './polls/pendo-yes-no.js';
+
+const components = [
+    ['pendo-guide', PendoGuide],
+    ['pendo-title', PendoTitle],
+    ['pendo-text', PendoText],
+    ['pendo-button', PendoButton],
+    ['pendo-close-button', PendoCloseButton],
+    ['pendo-image', PendoImage],
+    ['pendo-divider', PendoDivider],
+    ['pendo-video', PendoVideo],
+    ['pendo-link', PendoLink],
+    ['pendo-list', PendoList],
+    ['pendo-list-item', PendoListItem],
+    ['pendo-input', PendoInput],
+    ['pendo-star-rating', PendoStarRating],
+    ['pendo-nps', PendoNps],
+    ['pendo-number-scale', PendoNumberScale],
+    ['pendo-open-text', PendoOpenText],
+    ['pendo-emoji-scale', PendoEmojiScale],
+    ['pendo-pick-list', PendoPickList],
+    ['pendo-yes-no', PendoYesNo]
+];
+
+/**
+ * Register all pendo-* custom elements.
+ * Safe to call multiple times — skips already-registered elements.
+ */
+export function registerGuideComponents() {
+    components.forEach(function([name, ctor]) {
+        if (!customElements.get(name)) {
+            customElements.define(name, ctor);
+        }
+    });
+}
diff --git a/src/styles/defaults.css b/src/styles/defaults.css
index 859e0fb..f6645b3 100644
--- a/src/styles/defaults.css
+++ b/src/styles/defaults.css
@@ -663,6 +663,77 @@ select.pendo-input__field {
     color: var(--pendo-text-muted);
 }
 
+/* =============================================================================
+   pendo-yes-no
+   ============================================================================= */
+
+.pendo-yes-no__options {
+    display: flex;
+    gap: 8px;
+}
+
+.pendo-yes-no__option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: var(--pendo-spacing-xs) var(--pendo-spacing-sm);
+    border: 1px solid var(--pendo-border);
+    border-radius: calc(var(--pendo-radius) / 2);
+    background: var(--pendo-bg);
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.pendo-yes-no__option:hover {
+    border-color: var(--pendo-primary);
+}
+
+.pendo-yes-no__option--selected {
+    background: var(--pendo-primary);
+    border-color: var(--pendo-primary);
+    color: #ffffff;
+}
+
+.pendo-yes-no__option:focus-within {
+    outline: 2px solid var(--pendo-focus);
+    outline-offset: 2px;
+}
+
+.pendo-yes-no__option-label {
+    font-size: 0.9375rem;
+    font-weight: 500;
+}
+
+/* Thumbs mode */
+
+.pendo-yes-no--thumbs .pendo-yes-no__option {
+    flex: 0 0 auto;
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border-radius: 50%;
+}
+
+.pendo-yes-no--thumbs .pendo-yes-no__options {
+    gap: 12px;
+    justify-content: center;
+}
+
+.pendo-yes-no__icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: currentColor;
+}
+
+.pendo-yes-no__icon--down {
+    transform: scaleY(-1);
+}
+
+.pendo-yes-no__option--selected .pendo-yes-no__icon {
+    fill: #ffffff;
+}
+
 /* =============================================================================
    pendo-number-scale
    ============================================================================= */
diff --git a/test/pendo-button.test.js b/test/pendo-button.test.js
index 3be1435..cc050ad 100644
--- a/test/pendo-button.test.js
+++ b/test/pendo-button.test.js
@@ -3,6 +3,9 @@
  */
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { PendoButton } from '../src/elements/pendo-button.js';
+import { registerGuideComponents } from '../src/register.js';
+
+registerGuideComponents();
 
 describe('PendoButton', () => {
     describe('parseAction', () => {