diff --git a/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js b/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
index f560a35465..4237218141 100644
--- a/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
+++ b/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
@@ -13,12 +13,15 @@ declare module '@box/blueprint-web-assets/icons/Medium' {
   declare export var ChevronUp: React$ComponentType<any>;
   declare export var RightSidebarChevronClose: React$ComponentType<any>;
   declare export var RightSidebarChevronOpen: React$ComponentType<any>;
+  declare export var MagicWand: React$ComponentType<any>;
+  declare export var DocGen: React$ComponentType<any>;
 }
 
 declare module '@box/blueprint-web-assets/icons/MediumFilled' {
   declare export var Comment: React$ComponentType<any>;
   declare export var InformationCircle: React$ComponentType<any>;
   declare export var Metadata: React$ComponentType<any>;
+  declare export var MagicWand: React$ComponentType<any>;
 }
 
 declare module '@box/blueprint-web-assets/icons/Content' {
diff --git a/src/elements/content-sidebar/SidebarNav.js b/src/elements/content-sidebar/SidebarNav.js
index 208aec84ca..f28c67f684 100644
--- a/src/elements/content-sidebar/SidebarNav.js
+++ b/src/elements/content-sidebar/SidebarNav.js
@@ -14,11 +14,14 @@ import {
     Comment as CommentIcon,
     InformationCircle as InformationCircleIcon,
     Metadata as MetadataIcon,
+    MagicWand as MagicWandIcon,
+    DocGen as BPDocGenIcon,
 } from '@box/blueprint-web-assets/icons/Medium';
 import {
     Comment as CommentIconFilled,
     InformationCircle as InformationCircleIconFilled,
     Metadata as MetadataIconFilled,
+    MagicWand as MagicWandIconFilled,
 } from '@box/blueprint-web-assets/icons/MediumFilled';
 import { Size6, Size5, IconIconBlue } from '@box/blueprint-web-assets/tokens/tokens';
 import { usePromptFocus } from '@box/box-ai-content-answers';
@@ -92,6 +95,28 @@ const MetadataIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWr
     );
 };
 
+const SkillsIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWrapperProps) => {
+    if (!isPreviewModernizationEnabled) {
+        return <IconMagicWand className="bcs-SidebarNav-icon" />;
+    }
+    return isActive ? (
+        <MagicWandIconFilled {...SIDEBAR_TAB_ICON_PROPS} color={IconIconBlue} />
+    ) : (
+        <MagicWandIcon {...SIDEBAR_TAB_ICON_PROPS} />
+    );
+};
+
+const DocGenIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWrapperProps) => {
+    if (!isPreviewModernizationEnabled) {
+        return <DocGenIcon className="bcs-SidebarNav-icon" />;
+    }
+    return isActive ? (
+        <BPDocGenIcon {...SIDEBAR_TAB_ICON_PROPS} color={IconIconBlue} />
+    ) : (
+        <BPDocGenIcon {...SIDEBAR_TAB_ICON_PROPS} />
+    );
+};
+
 type Props = {
     additionalTabs?: Array<AdditionalSidebarTab>,
     elementId: string,
@@ -223,7 +248,7 @@ const SidebarNav = ({
                             sidebarView={SIDEBAR_VIEW_SKILLS}
                             tooltip={intl.formatMessage(messages.sidebarSkillsTitle)}
                         >
-                            <IconMagicWand className="bcs-SidebarNav-icon" />
+                            <SkillsIconWrapper isPreviewModernizationEnabled={isPreviewModernizationEnabled} />
                         </SidebarNavButton>
                     )}
                     {hasMetadata && (
@@ -250,7 +275,7 @@ const SidebarNav = ({
                             sidebarView={SIDEBAR_VIEW_DOCGEN}
                             tooltip={intl.formatMessage(messages.sidebarDocGenTooltip)}
                         >
-                            <DocGenIcon className="bcs-SidebarNav-icon" />
+                            <DocGenIconWrapper isPreviewModernizationEnabled={isPreviewModernizationEnabled} />
                         </SidebarNavButton>
                     )}
                 </SidebarNavTablist>