diff --git a/src/components/features/backends/backend-form-modal.tsx b/src/components/features/backends/backend-form-modal.tsx
index 49496523..0ce99982 100644
--- a/src/components/features/backends/backend-form-modal.tsx
+++ b/src/components/features/backends/backend-form-modal.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { ServerClient } from "@openhands/typescript-client/clients";
 import OpenHandsLogoWhite from "#/assets/branding/openhands-logo-white.svg?react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
@@ -9,7 +8,7 @@ import {
   MODAL_MAX_WIDTH_VIEWPORT,
   modalWidthClassName,
 } from "#/components/shared/modals/modal-body";
-import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { SettingsInput } from "#/components/features/settings/settings-input";
 import { useActiveBackendContext } from "#/contexts/active-backend-context";
@@ -22,9 +21,6 @@ import { cn } from "#/utils/utils";
 import { BackendStatusDot } from "./backend-status-dot";
 import { DeviceFlowAuth } from "./device-flow-auth";
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer";
-
 export type BackendFormMode = "add" | "edit";
 
 interface BackendFormModalProps {
@@ -606,23 +602,17 @@ export function BackendFormModal({
         <div
           data-testid="add-backend-modal"
           className={cn(
-            "rounded-xl border border-[var(--oh-border)] bg-base-secondary",
+            "relative rounded-xl border border-[var(--oh-border)] bg-base-secondary",
             modalWidthClassName("xl"),
             MODAL_MAX_WIDTH_VIEWPORT,
           )}
         >
+          <ModalCloseButton onClose={onClose} testId="add-backend-close" />
           {/* Header */}
-          <div className="flex items-start justify-between gap-4 px-6 pt-6 pb-2">
-            <BaseModalTitle title={t(I18nKey.BACKEND$ADD_TITLE)} />
-            <button
-              type="button"
-              onClick={onClose}
-              className={cn(ICON_BUTTON_CLASS, "shrink-0")}
-              data-testid="add-backend-close"
-              aria-label={t(I18nKey.BUTTON$CLOSE)}
-            >
-              <X size={20} aria-hidden />
-            </button>
+          <div className="px-6 pt-6 pb-2 pr-12">
+            <h2 className="text-lg font-semibold">
+              {t(I18nKey.BACKEND$ADD_TITLE)}
+            </h2>
           </div>
 
           {/* Two-column body */}
@@ -662,22 +652,14 @@ export function BackendFormModal({
       <div
         data-testid={`${testIdRoot}-modal`}
         className={cn(
-          "bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]",
+          "relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]",
           modalWidthClassName("md"),
         )}
       >
-        <div className="flex items-start justify-between gap-4">
-          <BaseModalTitle title={t(I18nKey.BACKEND$EDIT_TITLE)} />
-          <button
-            type="button"
-            onClick={onClose}
-            className={cn(ICON_BUTTON_CLASS, "shrink-0")}
-            data-testid={`${testIdRoot}-close`}
-            aria-label={t(I18nKey.BUTTON$CLOSE)}
-          >
-            <X size={20} aria-hidden />
-          </button>
-        </div>
+        <ModalCloseButton onClose={onClose} testId={`${testIdRoot}-close`} />
+        <h2 className="pr-6 text-lg font-semibold">
+          {t(I18nKey.BACKEND$EDIT_TITLE)}
+        </h2>
         <BackendForm
           mode="edit"
           backend={backend}
diff --git a/src/components/features/backends/manage-backends-modal.tsx b/src/components/features/backends/manage-backends-modal.tsx
index 31a6e353..29e5aafe 100644
--- a/src/components/features/backends/manage-backends-modal.tsx
+++ b/src/components/features/backends/manage-backends-modal.tsx
@@ -1,19 +1,19 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
-import { Pencil, Plus, Trash2, X } from "lucide-react";
+import { Pencil, Plus, Trash2 } from "lucide-react";
 
 import { ServerClient } from "@openhands/typescript-client/clients";
 import { type Backend } from "#/api/backend-registry/types";
 import { getAgentServerClientOptions } from "#/api/agent-server-client-options";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { ConfirmationModal } from "#/components/shared/modals/confirmation-modal";
-import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import {
   MODAL_MAX_WIDTH_VIEWPORT,
   modalWidthClassName,
 } from "#/components/shared/modals/modal-body";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { useActiveBackendContext } from "#/contexts/active-backend-context";
 import {
   useBackendsHealth,
@@ -24,9 +24,6 @@ import { cn } from "#/utils/utils";
 import { BackendFormModal } from "./backend-form-modal";
 import { BackendStatusDot } from "./backend-status-dot";
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer";
-
 const ROW_ACTION_BUTTON_CLASS =
   "inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white";
 
@@ -152,26 +149,20 @@ export function ManageBackendsModal({ onClose }: ManageBackendsModalProps) {
         <div
           data-testid="manage-backends-modal"
           className={cn(
-            "flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl",
+            "relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl",
             modalWidthClassName("lg"),
             MODAL_MAX_WIDTH_VIEWPORT,
             "max-h-[70vh]",
           )}
         >
-          <div className="flex items-start justify-between gap-4 p-5">
-            <BaseModalTitle
-              title={t(I18nKey.BACKEND$MANAGE_TITLE)}
-              className="text-white"
-            />
-            <button
-              type="button"
-              onClick={onClose}
-              className={ICON_BUTTON_CLASS}
-              aria-label={t(I18nKey.BUTTON$CLOSE)}
-              data-testid="close-manage-backends-modal"
-            >
-              <X size={20} aria-hidden />
-            </button>
+          <ModalCloseButton
+            onClose={onClose}
+            testId="close-manage-backends-modal"
+          />
+          <div className="p-5 pr-12">
+            <h2 className="text-lg font-semibold">
+              {t(I18nKey.BACKEND$MANAGE_TITLE)}
+            </h2>
           </div>
 
           <div className="flex min-h-0 flex-1 flex-col px-5">
diff --git a/src/components/features/chat/open-repository-modal.tsx b/src/components/features/chat/open-repository-modal.tsx
index dee6e445..7702708c 100644
--- a/src/components/features/chat/open-repository-modal.tsx
+++ b/src/components/features/chat/open-repository-modal.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import { ModalBody } from "#/components/shared/modals/modal-body";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
 import { I18nKey } from "#/i18n/declaration";
@@ -12,10 +12,6 @@ import { GitRepoDropdown } from "#/components/features/home/git-repo-dropdown/gi
 import { GitBranchDropdown } from "#/components/features/home/git-branch-dropdown/git-branch-dropdown";
 import { GitProviderDropdown } from "#/components/features/home/git-provider-dropdown/git-provider-dropdown";
 import { useUserProviders } from "#/hooks/use-user-providers";
-import { cn } from "#/utils/utils";
-
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed";
 
 interface OpenRepositoryModalProps {
   isOpen: boolean;
@@ -101,19 +97,14 @@ export function OpenRepositoryModal({
     <ModalBackdrop onClose={handleClose}>
       <ModalBody
         width="sm"
-        className="items-start border border-[var(--oh-border)] !gap-4"
+        className="relative items-start border border-[var(--oh-border)] !gap-4"
       >
-        <div className="flex w-full items-start justify-between gap-4">
+        <ModalCloseButton
+          onClose={handleClose}
+          testId="close-open-repository-modal"
+        />
+        <div className="w-full pr-6">
           <BaseModalTitle title={t(I18nKey.CONVERSATION$OPEN_REPOSITORY)} />
-          <button
-            type="button"
-            onClick={handleClose}
-            className={cn(ICON_BUTTON_CLASS, "shrink-0")}
-            data-testid="close-open-repository-modal"
-            aria-label={t(I18nKey.BUTTON$CLOSE)}
-          >
-            <X size={20} aria-hidden />
-          </button>
         </div>
 
         <div className="flex flex-col gap-4 w-full">
diff --git a/src/components/features/conversation-panel/hooks-modal-header.tsx b/src/components/features/conversation-panel/hooks-modal-header.tsx
index fcda51d3..949727e1 100644
--- a/src/components/features/conversation-panel/hooks-modal-header.tsx
+++ b/src/components/features/conversation-panel/hooks-modal-header.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { RefreshCw, X } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { StyledTooltip } from "#/components/shared/buttons/styled-tooltip";
 import { I18nKey } from "#/i18n/declaration";
 import { Typography } from "#/ui/typography";
@@ -26,14 +27,15 @@ export function HooksModalHeader({
   const refreshLabel = t(I18nKey.BUTTON$REFRESH);
 
   return (
-    <div className="flex w-full items-start justify-between gap-4">
-      <div className="flex min-w-0 flex-1 flex-col gap-2">
-        <BaseModalTitle title={t(I18nKey.HOOKS_MODAL$TITLE)} />
-        <Typography.Text className="text-sm text-[var(--oh-muted)]">
-          {t(I18nKey.HOOKS_MODAL$WARNING)}
-        </Typography.Text>
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
+    <>
+      <ModalCloseButton onClose={onClose} testId="close-hooks-modal" />
+      <div className="flex w-full items-start justify-between gap-4 pr-10">
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <BaseModalTitle title={t(I18nKey.HOOKS_MODAL$TITLE)} />
+          <Typography.Text className="text-sm text-[var(--oh-muted)]">
+            {t(I18nKey.HOOKS_MODAL$WARNING)}
+          </Typography.Text>
+        </div>
         <StyledTooltip content={refreshLabel} placement="bottom">
           <button
             type="button"
@@ -50,16 +52,7 @@ export function HooksModalHeader({
             />
           </button>
         </StyledTooltip>
-        <button
-          type="button"
-          onClick={onClose}
-          className={ICON_BUTTON_CLASS}
-          aria-label={t(I18nKey.BUTTON$CLOSE)}
-          data-testid="close-hooks-modal"
-        >
-          <X size={20} aria-hidden />
-        </button>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/components/features/conversation-panel/hooks-modal.tsx b/src/components/features/conversation-panel/hooks-modal.tsx
index cc38e4e2..33926799 100644
--- a/src/components/features/conversation-panel/hooks-modal.tsx
+++ b/src/components/features/conversation-panel/hooks-modal.tsx
@@ -42,7 +42,7 @@ export function HooksModal({ onClose }: HooksModalProps) {
     <ModalBackdrop onClose={onClose}>
       <ModalBody
         width="lg"
-        className="max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
+        className="relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
         testID="hooks-modal"
       >
         <HooksModalHeader
diff --git a/src/components/features/conversation-panel/skills-modal-header.tsx b/src/components/features/conversation-panel/skills-modal-header.tsx
index 866d454d..ace489e8 100644
--- a/src/components/features/conversation-panel/skills-modal-header.tsx
+++ b/src/components/features/conversation-panel/skills-modal-header.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { RefreshCw, X } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { StyledTooltip } from "#/components/shared/buttons/styled-tooltip";
 import { I18nKey } from "#/i18n/declaration";
 import { Typography } from "#/ui/typography";
@@ -26,14 +27,15 @@ export function SkillsModalHeader({
   const refreshLabel = t(I18nKey.BUTTON$REFRESH);
 
   return (
-    <div className="flex w-full items-start justify-between gap-4">
-      <div className="flex min-w-0 flex-1 flex-col gap-2">
-        <BaseModalTitle title={t(I18nKey.SKILLS_MODAL$TITLE)} />
-        <Typography.Text className="text-sm text-[var(--oh-muted)]">
-          {t(I18nKey.SKILLS_MODAL$WARNING)}
-        </Typography.Text>
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
+    <>
+      <ModalCloseButton onClose={onClose} testId="close-skills-modal" />
+      <div className="flex w-full items-start justify-between gap-4 pr-10">
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <BaseModalTitle title={t(I18nKey.SKILLS_MODAL$TITLE)} />
+          <Typography.Text className="text-sm text-[var(--oh-muted)]">
+            {t(I18nKey.SKILLS_MODAL$WARNING)}
+          </Typography.Text>
+        </div>
         <StyledTooltip content={refreshLabel} placement="bottom">
           <button
             type="button"
@@ -50,16 +52,7 @@ export function SkillsModalHeader({
             />
           </button>
         </StyledTooltip>
-        <button
-          type="button"
-          onClick={onClose}
-          className={ICON_BUTTON_CLASS}
-          aria-label={t(I18nKey.BUTTON$CLOSE)}
-          data-testid="close-skills-modal"
-        >
-          <X size={20} aria-hidden />
-        </button>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/components/features/conversation-panel/skills-modal.tsx b/src/components/features/conversation-panel/skills-modal.tsx
index d10c96d7..16b40243 100644
--- a/src/components/features/conversation-panel/skills-modal.tsx
+++ b/src/components/features/conversation-panel/skills-modal.tsx
@@ -64,7 +64,7 @@ export function SkillsModal({ onClose }: SkillsModalProps) {
     <ModalBackdrop onClose={onClose}>
       <ModalBody
         width="lg"
-        className="max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
+        className="relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
         testID="skills-modal"
       >
         <SkillsModalHeader
diff --git a/src/components/features/conversation-panel/system-message-modal.tsx b/src/components/features/conversation-panel/system-message-modal.tsx
index b65000b8..c4a87b7e 100644
--- a/src/components/features/conversation-panel/system-message-modal.tsx
+++ b/src/components/features/conversation-panel/system-message-modal.tsx
@@ -38,7 +38,7 @@ export function SystemMessageModal({
       <ModalBackdrop onClose={onClose}>
         <ModalBody
           width="lg"
-          className="max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
+          className="relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
           testID="system-message-modal"
         >
           <SystemMessageHeader
diff --git a/src/components/features/conversation-panel/system-message-modal/system-message-header.tsx b/src/components/features/conversation-panel/system-message-modal/system-message-header.tsx
index 57dacec6..57706aaf 100644
--- a/src/components/features/conversation-panel/system-message-modal/system-message-header.tsx
+++ b/src/components/features/conversation-panel/system-message-modal/system-message-header.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { Typography } from "#/ui/typography";
 import { I18nKey } from "#/i18n/declaration";
 
@@ -10,9 +10,6 @@ interface SystemMessageHeaderProps {
   onClose: () => void;
 }
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer";
-
 export function SystemMessageHeader({
   agentClass,
   openhandsVersion,
@@ -21,8 +18,9 @@ export function SystemMessageHeader({
   const { t } = useTranslation("openhands");
 
   return (
-    <div className="flex w-full items-start justify-between gap-4">
-      <div className="flex min-w-0 flex-1 flex-col gap-2">
+    <>
+      <ModalCloseButton onClose={onClose} testId="close-system-message-modal" />
+      <div className="flex w-full min-w-0 flex-col gap-2 pr-6">
         <BaseModalTitle title={t(I18nKey.SYSTEM_MESSAGE_MODAL$TITLE)} />
         {(agentClass || openhandsVersion) && (
           <div className="flex flex-col gap-2">
@@ -49,15 +47,6 @@ export function SystemMessageHeader({
           </div>
         )}
       </div>
-      <button
-        type="button"
-        onClick={onClose}
-        className={ICON_BUTTON_CLASS}
-        aria-label={t(I18nKey.BUTTON$CLOSE)}
-        data-testid="close-system-message-modal"
-      >
-        <X size={20} aria-hidden />
-      </button>
-    </div>
+    </>
   );
 }
diff --git a/src/components/features/conversation/metrics-modal/metrics-modal-header.tsx b/src/components/features/conversation/metrics-modal/metrics-modal-header.tsx
index 81e7689d..85c4f29d 100644
--- a/src/components/features/conversation/metrics-modal/metrics-modal-header.tsx
+++ b/src/components/features/conversation/metrics-modal/metrics-modal-header.tsx
@@ -1,30 +1,21 @@
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { I18nKey } from "#/i18n/declaration";
 
 interface MetricsModalHeaderProps {
   onClose: () => void;
 }
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer";
-
 export function MetricsModalHeader({ onClose }: MetricsModalHeaderProps) {
   const { t } = useTranslation("openhands");
 
   return (
-    <div className="flex w-full items-start justify-between gap-4">
-      <BaseModalTitle title={t(I18nKey.CONVERSATION$METRICS_INFO)} />
-      <button
-        type="button"
-        onClick={onClose}
-        className={ICON_BUTTON_CLASS}
-        aria-label={t(I18nKey.BUTTON$CLOSE)}
-        data-testid="close-metrics-modal"
-      >
-        <X size={20} aria-hidden />
-      </button>
-    </div>
+    <>
+      <ModalCloseButton onClose={onClose} testId="close-metrics-modal" />
+      <div className="w-full pr-6">
+        <BaseModalTitle title={t(I18nKey.CONVERSATION$METRICS_INFO)} />
+      </div>
+    </>
   );
 }
diff --git a/src/components/features/conversation/metrics-modal/metrics-modal.tsx b/src/components/features/conversation/metrics-modal/metrics-modal.tsx
index 2732deea..5d8ee8f4 100644
--- a/src/components/features/conversation/metrics-modal/metrics-modal.tsx
+++ b/src/components/features/conversation/metrics-modal/metrics-modal.tsx
@@ -66,7 +66,7 @@ export function MetricsModal({ isOpen, onOpenChange }: MetricsModalProps) {
     <ModalBackdrop onClose={() => onOpenChange(false)}>
       <ModalBody
         testID="metrics-modal"
-        className="items-start border border-[var(--oh-border)]"
+        className="relative items-start border border-[var(--oh-border)]"
       >
         <MetricsModalHeader onClose={() => onOpenChange(false)} />
         <div className="w-full">
diff --git a/src/components/features/home/open-repository-dialog.tsx b/src/components/features/home/open-repository-dialog.tsx
index 1df8295a..a297126e 100644
--- a/src/components/features/home/open-repository-dialog.tsx
+++ b/src/components/features/home/open-repository-dialog.tsx
@@ -1,14 +1,10 @@
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import { ModalBody } from "#/components/shared/modals/modal-body";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
 import { I18nKey } from "#/i18n/declaration";
-import { cn } from "#/utils/utils";
 import { Branch, GitRepository } from "#/types/git";
-
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed";
 import { Provider } from "#/types/settings";
 import { useUserProviders } from "#/hooks/use-user-providers";
 import { RepositorySelectionForm } from "./repo-selection-form";
@@ -37,19 +33,14 @@ export function OpenRepositoryDialog({
     <ModalBackdrop onClose={onClose}>
       <ModalBody
         width="sm"
-        className="items-start border border-[var(--oh-border)] !gap-4"
+        className="relative items-start border border-[var(--oh-border)] !gap-4"
       >
-        <div className="flex w-full items-start justify-between gap-4">
+        <ModalCloseButton
+          onClose={onClose}
+          testId="close-open-repository-dialog"
+        />
+        <div className="w-full pr-6">
           <BaseModalTitle title={t(I18nKey.COMMON$OPEN_REPOSITORY)} />
-          <button
-            type="button"
-            onClick={onClose}
-            className={cn(ICON_BUTTON_CLASS, "shrink-0")}
-            data-testid="close-open-repository-dialog"
-            aria-label={t(I18nKey.BUTTON$CLOSE)}
-          >
-            <X size={20} aria-hidden />
-          </button>
         </div>
 
         <div className="w-full" data-testid="open-repository-dialog-body">
diff --git a/src/components/features/home/open-workspace-dialog.tsx b/src/components/features/home/open-workspace-dialog.tsx
index dd46a6bc..ed93ddfa 100644
--- a/src/components/features/home/open-workspace-dialog.tsx
+++ b/src/components/features/home/open-workspace-dialog.tsx
@@ -1,17 +1,13 @@
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import { ModalBody } from "#/components/shared/modals/modal-body";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
 import { I18nKey } from "#/i18n/declaration";
-import { cn } from "#/utils/utils";
 import { LocalWorkspace } from "#/types/workspace";
 import { useUserProviders } from "#/hooks/use-user-providers";
 import { WorkspaceSelectionForm } from "./workspace-selection-form";
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed";
-
 interface OpenWorkspaceDialogProps {
   isOpen: boolean;
   onClose: () => void;
@@ -32,19 +28,14 @@ export function OpenWorkspaceDialog({
     <ModalBackdrop onClose={onClose}>
       <ModalBody
         width="sm"
-        className="items-start border border-[var(--oh-border)] !gap-4"
+        className="relative items-start border border-[var(--oh-border)] !gap-4"
       >
-        <div className="flex w-full items-start justify-between gap-4">
+        <ModalCloseButton
+          onClose={onClose}
+          testId="close-open-workspace-dialog"
+        />
+        <div className="w-full pr-6">
           <BaseModalTitle title={t(I18nKey.HOME$OPEN_WORKSPACE)} />
-          <button
-            type="button"
-            onClick={onClose}
-            className={cn(ICON_BUTTON_CLASS, "shrink-0")}
-            data-testid="close-open-workspace-dialog"
-            aria-label={t(I18nKey.BUTTON$CLOSE)}
-          >
-            <X size={20} aria-hidden />
-          </button>
         </div>
 
         <div className="w-full" data-testid="open-workspace-dialog-body">
diff --git a/src/components/features/launch/plugin-launch-modal.tsx b/src/components/features/launch/plugin-launch-modal.tsx
index 96ff4831..eac99c90 100644
--- a/src/components/features/launch/plugin-launch-modal.tsx
+++ b/src/components/features/launch/plugin-launch-modal.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { IoClose } from "react-icons/io5";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import {
   MODAL_MAX_WIDTH_VIEWPORT,
   modalWidthClassName,
 } from "#/components/shared/modals/modal-body";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { I18nKey } from "#/i18n/declaration";
 import { PluginSpec } from "#/api/conversation-service/agent-server-conversation-service.types";
@@ -131,25 +131,15 @@ export function PluginLaunchModal({
       <div
         data-testid="plugin-launch-modal"
         className={cn(
-          "bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] max-h-[80vh]",
+          "relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] max-h-[80vh]",
           modalWidthClassName("md"),
           MODAL_MAX_WIDTH_VIEWPORT,
         )}
       >
-        <div className="flex w-full items-center justify-between">
-          <Typography.H2 className="text-content-2">
-            {t(I18nKey.LAUNCH$MODAL_TITLE)} {modalTitle}
-          </Typography.H2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-md p-1 text-white hover:bg-tertiary cursor-pointer"
-            aria-label="Close"
-            data-testid="close-button"
-          >
-            <IoClose className="h-5 w-5" />
-          </button>
-        </div>
+        <ModalCloseButton onClose={onClose} testId="close-button" />
+        <Typography.H2 className="pr-6 text-content-2">
+          {t(I18nKey.LAUNCH$MODAL_TITLE)} {modalTitle}
+        </Typography.H2>
 
         {message && <p className="text-sm text-white">{message}</p>}
 
diff --git a/src/components/features/mcp-page/install-server-modal.tsx b/src/components/features/mcp-page/install-server-modal.tsx
index 0bafe174..13259b5b 100644
--- a/src/components/features/mcp-page/install-server-modal.tsx
+++ b/src/components/features/mcp-page/install-server-modal.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { AxiosError } from "axios";
-import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { BrandButton } from "#/components/features/settings/brand-button";
@@ -14,9 +13,6 @@ import { useAddMcpServer } from "#/hooks/mutation/use-add-mcp-server";
 import { displaySuccessToast } from "#/utils/custom-toast-handlers";
 import { retrieveAxiosErrorMessage } from "#/utils/retrieve-axios-error-message";
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed";
-
 interface InstallServerModalProps {
   entry: MarketplaceEntry;
   onClose: () => void;
@@ -286,16 +282,6 @@ export function InstallServerModal({
             <h2 className="text-lg font-semibold">{entry.name}</h2>
             <p className="text-xs text-tertiary-light">{entry.description}</p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={isPending}
-            className={ICON_BUTTON_CLASS}
-            aria-label={t(I18nKey.BUTTON$CLOSE)}
-            data-testid="close-mcp-install-modal"
-          >
-            <X size={20} aria-hidden />
-          </button>
         </div>
 
         {entry.installHint && (