From ac86d3ecd11c7a4f33e634073b7f6f2578643558 Mon Sep 17 00:00:00 2001
From: hieptl <hieptl.developer@gmail.com>
Date: Sun, 24 May 2026 01:46:41 +0700
Subject: [PATCH 1/2] fix: unify modal close button and title styling

---
 .../automations/add-automation-modal.tsx      | 23 +++++++-----
 .../features/backends/backend-form-modal.tsx  | 18 ++++++----
 .../backends/manage-backends-modal.tsx        |  6 ++--
 .../features/chat/open-repository-modal.tsx   |  6 ++--
 .../conversation-panel/hooks-modal-header.tsx | 11 +++---
 .../skills-modal-header.tsx                   | 11 +++---
 .../system-message-header.tsx                 |  6 ++--
 .../metrics-modal/metrics-modal-header.tsx    |  6 ++--
 .../features/home/open-repository-dialog.tsx  |  6 ++--
 .../features/home/open-workspace-dialog.tsx   |  6 ++--
 .../features/launch/plugin-launch-modal.tsx   |  7 ++--
 .../mcp-page/custom-server-editor.tsx         | 33 ++++++++++-------
 .../mcp-page/install-server-modal.tsx         | 23 +++++-------
 .../features/skills/add-skill-modal.tsx       | 23 ++++++++----
 .../features/skills/skill-detail-modal.tsx    | 19 +++++++---
 .../shared/modals/modal-close-button.tsx      | 36 -------------------
 .../shared/modals/modal-icon-button-class.ts  |  2 ++
 src/icons/modal-close.svg                     |  3 --
 18 files changed, 116 insertions(+), 129 deletions(-)
 delete mode 100644 src/components/shared/modals/modal-close-button.tsx
 create mode 100644 src/components/shared/modals/modal-icon-button-class.ts
 delete mode 100644 src/icons/modal-close.svg

diff --git a/src/components/features/automations/add-automation-modal.tsx b/src/components/features/automations/add-automation-modal.tsx
index 0cbf0d982..0a5b1a1a5 100644
--- a/src/components/features/automations/add-automation-modal.tsx
+++ b/src/components/features/automations/add-automation-modal.tsx
@@ -1,7 +1,9 @@
 import { useTranslation } from "react-i18next";
+import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { I18nKey } from "#/i18n/declaration";
+import { cn } from "#/utils/utils";
 import { CreateInstructionsContent } from "./create-instructions";
 
 interface AddAutomationModalProps {
@@ -24,19 +26,24 @@ export function AddAutomationModal({
     >
       <div
         data-testid="add-automation-modal"
-        className="relative flex w-full max-w-lg flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary"
+        className="flex w-full max-w-lg flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary"
       >
-        <ModalCloseButton
-          onClose={onClose}
-          testId="add-automation-modal-close"
-        />
-        <header className="flex-shrink-0 px-6 pb-4 pt-6">
+        <header className="flex flex-shrink-0 items-start justify-between gap-4 px-6 pb-4 pt-6">
           <h2
             id="add-automation-modal-title"
-            className="pr-6 text-lg font-semibold"
+            className="text-lg font-semibold text-white"
           >
             {t(I18nKey.AUTOMATIONS$EMPTY_HOW_TO_CREATE_TITLE)}
           </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
+            data-testid="add-automation-modal-close"
+            aria-label={t(I18nKey.BUTTON$CLOSE)}
+          >
+            <X size={20} aria-hidden />
+          </button>
         </header>
         <div className="px-6 pb-6">
           <CreateInstructionsContent onLaunch={onClose} />
diff --git a/src/components/features/backends/backend-form-modal.tsx b/src/components/features/backends/backend-form-modal.tsx
index 494965230..c61e7e0da 100644
--- a/src/components/features/backends/backend-form-modal.tsx
+++ b/src/components/features/backends/backend-form-modal.tsx
@@ -19,12 +19,10 @@ import ChevronDownSmallIcon from "#/icons/chevron-down-small.svg?react";
 import { I18nKey } from "#/i18n/declaration";
 import type { Backend, BackendKind } from "#/api/backend-registry/types";
 import { cn } from "#/utils/utils";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 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 {
@@ -613,11 +611,14 @@ export function BackendFormModal({
         >
           {/* Header */}
           <div className="flex items-start justify-between gap-4 px-6 pt-6 pb-2">
-            <BaseModalTitle title={t(I18nKey.BACKEND$ADD_TITLE)} />
+            <BaseModalTitle
+              title={t(I18nKey.BACKEND$ADD_TITLE)}
+              className="text-white"
+            />
             <button
               type="button"
               onClick={onClose}
-              className={cn(ICON_BUTTON_CLASS, "shrink-0")}
+              className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
               data-testid="add-backend-close"
               aria-label={t(I18nKey.BUTTON$CLOSE)}
             >
@@ -667,11 +668,14 @@ export function BackendFormModal({
         )}
       >
         <div className="flex items-start justify-between gap-4">
-          <BaseModalTitle title={t(I18nKey.BACKEND$EDIT_TITLE)} />
+          <BaseModalTitle
+            title={t(I18nKey.BACKEND$EDIT_TITLE)}
+            className="text-white"
+          />
           <button
             type="button"
             onClick={onClose}
-            className={cn(ICON_BUTTON_CLASS, "shrink-0")}
+            className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
             data-testid={`${testIdRoot}-close`}
             aria-label={t(I18nKey.BUTTON$CLOSE)}
           >
diff --git a/src/components/features/backends/manage-backends-modal.tsx b/src/components/features/backends/manage-backends-modal.tsx
index 31a6e3538..2886cd7c3 100644
--- a/src/components/features/backends/manage-backends-modal.tsx
+++ b/src/components/features/backends/manage-backends-modal.tsx
@@ -21,12 +21,10 @@ import {
 } from "#/hooks/query/use-backends-health";
 import { I18nKey } from "#/i18n/declaration";
 import { cn } from "#/utils/utils";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 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";
 
@@ -166,7 +164,7 @@ export function ManageBackendsModal({ onClose }: ManageBackendsModalProps) {
             <button
               type="button"
               onClick={onClose}
-              className={ICON_BUTTON_CLASS}
+              className={MODAL_ICON_BUTTON_CLASS}
               aria-label={t(I18nKey.BUTTON$CLOSE)}
               data-testid="close-manage-backends-modal"
             >
diff --git a/src/components/features/chat/open-repository-modal.tsx b/src/components/features/chat/open-repository-modal.tsx
index dee6e445e..ff1845944 100644
--- a/src/components/features/chat/open-repository-modal.tsx
+++ b/src/components/features/chat/open-repository-modal.tsx
@@ -13,9 +13,7 @@ import { GitBranchDropdown } from "#/components/features/home/git-branch-dropdow
 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";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 
 interface OpenRepositoryModalProps {
   isOpen: boolean;
@@ -108,7 +106,7 @@ export function OpenRepositoryModal({
           <button
             type="button"
             onClick={handleClose}
-            className={cn(ICON_BUTTON_CLASS, "shrink-0")}
+            className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
             data-testid="close-open-repository-modal"
             aria-label={t(I18nKey.BUTTON$CLOSE)}
           >
diff --git a/src/components/features/conversation-panel/hooks-modal-header.tsx b/src/components/features/conversation-panel/hooks-modal-header.tsx
index fcda51d3d..474eecd18 100644
--- a/src/components/features/conversation-panel/hooks-modal-header.tsx
+++ b/src/components/features/conversation-panel/hooks-modal-header.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import { RefreshCw, X } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
 import { StyledTooltip } from "#/components/shared/buttons/styled-tooltip";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { I18nKey } from "#/i18n/declaration";
 import { Typography } from "#/ui/typography";
 import { cn } from "#/utils/utils";
@@ -13,9 +14,6 @@ interface HooksModalHeaderProps {
   onClose: () => void;
 }
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed";
-
 export function HooksModalHeader({
   isLoading,
   isRefetching,
@@ -41,7 +39,10 @@ export function HooksModalHeader({
             onClick={onRefresh}
             disabled={isLoading || isRefetching}
             aria-label={refreshLabel}
-            className={ICON_BUTTON_CLASS}
+            className={cn(
+              MODAL_ICON_BUTTON_CLASS,
+              "disabled:opacity-30 disabled:cursor-not-allowed",
+            )}
           >
             <RefreshCw
               size={18}
@@ -53,7 +54,7 @@ export function HooksModalHeader({
         <button
           type="button"
           onClick={onClose}
-          className={ICON_BUTTON_CLASS}
+          className={MODAL_ICON_BUTTON_CLASS}
           aria-label={t(I18nKey.BUTTON$CLOSE)}
           data-testid="close-hooks-modal"
         >
diff --git a/src/components/features/conversation-panel/skills-modal-header.tsx b/src/components/features/conversation-panel/skills-modal-header.tsx
index 866d454df..1610b5cf9 100644
--- a/src/components/features/conversation-panel/skills-modal-header.tsx
+++ b/src/components/features/conversation-panel/skills-modal-header.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import { RefreshCw, X } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
 import { StyledTooltip } from "#/components/shared/buttons/styled-tooltip";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { I18nKey } from "#/i18n/declaration";
 import { Typography } from "#/ui/typography";
 import { cn } from "#/utils/utils";
@@ -13,9 +14,6 @@ interface SkillsModalHeaderProps {
   onClose: () => void;
 }
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed";
-
 export function SkillsModalHeader({
   isLoading,
   isRefetching,
@@ -41,7 +39,10 @@ export function SkillsModalHeader({
             onClick={onRefresh}
             disabled={isLoading || isRefetching}
             aria-label={refreshLabel}
-            className={ICON_BUTTON_CLASS}
+            className={cn(
+              MODAL_ICON_BUTTON_CLASS,
+              "disabled:opacity-30 disabled:cursor-not-allowed",
+            )}
           >
             <RefreshCw
               size={18}
@@ -53,7 +54,7 @@ export function SkillsModalHeader({
         <button
           type="button"
           onClick={onClose}
-          className={ICON_BUTTON_CLASS}
+          className={MODAL_ICON_BUTTON_CLASS}
           aria-label={t(I18nKey.BUTTON$CLOSE)}
           data-testid="close-skills-modal"
         >
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 57dacec64..0476754f8 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,7 @@
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { Typography } from "#/ui/typography";
 import { I18nKey } from "#/i18n/declaration";
 
@@ -10,9 +11,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,
@@ -52,7 +50,7 @@ export function SystemMessageHeader({
       <button
         type="button"
         onClick={onClose}
-        className={ICON_BUTTON_CLASS}
+        className={MODAL_ICON_BUTTON_CLASS}
         aria-label={t(I18nKey.BUTTON$CLOSE)}
         data-testid="close-system-message-modal"
       >
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 81e7689d4..c71900b0b 100644
--- a/src/components/features/conversation/metrics-modal/metrics-modal-header.tsx
+++ b/src/components/features/conversation/metrics-modal/metrics-modal-header.tsx
@@ -1,15 +1,13 @@
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 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");
 
@@ -19,7 +17,7 @@ export function MetricsModalHeader({ onClose }: MetricsModalHeaderProps) {
       <button
         type="button"
         onClick={onClose}
-        className={ICON_BUTTON_CLASS}
+        className={MODAL_ICON_BUTTON_CLASS}
         aria-label={t(I18nKey.BUTTON$CLOSE)}
         data-testid="close-metrics-modal"
       >
diff --git a/src/components/features/home/open-repository-dialog.tsx b/src/components/features/home/open-repository-dialog.tsx
index 1df8295a5..66eedfea3 100644
--- a/src/components/features/home/open-repository-dialog.tsx
+++ b/src/components/features/home/open-repository-dialog.tsx
@@ -6,11 +6,9 @@ import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/b
 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 { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { RepositorySelectionForm } from "./repo-selection-form";
 
 interface OpenRepositoryDialogProps {
@@ -44,7 +42,7 @@ export function OpenRepositoryDialog({
           <button
             type="button"
             onClick={onClose}
-            className={cn(ICON_BUTTON_CLASS, "shrink-0")}
+            className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
             data-testid="close-open-repository-dialog"
             aria-label={t(I18nKey.BUTTON$CLOSE)}
           >
diff --git a/src/components/features/home/open-workspace-dialog.tsx b/src/components/features/home/open-workspace-dialog.tsx
index dd46a6bc4..1556f0965 100644
--- a/src/components/features/home/open-workspace-dialog.tsx
+++ b/src/components/features/home/open-workspace-dialog.tsx
@@ -7,11 +7,9 @@ import { I18nKey } from "#/i18n/declaration";
 import { cn } from "#/utils/utils";
 import { LocalWorkspace } from "#/types/workspace";
 import { useUserProviders } from "#/hooks/use-user-providers";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 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;
@@ -39,7 +37,7 @@ export function OpenWorkspaceDialog({
           <button
             type="button"
             onClick={onClose}
-            className={cn(ICON_BUTTON_CLASS, "shrink-0")}
+            className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
             data-testid="close-open-workspace-dialog"
             aria-label={t(I18nKey.BUTTON$CLOSE)}
           >
diff --git a/src/components/features/launch/plugin-launch-modal.tsx b/src/components/features/launch/plugin-launch-modal.tsx
index 96ff48316..bfa97599d 100644
--- a/src/components/features/launch/plugin-launch-modal.tsx
+++ b/src/components/features/launch/plugin-launch-modal.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { IoClose } from "react-icons/io5";
+import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import {
   MODAL_MAX_WIDTH_VIEWPORT,
   modalWidthClassName,
 } from "#/components/shared/modals/modal-body";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { I18nKey } from "#/i18n/declaration";
 import { PluginSpec } from "#/api/conversation-service/agent-server-conversation-service.types";
@@ -143,11 +144,11 @@ export function PluginLaunchModal({
           <button
             type="button"
             onClick={onClose}
-            className="rounded-md p-1 text-white hover:bg-tertiary cursor-pointer"
+            className={MODAL_ICON_BUTTON_CLASS}
             aria-label="Close"
             data-testid="close-button"
           >
-            <IoClose className="h-5 w-5" />
+            <X size={20} aria-hidden />
           </button>
         </div>
 
diff --git a/src/components/features/mcp-page/custom-server-editor.tsx b/src/components/features/mcp-page/custom-server-editor.tsx
index 8ddfba9e5..140c361c8 100644
--- a/src/components/features/mcp-page/custom-server-editor.tsx
+++ b/src/components/features/mcp-page/custom-server-editor.tsx
@@ -1,11 +1,13 @@
 import React from "react";
 import { AxiosError } from "axios";
 import { useTranslation } from "react-i18next";
+import { X } from "lucide-react";
 import { I18nKey } from "#/i18n/declaration";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { ConfirmationModal } from "#/components/shared/modals/confirmation-modal";
 import { MCPServerForm } from "#/components/features/settings/mcp-settings/mcp-server-form";
+import { cn } from "#/utils/utils";
 import { useAddMcpServer } from "#/hooks/mutation/use-add-mcp-server";
 import { useUpdateMcpServer } from "#/hooks/mutation/use-update-mcp-server";
 import { useDeleteMcpServer } from "#/hooks/mutation/use-delete-mcp-server";
@@ -94,18 +96,25 @@ export function CustomServerEditor({
       >
         <div
           data-testid="mcp-custom-editor"
-          className="relative bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar"
+          className="bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar"
         >
-          <ModalCloseButton
-            onClose={onClose}
-            testId="mcp-custom-editor-close"
-            disabled={isDismissBlocked}
-          />
-          <h2 className="mb-4 pr-6 text-lg font-semibold">
-            {isEditing
-              ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)
-              : t(I18nKey.MCP$ADD_CUSTOM_TITLE)}
-          </h2>
+          <div className="flex items-start justify-between gap-4 mb-4">
+            <h2 className="text-lg font-semibold text-white">
+              {isEditing
+                ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)
+                : t(I18nKey.MCP$ADD_CUSTOM_TITLE)}
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isDismissBlocked}
+              className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
+              data-testid="mcp-custom-editor-close"
+              aria-label={t(I18nKey.BUTTON$CLOSE)}
+            >
+              <X size={20} aria-hidden />
+            </button>
+          </div>
           <MCPServerForm
             mode={isEditing ? "edit" : "add"}
             server={isEditing ? server : undefined}
diff --git a/src/components/features/mcp-page/install-server-modal.tsx b/src/components/features/mcp-page/install-server-modal.tsx
index 0bafe174e..b53d5c16f 100644
--- a/src/components/features/mcp-page/install-server-modal.tsx
+++ b/src/components/features/mcp-page/install-server-modal.tsx
@@ -3,7 +3,7 @@ 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 { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { SettingsInput } from "#/components/features/settings/settings-input";
 import { I18nKey } from "#/i18n/declaration";
@@ -13,9 +13,7 @@ import { MCPServerConfig } from "#/types/mcp-server";
 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";
+import { cn } from "#/utils/utils";
 
 interface InstallServerModalProps {
   entry: MarketplaceEntry;
@@ -273,26 +271,21 @@ export function InstallServerModal({
         data-testid="mcp-install-modal"
         data-marketplace-id={entry.id}
         onSubmit={handleSubmit}
-        className="relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar"
+        className="bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar"
       >
-        <ModalCloseButton
-          onClose={onClose}
-          testId="mcp-install-modal-close"
-          disabled={isPending}
-        />
-        <div className="flex items-start gap-3 pr-6">
+        <div className="flex items-start gap-3">
           <McpLogoBadge entry={entry} />
-          <div className="flex flex-col flex-1">
-            <h2 className="text-lg font-semibold">{entry.name}</h2>
+          <div className="flex flex-col flex-1 min-w-0">
+            <h2 className="text-lg font-semibold text-white">{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}
+            className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
+            data-testid="mcp-install-modal-close"
             aria-label={t(I18nKey.BUTTON$CLOSE)}
-            data-testid="close-mcp-install-modal"
           >
             <X size={20} aria-hidden />
           </button>
diff --git a/src/components/features/skills/add-skill-modal.tsx b/src/components/features/skills/add-skill-modal.tsx
index 585dc5c88..f3dbe990c 100644
--- a/src/components/features/skills/add-skill-modal.tsx
+++ b/src/components/features/skills/add-skill-modal.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import {
   ADD_SKILL_DOCS_URL,
@@ -120,13 +121,23 @@ export function AddSkillModal({ onClose }: AddSkillModalProps) {
     >
       <div
         data-testid="add-skill-modal"
-        className="relative flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary"
+        className="flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary"
       >
-        <ModalCloseButton onClose={onClose} testId="add-skill-modal-close" />
         <header className="flex-shrink-0 px-6 pb-4 pt-6">
-          <h2 className="pr-6 text-lg font-semibold">
-            {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_TITLE)}
-          </h2>
+          <div className="flex items-start justify-between gap-4">
+            <h2 className="text-lg font-semibold text-white">
+              {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_TITLE)}
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
+              data-testid="add-skill-modal-close"
+              aria-label={t(I18nKey.BUTTON$CLOSE)}
+            >
+              <X size={20} aria-hidden />
+            </button>
+          </div>
           <p className="mt-4 text-sm text-tertiary-light">
             {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_INTRO)}
           </p>
diff --git a/src/components/features/skills/skill-detail-modal.tsx b/src/components/features/skills/skill-detail-modal.tsx
index f81ce71c0..1886039d5 100644
--- a/src/components/features/skills/skill-detail-modal.tsx
+++ b/src/components/features/skills/skill-detail-modal.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
+import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { SettingsSwitch } from "#/components/features/settings/settings-switch";
 import { I18nKey } from "#/i18n/declaration";
@@ -99,15 +100,14 @@ export function SkillDetailModal({
       <div
         data-testid="skill-detail-modal"
         data-skill-name={skill.name}
-        className="relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar"
+        className="bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar"
       >
-        <ModalCloseButton onClose={onClose} testId="skill-detail-modal-close" />
-        <div className="flex items-start gap-3 pr-6">
+        <div className="flex items-start gap-3">
           <SkillIconBadge skillName={skill.name} />
           <div className="min-w-0 flex-1">
             <h2
               data-testid={`skill-modal-name-${skill.name}`}
-              className="text-lg font-semibold"
+              className="text-lg font-semibold text-white"
             >
               {skill.name}
             </h2>
@@ -143,6 +143,15 @@ export function SkillDetailModal({
               </div>
             ) : null}
           </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
+            data-testid="skill-detail-modal-close"
+            aria-label={t(I18nKey.BUTTON$CLOSE)}
+          >
+            <X size={20} aria-hidden />
+          </button>
         </div>
 
         <div
diff --git a/src/components/shared/modals/modal-close-button.tsx b/src/components/shared/modals/modal-close-button.tsx
deleted file mode 100644
index 0f48b0ad3..000000000
--- a/src/components/shared/modals/modal-close-button.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useTranslation } from "react-i18next";
-import ModalCloseIcon from "#/icons/modal-close.svg?react";
-import { I18nKey } from "#/i18n/declaration";
-import { cn } from "#/utils/utils";
-
-interface ModalCloseButtonProps {
-  onClose: () => void;
-  testId?: string;
-  className?: string;
-  disabled?: boolean;
-}
-
-export function ModalCloseButton({
-  onClose,
-  testId,
-  className,
-  disabled = false,
-}: ModalCloseButtonProps) {
-  const { t } = useTranslation("openhands");
-
-  return (
-    <button
-      type="button"
-      data-testid={testId}
-      onClick={onClose}
-      disabled={disabled}
-      aria-label={t(I18nKey.BUTTON$CLOSE)}
-      className={cn(
-        "absolute right-4 top-4 z-10 flex cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-1 text-tertiary-alt transition-colors hover:bg-surface-raised hover:text-white disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-    >
-      <ModalCloseIcon aria-hidden className="size-4" />
-    </button>
-  );
-}
diff --git a/src/components/shared/modals/modal-icon-button-class.ts b/src/components/shared/modals/modal-icon-button-class.ts
new file mode 100644
index 000000000..3b28ecfe6
--- /dev/null
+++ b/src/components/shared/modals/modal-icon-button-class.ts
@@ -0,0 +1,2 @@
+export const MODAL_ICON_BUTTON_CLASS =
+  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer";
diff --git a/src/icons/modal-close.svg b/src/icons/modal-close.svg
deleted file mode 100644
index 0430d6441..000000000
--- a/src/icons/modal-close.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

From fce32064ebecb70d6ce69d393ae7254353da5f7b Mon Sep 17 00:00:00 2001
From: hieptl <hieptl.developer@gmail.com>
Date: Sun, 24 May 2026 03:09:48 +0700
Subject: [PATCH 2/2] revert: white-icon modal styling and standardize on
 ModalCloseButton

---
 .../automations/add-automation-modal.tsx      | 23 ++++------
 .../features/backends/backend-form-modal.tsx  | 46 +++++--------------
 .../backends/manage-backends-modal.tsx        | 29 +++++-------
 .../features/chat/open-repository-modal.tsx   | 21 +++------
 .../conversation-panel/hooks-modal-header.tsx | 40 +++++++---------
 .../conversation-panel/hooks-modal.tsx        |  2 +-
 .../skills-modal-header.tsx                   | 40 +++++++---------
 .../conversation-panel/skills-modal.tsx       |  2 +-
 .../system-message-modal.tsx                  |  2 +-
 .../system-message-header.tsx                 | 19 ++------
 .../metrics-modal/metrics-modal-header.tsx    | 21 +++------
 .../metrics-modal/metrics-modal.tsx           |  2 +-
 .../features/home/open-repository-dialog.tsx  | 21 +++------
 .../features/home/open-workspace-dialog.tsx   | 21 +++------
 .../features/launch/plugin-launch-modal.tsx   | 23 +++-------
 .../mcp-page/custom-server-editor.tsx         | 33 +++++--------
 .../mcp-page/install-server-modal.tsx         | 27 ++++-------
 .../features/skills/add-skill-modal.tsx       | 23 +++-------
 .../features/skills/skill-detail-modal.tsx    | 19 ++------
 .../shared/modals/modal-close-button.tsx      | 36 +++++++++++++++
 .../shared/modals/modal-icon-button-class.ts  |  2 -
 src/icons/modal-close.svg                     |  3 ++
 22 files changed, 178 insertions(+), 277 deletions(-)
 create mode 100644 src/components/shared/modals/modal-close-button.tsx
 delete mode 100644 src/components/shared/modals/modal-icon-button-class.ts
 create mode 100644 src/icons/modal-close.svg

diff --git a/src/components/features/automations/add-automation-modal.tsx b/src/components/features/automations/add-automation-modal.tsx
index 0a5b1a1a5..0cbf0d982 100644
--- a/src/components/features/automations/add-automation-modal.tsx
+++ b/src/components/features/automations/add-automation-modal.tsx
@@ -1,9 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { I18nKey } from "#/i18n/declaration";
-import { cn } from "#/utils/utils";
 import { CreateInstructionsContent } from "./create-instructions";
 
 interface AddAutomationModalProps {
@@ -26,24 +24,19 @@ export function AddAutomationModal({
     >
       <div
         data-testid="add-automation-modal"
-        className="flex w-full max-w-lg flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary"
+        className="relative flex w-full max-w-lg flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary"
       >
-        <header className="flex flex-shrink-0 items-start justify-between gap-4 px-6 pb-4 pt-6">
+        <ModalCloseButton
+          onClose={onClose}
+          testId="add-automation-modal-close"
+        />
+        <header className="flex-shrink-0 px-6 pb-4 pt-6">
           <h2
             id="add-automation-modal-title"
-            className="text-lg font-semibold text-white"
+            className="pr-6 text-lg font-semibold"
           >
             {t(I18nKey.AUTOMATIONS$EMPTY_HOW_TO_CREATE_TITLE)}
           </h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
-            data-testid="add-automation-modal-close"
-            aria-label={t(I18nKey.BUTTON$CLOSE)}
-          >
-            <X size={20} aria-hidden />
-          </button>
         </header>
         <div className="px-6 pb-6">
           <CreateInstructionsContent onLaunch={onClose} />
diff --git a/src/components/features/backends/backend-form-modal.tsx b/src/components/features/backends/backend-form-modal.tsx
index c61e7e0da..0ce99982d 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";
@@ -19,7 +18,6 @@ import ChevronDownSmallIcon from "#/icons/chevron-down-small.svg?react";
 import { I18nKey } from "#/i18n/declaration";
 import type { Backend, BackendKind } from "#/api/backend-registry/types";
 import { cn } from "#/utils/utils";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { BackendStatusDot } from "./backend-status-dot";
 import { DeviceFlowAuth } from "./device-flow-auth";
 
@@ -604,26 +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)}
-              className="text-white"
-            />
-            <button
-              type="button"
-              onClick={onClose}
-              className={cn(MODAL_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 */}
@@ -663,25 +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)}
-            className="text-white"
-          />
-          <button
-            type="button"
-            onClick={onClose}
-            className={cn(MODAL_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 2886cd7c3..29e5aafef 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,
@@ -21,7 +21,6 @@ import {
 } from "#/hooks/query/use-backends-health";
 import { I18nKey } from "#/i18n/declaration";
 import { cn } from "#/utils/utils";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { BackendFormModal } from "./backend-form-modal";
 import { BackendStatusDot } from "./backend-status-dot";
 
@@ -150,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={MODAL_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 ff1845944..7702708c9 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,8 +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";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 
 interface OpenRepositoryModalProps {
   isOpen: boolean;
@@ -99,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(MODAL_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 474eecd18..949727e13 100644
--- a/src/components/features/conversation-panel/hooks-modal-header.tsx
+++ b/src/components/features/conversation-panel/hooks-modal-header.tsx
@@ -1,8 +1,8 @@
 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 { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { I18nKey } from "#/i18n/declaration";
 import { Typography } from "#/ui/typography";
 import { cn } from "#/utils/utils";
@@ -14,6 +14,9 @@ interface HooksModalHeaderProps {
   onClose: () => void;
 }
 
+const ICON_BUTTON_CLASS =
+  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed";
+
 export function HooksModalHeader({
   isLoading,
   isRefetching,
@@ -24,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"
@@ -39,10 +43,7 @@ export function HooksModalHeader({
             onClick={onRefresh}
             disabled={isLoading || isRefetching}
             aria-label={refreshLabel}
-            className={cn(
-              MODAL_ICON_BUTTON_CLASS,
-              "disabled:opacity-30 disabled:cursor-not-allowed",
-            )}
+            className={ICON_BUTTON_CLASS}
           >
             <RefreshCw
               size={18}
@@ -51,16 +52,7 @@ export function HooksModalHeader({
             />
           </button>
         </StyledTooltip>
-        <button
-          type="button"
-          onClick={onClose}
-          className={MODAL_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 cc38e4e2a..33926799f 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 1610b5cf9..ace489e8d 100644
--- a/src/components/features/conversation-panel/skills-modal-header.tsx
+++ b/src/components/features/conversation-panel/skills-modal-header.tsx
@@ -1,8 +1,8 @@
 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 { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { I18nKey } from "#/i18n/declaration";
 import { Typography } from "#/ui/typography";
 import { cn } from "#/utils/utils";
@@ -14,6 +14,9 @@ interface SkillsModalHeaderProps {
   onClose: () => void;
 }
 
+const ICON_BUTTON_CLASS =
+  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed";
+
 export function SkillsModalHeader({
   isLoading,
   isRefetching,
@@ -24,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"
@@ -39,10 +43,7 @@ export function SkillsModalHeader({
             onClick={onRefresh}
             disabled={isLoading || isRefetching}
             aria-label={refreshLabel}
-            className={cn(
-              MODAL_ICON_BUTTON_CLASS,
-              "disabled:opacity-30 disabled:cursor-not-allowed",
-            )}
+            className={ICON_BUTTON_CLASS}
           >
             <RefreshCw
               size={18}
@@ -51,16 +52,7 @@ export function SkillsModalHeader({
             />
           </button>
         </StyledTooltip>
-        <button
-          type="button"
-          onClick={onClose}
-          className={MODAL_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 d10c96d70..16b402435 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 b65000b8a..c4a87b7e0 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 0476754f8..57706aaf2 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,7 +1,6 @@
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { Typography } from "#/ui/typography";
 import { I18nKey } from "#/i18n/declaration";
 
@@ -19,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">
@@ -47,15 +47,6 @@ export function SystemMessageHeader({
           </div>
         )}
       </div>
-      <button
-        type="button"
-        onClick={onClose}
-        className={MODAL_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 c71900b0b..85c4f29df 100644
--- a/src/components/features/conversation/metrics-modal/metrics-modal-header.tsx
+++ b/src/components/features/conversation/metrics-modal/metrics-modal-header.tsx
@@ -1,7 +1,6 @@
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { I18nKey } from "#/i18n/declaration";
 
 interface MetricsModalHeaderProps {
@@ -12,17 +11,11 @@ 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={MODAL_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 2732deeaa..5d8ee8f40 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 66eedfea3..a297126ec 100644
--- a/src/components/features/home/open-repository-dialog.tsx
+++ b/src/components/features/home/open-repository-dialog.tsx
@@ -1,14 +1,12 @@
 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";
 import { Provider } from "#/types/settings";
 import { useUserProviders } from "#/hooks/use-user-providers";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { RepositorySelectionForm } from "./repo-selection-form";
 
 interface OpenRepositoryDialogProps {
@@ -35,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(MODAL_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 1556f0965..ed93ddfa8 100644
--- a/src/components/features/home/open-workspace-dialog.tsx
+++ b/src/components/features/home/open-workspace-dialog.tsx
@@ -1,13 +1,11 @@
 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 { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
 import { WorkspaceSelectionForm } from "./workspace-selection-form";
 
 interface OpenWorkspaceDialogProps {
@@ -30,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(MODAL_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 bfa97599d..eac99c905 100644
--- a/src/components/features/launch/plugin-launch-modal.tsx
+++ b/src/components/features/launch/plugin-launch-modal.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import {
   MODAL_MAX_WIDTH_VIEWPORT,
   modalWidthClassName,
 } from "#/components/shared/modals/modal-body";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
+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";
@@ -132,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={MODAL_ICON_BUTTON_CLASS}
-            aria-label="Close"
-            data-testid="close-button"
-          >
-            <X size={20} aria-hidden />
-          </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/custom-server-editor.tsx b/src/components/features/mcp-page/custom-server-editor.tsx
index 140c361c8..8ddfba9e5 100644
--- a/src/components/features/mcp-page/custom-server-editor.tsx
+++ b/src/components/features/mcp-page/custom-server-editor.tsx
@@ -1,13 +1,11 @@
 import React from "react";
 import { AxiosError } from "axios";
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { I18nKey } from "#/i18n/declaration";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { ConfirmationModal } from "#/components/shared/modals/confirmation-modal";
 import { MCPServerForm } from "#/components/features/settings/mcp-settings/mcp-server-form";
-import { cn } from "#/utils/utils";
 import { useAddMcpServer } from "#/hooks/mutation/use-add-mcp-server";
 import { useUpdateMcpServer } from "#/hooks/mutation/use-update-mcp-server";
 import { useDeleteMcpServer } from "#/hooks/mutation/use-delete-mcp-server";
@@ -96,25 +94,18 @@ export function CustomServerEditor({
       >
         <div
           data-testid="mcp-custom-editor"
-          className="bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar"
+          className="relative bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar"
         >
-          <div className="flex items-start justify-between gap-4 mb-4">
-            <h2 className="text-lg font-semibold text-white">
-              {isEditing
-                ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)
-                : t(I18nKey.MCP$ADD_CUSTOM_TITLE)}
-            </h2>
-            <button
-              type="button"
-              onClick={onClose}
-              disabled={isDismissBlocked}
-              className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
-              data-testid="mcp-custom-editor-close"
-              aria-label={t(I18nKey.BUTTON$CLOSE)}
-            >
-              <X size={20} aria-hidden />
-            </button>
-          </div>
+          <ModalCloseButton
+            onClose={onClose}
+            testId="mcp-custom-editor-close"
+            disabled={isDismissBlocked}
+          />
+          <h2 className="mb-4 pr-6 text-lg font-semibold">
+            {isEditing
+              ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)
+              : t(I18nKey.MCP$ADD_CUSTOM_TITLE)}
+          </h2>
           <MCPServerForm
             mode={isEditing ? "edit" : "add"}
             server={isEditing ? server : undefined}
diff --git a/src/components/features/mcp-page/install-server-modal.tsx b/src/components/features/mcp-page/install-server-modal.tsx
index b53d5c16f..13259b5b2 100644
--- a/src/components/features/mcp-page/install-server-modal.tsx
+++ b/src/components/features/mcp-page/install-server-modal.tsx
@@ -1,9 +1,8 @@
 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 { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
+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 { I18nKey } from "#/i18n/declaration";
@@ -13,7 +12,6 @@ import { MCPServerConfig } from "#/types/mcp-server";
 import { useAddMcpServer } from "#/hooks/mutation/use-add-mcp-server";
 import { displaySuccessToast } from "#/utils/custom-toast-handlers";
 import { retrieveAxiosErrorMessage } from "#/utils/retrieve-axios-error-message";
-import { cn } from "#/utils/utils";
 
 interface InstallServerModalProps {
   entry: MarketplaceEntry;
@@ -271,24 +269,19 @@ export function InstallServerModal({
         data-testid="mcp-install-modal"
         data-marketplace-id={entry.id}
         onSubmit={handleSubmit}
-        className="bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar"
+        className="relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar"
       >
-        <div className="flex items-start gap-3">
+        <ModalCloseButton
+          onClose={onClose}
+          testId="mcp-install-modal-close"
+          disabled={isPending}
+        />
+        <div className="flex items-start gap-3 pr-6">
           <McpLogoBadge entry={entry} />
-          <div className="flex flex-col flex-1 min-w-0">
-            <h2 className="text-lg font-semibold text-white">{entry.name}</h2>
+          <div className="flex flex-col flex-1">
+            <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={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
-            data-testid="mcp-install-modal-close"
-            aria-label={t(I18nKey.BUTTON$CLOSE)}
-          >
-            <X size={20} aria-hidden />
-          </button>
         </div>
 
         {entry.installHint && (
diff --git a/src/components/features/skills/add-skill-modal.tsx b/src/components/features/skills/add-skill-modal.tsx
index f3dbe990c..585dc5c88 100644
--- a/src/components/features/skills/add-skill-modal.tsx
+++ b/src/components/features/skills/add-skill-modal.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import {
   ADD_SKILL_DOCS_URL,
@@ -121,23 +120,13 @@ export function AddSkillModal({ onClose }: AddSkillModalProps) {
     >
       <div
         data-testid="add-skill-modal"
-        className="flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary"
+        className="relative flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary"
       >
+        <ModalCloseButton onClose={onClose} testId="add-skill-modal-close" />
         <header className="flex-shrink-0 px-6 pb-4 pt-6">
-          <div className="flex items-start justify-between gap-4">
-            <h2 className="text-lg font-semibold text-white">
-              {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_TITLE)}
-            </h2>
-            <button
-              type="button"
-              onClick={onClose}
-              className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
-              data-testid="add-skill-modal-close"
-              aria-label={t(I18nKey.BUTTON$CLOSE)}
-            >
-              <X size={20} aria-hidden />
-            </button>
-          </div>
+          <h2 className="pr-6 text-lg font-semibold">
+            {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_TITLE)}
+          </h2>
           <p className="mt-4 text-sm text-tertiary-light">
             {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_INTRO)}
           </p>
diff --git a/src/components/features/skills/skill-detail-modal.tsx b/src/components/features/skills/skill-detail-modal.tsx
index 1886039d5..f81ce71c0 100644
--- a/src/components/features/skills/skill-detail-modal.tsx
+++ b/src/components/features/skills/skill-detail-modal.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { MODAL_ICON_BUTTON_CLASS } from "#/components/shared/modals/modal-icon-button-class";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { SettingsSwitch } from "#/components/features/settings/settings-switch";
 import { I18nKey } from "#/i18n/declaration";
@@ -100,14 +99,15 @@ export function SkillDetailModal({
       <div
         data-testid="skill-detail-modal"
         data-skill-name={skill.name}
-        className="bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar"
+        className="relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[85vh] overflow-y-auto custom-scrollbar"
       >
-        <div className="flex items-start gap-3">
+        <ModalCloseButton onClose={onClose} testId="skill-detail-modal-close" />
+        <div className="flex items-start gap-3 pr-6">
           <SkillIconBadge skillName={skill.name} />
           <div className="min-w-0 flex-1">
             <h2
               data-testid={`skill-modal-name-${skill.name}`}
-              className="text-lg font-semibold text-white"
+              className="text-lg font-semibold"
             >
               {skill.name}
             </h2>
@@ -143,15 +143,6 @@ export function SkillDetailModal({
               </div>
             ) : null}
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            className={cn(MODAL_ICON_BUTTON_CLASS, "shrink-0")}
-            data-testid="skill-detail-modal-close"
-            aria-label={t(I18nKey.BUTTON$CLOSE)}
-          >
-            <X size={20} aria-hidden />
-          </button>
         </div>
 
         <div
diff --git a/src/components/shared/modals/modal-close-button.tsx b/src/components/shared/modals/modal-close-button.tsx
new file mode 100644
index 000000000..0f48b0ad3
--- /dev/null
+++ b/src/components/shared/modals/modal-close-button.tsx
@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next";
+import ModalCloseIcon from "#/icons/modal-close.svg?react";
+import { I18nKey } from "#/i18n/declaration";
+import { cn } from "#/utils/utils";
+
+interface ModalCloseButtonProps {
+  onClose: () => void;
+  testId?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function ModalCloseButton({
+  onClose,
+  testId,
+  className,
+  disabled = false,
+}: ModalCloseButtonProps) {
+  const { t } = useTranslation("openhands");
+
+  return (
+    <button
+      type="button"
+      data-testid={testId}
+      onClick={onClose}
+      disabled={disabled}
+      aria-label={t(I18nKey.BUTTON$CLOSE)}
+      className={cn(
+        "absolute right-4 top-4 z-10 flex cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-1 text-tertiary-alt transition-colors hover:bg-surface-raised hover:text-white disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+    >
+      <ModalCloseIcon aria-hidden className="size-4" />
+    </button>
+  );
+}
diff --git a/src/components/shared/modals/modal-icon-button-class.ts b/src/components/shared/modals/modal-icon-button-class.ts
deleted file mode 100644
index 3b28ecfe6..000000000
--- a/src/components/shared/modals/modal-icon-button-class.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const MODAL_ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer";
diff --git a/src/icons/modal-close.svg b/src/icons/modal-close.svg
new file mode 100644
index 000000000..0430d6441
--- /dev/null
+++ b/src/icons/modal-close.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>