diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx
index 91c7bd62cb1..e83c1965117 100644
--- a/apps/web/core/components/automation/auto-archive-automation.tsx
+++ b/apps/web/core/components/automation/auto-archive-automation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ArchiveRestore } from "lucide-react";
@@ -48,6 +48,11 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
     currentProjectDetails?.id
   );
 
+  const autoArchiveStatus = useMemo(() => {
+    if (currentProjectDetails?.archive_in === undefined) return false;
+    return currentProjectDetails.archive_in !== 0;
+  }, [currentProjectDetails]);
+
   return (
     <>
       <SelectMonthModal
@@ -71,7 +76,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
             </div>
           </div>
           <ToggleSwitch
-            value={currentProjectDetails?.archive_in !== 0}
+            value={autoArchiveStatus}
             onChange={async () => {
               if (currentProjectDetails?.archive_in === 0) {
                 await handleChange({ archive_in: 1 });
@@ -94,7 +99,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
         </div>
 
         {currentProjectDetails ? (
-          currentProjectDetails.archive_in !== 0 && (
+          autoArchiveStatus && (
             <div className="mx-6">
               <div className="flex w-full items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-90 px-5 py-4">
                 <div className="w-1/2 text-sm font-medium">
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
index 736abbc24e0..44c8b76713c 100644
--- a/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
@@ -75,6 +75,11 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
     currentProjectDetails?.id
   );
 
+  const autoCloseStatus = useMemo(() => {
+    if (currentProjectDetails?.close_in === undefined) return false;
+    return currentProjectDetails.close_in !== 0;
+  }, [currentProjectDetails]);
+
   return (
     <>
       <SelectMonthModal
@@ -98,7 +103,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
             </div>
           </div>
           <ToggleSwitch
-            value={currentProjectDetails?.close_in !== 0}
+            value={autoCloseStatus}
             onChange={async () => {
               if (currentProjectDetails?.close_in === 0) {
                 await handleChange({ close_in: 1, default_state: defaultState });
@@ -121,7 +126,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
         </div>
 
         {currentProjectDetails ? (
-          currentProjectDetails.close_in !== 0 && (
+          autoCloseStatus && (
             <div className="mx-6">
               <div className="flex flex-col rounded border border-custom-border-200 bg-custom-background-90">
                 <div className="flex w-full items-center justify-between gap-2 px-5 py-4">