diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index 54e90b7..d7f8b05 100644
--- a/src/components/Datepicker.tsx
+++ b/src/components/Datepicker.tsx
@@ -166,24 +166,6 @@ const Datepicker: React.FC<DatepickerType> = ({
     /* End Second */
 
     // UseEffects & UseLayoutEffect
-    useEffect(() => {
-        const container = containerRef.current;
-        const calendarContainer = calendarContainerRef.current;
-        const arrow = arrowRef.current;
-
-        if (container && calendarContainer && arrow) {
-            const detail = container.getBoundingClientRect();
-            const screenCenter = window.innerWidth / 2;
-            const containerCenter = (detail.right - detail.x) / 2 + detail.x;
-
-            if (containerCenter > screenCenter) {
-                arrow.classList.add("right-0");
-                arrow.classList.add("mr-3.5");
-                calendarContainer.classList.add("right-0");
-            }
-        }
-    }, []);
-
     useEffect(() => {
         if (value && value.startDate && value.endDate) {
             const startDate = dayjs(value.startDate);
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 38fc856..134615c 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -245,6 +245,27 @@ const Input: React.FC<Props> = (e: Props) => {
                     arrow.classList.remove("border-t");
                 }
 
+                if (input && div && arrow) {
+                    const detail = input.getBoundingClientRect();
+                    const screenCenter = window.innerWidth / 2;
+                    const containerCenter = detail.width / 2 + detail.left;
+                    const screenLeftToContainerRight = detail.right;
+                    const calendarWidth = div.getBoundingClientRect().width;
+
+                    if (
+                        containerCenter > screenCenter &&
+                        screenLeftToContainerRight > calendarWidth
+                    ) {
+                        arrow.classList.add("right-0");
+                        arrow.classList.add("mr-3.5");
+                        div.classList.add("right-0");
+                    } else {
+                        arrow.classList.remove("right-0");
+                        arrow.classList.remove("mr-3.5");
+                        div.classList.remove("right-0");
+                    }
+                }
+
                 setTimeout(() => {
                     div.classList.remove("translate-y-4");
                     div.classList.remove("opacity-0");