diff --git a/packages/core/src/components/Button/Button.module.scss b/packages/core/src/components/Button/Button.module.scss
index 1d00fc63e6..addcf7238a 100644
--- a/packages/core/src/components/Button/Button.module.scss
+++ b/packages/core/src/components/Button/Button.module.scss
@@ -222,6 +222,23 @@ $disabled-on-primary-color-opacity: 0.5;
   color: var(--fixed-light-color);
 }
 
+.kindPrimary.colorOnInvertedBackground {
+  background: var(--primary-background-color);
+  color: var(--primary-text-color);
+}
+
+.kindPrimary.colorOnInvertedBackgroundActive,
+.kindPrimary.colorOnInvertedBackground:hover,
+.kindPrimary.colorOnInvertedBackground:focus {
+  background: var(--ui-background-color);
+}
+
+.kindPrimary.button.colorOnInvertedBackground.disabled {
+  background: var(--ui-background-color);
+  color: var(--primary-text-color);
+  opacity: $disabled-on-primary-color-opacity;
+}
+
 .kindPrimary.button.disabled {
   background: var(--disabled-background-color);
   color: var(--disabled-text-color);
@@ -341,6 +358,23 @@ $disabled-on-primary-color-opacity: 0.5;
   @include focus-style-on-primary();
 }
 
+.kindSecondary.colorOnInvertedBackground {
+  border-color: var(--text-color-on-inverted);
+  color: var(--text-color-on-inverted);
+}
+
+.kindSecondary.colorOnInvertedBackgroundActive,
+.kindSecondary.colorOnInvertedBackground:hover,
+.kindSecondary.colorOnInvertedBackground:focus {
+  background: var(--icon-color);
+}
+
+.kindSecondary.colorOnInvertedBackground.disabled {
+  border-color: var(--text-color-on-inverted);
+  color: var(--text-color-on-inverted);
+  opacity: $disabled-on-primary-color-opacity;
+}
+
 .kindSecondary.colorFixedLight.disabled {
   opacity: $disabled-on-primary-color-opacity;
   color: var(--fixed-light-color);
@@ -459,7 +493,13 @@ $disabled-on-primary-color-opacity: 0.5;
 .kindTertiary.colorOnInvertedBackgroundActive,
 .kindTertiary.colorOnInvertedBackground:hover,
 .kindTertiary.colorOnInvertedBackground:focus {
-  backdrop-filter: brightness(85%);
+  background: var(--icon-color);
+}
+
+.kindTertiary.colorOnInvertedBackground.disabled {
+  background: var(--icon-color);
+  opacity: $disabled-on-primary-color-opacity;
+  color: var(--text-color-on-inverted);
 }
 
 .kindTertiary.disabled {
diff --git a/packages/core/src/components/Steps/Steps.tsx b/packages/core/src/components/Steps/Steps.tsx
index 4b97d2e638..7a8d2cab68 100644
--- a/packages/core/src/components/Steps/Steps.tsx
+++ b/packages/core/src/components/Steps/Steps.tsx
@@ -3,11 +3,12 @@ import cx from "classnames";
 import { NOOP } from "../../utils/function-utils";
 import useMergeRef from "../../hooks/useMergeRef";
 import { StepsHeader } from "./StepsHeader";
-import { StepsType } from "./StepsConstants";
+import { StepsColor, StepsType } from "./StepsConstants";
 import { ButtonProps } from "../Button/Button";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import { withStaticProps, VibeComponent, VibeComponentProps } from "../../types";
 import styles from "./Steps.module.scss";
+import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 
 export interface StepsProps extends VibeComponentProps {
   /**
@@ -21,7 +22,11 @@ export interface StepsProps extends VibeComponentProps {
   areNavigationButtonsHidden?: boolean;
   steps?: ReactElement[];
   type?: StepsType;
+  /**
+   * @deprecated - Use color instead
+   */
   isOnPrimary?: boolean;
+  color?: StepsColor;
   isContentOnTop?: boolean;
   areButtonsIconsHidden?: boolean;
   backButtonProps?: ButtonProps;
@@ -41,7 +46,9 @@ const Steps: VibeComponent<StepsProps> & { types?: typeof StepsType } = forwardR
       type = StepsType.GALLERY,
       onChangeActiveStep = NOOP,
       onFinish,
+      // TODO Remove in next major as breaking change
       isOnPrimary = false,
+      color,
       areNavigationButtonsHidden = false,
       isContentOnTop = false,
       backButtonProps = {},
@@ -53,6 +60,10 @@ const Steps: VibeComponent<StepsProps> & { types?: typeof StepsType } = forwardR
   ) => {
     const componentRef = useRef(null);
     const mergedRef = useMergeRef(ref, componentRef);
+    const overrideColor = backwardCompatibilityForProperties([
+      color,
+      isOnPrimary ? StepsColor.ON_PRIMARY_COLOR : undefined
+    ]);
     return (
       <div
         ref={mergedRef}
@@ -67,7 +78,7 @@ const Steps: VibeComponent<StepsProps> & { types?: typeof StepsType } = forwardR
           activeStepIndex={activeStepIndex}
           stepsCount={steps.length}
           areNavigationButtonsHidden={areNavigationButtonsHidden}
-          isOnPrimary={isOnPrimary}
+          color={overrideColor}
           backButtonProps={backButtonProps}
           nextButtonProps={nextButtonProps}
           finishButtonProps={finishButtonProps}
diff --git a/packages/core/src/components/Steps/StepsCommand.module.scss b/packages/core/src/components/Steps/StepsCommand.module.scss
index d040db7733..6bdb873dbd 100644
--- a/packages/core/src/components/Steps/StepsCommand.module.scss
+++ b/packages/core/src/components/Steps/StepsCommand.module.scss
@@ -15,7 +15,11 @@
   &.disabled {
     color: var(--disabled-text-color);
   }
-  &.onPrimary {
+  &.colorOnPrimaryColor {
     color: var(--text-color-on-primary);
   }
+  &.colorOnInvertedBackground {
+    color: var(--text-color-on-inverted);
+  }
 }
+
diff --git a/packages/core/src/components/Steps/StepsCommand.tsx b/packages/core/src/components/Steps/StepsCommand.tsx
index cd6dc95b8f..ca18bcfb28 100644
--- a/packages/core/src/components/Steps/StepsCommand.tsx
+++ b/packages/core/src/components/Steps/StepsCommand.tsx
@@ -5,10 +5,12 @@ import NavigationChevronLeft from "../../components/Icon/Icons/components/Naviga
 import Icon from "../../components/Icon/Icon";
 import Button, { ButtonProps } from "../../components/Button/Button";
 import { NOOP } from "../../utils/function-utils";
-import { BACK_TEXT, NEXT_TEXT } from "./StepsConstants";
+import { BACK_TEXT, NEXT_TEXT, StepsColor } from "./StepsConstants";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import styles from "./StepsCommand.module.scss";
+import { camelCase } from "lodash-es";
+import { getStyle } from "../..//helpers/typesciptCssModulesHelper";
 
 export interface StepsCommandProps extends VibeComponentProps {
   isNext?: boolean;
@@ -17,7 +19,7 @@ export interface StepsCommandProps extends VibeComponentProps {
   stepsCount: number;
   isIconHidden?: boolean;
   buttonProps?: ButtonProps;
-  isOnPrimary?: boolean;
+  color?: StepsColor;
 }
 
 export const StepsCommand: FC<StepsCommandProps> = ({
@@ -26,15 +28,14 @@ export const StepsCommand: FC<StepsCommandProps> = ({
   activeStepIndex,
   stepsCount,
   isIconHidden = false,
-  isOnPrimary = false,
-  buttonProps = {}
+  buttonProps = {},
+  color = StepsColor.PRIMARY
 }) => {
   const { children: buttonChildren, ...otherButtonProps } = buttonProps;
   const description = useMemo(() => {
     if (buttonChildren) return buttonChildren;
     return isNext ? NEXT_TEXT : BACK_TEXT;
   }, [isNext, buttonChildren]);
-  const buttonBaseColor = isOnPrimary ? Button.colors.ON_PRIMARY_COLOR : undefined;
   const newStepIndex = isNext ? activeStepIndex + 1 : activeStepIndex - 1;
   const onClick = useCallback(
     (e: React.MouseEvent) => onChangeActiveStep(e, newStepIndex),
@@ -52,7 +53,8 @@ export const StepsCommand: FC<StepsCommandProps> = ({
       kind={Button.kinds.TERTIARY}
       onClick={onClick}
       disabled={isDisabled}
-      color={buttonBaseColor}
+      // @ts-ignore
+      color={color}
       {...otherButtonProps}
     >
       {description}
@@ -60,9 +62,8 @@ export const StepsCommand: FC<StepsCommandProps> = ({
         <Icon
           icon={icon}
           clickable={false}
-          className={cx(styles.icon, {
-            [styles.disabled]: isDisabled,
-            [styles.onPrimary]: isOnPrimary
+          className={cx(styles.icon, getStyle(styles, camelCase("color-" + color)), {
+            [styles.disabled]: isDisabled
           })}
         />
       )}
diff --git a/packages/core/src/components/Steps/StepsConstants.ts b/packages/core/src/components/Steps/StepsConstants.ts
index 2491f6fa2f..4be19e9115 100644
--- a/packages/core/src/components/Steps/StepsConstants.ts
+++ b/packages/core/src/components/Steps/StepsConstants.ts
@@ -14,3 +14,9 @@ export enum StepsDotAriaCurrent {
   DATE = "date",
   TIME = "time"
 }
+
+export enum StepsColor {
+  PRIMARY = "primary",
+  ON_PRIMARY_COLOR = "on-primary-color",
+  ON_INVERTED_BACKGROUND = "on-inverted-background"
+}
diff --git a/packages/core/src/components/Steps/StepsDot.module.scss b/packages/core/src/components/Steps/StepsDot.module.scss
index a4e6481e20..79bd7c0c3c 100644
--- a/packages/core/src/components/Steps/StepsDot.module.scss
+++ b/packages/core/src/components/Steps/StepsDot.module.scss
@@ -28,11 +28,19 @@
   @include active-step-dot;
 }
 
-.onPrimary.dot {
+.colorOnPrimaryColor.dot {
   background: var(--primary-hover-color);
   @include focus-style-on-primary;
 }
 
-.onPrimary.isActive {
+.colorOnPrimaryColor.dot.isActive {
   background: var(--text-color-on-primary);
 }
+
+.colorOnInvertedBackground.dot {
+  background: var(--placeholder-color);
+}
+
+.colorOnInvertedBackground.dot.isActive {
+  background: var(--text-color-on-inverted);
+}
diff --git a/packages/core/src/components/Steps/StepsDot.tsx b/packages/core/src/components/Steps/StepsDot.tsx
index 0ddacc6115..4ef15976da 100644
--- a/packages/core/src/components/Steps/StepsDot.tsx
+++ b/packages/core/src/components/Steps/StepsDot.tsx
@@ -1,16 +1,17 @@
 import cx from "classnames";
-import { noop as NOOP } from "lodash-es";
-import { StepsDotAriaCurrent } from "./StepsConstants";
+import { noop as NOOP, camelCase } from "lodash-es";
+import { StepsColor, StepsDotAriaCurrent } from "./StepsConstants";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import React, { FC } from "react";
 import styles from "./StepsDot.module.scss";
+import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 
 export interface StepsDotProps extends VibeComponentProps {
   onClick?: (e: React.MouseEvent) => void;
   ariaCurrent?: StepsDotAriaCurrent | boolean;
   isActive?: boolean;
   ariaLabel?: string;
-  isOnPrimary?: boolean;
+  color?: StepsColor;
 }
 
 export const StepsDot: FC<StepsDotProps> = ({
@@ -18,7 +19,7 @@ export const StepsDot: FC<StepsDotProps> = ({
   onClick = NOOP,
   ariaCurrent = StepsDotAriaCurrent.STEP,
   ariaLabel,
-  isOnPrimary,
+  color,
   className
 }) => {
   return (
@@ -28,9 +29,9 @@ export const StepsDot: FC<StepsDotProps> = ({
       aria-current={isActive ? ariaCurrent : false}
       className={cx(
         styles.dot,
+        getStyle(styles, camelCase("color-" + color)),
         {
-          [styles.isActive]: isActive,
-          [styles.onPrimary]: isOnPrimary
+          [styles.isActive]: isActive
         },
         className
       )}
diff --git a/packages/core/src/components/Steps/StepsGalleryHeader.tsx b/packages/core/src/components/Steps/StepsGalleryHeader.tsx
index 4726b1f2c3..e911077a16 100644
--- a/packages/core/src/components/Steps/StepsGalleryHeader.tsx
+++ b/packages/core/src/components/Steps/StepsGalleryHeader.tsx
@@ -3,13 +3,14 @@ import { range } from "lodash-es";
 import { StepsDot } from "./StepsDot";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import styles from "./StepsGalleryHeader.module.scss";
+import { StepsColor } from "./StepsConstants";
 
 export interface StepsGalleryHeaderProps extends VibeComponentProps {
   activeStepIndex: number;
   stepsCount: number;
   onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;
   stepDescriptionFunc: (stepIndex: number) => string;
-  isOnPrimary?: boolean;
+  color?: StepsColor;
 }
 
 export const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({
@@ -17,7 +18,7 @@ export const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({
   stepsCount,
   onChangeActiveStep,
   stepDescriptionFunc,
-  isOnPrimary
+  color
 }) => {
   const stepsPlaceholders = useMemo(() => range(stepsCount), [stepsCount]);
   const defaultStepDescriptionFunc = useCallback((stepIndex: number) => `Step number ${stepIndex}`, []);
@@ -36,13 +37,13 @@ export const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({
             key={`monday-style-step-dot-${stepIndex + 1}`}
             ariaLabel={overrideStepDescriptionFunc(stepIndex)}
             onClick={onClickFunctions[stepIndex]}
-            isOnPrimary={isOnPrimary}
+            color={color}
             className={styles.galleryHeaderDot}
           />
         ),
         []
       ),
-    [activeStepIndex, isOnPrimary, onClickFunctions, overrideStepDescriptionFunc, stepsPlaceholders]
+    [activeStepIndex, color, onClickFunctions, overrideStepDescriptionFunc, stepsPlaceholders]
   );
 
   return (
diff --git a/packages/core/src/components/Steps/StepsHeader.tsx b/packages/core/src/components/Steps/StepsHeader.tsx
index 4870eb49e3..299dee9e03 100644
--- a/packages/core/src/components/Steps/StepsHeader.tsx
+++ b/packages/core/src/components/Steps/StepsHeader.tsx
@@ -3,7 +3,7 @@ import cx from "classnames";
 import { StepsCommand } from "./StepsCommand";
 import { StepsGalleryHeader, StepsGalleryHeaderProps } from "./StepsGalleryHeader";
 import { StepsNumbersHeader, StepsNumbersHeaderProps } from "./StepsNumbersHeader";
-import { StepsType, FINISH_TEXT } from "./StepsConstants";
+import { StepsType, FINISH_TEXT, StepsColor } from "./StepsConstants";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import Button, { ButtonProps } from "../Button/Button";
 import styles from "./StepsHeader.module.scss";
@@ -18,7 +18,7 @@ export interface StepsHeaderProps extends VibeComponentProps {
   nextButtonProps: ButtonProps;
   finishButtonProps: ButtonProps;
   areButtonsIconsHidden: boolean;
-  isOnPrimary: boolean;
+  color?: StepsColor;
   onFinish?: (e: React.MouseEvent) => void;
 }
 
@@ -32,7 +32,7 @@ export const StepsHeader: FC<StepsHeaderProps> = ({
   nextButtonProps,
   finishButtonProps,
   areButtonsIconsHidden,
-  isOnPrimary,
+  color = StepsColor.PRIMARY,
   onFinish,
   className
 }) => {
@@ -57,23 +57,20 @@ export const StepsHeader: FC<StepsHeaderProps> = ({
           activeStepIndex={activeStepIndex}
           stepsCount={stepsCount}
           buttonProps={backButtonProps}
-          isOnPrimary={isOnPrimary}
+          color={color}
         />
       )}
       <SubHeaderComponent
         activeStepIndex={activeStepIndex}
         stepsCount={stepsCount}
         onChangeActiveStep={onChangeActiveStep}
-        isOnPrimary={isOnPrimary}
+        color={color}
       />
       {areNavigationButtonsHidden ? null : (
         <>
           {showFinishButton ? (
-            <Button
-              onClick={onFinish}
-              color={isOnPrimary ? Button.colors.ON_PRIMARY_COLOR : undefined}
-              {...finishButtonProps}
-            >
+            // @ts-ignore
+            <Button onClick={onFinish} color={color} {...finishButtonProps}>
               {finishButtonProps?.children || FINISH_TEXT}
             </Button>
           ) : (
@@ -84,7 +81,7 @@ export const StepsHeader: FC<StepsHeaderProps> = ({
               onChangeActiveStep={onChangeActiveStep}
               stepsCount={stepsCount}
               buttonProps={nextButtonProps}
-              isOnPrimary={isOnPrimary}
+              color={color}
             />
           )}
         </>
diff --git a/packages/core/src/components/Steps/StepsNumbersHeader.tsx b/packages/core/src/components/Steps/StepsNumbersHeader.tsx
index 519e4a7a32..a3ca31d34e 100644
--- a/packages/core/src/components/Steps/StepsNumbersHeader.tsx
+++ b/packages/core/src/components/Steps/StepsNumbersHeader.tsx
@@ -1,21 +1,29 @@
 import cx from "classnames";
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import Text from "../Text/Text";
 import styles from "./StepsNumbersHeader.module.scss";
+import { StepsColor } from "./StepsConstants";
 
 export interface StepsNumbersHeaderProps extends VibeComponentProps {
   activeStepIndex: number;
   stepsCount: number;
-  isOnPrimary?: boolean;
+  color?: StepsColor;
 }
 
-export const StepsNumbersHeader: FC<StepsNumbersHeaderProps> = ({ activeStepIndex, stepsCount, isOnPrimary }) => {
+export const StepsNumbersHeader: FC<StepsNumbersHeaderProps> = ({ activeStepIndex, stepsCount, color }) => {
+  const textColor = useMemo(() => {
+    if (color === StepsColor.PRIMARY) {
+      return color;
+    } else {
+      return color === StepsColor.ON_INVERTED_BACKGROUND ? Text.colors.ON_INVERTED : Text.colors.ON_PRIMARY;
+    }
+  }, [color]);
+
   return (
-    <Text
-      type={Text.types.TEXT2}
-      color={isOnPrimary ? Text.colors.ON_PRIMARY : Text.colors.PRIMARY}
-      className={cx(styles.numbers)}
-    >{`${activeStepIndex + 1} \\ ${stepsCount}`}</Text>
+    // @ts-ignore
+    <Text type={Text.types.TEXT2} color={textColor} className={cx(styles.numbers)}>{`${
+      activeStepIndex + 1
+    } \\ ${stepsCount}`}</Text>
   );
 };
diff --git a/packages/core/src/components/Steps/__tests__/__snapshots__/steps-snapshot-tests.jest.js.snap b/packages/core/src/components/Steps/__tests__/__snapshots__/steps-snapshot-tests.jest.js.snap
index 71c861f4aa..c42c3557c3 100644
--- a/packages/core/src/components/Steps/__tests__/__snapshots__/steps-snapshot-tests.jest.js.snap
+++ b/packages/core/src/components/Steps/__tests__/__snapshots__/steps-snapshot-tests.jest.js.snap
@@ -29,14 +29,14 @@ exports[`Steps with gallery type renders correctly when hide navigations icons 1
       <button
         aria-current={false}
         aria-label="Step number 0"
-        className="dot galleryHeaderDot"
+        className="dot colorPrimary galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
       <button
         aria-current="step"
         aria-label="Step number 1"
-        className="dot isActive galleryHeaderDot"
+        className="dot colorPrimary isActive galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
@@ -78,14 +78,14 @@ exports[`Steps with gallery type renders correctly when navigation buttons are h
       <button
         aria-current={false}
         aria-label="Step number 0"
-        className="dot galleryHeaderDot"
+        className="dot colorPrimary galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
       <button
         aria-current="step"
         aria-label="Step number 1"
-        className="dot isActive galleryHeaderDot"
+        className="dot colorPrimary isActive galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
@@ -123,7 +123,7 @@ exports[`Steps with gallery type renders correctly when steps content is on top
       Back
       <svg
         aria-hidden={true}
-        className="icon icon"
+        className="icon icon colorPrimary"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -146,14 +146,14 @@ exports[`Steps with gallery type renders correctly when steps content is on top
       <button
         aria-current={false}
         aria-label="Step number 0"
-        className="dot galleryHeaderDot"
+        className="dot colorPrimary galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
       <button
         aria-current="step"
         aria-label="Step number 1"
-        className="dot isActive galleryHeaderDot"
+        className="dot colorPrimary isActive galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
@@ -174,7 +174,7 @@ exports[`Steps with gallery type renders correctly when steps content is on top
       Next
       <svg
         aria-hidden={true}
-        className="icon icon disabled"
+        className="icon icon colorPrimary disabled"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -218,7 +218,7 @@ exports[`Steps with gallery type renders correctly when viewing first step 1`] =
       Back
       <svg
         aria-hidden={true}
-        className="icon icon disabled"
+        className="icon icon colorPrimary disabled"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -241,14 +241,14 @@ exports[`Steps with gallery type renders correctly when viewing first step 1`] =
       <button
         aria-current="step"
         aria-label="Step number 0"
-        className="dot isActive galleryHeaderDot"
+        className="dot colorPrimary isActive galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
       <button
         aria-current={false}
         aria-label="Step number 1"
-        className="dot galleryHeaderDot"
+        className="dot colorPrimary galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
@@ -268,7 +268,7 @@ exports[`Steps with gallery type renders correctly when viewing first step 1`] =
       Next
       <svg
         aria-hidden={true}
-        className="icon icon"
+        className="icon icon colorPrimary"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -314,7 +314,7 @@ exports[`Steps with gallery type renders correctly when viewing last step 1`] =
       Back
       <svg
         aria-hidden={true}
-        className="icon icon"
+        className="icon icon colorPrimary"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -337,14 +337,14 @@ exports[`Steps with gallery type renders correctly when viewing last step 1`] =
       <button
         aria-current={false}
         aria-label="Step number 0"
-        className="dot galleryHeaderDot"
+        className="dot colorPrimary galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
       <button
         aria-current="step"
         aria-label="Step number 1"
-        className="dot isActive galleryHeaderDot"
+        className="dot colorPrimary isActive galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
@@ -365,7 +365,7 @@ exports[`Steps with gallery type renders correctly when viewing last step 1`] =
       Next
       <svg
         aria-hidden={true}
-        className="icon icon disabled"
+        className="icon icon colorPrimary disabled"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -412,7 +412,7 @@ exports[`Steps with gallery type renders correctly with regular props 1`] = `
       Back
       <svg
         aria-hidden={true}
-        className="icon icon disabled"
+        className="icon icon colorPrimary disabled"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -435,14 +435,14 @@ exports[`Steps with gallery type renders correctly with regular props 1`] = `
       <button
         aria-current="step"
         aria-label="Step number 0"
-        className="dot isActive galleryHeaderDot"
+        className="dot colorPrimary isActive galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
       <button
         aria-current={false}
         aria-label="Step number 1"
-        className="dot galleryHeaderDot"
+        className="dot colorPrimary galleryHeaderDot"
         onClick={[Function]}
         type="button"
       />
@@ -462,7 +462,7 @@ exports[`Steps with gallery type renders correctly with regular props 1`] = `
       Next
       <svg
         aria-hidden={true}
-        className="icon icon"
+        className="icon icon colorPrimary"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -561,7 +561,7 @@ exports[`Steps with numeric type renders correctly when steps content is on top
       Back
       <svg
         aria-hidden={true}
-        className="icon icon"
+        className="icon icon colorPrimary"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -599,7 +599,7 @@ exports[`Steps with numeric type renders correctly when steps content is on top
       Next
       <svg
         aria-hidden={true}
-        className="icon icon disabled"
+        className="icon icon colorPrimary disabled"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -643,7 +643,7 @@ exports[`Steps with numeric type renders correctly when viewing first step 1`] =
       Back
       <svg
         aria-hidden={true}
-        className="icon icon disabled"
+        className="icon icon colorPrimary disabled"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -680,7 +680,7 @@ exports[`Steps with numeric type renders correctly when viewing first step 1`] =
       Next
       <svg
         aria-hidden={true}
-        className="icon icon"
+        className="icon icon colorPrimary"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -726,7 +726,7 @@ exports[`Steps with numeric type renders correctly when viewing last step 1`] =
       Back
       <svg
         aria-hidden={true}
-        className="icon icon"
+        className="icon icon colorPrimary"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -764,7 +764,7 @@ exports[`Steps with numeric type renders correctly when viewing last step 1`] =
       Next
       <svg
         aria-hidden={true}
-        className="icon icon disabled"
+        className="icon icon colorPrimary disabled"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -811,7 +811,7 @@ exports[`Steps with numeric type renders correctly with regular props 1`] = `
       Back
       <svg
         aria-hidden={true}
-        className="icon icon disabled"
+        className="icon icon colorPrimary disabled"
         data-testid="icon"
         fill="currentColor"
         height="16"
@@ -848,7 +848,7 @@ exports[`Steps with numeric type renders correctly with regular props 1`] = `
       Next
       <svg
         aria-hidden={true}
-        className="icon icon"
+        className="icon icon colorPrimary"
         data-testid="icon"
         fill="currentColor"
         height="16"
diff --git a/packages/core/src/components/Tipseen/Tipseen.tsx b/packages/core/src/components/Tipseen/Tipseen.tsx
index 96c50d4458..d01d948533 100644
--- a/packages/core/src/components/Tipseen/Tipseen.tsx
+++ b/packages/core/src/components/Tipseen/Tipseen.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, Fragment, ReactElement, useEffect, useRef, useState } from "react";
+import { forwardRef, Fragment, ReactElement, useEffect, useMemo, useRef, useState } from "react";
 import cx from "classnames";
 import { AnimationType, DialogPosition, EMPTY_ARR, HideShowEvent, JustifyType } from "../../constants";
 import useMergeRef from "../../hooks/useMergeRef";
@@ -7,7 +7,7 @@ import Button from "../../components/Button/Button";
 import IconButton from "../../components/IconButton/IconButton";
 import CloseSmall from "../../components/Icon/Icons/components/CloseSmall";
 import TipseenTitle from "./TipseenTitle";
-import { TIPSEEN_CLOSE_BUTTON_ARIA_LABEL, TipseenCloseButtonTheme } from "./TipseenConstants";
+import { TIPSEEN_CLOSE_BUTTON_ARIA_LABEL, TipseenCloseButtonTheme, TipseenColor } from "./TipseenConstants";
 import { ElementContent, VibeComponent, VibeComponentProps, withStaticProps } from "../../types";
 import { MoveBy } from "../../types/MoveBy";
 import { Modifier } from "react-popper";
@@ -16,6 +16,10 @@ import { ComponentDefaultTestId } from "../../tests/constants";
 import { getTestId } from "../../tests/test-ids-utils";
 import Text from "../Text/Text";
 import styles from "./Tipseen.module.scss";
+import { TooltipTheme } from "../Tooltip/TooltipConstants";
+import { ButtonColor } from "../Button/ButtonConstants";
+import { TypographyColor } from "../Typography/TypographyConstants";
+import React from "react";
 
 export interface TipseenProps extends VibeComponentProps {
   /**
@@ -60,14 +64,19 @@ export interface TipseenProps extends VibeComponentProps {
    */
   closeButtonTheme?: TipseenCloseButtonTheme;
   floating?: boolean;
+  /** The color of the Tipseen */
+  color?: TipseenColor;
 }
 
+export const TipseenContext = React.createContext<TipseenColor>(TipseenColor.PRIMARY);
+
 const Tipseen: VibeComponent<TipseenProps> & {
   closeButtonThemes?: typeof TipseenCloseButtonTheme;
   positions?: typeof DialogPosition;
   animationTypes?: typeof AnimationType;
   justifyTypes?: typeof JustifyType;
   hideShowTriggers?: typeof HideShowEvent;
+  colors?: typeof TipseenColor;
 } = forwardRef(
   (
     {
@@ -98,6 +107,7 @@ const Tipseen: VibeComponent<TipseenProps> & {
       tooltipArrowClassName,
       modifiers = EMPTY_ARR,
       floating = false,
+      color = TipseenColor.PRIMARY,
       "data-testid": dataTestId
     },
     ref
@@ -123,6 +133,17 @@ const Tipseen: VibeComponent<TipseenProps> & {
       };
     }, [showDelay, setDelayOpen]);
 
+    const textColor = useMemo(() => {
+      return color === TipseenColor.INVERTED ? TypographyColor.ON_INVERTED : TypographyColor.ON_PRIMARY;
+    }, [color]);
+    const closeButtonColor = useMemo(() => {
+      if (closeButtonTheme === TipseenCloseButtonTheme.LIGHT) {
+        return color === TipseenColor.INVERTED ? ButtonColor.ON_INVERTED_BACKGROUND : ButtonColor.ON_PRIMARY_COLOR;
+      } else {
+        return closeButtonTheme;
+      }
+    }, [color, closeButtonTheme]);
+
     const TipseenWrapper = ref || id ? "div" : Fragment;
     const tooltipContent = (
       <div>
@@ -131,20 +152,23 @@ const Tipseen: VibeComponent<TipseenProps> & {
             <IconButton
               hideTooltip
               className={cx(styles.tipseenCloseButton, {
-                [styles.dark]: closeButtonTheme === TipseenCloseButtonTheme.DARK
+                [styles.dark]:
+                  closeButtonTheme === TipseenCloseButtonTheme.DARK ||
+                  closeButtonTheme === TipseenCloseButtonTheme.FIXED_DARK
               })}
               onClick={onClose}
               size={Button.sizes.XS}
               kind={Button.kinds.TERTIARY}
-              color={Button.colors.ON_PRIMARY_COLOR}
+              // @ts-ignore
+              color={closeButtonColor}
               ariaLabel={overrideCloseAriaLabel}
               icon={CloseSmall}
             />
           )}
           <TipseenTitle text={title} className={cx(styles.tipseenTitle, titleClassName)} />
         </div>
-        <Text color={Text.colors.ON_PRIMARY} type={Text.types.TEXT2} element="p" className={cx(styles.tipseenContent)}>
-          {content}
+        <Text color={textColor} type={Text.types.TEXT2} element="p" className={cx(styles.tipseenContent)}>
+          <TipseenContext.Provider value={color}>{content}</TipseenContext.Provider>
         </Text>
       </div>
     );
@@ -166,7 +190,7 @@ const Tipseen: VibeComponent<TipseenProps> & {
           hideTrigger={hideTrigger}
           showTrigger={showTrigger}
           content={tooltipContent}
-          theme={Tooltip.themes.Primary}
+          theme={color === TipseenColor.INVERTED ? TooltipTheme.Dark : TooltipTheme.Primary}
           justify={justify}
           containerSelector={containerSelector}
           disableDialogSlide={false}
@@ -189,5 +213,6 @@ export default withStaticProps(Tipseen, {
   positions: DialogPosition,
   animationTypes: AnimationType,
   justifyTypes: JustifyType,
-  hideShowTriggers: HideShowEvent
+  hideShowTriggers: HideShowEvent,
+  colors: TipseenColor
 });
diff --git a/packages/core/src/components/Tipseen/TipseenBasicContent.module.scss b/packages/core/src/components/Tipseen/TipseenBasicContent.module.scss
index 6aaa948bc6..8e26d972ca 100644
--- a/packages/core/src/components/Tipseen/TipseenBasicContent.module.scss
+++ b/packages/core/src/components/Tipseen/TipseenBasicContent.module.scss
@@ -6,4 +6,11 @@
   @include tipseen-content-padding;
   display: flex;
   flex-direction: column;
+
+  // this is becasu the designer wanted the padding top
+  // to be 8px in case the tipseen have both content and image
+  &:not(:first-child) {
+    padding-top: var(--spacing-small);
+  }
 }
+
diff --git a/packages/core/src/components/Tipseen/TipseenConstants.ts b/packages/core/src/components/Tipseen/TipseenConstants.ts
index 1955482d6e..35cc8e1065 100644
--- a/packages/core/src/components/Tipseen/TipseenConstants.ts
+++ b/packages/core/src/components/Tipseen/TipseenConstants.ts
@@ -7,7 +7,14 @@ export const TIPSEEN_CLOSE_BUTTON_TEST_ID = "close-tipseen";
 export const TIPSEEN_CLOSE_BUTTON_ARIA_LABEL = "Close";
 export enum TipseenCloseButtonTheme {
   LIGHT = "light",
-  DARK = "dark"
+  DARK = "dark",
+  FIXED_LIGHT = "fixed-light",
+  FIXED_DARK = "fixed-dark"
+}
+
+export enum TipseenColor {
+  PRIMARY = "primary",
+  INVERTED = "inverted"
 }
 
 /**
diff --git a/packages/core/src/components/Tipseen/TipseenContent.tsx b/packages/core/src/components/Tipseen/TipseenContent.tsx
index aa44010c94..d9eb80f7a1 100644
--- a/packages/core/src/components/Tipseen/TipseenContent.tsx
+++ b/packages/core/src/components/Tipseen/TipseenContent.tsx
@@ -1,15 +1,22 @@
-import React, { FC } from "react";
+import React, { FC, useContext, useMemo } from "react";
 import cx from "classnames";
 import { NOOP } from "../../utils/function-utils";
 import Button from "../../components/Button/Button";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
-import { ButtonPropsBackwardCompatible, DISMISS_BUTTON_TEXT, SUBMIT_BUTTON_TEXT } from "./TipseenConstants";
+import {
+  ButtonPropsBackwardCompatible,
+  DISMISS_BUTTON_TEXT,
+  SUBMIT_BUTTON_TEXT,
+  TipseenColor
+} from "./TipseenConstants";
 import TipseenBasicContent from "./TipseenBasicContent";
 import { VibeComponentProps } from "../../types";
 import { ElementContent } from "../../types/ElementContent";
 import styles from "./TipseenContent.module.scss";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
+import { TipseenContext } from "./Tipseen";
+import { ButtonColor } from "../Button/ButtonConstants";
 
 const EMPTY_OBJECT: ButtonPropsBackwardCompatible = {};
 
@@ -79,6 +86,10 @@ const TipseenContent: FC<TipseenContentProps> = ({
     SUBMIT_BUTTON_TEXT
   );
   const overrideSubmitOnClick = backwardCompatibilityForProperties([onSubmit, submitDeprecatedOnClick], NOOP);
+  const color = useContext(TipseenContext);
+  const buttonColor = useMemo(() => {
+    return color === TipseenColor.INVERTED ? ButtonColor.ON_INVERTED_BACKGROUND : ButtonColor.ON_PRIMARY_COLOR;
+  }, [color]);
 
   return (
     <TipseenBasicContent title={title} titleClassName={titleClassName} id={id}>
@@ -87,7 +98,7 @@ const TipseenContent: FC<TipseenContentProps> = ({
         {overrideHideDismiss ? null : (
           <Button
             kind={Button.kinds.TERTIARY}
-            color={Button.colors.ON_PRIMARY_COLOR}
+            color={buttonColor}
             className={cx(styles.dismiss, dismissClassName)}
             size={Button.sizes.SMALL}
             onClick={overrideDismissOnClick}
@@ -100,7 +111,7 @@ const TipseenContent: FC<TipseenContentProps> = ({
         {overrideHideSubmit ? null : (
           <Button
             kind={Button.kinds.PRIMARY}
-            color={Button.colors.ON_PRIMARY_COLOR}
+            color={buttonColor}
             size={Button.sizes.SMALL}
             className={submitClassName}
             onClick={overrideSubmitOnClick}
diff --git a/packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.module.scss b/packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.module.scss
index 56b40c7f9a..3c2940d30d 100644
--- a/packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.module.scss
+++ b/packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.module.scss
@@ -7,3 +7,7 @@
   position: relative;
   z-index: 1;
 }
+
+.colorInverted {
+  border-color: var(--inverted-color-background);
+}
\ No newline at end of file
diff --git a/packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.tsx b/packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.tsx
index 3280be627e..ef7c1485d3 100644
--- a/packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.tsx
+++ b/packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, PropsWithChildren, ReactNode, useRef } from "react";
+import React, { forwardRef, PropsWithChildren, ReactNode, useContext, useMemo, useRef } from "react";
 import cx from "classnames";
 import useMergeRef from "../../../hooks/useMergeRef";
 import VibeComponentProps from "../../../types/VibeComponentProps";
@@ -6,6 +6,9 @@ import VibeComponent from "../../../types/VibeComponent";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../tests/constants";
 import styles from "./TipseenMedia.module.scss";
+import { TipseenContext } from "../Tipseen";
+import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
+import { camelCase } from "lodash-es";
 
 export interface TipseenMediaProps extends PropsWithChildren<VibeComponentProps> {
   children: ReactNode;
@@ -15,11 +18,16 @@ const TipseenMedia: VibeComponent<TipseenMediaProps, HTMLElement> = forwardRef(
   ({ className, id, "data-testid": dataTestId, children }, ref) => {
     const componentRef = useRef(null);
     const mergedRef = useMergeRef(ref, componentRef);
+    const color = useContext(TipseenContext);
+
+    const classNames = useMemo(() => {
+      return cx(styles.tipseenMedia, getStyle(styles, camelCase("color-" + color)), className);
+    }, [color, className]);
 
     return (
       <div
         ref={mergedRef}
-        className={cx(styles.tipseenMedia, className)}
+        className={classNames}
         id={id}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN_MEDIA, id)}
       >
diff --git a/packages/core/src/components/Tipseen/TipseenTitle.tsx b/packages/core/src/components/Tipseen/TipseenTitle.tsx
index 3f86096d62..f0fc1a2c09 100644
--- a/packages/core/src/components/Tipseen/TipseenTitle.tsx
+++ b/packages/core/src/components/Tipseen/TipseenTitle.tsx
@@ -16,7 +16,7 @@ const TipseenTitle: FC<TipseenTitleProps> = ({ text, className, id, "data-testid
       type={Text.types.TEXT1}
       weight={Text.weights.BOLD}
       role="heading"
-      color={Text.colors.ON_PRIMARY}
+      color={Text.colors.INHERIT}
       aria-level={3}
       maxLines={2}
       className={cx(styles.title, className)}
diff --git a/packages/core/src/components/Tipseen/TipseenWizard.tsx b/packages/core/src/components/Tipseen/TipseenWizard.tsx
index dea21f3eaf..bd3108f874 100644
--- a/packages/core/src/components/Tipseen/TipseenWizard.tsx
+++ b/packages/core/src/components/Tipseen/TipseenWizard.tsx
@@ -1,9 +1,12 @@
-import React, { FC, useMemo } from "react";
+import React, { FC, useContext, useMemo } from "react";
 import cx from "classnames";
 import Steps, { StepsProps } from "../Steps/Steps";
 import Button from "../../components/Button/Button";
 import TipseenBasicContent from "./TipseenBasicContent";
 import styles from "./TipseenWizard.module.scss";
+import { TipseenContext } from "./Tipseen";
+import { TipseenColor } from "./TipseenConstants";
+import { StepsColor } from "../Steps/StepsConstants";
 
 const FINISH_TEXT = "Got it";
 
@@ -18,6 +21,11 @@ export interface TipseenWizardProps extends StepsProps {
 
 const TipseenWizard: FC<TipseenWizardProps> = ({ id, title, onFinish, titleClassName, className, ...stepsProps }) => {
   const overrideStepsProps = stepsProps as StepsProps;
+  const color = useContext(TipseenContext);
+  const buttonColor = useMemo(() => {
+    return color === TipseenColor.INVERTED ? StepsColor.ON_INVERTED_BACKGROUND : StepsColor.ON_PRIMARY_COLOR;
+  }, [color]);
+
   const nextButtonProps = useMemo(
     () => ({
       kind: Button.kinds.PRIMARY,
@@ -48,7 +56,7 @@ const TipseenWizard: FC<TipseenWizardProps> = ({ id, title, onFinish, titleClass
     >
       <Steps
         className={cx(styles.tipseenWizardWizard)}
-        isOnPrimary
+        color={buttonColor}
         isContentOnTop
         areButtonsIconsHidden
         backButtonProps={backButtonProps}
diff --git a/packages/core/src/components/Tipseen/__stories__/assets/index.js b/packages/core/src/components/Tipseen/__stories__/assets/index.js
index 48c39ed0cc..5af0b1c249 100644
--- a/packages/core/src/components/Tipseen/__stories__/assets/index.js
+++ b/packages/core/src/components/Tipseen/__stories__/assets/index.js
@@ -1,2 +1,2 @@
 export { default as video } from "./video.mp4";
-export { default as picture } from "./picture.png";
+export { default as picture } from "./picture.svg";
diff --git a/packages/core/src/components/Tipseen/__stories__/assets/picture.png b/packages/core/src/components/Tipseen/__stories__/assets/picture.png
deleted file mode 100644
index c8ddc92666..0000000000
Binary files a/packages/core/src/components/Tipseen/__stories__/assets/picture.png and /dev/null differ
diff --git a/packages/core/src/components/Tipseen/__stories__/assets/picture.svg b/packages/core/src/components/Tipseen/__stories__/assets/picture.svg
new file mode 100644
index 0000000000..ee1273673f
--- /dev/null
+++ b/packages/core/src/components/Tipseen/__stories__/assets/picture.svg
@@ -0,0 +1,22 @@
+<svg width="288" height="145" viewBox="0 0 288 145" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_56661_34367)">
+<rect width="290" height="145" fill="#6C6CFF"/>
+<rect opacity="0.2" width="195.146" height="143.413" rx="4" transform="matrix(0.866044 -0.499967 0.866044 0.499967 86.0872 112.804)" fill="white"/>
+<rect opacity="0.2" width="40.654" height="143.413" rx="4" transform="matrix(0.866044 -0.499967 0.866044 0.499967 45.634 136.844)" fill="white"/>
+<rect opacity="0.1" width="25.8673" height="7.7747" rx="3.88735" transform="matrix(0.866044 -0.499967 0.866044 0.499967 57.823 136.086)" fill="white"/>
+<rect opacity="0.1" width="25.8673" height="7.7747" rx="3.88735" transform="matrix(0.866044 -0.499967 0.866044 0.499967 70.0117 142.889)" fill="white"/>
+<rect opacity="0.1" width="25.8673" height="7.7747" rx="3.88735" transform="matrix(0.866044 -0.499967 0.866044 0.499967 82.2004 150.059)" fill="white"/>
+<rect opacity="0.1" width="25.8673" height="7.7747" rx="3.88735" transform="matrix(0.866044 -0.499967 0.866044 0.499967 94.3894 157.229)" fill="white"/>
+<rect opacity="0.1" width="97.4952" height="35.9932" rx="14.8194" transform="matrix(0.866044 -0.499967 0.866044 0.499967 102.276 112.058)" fill="white"/>
+<rect opacity="0.1" width="212.192" height="9.3922" rx="4" transform="matrix(0.866044 -0.499967 -0.866044 -0.499967 42.0493 131.417)" fill="white"/>
+<rect opacity="0.1" width="54.0554" height="35.9932" rx="14.8194" transform="matrix(-0.866044 0.499967 0.866044 0.499967 239.261 32.7026)" fill="white"/>
+<rect opacity="0.1" width="123.085" height="35.9932" rx="14.8194" transform="matrix(0.866044 -0.499967 0.866044 0.499967 183.296 152.777)" fill="white"/>
+<rect opacity="0.1" width="57.5582" height="35.9932" rx="14.8194" transform="matrix(0.866044 -0.499967 0.866044 0.499967 139.56 133.638)" fill="white"/>
+<rect opacity="0.1" width="57.5582" height="35.9932" rx="14.8194" transform="matrix(0.866044 -0.499967 0.866044 0.499967 194.768 101.375)" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_56661_34367">
+<rect width="290" height="145" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/core/src/components/Tipseen/__stories__/tipseen.mdx b/packages/core/src/components/Tipseen/__stories__/tipseen.mdx
index 8f4353e6f7..42d093bf76 100644
--- a/packages/core/src/components/Tipseen/__stories__/tipseen.mdx
+++ b/packages/core/src/components/Tipseen/__stories__/tipseen.mdx
@@ -2,9 +2,10 @@ import { Canvas, Meta, Story } from "@storybook/blocks";
 import { Link } from "vibe-storybook-components";
 import Tipseen from "../Tipseen";
 import TipseenContent from "../TipseenContent";
+import TipseenWizard from "../TipseenWizard";
 import Icon from "../../Icon/Icon";
 import { Board, BoardPrivate } from "../../Icon/Icons";
-import { modifiers, TipCheckYourself } from "./tipseen.stories.helpers";
+import { modifiers, TipCheckYourself, wizardContent } from "./tipseen.stories.helpers";
 import {
   ATTENTION_BOX,
   CHIP,
@@ -28,7 +29,7 @@ import { tipseenTemplate } from "./tipseen.stories";
 
 ## Overview
 
-Tipseen is a virtual unboxing experience that helps users get started with the system.
+Tipseen is a virtual unboxing experience that helps users get started with the system and discover new features.
 
 <Canvas>
   <Story of={TipseenStories.Overview} />
@@ -42,7 +43,7 @@ Tipseen is a virtual unboxing experience that helps users get started with the s
 
 <UsageGuidelines
   guidelines={[
-    "Use for onboarding screens, new features, or any guidance a user needs.",
+    "Use for onboarding screens, new features discovery, or any guidance a user needs.",
     "Use when the user is not yet familiar with the system’s UI or ready to learn about it.",
     "The tip will appear until closed by an X button or call to action button."
   ]}
@@ -52,10 +53,15 @@ Tipseen is a virtual unboxing experience that helps users get started with the s
 
 ## Variants
 
-### Default
+### Colors
+
+Tipseens come in 2 colors: inverted and primary. \
+The inverted type is the default. \
+Use the inverted color for feature discovery, or to give the user general guidance. \
+Use the primary color to bring attention to updates about your product offering.
 
 <Canvas>
-  <Story of={TipseenStories.Default} />
+  <Story of={TipseenStories.Colors} />
 </Canvas>
 
 ### Tipseen with a wizard
@@ -94,6 +100,40 @@ In this case, the Tipseen position will be the right corner of the screen and wi
 <ComponentRules
   className="monday-storybook-tipseen_rules"
   rules={[
+    {
+      positive: {
+        component: (
+          <div className="monday-storybook-tipseen_column-wrapper right">
+            <Tipseen
+              modifiers={modifiers}
+              position={Tipseen.positions.RIGHT}
+              color={Tipseen.colors.INVERTED}
+              content={<TipseenWizard title="This is a title" steps={wizardContent} activeStepIndex={4} onFinish={() => {}} />}
+            >
+              <div className="monday-storybook-tipseen_inline-container right" />{" "}
+            </Tipseen>
+          </div>
+        ),
+        description:
+          "When using a Tipseen wizard, allow the user to complete the process and close the Tipseen by leaving the last CTA enabled."
+      },
+      negative: {
+        component: (
+          <div className="monday-storybook-tipseen_column-wrapper right">
+            <Tipseen
+              modifiers={modifiers}
+              position={Tipseen.positions.RIGHT}
+              color={Tipseen.colors.INVERTED}
+              content={<TipseenWizard title="This is a title" steps={wizardContent} activeStepIndex={4} />}
+            >
+              <div className="monday-storybook-tipseen_inline-container right" />{" "}
+            </Tipseen>
+          </div>
+        ),
+        description:
+          "Don’t finish the Tipseen wizard process with a disabled CTA."
+      }
+    },
     {
       positive: {
         component: (
@@ -105,7 +145,8 @@ In this case, the Tipseen position will be the right corner of the screen and wi
             <Tipseen
               modifiers={modifiers}
               position={Tipseen.positions.RIGHT}
-              content={<TipseenContent title="Step1 of 7">Click on the “Sales” board to get started</TipseenContent>}
+              color={Tipseen.colors.INVERTED}
+              content={<TipseenContent title="Step 1 of 5">Click on the “Sales” board to get started.</TipseenContent>}
             >
               <div className="monday-storybook-tipseen_column-item monday-storybook-tipseen_hovered">
                 <Icon icon={Board} iconSize="24" />
@@ -127,7 +168,8 @@ In this case, the Tipseen position will be the right corner of the screen and wi
             <Tipseen
               modifiers={modifiers}
               position={Tipseen.positions.TOP}
-              content={<TipseenContent>You still have 14 days on your Pro trial, Enjoy it!</TipseenContent>}
+              color={Tipseen.colors.INVERTED}
+              content={<TipseenContent>You still have 14 days on your free trial, enjoy it! At the end you can choose your favorite plan.</TipseenContent>}
             >
               <div className="monday-storybook-tipseen_inline-container" />
             </Tipseen>
@@ -141,6 +183,47 @@ In this case, the Tipseen position will be the right corner of the screen and wi
           </>
         )
       }
+    },
+        {
+      positive: {
+        component: (
+          <div className="monday-storybook-tipseen_box">
+            <Tipseen
+              modifiers={modifiers}
+              position={Tipseen.positions.RIGHT}
+              color={Tipseen.colors.INVERTED}
+              content={<TipseenContent title="Step 1 of 5">Click on the “Sales” board to get started.</TipseenContent>}
+            >
+              <div className="monday-storybook-tipseen_column-item monday-storybook-tipseen_hovered">
+                <Icon icon={Board} iconSize="24" />
+                <span>Sales Pipeline</span>
+              </div>
+            </Tipseen>
+          </div>
+        ),
+        description:
+          "Add a pointer to indicate the specific component that the tipseen comes from."
+      },
+      negative: {
+        component: (
+          <div className="monday-storybook-tipseen_box">
+            <Tipseen
+              modifiers={modifiers}
+              position={Tipseen.positions.RIGHT}
+              color={Tipseen.colors.INVERTED}
+              tip={false}
+              content={<TipseenContent title="Step 1 of 5">Click on the “Sales” board to get started.</TipseenContent>}
+            >
+              <div className="monday-storybook-tipseen_column-item monday-storybook-tipseen_hovered">
+                <Icon icon={Board} iconSize="24" />
+                <span>Sales Pipeline</span>
+              </div>
+            </Tipseen>
+          </div>
+        ),
+        description:
+          "Don’t use a tipseen without a pointer, unless it’s a general tipseen for an entire screen."
+      }
     }
   ]}
 />
diff --git a/packages/core/src/components/Tipseen/__stories__/tipseen.stories.helpers.js b/packages/core/src/components/Tipseen/__stories__/tipseen.stories.helpers.js
index 6aad81a396..f0d7f0324b 100644
--- a/packages/core/src/components/Tipseen/__stories__/tipseen.stories.helpers.js
+++ b/packages/core/src/components/Tipseen/__stories__/tipseen.stories.helpers.js
@@ -15,6 +15,14 @@ export const modifiers = [
   }
 ];
 
+export const wizardContent = [
+  <div>Message for the user will appear here, to give more information about the feature.</div>,
+  <div>Message for the user will appear here, to give more information about the feature.</div>,
+  <div>Message for the user will appear here, to give more information about the feature.</div>,
+  <div>Message for the user will appear here, to give more information about the feature.</div>,
+  <div>Message for the user will appear here, to give more information about the feature.</div>
+];
+
 export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     If you need to provide additional information about a component, use the{" "}
diff --git a/packages/core/src/components/Tipseen/__stories__/tipseen.stories.js b/packages/core/src/components/Tipseen/__stories__/tipseen.stories.js
index 27289c67c0..201590436b 100644
--- a/packages/core/src/components/Tipseen/__stories__/tipseen.stories.js
+++ b/packages/core/src/components/Tipseen/__stories__/tipseen.stories.js
@@ -52,33 +52,52 @@ export const Overview = {
 
   args: {
     title: "Title",
-    children: "Popover message will appear here loremipsum dolor samet…",
+    children: "Message for the user will appear here, to give more information about the feature.",
     position: Tipseen.positions.RIGHT,
-    isDismissHidden: false
+    isDismissHidden: false,
+    color: Tipseen.colors.INVERTED
   }
 };
 
-export const Default = {
+export const Colors = {
   // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
   render:
     // Therefore, there is no need to move this prop in your implementations.
     () => {
       return (
-        <Tipseen
-          modifiers={modifiers}
-          position={Tipseen.positions.RIGHT}
-          content={
-            <TipseenContent title="This is a title" hideDismiss>
-              Popover message will appear here loremipsum dolor samet…
-            </TipseenContent>
-          }
-        >
-          <div className="monday-storybook-tipseen_container" />
-        </Tipseen>
+        <>
+          <div className="monday-storybook-tipseen_small-box">
+            <Tipseen
+              modifiers={modifiers}
+              position={Tipseen.positions.RIGHT}
+              color={Tipseen.colors.INVERTED}
+              content={
+                <TipseenContent title="This is a title" hideDismiss>
+                  Message for the user will appear here, to give more information about the feature.
+                </TipseenContent>
+              }
+            >
+              <div className="monday-storybook-tipseen_container" />
+            </Tipseen>
+          </div>
+          <div className="monday-storybook-tipseen_small-box">
+            <Tipseen
+              modifiers={modifiers}
+              position={Tipseen.positions.RIGHT}
+              content={
+                <TipseenContent title="This is a title" hideDismiss>
+                  Message for the user will appear here, to give more information about the feature.
+                </TipseenContent>
+              }
+            >
+              <div className="monday-storybook-tipseen_container" />
+            </Tipseen>
+          </div>
+        </>
       );
     },
 
-  name: "Default"
+  name: "Colors"
 };
 
 export const TipseenWithAWizard = {
@@ -104,6 +123,7 @@ export const TipseenWithAWizard = {
         <Tipseen
           modifiers={modifiers}
           position={Tipseen.positions.RIGHT}
+          color={Tipseen.colors.INVERTED}
           content={
             <TipseenWizard
               title="This is a title"
@@ -128,11 +148,11 @@ export const TipseenWithImage = {
     // Therefore, there is no need to move this prop in your implementations.
     () => {
       const content = [
-        <div>Popover message will appear here lorem ipsum dolor samet…</div>,
-        <div>Popover message will appear here lorem ipsum dolor samet…</div>,
-        <div>Popover message will appear here lorem ipsum dolor samet…</div>,
-        <div>Popover message will appear here lorem ipsum dolor samet…</div>,
-        <div>Popover message will appear here lorem ipsum dolor samet…</div>
+        <div>Message for the user will appear here, to give more information about the feature.</div>,
+        <div>Message for the user will appear here, to give more information about the feature.</div>,
+        <div>Message for the user will appear here, to give more information about the feature.</div>,
+        <div>Message for the user will appear here, to give more information about the feature.</div>,
+        <div>Message for the user will appear here, to give more information about the feature.</div>
       ];
 
       return (
@@ -140,6 +160,7 @@ export const TipseenWithImage = {
           position={Tipseen.positions.RIGHT}
           modifiers={modifiers}
           closeButtonTheme={Tipseen.closeButtonThemes.DARK}
+          color={Tipseen.colors.INVERTED}
           content={
             <>
               <TipseenImage className="monday-storybook-tipseen_image" src={picture} />
@@ -165,6 +186,7 @@ export const TipseenWithCustomMedia = {
           position={Tipseen.positions.RIGHT}
           modifiers={modifiers}
           closeButtonTheme={Tipseen.closeButtonThemes.DARK}
+          color={Tipseen.colors.INVERTED}
           content={
             <>
               <TipseenMedia>
@@ -179,7 +201,7 @@ export const TipseenWithCustomMedia = {
                 />
               </TipseenMedia>
               <TipseenContent title="This is a title">
-                Popover message will appear here lorem ipsum dolor samet…
+                Message for the user will appear here, to give more information about the feature.
               </TipseenContent>
             </>
           }
@@ -199,11 +221,12 @@ export const FloatingTipseen = {
       <Tipseen
         closeButtonTheme={Tipseen.closeButtonThemes.DARK}
         floating
+        color={Tipseen.colors.INVERTED}
         content={
           <>
             <TipseenImage className="monday-storybook-tipseen_image" src={picture} />
             <TipseenContent title="This is a Floating Tipseen">
-              Popover message will appear here lorem ipsum dolor samet…
+              Message for the user will appear here, to give more information about the feature.
             </TipseenContent>
           </>
         }
diff --git a/packages/core/src/components/Tipseen/__stories__/tipseen.stories.scss b/packages/core/src/components/Tipseen/__stories__/tipseen.stories.scss
index cd4bce3cbe..35dd89f6af 100644
--- a/packages/core/src/components/Tipseen/__stories__/tipseen.stories.scss
+++ b/packages/core/src/components/Tipseen/__stories__/tipseen.stories.scss
@@ -31,6 +31,11 @@ $component-rules-grid-cell-array-calc: calc(50% - #{$tipseen-rules-cell-min-widt
   &_inline-container {
     width: 300px;
     height: 20px;
+
+    &.right {
+      width: 84px;
+      height: 100%;
+    }
   }
 
   &_inline-spacing {
@@ -44,6 +49,7 @@ $component-rules-grid-cell-array-calc: calc(50% - #{$tipseen-rules-cell-min-widt
     align-items: center;
     height: 30px;
     gap: 10px;
+    min-width: 160px;
   }
 
   &_column-wrapper {
@@ -52,11 +58,22 @@ $component-rules-grid-cell-array-calc: calc(50% - #{$tipseen-rules-cell-min-widt
     display: flex;
     justify-content: center;
     align-items: flex-end;
+
+    &.right {
+      justify-content: flex-start;
+    }
   }
 
   &_box {
     padding-right: 280px;
-    padding-top: 50px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center
+  }
+
+  &_small-box {
+    padding-right: 312px;
     height: 100%;
   }
 
diff --git a/packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap b/packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap
index c40c5ab159..b859b8aa7f 100644
--- a/packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap
+++ b/packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap
@@ -169,7 +169,7 @@ Array [
               aria-busy={false}
               aria-disabled={false}
               aria-label="Close"
-              className="tipseenCloseButton dark button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
+              className="tipseenCloseButton dark button sizeMedium kindTertiary colorDark noSidePadding"
               data-testid="icon-button"
               onBlur={[Function]}
               onClick={[Function]}
@@ -526,7 +526,7 @@ Array [
 exports[`Snapshot tests TipseenTitle should render correctly with given text 1`] = `
 <div
   aria-level={3}
-  className="typography onPrimary start multiLineEllipsis text text1Bold title"
+  className="typography inherit start multiLineEllipsis text text1Bold title"
   data-testid="tipseen-title"
   role="heading"
 >