diff --git a/src/components/Cards/CategoryCard.tsx b/src/components/Cards/CategoryCard.tsx
new file mode 100644
index 0000000..7690a9a
--- /dev/null
+++ b/src/components/Cards/CategoryCard.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { SVGMedicine } from "../icons";
+import Typography from "components/typography/Typography";
+import { Button } from "components/Button/Button";
+import classNames from "classnames";
+import { JsxElement } from "typescript";
+
+type Props = {
+  count?: number;
+  title: string;
+
+  iconChild: Required<JSX.Element>;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
+
+function CategoryCard({ count, title, iconChild, className, ...props }: Props) {
+  const iconChildStyle =
+    "h-7 fill-gray-500 stroke-gray-500 group-focus:fill-blue-600 group-active:fill-blue-600 group-focus:stroke-blue-600 group-active:stroke-blue-600";
+
+  return (
+    <div className="snap-start">
+      <Button
+        defaultStyle={false}
+        className="focus:outline-none group hover:bg-gray-75 active:bg-white active:outline active:outline-1 active:outline-blue-600 focus:outline-1 focus:outline-blue-600"
+      >
+        <div className=" rounded py-1 px-4 flex flex-row items-center ">
+          <div className="justify-center max-w-max">
+            {React.cloneElement(iconChild, {
+              className: classNames(iconChildStyle, className),
+            })}
+          </div>
+          <div className="flex flex-col ml-3 min-w-max">
+            <div className="">
+              <Typography
+                fontWeightVariant="bold"
+                className="text-sm leading-6 min-w-max group-active:text-blue-600 group-focus:text-blue-600"
+              >
+                {title}
+              </Typography>
+            </div>
+            <div className="max-w-max ">
+              <Typography
+                fontWeightVariant="normal"
+                className="text-xs text-gray-500 group-active:text-blue-600 group-focus:text-blue-600"
+              >
+                {count} Items
+              </Typography>
+            </div>
+          </div>
+        </div>
+      </Button>
+    </div>
+  );
+}
+
+export default CategoryCard;