diff --git a/package-lock.json b/package-lock.json
index 0744afb24..b87dc8cbe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,8 @@
       "name": "code-sandbox",
       "version": "0.0.0",
       "dependencies": {
-        "@abgov/react-components": "5.0.0-alpha.5",
-        "@abgov/web-components": "1.17.0-alpha.105",
+        "@abgov/react-components": "5.0.0-alpha.8",
+        "@abgov/web-components": "1.17.0-alpha.109",
         "@faker-js/faker": "^8.3.1",
         "highlight.js": "^11.8.0",
         "react": "^18.2.0",
@@ -41,9 +41,9 @@
       }
     },
     "node_modules/@abgov/react-components": {
-      "version": "5.0.0-alpha.5",
-      "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-5.0.0-alpha.5.tgz",
-      "integrity": "sha512-EJDqQ5Wr/eny+CnmydLeRjZmyrMJZqQL4zDBDwKw4Cnw1HAYf8tKBlRJ/GD8S5ty3iA78ww+v4NQ/8lYW2vuBg==",
+      "version": "5.0.0-alpha.8",
+      "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-5.0.0-alpha.8.tgz",
+      "integrity": "sha512-1yPMcfRfWYFiGTxNMghPcehdOGsbDMbVWKCQRDSM7DiWB4XGd0G6pcibyNWBHYswCHKczedIVTllspWRrQ9TCg==",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0",
         "react": "^17.0.0 || ^18.0.0",
@@ -51,9 +51,9 @@
       }
     },
     "node_modules/@abgov/web-components": {
-      "version": "1.17.0-alpha.105",
-      "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.17.0-alpha.105.tgz",
-      "integrity": "sha512-zRjN5nkcuKMHU6WRExWvw+hAb9N1K8Rym0llTRO4xpXYs3x2/mBM1XN6f6V0wMC4UkWUNWHSQMZccgct1bHfgw==",
+      "version": "1.17.0-alpha.109",
+      "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.17.0-alpha.109.tgz",
+      "integrity": "sha512-RfJLrWGXt616qJaJ2NzTYz75q080IssAYnhT2ZOg/VgVgvBSLvk/36CDioMslQLDrdJB8rrdEuCllrSd39HkUQ==",
       "peerDependencies": {
         "@sveltejs/vite-plugin-svelte": "3.x",
         "glob": "10.x",
diff --git a/package.json b/package.json
index 82c96a078..760c971ae 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,8 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "5.0.0-alpha.5",
-    "@abgov/web-components": "1.17.0-alpha.105",
+    "@abgov/react-components": "5.0.0-alpha.8",
+    "@abgov/web-components": "1.17.0-alpha.109",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "react": "^18.2.0",
diff --git a/src/routes/components/MicrositeHeader.tsx b/src/routes/components/MicrositeHeader.tsx
index 8c12ed8d8..b5d2a894b 100644
--- a/src/routes/components/MicrositeHeader.tsx
+++ b/src/routes/components/MicrositeHeader.tsx
@@ -14,14 +14,12 @@ import {
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { useState } from "react";
 import { ComponentContent } from "@components/component-content/ComponentContent";
-
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 const componentName = "Microsite header";
 const description =
   "Communicate what stage the service is at, connect to <a href='https://www.alberta.ca' target='_blank'>Alberta.ca</a>, and gather feedback on your service.";
 const componentCategory = Category.STRUCTURE_AND_NAVIGATION;
-const relatedComponents = [
-  { link: "/components/header", name: "Header" },
-];
+const relatedComponents = [{ link: "/components/header", name: "Header" }];
 type ComponentPropsType = GoAHeaderProps;
 type CastingType = {
   // add any required props here
@@ -107,6 +105,26 @@ export default function MicrositeHeaderPage() {
       description: "For internal header urls sets target='_self'",
       defaultValue: "blank",
     },
+    {
+      name: "hasfeedbackhandler",
+      type: "boolean",
+      lang: "angular",
+      defaultValue: "false",
+      description:
+        "Set to true to handle the feedback click via _feedbackClick custom event handler.",
+    },
+    {
+      name: "_feedbackClick",
+      lang: "angular",
+      type: "CustomEvent",
+      description: "_feedbackClick function invoked when feedback is clicked.",
+    },
+    {
+      name: "onFeedbackClick",
+      lang: "react",
+      type: "() => void",
+      description: "onFeedbackClick function invoked when feedback is clicked.",
+    },
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -114,6 +132,11 @@ export default function MicrositeHeaderPage() {
     setMicrositeHeaderBindings(bindings);
   }
 
+  const onClick = () => {
+    console.log("Feedback clicked");
+    alert("Thank you for your feedback!");
+  };
+
   return (
     <>
       <ComponentHeader
@@ -124,16 +147,78 @@ export default function MicrositeHeaderPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-
         <GoATabs>
           <GoATab heading="Code examples">
-            <h2 id="component" style={{display: "none"}}>Component</h2>
+            <h2 id="component" style={{ display: "none" }}>
+              Component
+            </h2>
             <Sandbox properties={micrositeHeaderBindings} onChange={onSandboxChange} fullWidth>
               <GoAMicrositeHeader {...micrositeHeaderProps} />
             </Sandbox>
 
             {/*Component properties table*/}
             <ComponentProperties properties={componentProperties} />
+
+            <h3 id="component-feedbackclick">Custom click event handler (for feedback)</h3>
+            <Sandbox skipRender fullWidth>
+              <GoAMicrositeHeader type="alpha" onFeedbackClick={onClick} />
+
+              <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                  @Component({
+                    selector: "abgov-microsite-header",
+                    templateUrl: "./microsite-header.component.html",
+                  })
+                  export class MicrositeHeaderComponent {
+                    constructor() {}
+
+                    handleFeedbackClick(event: Event) {
+                      console.log("Feedback clicked");
+                      alert("Thank you for your feedback!");
+                    }
+                  }
+                `}
+              />
+
+              <CodeSnippet
+                lang="typescript"
+                tags="angular"
+                allowCopy={true}
+                code={`
+                  <goa-microsite-header
+                    type="alpha"
+                    [hasfeedbackhandler]="true"
+                    (_feedbackClick)="handleFeedbackClick($event)"
+                  ></goa-microsite-header>
+                `}
+              />
+
+              <CodeSnippet
+                lang="typescript"
+                tags="react"
+                allowCopy={true}
+                code={`
+                  export default function MicrositeHeader() {
+                    function onClick() {
+                      console.log("Feedback clicked");
+                      alert("Thank you for your feedback!");
+                    }
+
+                    return (
+                      <>
+                        <GoAMicrositeHeader
+                          type="alpha"
+                          onFeedbackClick={() => onClick()}
+                        />
+                      </>
+                    );
+                  }
+                `}
+              />
+            </Sandbox>
           </GoATab>
 
           <GoATab