diff --git a/src/components/PopupCard/calender.svg b/src/components/PopupCard/calender.svg
new file mode 100644
index 0000000..907277d
--- /dev/null
+++ b/src/components/PopupCard/calender.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_calendar" data-name="vuesax/linear/calendar" transform="translate(-492 -188)">
+    <g id="calendar">
+      <path id="Vector" d="M0,0V3" transform="translate(500 190)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0V3" transform="translate(508 190)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H17" transform="translate(495.5 197.09)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-4" data-name="Vector" d="M18,5v8.5c0,3-1.5,5-5,5H5c-3.5,0-5-2-5-5V5C0,2,1.5,0,5,0h8C16.5,0,18,2,18,5Z" transform="translate(495 191.5)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-5" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(492 188)" fill="none" opacity="0"/>
+      <path id="Vector-6" data-name="Vector" d="M.495.5H.5" transform="translate(507.2 201.2)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-7" data-name="Vector" d="M.495.5H.5" transform="translate(507.2 204.2)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-8" data-name="Vector" d="M.495.5H.5" transform="translate(503.501 201.2)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-9" data-name="Vector" d="M.495.5H.5" transform="translate(503.501 204.2)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-10" data-name="Vector" d="M.495.5H.5" transform="translate(499.8 201.2)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-11" data-name="Vector" d="M.495.5H.5" transform="translate(499.8 204.2)" fill="none" stroke="#06bace" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/PopupCard/index.js b/src/components/PopupCard/index.js
index e39deac..e4152a7 100644
--- a/src/components/PopupCard/index.js
+++ b/src/components/PopupCard/index.js
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import "./index.scss";
 
 import cancleIcon from "./cancle-icon.svg";
+import calender from "./calender.svg";
 
 const PopupCard = () => {
   const [activeInput, setActiveInput] = useState(false);
@@ -15,46 +16,63 @@ const PopupCard = () => {
       >
         click me to see popUpCard Modal
       </button>
+      {/* modal */}
       <div
         id="defaultModal"
         tabindex="-1"
         aria-hidden="true"
         className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
       >
-        <div className="relative p-4 w-full max-w-2xl h-full md:h-auto">
-          <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
-            <div className="flex justify-between items-start p-5 rounded-t ">
+        <div className="relative p-4 w-full h-full md:h-auto">
+          <div className="w-9/12 mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
+            <div className="flex justify-between items-start p-5 rounded-t">
               {/* cancle icon */}
               <div
                 type="button"
                 data-modal-toggle="defaultModal"
-                className="bg-blue-100 p-2 cursor-pointer"
+                className="p-2 cursor-pointer rounded bg-[#F8F8F8]"
               >
                 <img src={cancleIcon} className="w-4" />
               </div>
             </div>
             {/* modalBody */}
             {/* top */}
-            <div className="px-5 mt-3 ">
+            <div className="px-5 mt-3 flex ">
               {/* right */}
               <input
                 type="text"
-                className="relative w-1/2 border-2 border-blue-200 rounded-md text-sm h-12
-                focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400"
-                style={{ color: "#00253A" }}
+                className="relative w-1/2 border-2 rounded-md text-sm h-12
+                focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
+                style={{
+                  color: "#00253A",
+                  borderColor: activeInput ? "#22577E" : "#06BACE",
+                }}
                 onFocus={() => setActiveInput(true)}
                 onBlur={() => setActiveInput(false)}
-                // onClick={() => {
-                //   setActiveInput(true);
-                // }}
               />
+              {/* ${activeInput ? "text-red-500" : "text-yellow-400"} */}
               <span
-                className={`absolute right-10 -mt-2  bg-white text-xs px-2 font-bold ${
-                  activeInput ? "text-blue-600" : "text-red-600"
-                }`}
+                className={`absolute right-10 -mt-2  bg-white text-xs px-2 font-bold`}
+                style={{ color: activeInput ? "#22577E" : "#06BACE" }}
               >
                 نام کارت
               </span>
+              {/* left */}
+              {/* <div
+                date-rangepicker
+                className="flex items-center w-1/2 bg-red-600"
+              >
+                <div className="relative w-full">
+                  <img src={calender} className="absolute top-3 left-2" />
+                  <input
+                    name="start"
+                    type="text"
+                    className="w-full border-2 border-blue-400 rounded-md text-sm h-12
+                    focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+                    placeholder="چهارشنبه 10 فروردین 1401 بماند به یادگار"
+                  />
+                </div>
+              </div> */}
             </div>
           </div>
         </div>