diff --git a/changes/25038-fix-profile-status-aggregate-tooltips-spacing b/changes/25038-fix-profile-status-aggregate-tooltips-spacing
new file mode 100644
index 0000000000..79504e60ec
--- /dev/null
+++ b/changes/25038-fix-profile-status-aggregate-tooltips-spacing
@@ -0,0 +1 @@
+* Add offset to the tooltips on hover of the profile aggregate status indicators.
diff --git a/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx b/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx
index e0ae3cd20d..3ef8a5c8f7 100644
--- a/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx
+++ b/frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.tsx
@@ -1,11 +1,9 @@
 import React from "react";
-import ReactTooltip from "react-tooltip";
-import { uniqueId } from "lodash";
 import classnames from "classnames";
 
 import { IconNames } from "components/icons";
 import Icon from "components/Icon";
-import { COLORS } from "styles/var/colors";
+import TooltipWrapper from "components/TooltipWrapper";
 
 const baseClass = "status-indicator-with-icon";
 
@@ -46,7 +44,6 @@ const StatusIndicatorWithIcon = ({
   valueClassName,
 }: IStatusIndicatorWithIconProps) => {
   const classNames = classnames(baseClass, className);
-  const id = `status-${uniqueId()}`;
 
   const valueClasses = classnames(`${baseClass}__value`, valueClassName, {
     [`${baseClass}__value-vertical`]: layout === "vertical",
@@ -59,21 +56,18 @@ const StatusIndicatorWithIcon = ({
   );
 
   const indicatorContent = tooltip ? (
-    <>
-      <span data-tip data-for={id}>
-        {valueContent}
-      </span>
-      <ReactTooltip
-        className={`${baseClass}__tooltip`}
-        place={tooltip?.position ? tooltip.position : "top"}
-        type="dark"
-        effect="solid"
-        id={id}
-        backgroundColor={COLORS["tooltip-bg"]}
-      >
-        {tooltip.tooltipText}
-      </ReactTooltip>
-    </>
+    <TooltipWrapper
+      className={`${baseClass}__tooltip`}
+      tooltipClass="indicator-tip-text"
+      position="top"
+      tipContent={tooltip.tooltipText}
+      tipOffset={10}
+      showArrow
+      underline={false}
+      fixedPositionStrategy
+    >
+      {valueContent}
+    </TooltipWrapper>
   ) : (
     <span>{valueContent}</span>
   );
diff --git a/frontend/components/StatusIndicatorWithIcon/_styles.scss b/frontend/components/StatusIndicatorWithIcon/_styles.scss
index c5589de2d7..35009c7d95 100644
--- a/frontend/components/StatusIndicatorWithIcon/_styles.scss
+++ b/frontend/components/StatusIndicatorWithIcon/_styles.scss
@@ -19,4 +19,8 @@
     flex-direction: column;
     gap: $pad-xsmall;
   }
+
+  .indicator-tip-text {
+    text-align: center;
+  }
 }
diff --git a/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/_styles.scss b/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/_styles.scss
index c37c7cf654..c945f75191 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/_styles.scss
+++ b/frontend/pages/ManageControlsPage/OSSettings/ProfileStatusAggregate/_styles.scss
@@ -42,4 +42,8 @@
   &__status-indicator-value {
     font-weight: $bold;
   }
+
+  .icon {
+    margin-right: initial;
+  }
 }