diff --git a/packages/devtools/client/src/client/components/HeaderRule/Editor.tsx b/packages/devtools/client/src/client/components/HeaderRule/Editor.tsx
index ae99f9eb0e2e..03a1c60baf6c 100644
--- a/packages/devtools/client/src/client/components/HeaderRule/Editor.tsx
+++ b/packages/devtools/client/src/client/components/HeaderRule/Editor.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, useEffect } from 'react';
 import { nanoid } from 'nanoid';
 import { Box, IconButton, TextField } from '@radix-ui/themes';
 import { HiPlusSmall, HiMinusSmall } from 'react-icons/hi2';
@@ -41,10 +41,28 @@ export const HeaderRuleEditor: React.FC<HeaderRuleEditorProps> = ({
 
   const createRemoveHandler = (index: number) => {
     return () => {
-      onDeleteRule?.(index);
+      if (value.length > 1) {
+        onDeleteRule?.(index);
+      } else {
+        onChangeRule?.(0, {
+          id: nanoid(),
+          key: '',
+          value: '',
+        });
+      }
     };
   };
 
+  useEffect(() => {
+    if (value.length === 0) {
+      onCreateRule?.(0, {
+        id: nanoid(),
+        key: '',
+        value: '',
+      });
+    }
+  }, []);
+
   return (
     <Box className={styles.container} {...props}>
       {value?.map((rule, i) => (
diff --git a/packages/devtools/client/src/client/routes/headers/editor/page.tsx b/packages/devtools/client/src/client/routes/headers/editor/page.tsx
index 9513528660b4..0c1b5a8c07e6 100644
--- a/packages/devtools/client/src/client/routes/headers/editor/page.tsx
+++ b/packages/devtools/client/src/client/routes/headers/editor/page.tsx
@@ -1,6 +1,5 @@
 import _ from 'lodash';
 import React, { useState } from 'react';
-import { nanoid } from 'nanoid';
 import { Box, Button, Flex, Heading, Link, Text } from '@radix-ui/themes';
 import { useList } from 'react-use';
 import { useSnapshot } from 'valtio';
@@ -12,11 +11,7 @@ import { HeaderRuleEditor } from '@/client/components/HeaderRule/Editor';
 const Page: React.FC = () => {
   const state = useSnapshot($state);
   const isActive = Boolean(state.service.href);
-  const [rules, $rules] = useList(() =>
-    state.service.rules?.length
-      ? _.slice(state.service.rules)
-      : [{ id: nanoid(), key: '', value: '' }],
-  );
+  const [rules, $rules] = useList(() => _.slice(state.service.rules));
   const [isOutdated, setIsOutdated] = useState(false);
   let statusText = isActive ? 'Active' : 'Offline';
   if (isOutdated && isActive) {