diff --git a/packages/propel/package.json b/packages/propel/package.json
index b18bd730c65..c1bfc88ca42 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -23,6 +23,7 @@
     "./combobox": "./src/combobox/index.ts",
     "./tooltip": "./src/tooltip/index.ts",
     "./styles/fonts": "./src/styles/fonts/index.css",
+    "./card": "./src/card/index.ts",
     "./switch": "./src/switch/index.ts"
   },
   "dependencies": {
@@ -30,7 +31,6 @@
     "@plane/constants": "workspace:*",
     "@plane/hooks": "workspace:*",
     "@plane/types": "workspace:*",
-    "@plane/ui": "workspace:*",
     "@plane/utils": "workspace:*",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
diff --git a/packages/propel/src/card/card.tsx b/packages/propel/src/card/card.tsx
new file mode 100644
index 00000000000..f70e95cd4ea
--- /dev/null
+++ b/packages/propel/src/card/card.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { cn } from "@plane/utils";
+import {
+  ECardDirection,
+  ECardSpacing,
+  ECardVariant,
+  getCardStyle,
+  TCardDirection,
+  TCardSpacing,
+  TCardVariant,
+} from "./helper";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: TCardVariant;
+  spacing?: TCardSpacing;
+  direction?: TCardDirection;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+  const {
+    variant = ECardVariant.WITH_SHADOW,
+    direction = ECardDirection.COLUMN,
+    className = "",
+    spacing = ECardSpacing.LG,
+    children,
+    ...rest
+  } = props;
+
+  const style = getCardStyle(variant, spacing, direction);
+  return (
+    <div ref={ref} className={cn(style, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+Card.displayName = "plane-ui-card";
+
+export { Card, ECardVariant, ECardSpacing, ECardDirection };
diff --git a/packages/propel/src/card/helper.tsx b/packages/propel/src/card/helper.tsx
new file mode 100644
index 00000000000..8b80d0d9330
--- /dev/null
+++ b/packages/propel/src/card/helper.tsx
@@ -0,0 +1,36 @@
+export enum ECardVariant {
+  WITHOUT_SHADOW = "without-shadow",
+  WITH_SHADOW = "with-shadow",
+}
+export enum ECardDirection {
+  ROW = "row",
+  COLUMN = "column",
+}
+export enum ECardSpacing {
+  SM = "sm",
+  LG = "lg",
+}
+export type TCardVariant = ECardVariant.WITHOUT_SHADOW | ECardVariant.WITH_SHADOW;
+export type TCardDirection = ECardDirection.ROW | ECardDirection.COLUMN;
+export type TCardSpacing = ECardSpacing.SM | ECardSpacing.LG;
+
+export interface ICardProperties {
+  [key: string]: string;
+}
+
+const DEFAULT_STYLE =
+  "bg-custom-background-100 rounded-lg border-[0.5px] border-custom-border-200 w-full flex flex-col";
+export const containerStyle: ICardProperties = {
+  [ECardVariant.WITHOUT_SHADOW]: "",
+  [ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
+};
+export const spacings = {
+  [ECardSpacing.SM]: "p-4",
+  [ECardSpacing.LG]: "p-6",
+};
+export const directions = {
+  [ECardDirection.ROW]: "flex-row space-x-3",
+  [ECardDirection.COLUMN]: "flex-col space-y-3",
+};
+export const getCardStyle = (variant: TCardVariant, spacing: TCardSpacing, direction: TCardDirection) =>
+  DEFAULT_STYLE + " " + directions[direction] + " " + containerStyle[variant] + " " + spacings[spacing];
diff --git a/packages/propel/src/card/index.ts b/packages/propel/src/card/index.ts
new file mode 100644
index 00000000000..1d243e763f7
--- /dev/null
+++ b/packages/propel/src/card/index.ts
@@ -0,0 +1 @@
+export * from "./card";
diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx
index 8931f7c718a..44ed5177442 100644
--- a/packages/propel/src/charts/components/tooltip.tsx
+++ b/packages/propel/src/charts/components/tooltip.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
 // plane imports
-import { Card, ECardSpacing } from "@plane/ui";
+import { Card, ECardSpacing } from "../../card";
+
 import { cn } from "@plane/utils";
 
 type Props = {
diff --git a/packages/propel/src/charts/pie-chart/tooltip.tsx b/packages/propel/src/charts/pie-chart/tooltip.tsx
index 0a4a157de6a..537c0594afd 100644
--- a/packages/propel/src/charts/pie-chart/tooltip.tsx
+++ b/packages/propel/src/charts/pie-chart/tooltip.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
 // plane imports
-import { Card, ECardSpacing } from "@plane/ui";
+import { Card, ECardSpacing } from "../../card";
 
 type Props = {
   dotColor?: string;
diff --git a/packages/propel/src/charts/tree-map/tooltip.tsx b/packages/propel/src/charts/tree-map/tooltip.tsx
index 55c6e687ead..17d4893fe57 100644
--- a/packages/propel/src/charts/tree-map/tooltip.tsx
+++ b/packages/propel/src/charts/tree-map/tooltip.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 // plane imports
-import { Card, ECardSpacing } from "@plane/ui";
+import { Card, ECardSpacing } from "../../card";
 
 interface TreeMapTooltipProps {
   active: boolean | undefined;
diff --git a/packages/ui/src/card/card.tsx b/packages/ui/src/card/card.tsx
index 63ca5fb64e3..01ef9da6a0e 100644
--- a/packages/ui/src/card/card.tsx
+++ b/packages/ui/src/card/card.tsx
@@ -10,7 +10,7 @@ import {
   TCardVariant,
 } from "./helper";
 
-export interface CardProps {
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   variant?: TCardVariant;
   spacing?: TCardSpacing;
   direction?: TCardDirection;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1526fccf0c2..e49481311cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -961,9 +961,6 @@ importers:
       '@plane/types':
         specifier: workspace:*
         version: link:../types
-      '@plane/ui':
-        specifier: workspace:*
-        version: link:../ui
       '@plane/utils':
         specifier: workspace:*
         version: link:../utils