diff --git a/changes/issue-27775-fix-activity-date-tooltip b/changes/issue-27775-fix-activity-date-tooltip
new file mode 100644
index 0000000000..dceeb64642
--- /dev/null
+++ b/changes/issue-27775-fix-activity-date-tooltip
@@ -0,0 +1,2 @@
+- fix an issue where the upcoming host activities showed the incorrect created at date in the
+  tooltip
diff --git a/frontend/components/ActivityItem/ActivityItem.tsx b/frontend/components/ActivityItem/ActivityItem.tsx
index c0640b2447..34df4fadc0 100644
--- a/frontend/components/ActivityItem/ActivityItem.tsx
+++ b/frontend/components/ActivityItem/ActivityItem.tsx
@@ -2,7 +2,12 @@ import React from "react";
 import ReactTooltip from "react-tooltip";
 import classnames from "classnames";
 
-import { IActivity, IActivityDetails } from "interfaces/activity";
+import {
+  IActivity,
+  IActivityDetails,
+  IHostPastActivity,
+  IHostUpcomingActivity,
+} from "interfaces/activity";
 import {
   addGravatarUrlToResource,
   internationalTimeFormat,
@@ -19,6 +24,15 @@ import { noop } from "lodash";
 
 const baseClass = "activity-item";
 
+const generateActivityId = (
+  activity: IActivity | IHostPastActivity | IHostUpcomingActivity
+) => {
+  if ("id" in activity) {
+    return `activity-${activity.id}`;
+  }
+  return `activity-${activity.uuid}`;
+};
+
 export interface IShowActivityDetailsData {
   type: string;
   details?: IActivityDetails;
@@ -35,7 +49,7 @@ export type ShowActivityDetailsHandler = ({
 }: IShowActivityDetailsData) => void;
 
 interface IActivityItemProps {
-  activity: IActivity;
+  activity: IActivity | IHostPastActivity | IHostUpcomingActivity;
   children: React.ReactNode;
   /**
    * Set this to `true` when rendering only this activity by itself. This will
@@ -108,6 +122,8 @@ const ActivityItem = ({
     onCancel();
   };
 
+  const tooltipId = generateActivityId(activity);
+
   return (
     <div className={classNames}>
       <div className={`${baseClass}__avatar-wrapper`}>
@@ -133,7 +149,7 @@ const ActivityItem = ({
           <span
             className={`${baseClass}__details-bottomline`}
             data-tip
-            data-for={`activity-${activity.id}`}
+            data-for={tooltipId}
           >
             {activityCreatedAt && dateAgo(activityCreatedAt)}
           </span>
@@ -143,7 +159,7 @@ const ActivityItem = ({
               place="top"
               type="dark"
               effect="solid"
-              id={`activity-${activity.id}`}
+              id={tooltipId}
               backgroundColor={COLORS["tooltip-bg"]}
             >
               {internationalTimeFormat(activityCreatedAt)}
diff --git a/frontend/interfaces/activity.ts b/frontend/interfaces/activity.ts
index 1f730781b9..3286823b32 100644
--- a/frontend/interfaces/activity.ts
+++ b/frontend/interfaces/activity.ts
@@ -158,7 +158,10 @@ export type IHostPastActivity = Omit<IActivity, "type" | "details"> & {
   details: IActivityDetails;
 };
 
-export type IHostUpcomingActivity = Omit<IActivity, "type" | "details"> & {
+export type IHostUpcomingActivity = Omit<
+  IActivity,
+  "id" | "type" | "details"
+> & {
   uuid: string;
   type: IHostUpcomingActivityType;
   details: IActivityDetails;
diff --git a/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx b/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx
index 8f0206c46e..a53b6d144f 100644
--- a/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx
+++ b/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx
@@ -59,7 +59,7 @@ const UpcomingActivityFeed = ({
             upcomingActivityComponentMap[activity.type];
           return (
             <ActivityItemComponent
-              key={activity.id}
+              key={activity.uuid}
               tab="upcoming"
               activity={activity}
               onShowDetails={onShowDetails}