diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
new file mode 100644
index 00000000..0c39e38e
--- /dev/null
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
@@ -0,0 +1,46 @@
+import { IconDelete, IconPen } from '@/assets/images/icons';
+import {
+  DropdownMenuButton,
+  DropdownMenuButtonIcon,
+  DropdownMenuButtonText,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Icon,
+} from '@/components/ui';
+
+interface IGroupCardDropdownMenuContentProps {
+  /**
+   * Function to handle the rename button click.
+   */
+  handleRenameClick: () => void;
+  /**
+   * The function to close the dropdown menu.
+   */
+  handleDeleteClick: () => void;
+}
+
+export const GroupCardDropdownMenuContent = ({
+  handleRenameClick,
+  handleDeleteClick,
+}: IGroupCardDropdownMenuContentProps) => {
+  return (
+    <DropdownMenuContent>
+      <DropdownMenuItem asChild>
+        <DropdownMenuButton onClick={handleRenameClick}>
+          <DropdownMenuButtonIcon>
+            <Icon icon={IconPen} size={5} color="primary" />
+          </DropdownMenuButtonIcon>
+          <DropdownMenuButtonText>Rename</DropdownMenuButtonText>
+        </DropdownMenuButton>
+      </DropdownMenuItem>
+      <DropdownMenuItem asChild>
+        <DropdownMenuButton onClick={handleDeleteClick}>
+          <DropdownMenuButtonIcon>
+            <Icon icon={IconDelete} size={5} color="danger" />
+          </DropdownMenuButtonIcon>
+          <DropdownMenuButtonText>Delete</DropdownMenuButtonText>
+        </DropdownMenuButton>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  );
+};
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx
new file mode 100644
index 00000000..3d67fa7f
--- /dev/null
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx
@@ -0,0 +1,63 @@
+'use client';
+import { IconMenuKebab } from '@/assets/images/icons';
+import { Button, DialogRoot, DropdownMenu, DropdownMenuTrigger, Icon } from '@/components/ui';
+import { DeleteGroupDialogContent } from '@/features/groups/components/DeleteGroupDialogContent';
+import { useAutoFocus } from '@/hooks';
+import { IGroup } from '@/types/definition';
+
+import { useState } from 'react';
+
+import { GroupCardDropdownMenuContent } from './GroupCardDropdownMenuContent';
+
+interface IGroupCardMenuButtonProps {
+  /**
+   * The ID of the group to be deleted.
+   */
+  groupId: IGroup['id'];
+  /**
+   * Function to handle the rename button click.
+   */
+  handleRenameClick: () => void;
+  /**
+   * A state of renaming input field to be opened (=true) or closed(=false)
+   */
+  isRenameFormOpen: boolean;
+}
+
+export const GroupCardDropdownMenu = ({
+  groupId,
+  handleRenameClick,
+  isRenameFormOpen,
+}: IGroupCardMenuButtonProps) => {
+  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
+  const [isDeleteGroupDialogOpen, setIsDeleteGroupDialogOpen] = useState(false);
+
+  const kebabRef = useAutoFocus<HTMLButtonElement>(!isDeleteGroupDialogOpen && !isRenameFormOpen);
+
+  const handleDeleteClick = () => {
+    setIsDropdownMenuOpen(false);
+    setIsDeleteGroupDialogOpen(true);
+  };
+  return (
+    <>
+      <DropdownMenu open={isDropdownMenuOpen} onOpenChange={setIsDropdownMenuOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="w-12" ref={kebabRef}>
+            <Icon icon={IconMenuKebab} size={4.5} />
+          </Button>
+        </DropdownMenuTrigger>
+        <GroupCardDropdownMenuContent
+          handleRenameClick={handleRenameClick}
+          handleDeleteClick={handleDeleteClick}
+        />
+      </DropdownMenu>
+      <DialogRoot open={isDeleteGroupDialogOpen} onOpenChange={setIsDeleteGroupDialogOpen}>
+        <DeleteGroupDialogContent
+          groupId={groupId}
+          onParentClose={() => setIsDropdownMenuOpen(false)}
+          onDialogClose={() => setIsDeleteGroupDialogOpen(false)}
+        />
+      </DialogRoot>
+    </>
+  );
+};
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx
deleted file mode 100644
index 218de128..00000000
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client';
-import { IconDelete } from '@/assets/images/icons';
-import {
-  DialogRoot,
-  DialogTrigger,
-  DropdownMenuButton,
-  DropdownMenuButtonIcon,
-  DropdownMenuButtonText,
-  Icon,
-} from '@/components/ui';
-import { DeleteGroupDialogContent } from '@/features/groups/components/DeleteGroupDialogContent';
-import { IGroup } from '@/types/definition';
-
-import { useState } from 'react';
-
-interface IGroupCardDropdownMenuDeleteButtonProps {
-  /**
-   * The ID of the group to delete.
-   */
-  groupId: IGroup['id'];
-
-  /**
-   * The function to close the dropdown menu.
-   */
-  onDropdownMenuClose: () => void;
-}
-
-export const DeleteGroupDialogTriggerButton = ({
-  groupId,
-  onDropdownMenuClose,
-}: IGroupCardDropdownMenuDeleteButtonProps) => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-  return (
-    <DialogRoot open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuButton>
-          <DropdownMenuButtonIcon>
-            <Icon icon={IconDelete} size={5} color="danger" />
-          </DropdownMenuButtonIcon>
-          <DropdownMenuButtonText>Delete</DropdownMenuButtonText>
-        </DropdownMenuButton>
-      </DialogTrigger>
-      <DeleteGroupDialogContent
-        groupId={groupId}
-        onParentClose={onDropdownMenuClose}
-        onDialogClose={() => setIsDialogOpen(false)}
-      />
-    </DialogRoot>
-  );
-};
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx
deleted file mode 100644
index 041f1a1a..00000000
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { IconPen } from '@/assets/images/icons';
-import {
-  DropdownMenuButton,
-  DropdownMenuButtonIcon,
-  DropdownMenuButtonText,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  Icon,
-} from '@/components/ui';
-import { IGroup } from '@/types/definition';
-
-import { DeleteGroupDialogTriggerButton } from './DeleteGroupDialogTriggerButton';
-
-interface IGroupCardDropdownMenuContentProps {
-  /**
-   * The ID of the group to delete.
-   */
-  groupId: IGroup['id'];
-  /**
-   * Function to handle the rename button click.
-   */
-  handleRenameClick: () => void;
-
-  /**
-   * The function to close the dropdown menu.
-   */
-  onDropdownMenuClose: () => void;
-}
-
-export const GroupCardDropdownMenuContent = ({
-  groupId,
-  handleRenameClick,
-  onDropdownMenuClose,
-}: IGroupCardDropdownMenuContentProps) => {
-  /**
-   * The function that is called when the dropdown menu item is selected.
-   * e.preventDefault() prevents the dropdown menu from closing when selecting that item.
-   * This is necessary because closing dropdown menu also closes the dialog unintentionally.
-   * @see {@link https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item}
-   *
-   * @param e - The event object
-   * @returns void
-   */
-  const handleSelect = (e: Event) => {
-    e.preventDefault();
-  };
-
-  return (
-    <DropdownMenuContent>
-      <DropdownMenuItem>
-        <DropdownMenuButton onClick={handleRenameClick}>
-          <DropdownMenuButtonIcon>
-            <Icon icon={IconPen} size={5} color="primary" />
-          </DropdownMenuButtonIcon>
-          <DropdownMenuButtonText>Rename</DropdownMenuButtonText>
-        </DropdownMenuButton>
-      </DropdownMenuItem>
-      <DropdownMenuItem onSelect={handleSelect}>
-        <DeleteGroupDialogTriggerButton
-          groupId={groupId}
-          onDropdownMenuClose={onDropdownMenuClose}
-        />
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  );
-};
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
deleted file mode 100644
index 16fbad53..00000000
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client';
-import { IconMenuKebab } from '@/assets/images/icons';
-import { Button, DropdownMenu, DropdownMenuTrigger, Icon } from '@/components/ui';
-import { IGroup } from '@/types/definition';
-
-import { useState } from 'react';
-
-import { GroupCardDropdownMenuContent } from './GroupCardDropdownMenuContent';
-
-interface IGroupCardMenuButtonProps {
-  /**
-   * The ID of the group to delete.
-   */
-  groupId: IGroup['id'];
-  /**
-   * Function to handle the rename button click.
-   */
-  handleRenameClick: () => void;
-}
-
-export const GroupCardDropdownMenuTriggerButton = ({
-  groupId,
-  handleRenameClick,
-}: IGroupCardMenuButtonProps) => {
-  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
-  return (
-    <DropdownMenu open={isDropdownMenuOpen} onOpenChange={setIsDropdownMenuOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="w-12">
-          <Icon icon={IconMenuKebab} size={4.5} />
-        </Button>
-      </DropdownMenuTrigger>
-      <GroupCardDropdownMenuContent
-        groupId={groupId}
-        handleRenameClick={handleRenameClick}
-        onDropdownMenuClose={() => setIsDropdownMenuOpen(false)}
-      />
-    </DropdownMenu>
-  );
-};
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
index 4cc466c2..3e145e24 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
@@ -1,18 +1,31 @@
 'use client';
 import { Card } from '@/components/ui';
+import { IGroup } from '@/types/definition';
 
 import Link from 'next/link';
 import { FC, useState } from 'react';
 
 import { ContainerCount } from './ContainerCount';
-import { GroupCardDropdownMenuTriggerButton } from './GroupCardDropdownMenuTriggerButton';
+import { GroupCardDropdownMenu } from './GroupCardDropdownMenu';
 import { RenameGroupForm } from './RenameGroupForm';
 import { UserCount } from './UserCount';
 
 interface IGroupCardContentProps {
-  groupId: string;
-  groupName: string;
+  /**
+   * the identifier of a group
+   */
+  groupId: IGroup['id'];
+  /**
+   * a group name used to display on each card
+   */
+  groupName: IGroup['name'];
+  /**
+   * the number of container which belongs to a group
+   */
   containerCount: number;
+  /**
+   * the number of user who belongs to a group
+   */
   userCount: number;
 }
 
@@ -50,7 +63,11 @@ export const GroupCardContent: FC<IGroupCardContentProps> = ({
           <UserCount userCount={userCount} />
         </div>
       </Link>
-      <GroupCardDropdownMenuTriggerButton groupId={groupId} handleRenameClick={handleRenameClick} />
+      <GroupCardDropdownMenu
+        groupId={groupId}
+        handleRenameClick={handleRenameClick}
+        isRenameFormOpen={isRenameFormOpen}
+      />
     </Card>
   );
 };