diff --git a/src/components/contactInfoSection/ContactInfoSection.js b/src/components/contactInfoSection/ContactInfoSection.js
index c0f89a8..329a1d3 100644
--- a/src/components/contactInfoSection/ContactInfoSection.js
+++ b/src/components/contactInfoSection/ContactInfoSection.js
@@ -1,5 +1,9 @@
 import React from "react";
 
+import "./ContactInfoSection.scss";
+
+import ReactTooltip from "react-tooltip";
+
 import customerSupport from "../../assets/icons/customer-support.png";
 import lightGreenLine from "../../assets/icons/light-green-line.svg";
 import lightBlueLine from "../../assets/icons/light-blue-line.svg";
@@ -14,7 +18,13 @@ const ContactInfoSection = () => {
         className="hidden sm:block absolute right-72"
       />
       {/* middle content */}
-      <img src={customerSupport} alt="" className="w-20 cursor-pointer" />
+      <img
+        src={customerSupport}
+        alt=""
+        data-tip="صفحه تماس با ما"
+        className="w-20 cursor-pointer customer-support"
+      />
+      <ReactTooltip place="bottom" type="dark" effect="float" />
       <p className="mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm text-darkCrimsonTextColor leading-6">
         <span className="text-lightBlueTextColor2">7 </span>
         روز هفته
@@ -23,10 +33,18 @@ const ContactInfoSection = () => {
         <br />
         منتظر شنیدن صدای گرمتان هستیم
       </p>
-      <div className="mr-0 sm:mr-10 mt-5 sm:mt-0">
-        <p className="text-sm text-darkCrimsonTextColor">021654412</p>
-        <p className="text-sm text-darkCrimsonTextColor">info@danovin.ir</p>
+      <div className="flex flex-col mr-0 sm:mr-10 mt-5 sm:mt-0">
+        <a href="tel:021654412" className="text-sm text-darkCrimsonTextColor">
+          021654412
+        </a>
+        <a
+          href="mailto:webmaster@example.com"
+          className="text-sm text-darkCrimsonTextColor"
+        >
+          info@danovin.ir
+        </a>
       </div>
+
       {/* line */}
       <img
         src={lightGreenLine}
diff --git a/src/components/contactInfoSection/ContactInfoSection.scss b/src/components/contactInfoSection/ContactInfoSection.scss
new file mode 100644
index 0000000..9d556a6
--- /dev/null
+++ b/src/components/contactInfoSection/ContactInfoSection.scss
@@ -0,0 +1,6 @@
+.customer-support {
+  transition: all 0.4s;
+}
+.customer-support:hover {
+  transform: translateY(-7px) !important;
+}
diff --git a/src/components/productDesign/ProductDesign.js b/src/components/productDesign/ProductDesign.js
index 7341290..73381ae 100644
--- a/src/components/productDesign/ProductDesign.js
+++ b/src/components/productDesign/ProductDesign.js
@@ -1,5 +1,7 @@
 import React from "react";
+
 import "./ProductDesign.scss";
+
 import StarRating from "../starRating/StarRating";
 
 import ReactTooltip from "react-tooltip";