diff --git a/apps/web/core/components/pages/header/copy-link-control.tsx b/apps/web/core/components/pages/header/copy-link-control.tsx
index 9e8dffe618a..613ff5fd76e 100644
--- a/apps/web/core/components/pages/header/copy-link-control.tsx
+++ b/apps/web/core/components/pages/header/copy-link-control.tsx
@@ -2,7 +2,7 @@ import { useState, useRef, useEffect, useCallback } from "react";
 import { observer } from "mobx-react";
 import { Link, Check } from "lucide-react";
 // plane imports
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 import { IconButton } from "@plane/propel/icon-button";
 import { cn } from "@plane/utils";
 // hooks
diff --git a/apps/web/core/components/pages/header/syncing-badge.tsx b/apps/web/core/components/pages/header/syncing-badge.tsx
index 56a0767eb83..4aac9f18188 100644
--- a/apps/web/core/components/pages/header/syncing-badge.tsx
+++ b/apps/web/core/components/pages/header/syncing-badge.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { CloudOff, Dot } from "lucide-react";
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 import { Badge } from "@plane/propel/badge";
 
 type Props = {
diff --git a/apps/web/core/components/profile/activity/profile-activity-list.tsx b/apps/web/core/components/profile/activity/profile-activity-list.tsx
index 800e21680b5..872118d1cdc 100644
--- a/apps/web/core/components/profile/activity/profile-activity-list.tsx
+++ b/apps/web/core/components/profile/activity/profile-activity-list.tsx
@@ -70,15 +70,15 @@ export const ProfileActivityListPage = observer(function ProfileActivityListPage
                           alt={activityItem.actor_detail.display_name}
                           height={30}
                           width={30}
-                          className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-on-color"
+                          className="grid h-7 w-7 place-items-center rounded-full border-2 border-subtle-1 bg-layer-3"
                         />
                       ) : (
-                        <div className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 capitalize text-on-color">
+                        <div className="grid h-7 w-7 place-items-center rounded-full border-2 border-subtle-1 bg-layer-3 capitalize">
                           {activityItem.actor_detail.display_name?.[0]}
                         </div>
                       )}
 
-                      <span className="ring-6 flex h-6 w-6 p-2 items-center justify-center rounded-full bg-layer-1 text-secondary ring-white">
+                      <span className="flex h-6 w-6 p-2 items-center justify-center rounded-full bg-layer-3 text-secondary">
                         <MessageSquare className="!text-20 text-secondary" aria-hidden="true" />
                       </span>
                     </div>
@@ -139,7 +139,7 @@ export const ProfileActivityListPage = observer(function ProfileActivityListPage
                                     className="h-full w-full rounded-full object-cover"
                                   />
                                 ) : (
-                                  <div className="grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-11 capitalize text-on-color">
+                                  <div className="grid h-6 w-6 place-items-center rounded-full border-2 border-subtle-1 bg-layer-3 text-11 capitalize">
                                     {activityItem.actor_detail.display_name?.[0]}
                                   </div>
                                 )}
diff --git a/apps/web/core/components/readonly/labels.tsx b/apps/web/core/components/readonly/labels.tsx
index a154b216095..c9773259cfd 100644
--- a/apps/web/core/components/readonly/labels.tsx
+++ b/apps/web/core/components/readonly/labels.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
 import { useLabel } from "@/hooks/store/use-label";
diff --git a/packages/editor/src/core/extensions/code/code-block-node-view.tsx b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
index 4cc5d60e41e..03d33f44b4b 100644
--- a/packages/editor/src/core/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
@@ -5,7 +5,7 @@ import { common, createLowlight } from "lowlight";
 import { CopyIcon, CheckIcon } from "lucide-react";
 import { useState } from "react";
 // ui
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
 
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
index a433bd034e0..9863dad74e2 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import { ChevronDownIcon } from "@plane/propel/icons";
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 // local imports
 import type { TCustomImageAlignment } from "../../types";
 import { IMAGE_ALIGNMENT_OPTIONS } from "../../utils";
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
index 522a5c5fbca..b6b276f51d0 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
@@ -1,6 +1,6 @@
 import { Download } from "lucide-react";
 // plane imports
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 
 type Props = {
   src: string;
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
index 31a6b0a7e40..bd4ceb69c8c 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
@@ -1,7 +1,7 @@
 import { Maximize } from "lucide-react";
 import { useEffect, useState } from "react";
 // plane imports
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 // local imports
 import { ImageFullScreenModal } from "./modal";