diff --git a/sites/shared/components/mdx/tabbed-example.mjs b/sites/shared/components/mdx/tabbed-example.mjs
index f8ec9093892..bd19b0b8947 100644
--- a/sites/shared/components/mdx/tabbed-example.mjs
+++ b/sites/shared/components/mdx/tabbed-example.mjs
@@ -141,7 +141,9 @@ export const TabbedExample = ({
 
   return (
     <div className="my-8">
-      <Tabs tabs={tabNames.join(', ')}>{tabs}</Tabs>
+      <Tabs tabs={tabNames.join(', ')} withModal>
+        {tabs}
+      </Tabs>
       {caption && (
         <div className="text-center italic -mt-4">
           <Md>{caption}</Md>
diff --git a/sites/shared/components/tabs.mjs b/sites/shared/components/tabs.mjs
index 3febee3f2c7..7d200017ef8 100644
--- a/sites/shared/components/tabs.mjs
+++ b/sites/shared/components/tabs.mjs
@@ -1,6 +1,11 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
+import { ModalContext } from 'shared/context/modal-context.mjs'
+import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
+import { KioskIcon } from 'shared/components/icons.mjs'
+
+export const Tabs = ({ tabs = '', active = 0, children, withModal = false }) => {
+  const { setModal } = useContext(ModalContext)
 
-export const Tabs = ({ tabs = '', active = 0, children }) => {
   // Keep active tab in state
   const [activeTab, setActiveTab] = useState(active)
 
@@ -20,17 +25,40 @@ export const Tabs = ({ tabs = '', active = 0, children }) => {
   return (
     <div className="my-4">
       <div className="tabs">
-        {tablist.map((title, tabId) => (
-          <button
-            key={tabId}
-            className={`text-lg font-bold capitalize tab h-auto tab-bordered grow py-2 ${
-              activeTab === tabId ? 'tab-active' : ''
-            }`}
-            onClick={() => setActiveTab(tabId)}
-          >
-            {title}
-          </button>
-        ))}
+        {tablist.map((title, tabId) => {
+          const btnClasses = `text-lg font-bold capitalize tab h-auto tab-bordered grow py-2 ${
+            activeTab === tabId ? 'tab-active' : ''
+          }`
+
+          return withModal && activeTab === tabId ? (
+            <div className={`flex flex-row justify-between w-1/${tablist.length}`}>
+              <button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}>
+                {title}
+              </button>
+              <button
+                className={`${btnClasses} px-0`}
+                onClick={() =>
+                  setModal(
+                    <ModalWrapper
+                      flex="col"
+                      justify="top lg:justify-center"
+                      slideFrom="right"
+                      fullWidth
+                    >
+                      {childrenWithTabSetter}
+                    </ModalWrapper>
+                  )
+                }
+              >
+                <KioskIcon className="w-6 h-6 hover:text-secondary" />
+              </button>
+            </div>
+          ) : (
+            <button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}>
+              {title}
+            </button>
+          )
+        })}
       </div>
       <div>{childrenWithTabSetter}</div>
     </div>