diff --git a/app/components/ui/revenueCard/RevenueCard.tsx b/app/components/ui/revenueCard/RevenueCard.tsx
new file mode 100644
index 00000000..81ac677e
--- /dev/null
+++ b/app/components/ui/revenueCard/RevenueCard.tsx
@@ -0,0 +1,34 @@
+import { Card, CardContent, CardDescription } from "./cardComponent";
+
+interface RevenueCardProperties {
+  revenue: string;
+  change: string;
+}
+
+const RevenueCard: React.FC<RevenueCardProperties> = ({ revenue, change }) => {
+  return (
+    <Card className="h-[134px] w-full max-w-[337.33px] px-[24px] pb-[28px] pt-[23px] sm:w-1/2 md:w-1/3 lg:w-1/4">
+      <CardContent className=" ">
+        <div className="flex items-center justify-between pb-1">
+          <h1 className="text-[14px] font-medium leading-[16.94px]">
+            Total Revenue
+          </h1>
+          <img
+            className="h-[24px] w-[24px]"
+            src="/images/doller.png"
+            alt="doller-sign"
+          />
+        </div>
+
+        <h4 className="mb-1 text-[24px] font-semibold leading-[29.05px] text-[#0A0A0A]">
+          ${revenue}
+        </h4>
+        <CardDescription className="text-[12px] font-normal leading-[14.52px] text-[#525252]">
+          {change}
+        </CardDescription>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default RevenueCard;
diff --git a/app/components/ui/revenueCard/cardComponent.tsx b/app/components/ui/revenueCard/cardComponent.tsx
new file mode 100644
index 00000000..86f3d128
--- /dev/null
+++ b/app/components/ui/revenueCard/cardComponent.tsx
@@ -0,0 +1,35 @@
+import { cn } from "~/lib/utils/cn";
+
+export const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...properties
+}) => (
+  <div
+    className={cn(
+      "border-1 rounded-lg border border-[#ffffff] bg-white shadow",
+      className,
+    )}
+    {...properties}
+  />
+);
+
+export const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...properties
+}) => <div className={cn("", className)} {...properties} />;
+
+export const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...properties
+}) => <div className={cn("border", className)} {...properties} />;
+
+export const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+  className,
+  ...properties
+}) => <h2 className={cn("text-lg font-bold", className)} {...properties} />;
+
+export const CardDescription: React.FC<
+  React.HTMLAttributes<HTMLParagraphElement>
+> = ({ className, ...properties }) => (
+  <p className={cn("text-sm text-gray-500", className)} {...properties} />
+);
diff --git a/app/routes/product-list.tsx b/app/routes/product-list.tsx
new file mode 100644
index 00000000..dd76ee8b
--- /dev/null
+++ b/app/routes/product-list.tsx
@@ -0,0 +1,13 @@
+import RevenueCard from "~/components/ui/revenueCard/RevenueCard";
+
+const App: React.FC = () => {
+  return (
+    <div className="flex flex-wrap justify-center gap-[20px] py-[30px]">
+      <RevenueCard revenue="45,000.00" change="+20% from last month" />
+      <RevenueCard revenue="45,000.00" change="+20% from last month" />
+      <RevenueCard revenue="45,000.00" change="+20% from last month" />
+    </div>
+  );
+};
+
+export default App;
diff --git a/public/images/doller.png b/public/images/doller.png
new file mode 100644
index 00000000..d9cc99af
Binary files /dev/null and b/public/images/doller.png differ