diff --git a/lib/components/CountryDropdown/CountryDropdown.tsx b/lib/components/CountryDropdown/CountryDropdown.tsx
index a16c686..ef0e308 100644
--- a/lib/components/CountryDropdown/CountryDropdown.tsx
+++ b/lib/components/CountryDropdown/CountryDropdown.tsx
@@ -51,7 +51,7 @@ const CountryDropdown = ({ url, className }: CountryDropdownProps) => {
     <Popover className={cx(className)}>
       <Popover.Button
         className={cx(
-          "flex items-center justify-center gap-x-1 rounded-md px-4 py-1 text-sm font-semibold text-ssw-black outline-none xl:pr-0",
+          "flex items-center justify-center gap-x-1 rounded-md px-4 py-1 text-sm font-semibold text-foreground outline-none xl:pr-0",
           "hover:scale-105",
         )}
         onClick={() => setIsOpened(!isOpened)}
diff --git a/lib/components/DesktopMenu/DesktopMenu.tsx b/lib/components/DesktopMenu/DesktopMenu.tsx
index d71e6e2..6f6715a 100644
--- a/lib/components/DesktopMenu/DesktopMenu.tsx
+++ b/lib/components/DesktopMenu/DesktopMenu.tsx
@@ -31,7 +31,7 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
   return (
     <>
       <div className="hidden flex-1 xl:block">
-        <Popover.Group className="flex items-center justify-center gap-1 text-sm font-semibold text-ssw-black outline-none">
+        <Popover.Group className="flex items-center justify-center gap-1 text-sm font-semibold text-foreground outline-none">
           {menuGroups.map((group, index) => {
             if (
               !!group.menuColumns &&
@@ -116,7 +116,7 @@ const DefaultSideActions = ({
 };
 
 const Divider: React.FC = () => {
-  return <div className="hidden h-5 w-px bg-gray-700/30 sm:block"></div>;
+  return <div className="hidden h-5 w-px bg-hairline sm:block"></div>;
 };
 
 export default DesktopMenu;
diff --git a/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx b/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx
index b84cbe8..6ce511d 100644
--- a/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx
+++ b/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx
@@ -25,12 +25,15 @@ export const MenuItemWithSubmenu: React.FC<MenuItemWithSubmenuProps> = ({
     <>
       <Popover.Button
         className={cx(
-          "flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-2 py-1 text-ssw-black focus:outline-none focus-visible:ring-opacity-0",
+          "flex cursor-pointer items-center justify-center gap-1 whitespace-nowrap rounded-md px-2 py-1 text-foreground focus:outline-none focus-visible:ring-opacity-0",
           isOpened ? "text-ssw-red" : "hover:text-ssw-red",
         )}
       >
         {name}
-        <MegaIcon icon="chevronDown" className="h-5 w-5 flex-none" />
+        <MegaIcon
+          icon="chevronDown"
+          className="h-4 w-4 flex-none text-muted-foreground"
+        />
       </Popover.Button>
 
       <Transition
@@ -42,7 +45,7 @@ export const MenuItemWithSubmenu: React.FC<MenuItemWithSubmenuProps> = ({
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 -translate-y-1"
       >
-        <Popover.Panel className="absolute inset-x-0 top-[120px] -z-10 bg-gray-50 shadow-md shadow-gray-400">
+        <Popover.Panel className="absolute inset-x-0 top-[120px] -z-10 bg-gray-50 shadow-md shadow-gray-400 dark:bg-[#151515] dark:shadow-black/50">
           <SubMenuGroup
             menuColumns={menuColumns}
             sidebarItems={sidebarItems}
diff --git a/lib/components/Logo/Logo.tsx b/lib/components/Logo/Logo.tsx
index db652ef..6889e19 100644
--- a/lib/components/Logo/Logo.tsx
+++ b/lib/components/Logo/Logo.tsx
@@ -3,24 +3,30 @@ import { CustomImage } from "../CustomImage";
 
 export type LogoSize = "small" | "medium" | "large";
 
+const LIGHT_LOGO = "/images/ssw-logo-lightmode.svg";
+const DARK_LOGO = "/images/ssw-logo-darkmode.svg";
+
 const Logo: React.FC = () => {
   // show the xmas logo for 1-25 December
   const date = new Date();
   const isXmas = date.getMonth() === 11 && date.getDate() <= 25;
   const logoPath = isXmas
     ? "https://www.ssw.com.au/images/ssw-logo-xmas.svg"
-    : "https://www.ssw.com.au/images/ssw-logo.svg";
+    : LIGHT_LOGO;
 
   return (
     <>
       <CustomImage
         src={logoPath}
         alt="SSW - Enterprise Software Development"
-        height={60}
-        width={100}
-        className="h-full"
+        className="h-14 w-auto object-contain xl:h-11 min-[1400px]:h-14 dark:hidden"
+      />
+      <CustomImage
+        src={DARK_LOGO}
+        alt=""
+        aria-hidden="true"
+        className="hidden h-14 w-auto object-contain xl:h-11 min-[1400px]:h-14 dark:block"
       />
-      <span className="sr-only">SSW</span>
     </>
   );
 };
diff --git a/lib/components/MegaIcon/MegaIcon.tsx b/lib/components/MegaIcon/MegaIcon.tsx
index 73ccbf8..defba61 100644
--- a/lib/components/MegaIcon/MegaIcon.tsx
+++ b/lib/components/MegaIcon/MegaIcon.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { AvailableIcons, iconMap } from "../../types/icon";
 import { ICON_IMAGE_SIZES, IconSizes } from "../../util/constants";
+import { cx } from "../../util/cx";
 import { CustomImage } from "../CustomImage";
 
 const MegaIconMapper = ({
@@ -22,6 +23,7 @@ const MegaIconMapper = ({
 export interface MegaIconProps {
   // TODO: implement below intended solution extends React.ComponentPropsWithoutRef<"span"> {
   iconImg?: string;
+  iconImgDarkMode?: string;
   icon?: AvailableIcons;
   imgSize?: IconSizes;
   className?: string;
@@ -30,6 +32,7 @@ export interface MegaIconProps {
 export const MegaIcon: React.FC<MegaIconProps> = ({
   icon,
   iconImg,
+  iconImgDarkMode,
   imgSize = "small",
   className,
 }) => {
@@ -47,16 +50,32 @@ export const MegaIcon: React.FC<MegaIconProps> = ({
     );
   }
 
+  // When a dark-mode icon is supplied, render both and toggle with `dark:` so the
+  // swap resolves from the `.dark` scope in CSS (no JS, no flash); most products
+  // have no dark variant and just render the single default icon.
   return (
     <div>
       <CustomImage
-        className={ICON_IMAGE_SIZES[imgSize]}
+        className={cx(
+          ICON_IMAGE_SIZES[imgSize],
+          iconImgDarkMode && "dark:hidden",
+        )}
         src={iconImg}
-        alt={iconImg}
+        alt=""
         width={20}
         height={20}
         aria-hidden="true"
       />
+      {iconImgDarkMode && (
+        <CustomImage
+          className={cx(ICON_IMAGE_SIZES[imgSize], "hidden dark:block")}
+          src={iconImgDarkMode}
+          alt=""
+          width={20}
+          height={20}
+          aria-hidden="true"
+        />
+      )}
     </div>
   );
 };
diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
index fec4bea..3c04705 100644
--- a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
+++ b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -29,6 +29,7 @@ export type MegaMenuWrapperProps = {
   callback?: (searchTerm: string) => void;
   linkComponent?: LinkComponentType;
   isFlagVisible?: boolean;
+  mobileMenuClassName?: string;
 } & React.PropsWithChildren &
   (Tagline | Title);
 
@@ -44,7 +45,6 @@ export type Title = {
 
 const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
   className = "",
-  tagline,
   title,
   url,
   subtitle,
@@ -54,6 +54,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
   rightSideActionsOverride,
   callback,
   isFlagVisible = true,
+  mobileMenuClassName,
 }) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const performSearch = (e: React.FormEvent<HTMLFormElement>) => {
@@ -81,7 +82,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
       <div
         className={cx(
           className,
-          "relative z-10 flex w-full items-center justify-center px-4 sm:h-[120px]",
+          "relative z-10 flex w-full items-center justify-center px-4 max-sm:py-3 sm:h-[120px]",
         )}
       >
         <nav
@@ -92,12 +93,6 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
             <CustomLink href={url || "/"} className="gap-1 whitespace-nowrap">
               <div className="flex min-w-[4rem] max-w-[14rem] items-center">
                 <Logo />
-
-                {tagline && (
-                  <div className="w-fit whitespace-break-spaces text-xs font-semibold uppercase leading-3 text-gray-700">
-                    <span className="ml-3 hidden xl:block">{tagline}</span>
-                  </div>
-                )}
                 {title && (
                   <div className="mb-3 ml-2 mt-2 text-4xl leading-5">
                     {title}
@@ -112,18 +107,20 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
             </CustomLink>
           </div>
           <div className="flex items-center xl:hidden">
-            {RightSideActions ? (
-              <div className="max-sm:hidden">
+            {/* From lg–xl these actions sit in the bar as before; below lg they
+                collapse into the hamburger, leaving just the logo + burger. */}
+            <div className="hidden items-center lg:flex">
+              {RightSideActions ? (
                 <RightSideActions />
-              </div>
-            ) : (
-              !hidePhone && <PhoneButton className="max-sm:hidden" />
-            )}
-            {isFlagVisible && <CountryDropdown />}
-            {isFlagVisible && <Divider />}
+              ) : (
+                !hidePhone && <PhoneButton />
+              )}
+              {isFlagVisible && <CountryDropdown />}
+              {isFlagVisible && <Divider />}
+            </div>
             <button
               type="button"
-              className="inline-flex items-center justify-center rounded-md pl-2 text-gray-700"
+              className="inline-flex items-center justify-center rounded-md pl-2 text-foreground"
               onClick={() => setMobileMenuOpen(true)}
             >
               <span className="sr-only">Open main menu</span>
@@ -148,15 +145,13 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
           setSearchTerm={setSearchTerm}
           performSearch={performSearch}
           menuBarItems={menuItems}
+          sideActions={rightSideActionsOverride}
+          hidePhone={hidePhone}
+          isFlagVisible={isFlagVisible}
+          searchUrl={searchUrl}
+          mobileMenuClassName={mobileMenuClassName}
         />
       </div>
-      {RightSideActions ? (
-        <div className="sm:hidden">
-          <RightSideActions />
-        </div>
-      ) : (
-        !hidePhone && <PhoneButton className="flex-grow px-4 pb-4 sm:hidden" />
-      )}
     </>
   );
 };
diff --git a/lib/components/MobileMenu/MobileMenu.tsx b/lib/components/MobileMenu/MobileMenu.tsx
index 14875a8..3429c33 100644
--- a/lib/components/MobileMenu/MobileMenu.tsx
+++ b/lib/components/MobileMenu/MobileMenu.tsx
@@ -4,7 +4,10 @@ import React from "react";
 import { useLinkComponent } from "../../hooks/useLinkComponent";
 import { MenuContextProvider } from "../../hooks/useMenuState";
 import { NavMenuGroup } from "../../types/megamenu";
+import { cx } from "../../util/cx";
+import { CountryDropdown } from "../CountryDropdown";
 import { MegaIcon } from "../MegaIcon";
+import { PhoneButton } from "../PhoneButton";
 import { SearchInput, SearchTermProps } from "../Search";
 import SubMenuGroup from "../SubMenuGroup/SubMenuGroup";
 
@@ -12,6 +15,17 @@ export interface MobileMenuProps extends SearchTermProps {
   isMobileMenuOpen: boolean;
   menuBarItems: NavMenuGroup[];
   closeMobileMenu: () => void;
+  // Below lg the bar's actions collapse in here (see MegaMenuLayout). When the
+  // consumer overrides the side actions (e.g. the homepage) we render that;
+  // otherwise the default phone + region controls.
+  sideActions?: () => JSX.Element;
+  hidePhone?: boolean;
+  isFlagVisible?: boolean;
+  searchUrl?: string;
+  // Extra class for the (portaled) dialog root so a consumer can re-apply its
+  // theme scope: Headless UI portals this dialog to <body>, outside the page's
+  // scope, so e.g. the homepage passes "dark" to keep the dark tokens resolving.
+  mobileMenuClassName?: string;
 }
 
 const MobileMenu: React.FC<MobileMenuProps> = ({
@@ -21,6 +35,11 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
   setSearchTerm,
   searchTerm,
   performSearch,
+  sideActions,
+  hidePhone,
+  isFlagVisible,
+  searchUrl,
+  mobileMenuClassName,
 }) => {
   const [selectedMenuItem, setSelectedMenuItem] =
     React.useState<NavMenuGroup | null>(null);
@@ -29,13 +48,18 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
     closeMobileMenu();
   };
   return (
-    <Dialog as="div" open={isMobileMenuOpen} onClose={onCloseMobileMenu}>
+    <Dialog
+      as="div"
+      className={mobileMenuClassName}
+      open={isMobileMenuOpen}
+      onClose={onCloseMobileMenu}
+    >
       <div className="fixed inset-0 z-10" />
-      <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white sm:max-w-sm sm:ring-1 sm:ring-ssw-black/10 xl:hidden">
+      <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white sm:max-w-sm sm:ring-1 sm:ring-ssw-black/10 xl:hidden dark:bg-[#090909] dark:sm:ring-white/10">
         <div className="flex h-16 items-center justify-end p-4">
           <button
             type="button"
-            className="p-2 text-gray-700 xs:p-4"
+            className="p-2 text-gray-700 xs:p-4 dark:text-white"
             onClick={onCloseMobileMenu}
           >
             <span className="sr-only">Close menu</span>
@@ -44,7 +68,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
           {selectedMenuItem && (
             <div className="my-auto flex grow items-center pl-2">
               <button
-                className="text-sm font-semibold leading-4 text-ssw-black"
+                className="text-sm font-semibold leading-4 text-ssw-black dark:text-white"
                 onClick={() => setSelectedMenuItem(null)}
               >
                 <MegaIcon className="mb-1 inline h-5 w-5" icon="chevronLeft" />
@@ -70,6 +94,10 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
               performSearch={performSearch}
               menuBarItems={menuBarItems}
               setSelectedMenuItem={setSelectedMenuItem}
+              sideActions={sideActions}
+              hidePhone={hidePhone}
+              isFlagVisible={isFlagVisible}
+              searchUrl={searchUrl}
             />
           )}
         </div>
@@ -81,6 +109,10 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
 interface MenuBarItemProps extends SearchTermProps {
   menuBarItems: NavMenuGroup[];
   setSelectedMenuItem: (item: NavMenuGroup) => void;
+  sideActions?: () => JSX.Element;
+  hidePhone?: boolean;
+  isFlagVisible?: boolean;
+  searchUrl?: string;
 }
 
 const MenuBarItems: React.FC<MenuBarItemProps> = ({
@@ -89,8 +121,13 @@ const MenuBarItems: React.FC<MenuBarItemProps> = ({
   performSearch,
   setSearchTerm,
   searchTerm,
+  sideActions,
+  hidePhone,
+  isFlagVisible,
+  searchUrl,
 }) => {
   const CustomLink = useLinkComponent();
+  const SideActions = sideActions;
 
   return (
     <div className="-my-6 flex flex-col gap-4 pl-6">
@@ -100,19 +137,19 @@ const MenuBarItems: React.FC<MenuBarItemProps> = ({
             <CustomLink
               key={`link-${item.name}-${index}`}
               href={item.url}
-              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red"
+              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red dark:text-white"
             >
               {item.name}
             </CustomLink>
           ) : (
             <button
               key={`button-${item.name}-${index}`}
-              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red"
+              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red dark:text-white"
               onClick={() => setSelectedMenuItem(item)}
             >
               {item.name}
               <ChevronRightIcon
-                className="ml-2 inline h-4 w-4 text-ssw-black"
+                className="ml-2 inline h-4 w-4 text-ssw-black dark:text-white"
                 aria-hidden="true"
               />
             </button>
@@ -123,9 +160,22 @@ const MenuBarItems: React.FC<MenuBarItemProps> = ({
         performSearch={performSearch}
         setSearchTerm={setSearchTerm}
         searchTerm={searchTerm}
-        className="relative pr-6"
+        // When an override supplies its own search, only show this box at lg–xl
+        // (its own search covers below-lg, avoiding a duplicate).
+        className={cx("relative pr-6", SideActions && "hidden lg:block")}
         inputClassName="border-radius h-12 grow rounded-l-md border bg-transparent pl-11 text-ssw-black focus:ring-0 sm:text-sm"
       />
+      {/* The bar actions live here below lg; at lg+ they render in the bar. */}
+      <div className="pr-6 lg:hidden">
+        {SideActions ? (
+          <SideActions />
+        ) : (
+          <div className="flex flex-col items-start gap-4">
+            {!hidePhone && <PhoneButton />}
+            {isFlagVisible && <CountryDropdown url={searchUrl} />}
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/lib/components/Search/Search.tsx b/lib/components/Search/Search.tsx
index 52b01f3..8acf82d 100644
--- a/lib/components/Search/Search.tsx
+++ b/lib/components/Search/Search.tsx
@@ -43,7 +43,7 @@ export const Search: React.FC<SearchTermProps> = ({
   return (
     <>
       <button
-        className="rounded p-3 text-ssw-black hover:text-ssw-red"
+        className="rounded p-3 text-foreground hover:text-ssw-red"
         onClick={() => setIsOpen(true)}
       >
         <MegaIcon icon="magnifyingGlass" className="h-5 w-5" />
diff --git a/lib/components/SubMenuGroup/SubMenuGroup.tsx b/lib/components/SubMenuGroup/SubMenuGroup.tsx
index bc3407e..58b80b0 100644
--- a/lib/components/SubMenuGroup/SubMenuGroup.tsx
+++ b/lib/components/SubMenuGroup/SubMenuGroup.tsx
@@ -49,7 +49,7 @@ export const SubMenuGroup: React.FC<SubMenuGroupProps> = ({
           ))}
         </div>
 
-        <div className="shrink-0 overflow-x-hidden bg-gray-100 lg:relative lg:w-[350px] lg:before:absolute lg:before:inset-0 lg:before:-z-10 lg:before:w-[1000px] lg:before:bg-gray-50">
+        <div className="shrink-0 overflow-x-hidden bg-gray-100 lg:relative lg:w-[350px] lg:before:absolute lg:before:inset-0 lg:before:-z-10 lg:before:w-[1000px] lg:before:bg-gray-50 dark:bg-[#1b1b1b] lg:dark:before:bg-[#151515]">
           <div className="flex flex-col gap-y-2 px-6 pb-8 pt-4">
             {sidebarItems?.map((sideBarItem, i) => (
               <div key={i}>
@@ -65,6 +65,7 @@ export const SubMenuGroup: React.FC<SubMenuGroupProps> = ({
                     <MegaIcon
                       imgSize="medium"
                       iconImg={sideBarItem.iconImg}
+                      iconImgDarkMode={sideBarItem.iconImgDarkMode}
                       className={ICON_IMAGE_SIZES.medium}
                       icon={sideBarItem.icon as AvailableIcons}
                     />
@@ -89,7 +90,12 @@ const Heading: React.FC<{
   children: React.ReactNode;
 }> = ({ className, children }) => {
   return (
-    <h3 className={cx("pb-2 pl-2 text-lg font-bold text-ssw-black", className)}>
+    <h3
+      className={cx(
+        "pb-2 pl-2 text-lg font-bold text-ssw-black dark:text-white",
+        className,
+      )}
+    >
       {children}
     </h3>
   );
@@ -122,6 +128,7 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
     description,
     icon,
     iconImg,
+    iconImgDarkMode,
     youtubeLink,
     documentationLink,
   },
@@ -134,7 +141,7 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
       <CustomLink
         href={url || ""}
         className={cx(
-          "flex items-start gap-x-1 text-ssw-black hover:text-ssw-red focus:outline-none",
+          "flex items-start gap-x-1 text-ssw-black hover:text-ssw-red focus:outline-none dark:text-white",
           description ? "p-4" : "p-2",
         )}
         onClick={() => {
@@ -147,6 +154,7 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
               className="h-6 w-6"
               icon={icon as AvailableIcons}
               iconImg={iconImg}
+              iconImgDarkMode={iconImgDarkMode}
             />
           </div>
         )}
@@ -156,19 +164,19 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
             {name && description ? (
               <>
                 <p className="font-bold">{name}</p>
-                <p className="mt-1 text-sm font-normal text-ssw-gray">
+                <p className="mt-1 text-sm font-normal text-ssw-gray dark:text-white/60">
                   {description}
                 </p>
               </>
             ) : (
-              <p className="pl-2 text-sm font-normal text-ssw-black hover:text-ssw-red">
+              <p className="pl-2 text-sm font-normal text-ssw-black hover:text-ssw-red dark:text-white">
                 {name}
               </p>
             )}
           </span>
         </div>
       </CustomLink>
-      <div className="ml-10 flex flex-row gap-x-4 text-sm font-light text-ssw-gray">
+      <div className="ml-10 flex flex-row gap-x-4 text-sm font-light text-ssw-gray dark:text-white/60">
         {youtubeLink && (
           <CustomLink href={youtubeLink} className="hover:text-ssw-red">
             YouTube
diff --git a/lib/components/SubMenuGroup/SubMenuWidget.tsx b/lib/components/SubMenuGroup/SubMenuWidget.tsx
index c21d441..e09731f 100644
--- a/lib/components/SubMenuGroup/SubMenuWidget.tsx
+++ b/lib/components/SubMenuGroup/SubMenuWidget.tsx
@@ -43,11 +43,13 @@ const SubMenuWidget: React.FC<SubMenuWidgetProps> = ({ item }) => {
         <CustomLink className="block" href={item.url}>
           {item.name && item.description ? (
             <>
-              <span className="font-bold">{item.name}</span>
-              <p className="mt-2 text-sm">{item.description}</p>
+              <span className="font-bold dark:text-white">{item.name}</span>
+              <p className="mt-2 text-sm dark:text-white/60">
+                {item.description}
+              </p>
             </>
           ) : (
-            <span className="pl-4 text-sm font-normal text-ssw-black">
+            <span className="pl-4 text-sm font-normal text-ssw-black dark:text-white">
               {item.name}
             </span>
           )}
diff --git a/lib/components/ui/Divider.tsx b/lib/components/ui/Divider.tsx
index bce2e87..3c1dd00 100644
--- a/lib/components/ui/Divider.tsx
+++ b/lib/components/ui/Divider.tsx
@@ -2,5 +2,5 @@ import type { ClassValue } from "clsx";
 import { cx } from "../../util/cx";
 
 export const Divider = ({ className }: { className?: ClassValue }) => (
-  <div className={cx("h-4 w-px bg-gray-700/30", className)}></div>
+  <div className={cx("h-4 w-px bg-hairline", className)}></div>
 );
diff --git a/lib/hooks/useMenuItems.ts b/lib/hooks/useMenuItems.ts
index 0cf0847..0635028 100644
--- a/lib/hooks/useMenuItems.ts
+++ b/lib/hooks/useMenuItems.ts
@@ -1,10 +1,27 @@
 import { useEffect, useState } from "react";
 import { NavMenuGroup } from "../types/megamenu";
 
-const API_URL = "https://www.ssw.com.au/api/get-megamenu";
+const CANONICAL_API_URL = "https://www.ssw.com.au/api/get-megamenu";
+
+// SSW's own deployments (production, PR preview slots, local dev) read the menu
+// from their OWN origin, so the nav reflects the content that shipped with that
+// build — this is what lets a preview slot show menu changes before they reach
+// production. Any other host falls back to SSW's canonical production endpoint,
+// preserving the previous cross-site behaviour.
+const SSW_HOST = /(^|\.)ssw\.com\.au$|\.azurewebsites\.net$|^localhost$/;
+
+const getApiUrl = () => {
+  if (
+    typeof window !== "undefined" &&
+    SSW_HOST.test(window.location.hostname)
+  ) {
+    return `${window.location.origin}/api/get-megamenu`;
+  }
+  return CANONICAL_API_URL;
+};
 
 const refreshData = async () => {
-  const res = await fetch(API_URL);
+  const res = await fetch(getApiUrl());
   const json = await res.json();
 
   const { menuGroups } = json;
diff --git a/lib/index.css b/lib/index.css
index b5c61c9..b0edae8 100644
--- a/lib/index.css
+++ b/lib/index.css
@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* SSW design tokens — mirror SSW.Website's styles.css so the menu themes via CSS
+   variables under a `.dark` scope. Consumers already define these globally; this
+   keeps the standalone preview themeable. */
+:root {
+  --text-strong: rgba(0, 0, 0, 0.9);
+  --text-weak: rgba(0, 0, 0, 0.6);
+  --background-base: #ffffff;
+  --hairline: #e5e7eb;
+  --logo-filter: none;
+}
+.dark {
+  --text-strong: #ffffff;
+  --text-weak: rgba(255, 255, 255, 0.78);
+  --background-base: #171717;
+  --hairline: #212121;
+  --logo-filter: brightness(0) invert(1);
+}
diff --git a/lib/index.ts b/lib/index.ts
index f1b3b4f..1cae37b 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -1,6 +1,8 @@
 import "./index.css";
 
 export * from "./components/MegaMenuLayout";
+export { Search } from "./components/Search";
+export { CountryDropdown } from "./components/CountryDropdown";
 export type { LinkComponentType } from "./hooks/useLinkComponent";
 
 export * from "./types/country";
diff --git a/lib/types/megamenu.ts b/lib/types/megamenu.ts
index 4a22d44..804e1ed 100644
--- a/lib/types/megamenu.ts
+++ b/lib/types/megamenu.ts
@@ -31,6 +31,7 @@ export interface NavMenuColumnGroupItem {
   description?: string;
   icon?: AvailableIcons | string;
   iconImg?: string;
+  iconImgDarkMode?: string;
   youtubeLink?: string;
   documentationLink?: string;
 }
@@ -39,6 +40,7 @@ export interface Sidebar {
   name: string;
   icon?: AvailableIcons | string;
   iconImg?: string;
+  iconImgDarkMode?: string;
   items?: SidebarItem[];
 }
 
diff --git a/package.json b/package.json
index 3f86ae4..6aa9ee2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ssw.megamenu",
-  "version": "4.13.10",
+  "version": "4.14.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/SSWConsulting/SSW.MegaMenu"
@@ -23,6 +23,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "prepare": "pnpm build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:scripts": "eslint --ignore-path .gitignore --max-warnings=0 ./lib --ext ts --ext tsx --ext js --ext jsx",
     "lint:styles": "stylelint ./lib/**/*.css",
@@ -91,4 +92,4 @@
     ]
   },
   "packageManager": "pnpm@9.5.0"
-}
\ No newline at end of file
+}
diff --git a/src/index.css b/src/index.css
index b5c61c9..b0edae8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* SSW design tokens — mirror SSW.Website's styles.css so the menu themes via CSS
+   variables under a `.dark` scope. Consumers already define these globally; this
+   keeps the standalone preview themeable. */
+:root {
+  --text-strong: rgba(0, 0, 0, 0.9);
+  --text-weak: rgba(0, 0, 0, 0.6);
+  --background-base: #ffffff;
+  --hairline: #e5e7eb;
+  --logo-filter: none;
+}
+.dark {
+  --text-strong: #ffffff;
+  --text-weak: rgba(255, 255, 255, 0.78);
+  --background-base: #171717;
+  --hairline: #212121;
+  --logo-filter: brightness(0) invert(1);
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 08fdc8a..2b2a912 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 import defaultTheme from "tailwindcss/defaultTheme";
 export default {
+  darkMode: "selector",
   content: ["./index.html", "./lib/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
   theme: {
     screens: {
@@ -9,6 +10,10 @@ export default {
     },
     extend: {
       colors: {
+        foreground: "var(--text-strong)",
+        background: "var(--background-base)",
+        "muted-foreground": "var(--text-weak)",
+        hairline: "var(--hairline)",
         ssw: {
           red: "#cc4141",
           light: {