diff --git a/src/assets/icons/vuesax-linear-group.svg b/src/assets/icons/vuesax-linear-group.svg
new file mode 100644
index 0000000..efee704
--- /dev/null
+++ b/src/assets/icons/vuesax-linear-group.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/assets/icons/vuesax-linear-shield-tick.svg b/src/assets/icons/vuesax-linear-shield-tick.svg
new file mode 100644
index 0000000..f897d79
--- /dev/null
+++ b/src/assets/icons/vuesax-linear-shield-tick.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/icons/vuesax-linear-tick-circle.svg b/src/assets/icons/vuesax-linear-tick-circle.svg
new file mode 100644
index 0000000..2f17e2a
--- /dev/null
+++ b/src/assets/icons/vuesax-linear-tick-circle.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/components/AddToCart/index.js b/src/components/AddToCart/index.js
new file mode 100644
index 0000000..14c83bf
--- /dev/null
+++ b/src/components/AddToCart/index.js
@@ -0,0 +1,51 @@
+import React from "react";
+
+import circleTick from '../../assets/icons/vuesax-linear-tick-circle.svg';
+import shieldTick from '../../assets/icons/vuesax-linear-shield-tick.svg';
+import linearGroup from '../../assets/icons/vuesax-linear-group.svg';
+
+
+
+const AddToCartCard = ({
+ numberOfSuggest,
+ sendingTime,
+ button,
+ price,
+ profit
+}) =>{
+ const specialities = [
+ {
+ icon: circleTick,
+ description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
+ },
+ {
+ icon: linearGroup,
+ description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
+ },
+ {
+ icon: shieldTick,
+ description: `گارانتی اصالت و سلامت فیزیکی`,
+ }
+ ];
+ return(
+
+ {specialities.map((item, index) => (
+
+ {item.icon &&
}
+
{item.description}
+
+ ))}
+
+
+ {price}
+ تومان
+ { profit && با خرید این کالا {profit} تومان سود کنید
}
+
+
+ {button}
+
+
+ );
+};
+
+export default AddToCartCard;
\ No newline at end of file
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index c93f23c..e4303b3 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -10,6 +10,10 @@ export default function Button({
onClick,
selectable,
active,
+ borderType,
+ twPaddings,
+ customStyle,
+ radius
}) {
return (