diff --git a/ui/src/ui/config/confirm.tsx b/ui/src/ui/config/confirm.tsx
index d55bce079..338783278 100644
--- a/ui/src/ui/config/confirm.tsx
+++ b/ui/src/ui/config/confirm.tsx
@@ -8,7 +8,6 @@ import { ICONS } from "@/theme/icons";
 import { envToText } from "@/lib/utils";
 import { colorByIntention } from "@/lib/color";
 import ShowHideButton from "@/ui/show-hide-button";
-import ConfirmButton from "@/ui/confirm-button";
 
 export default function ConfirmUpdate<T>({
   previous,
@@ -71,13 +70,17 @@ export default function ConfirmUpdate<T>({
             ))}
           </Stack>
           <Group justify="flex-end">
-            <ConfirmButton
-              icon={<ICONS.Save size="1rem" />}
-              onClick={handleConfirm}
+            <Button
+              leftSection={<ICONS.Save size="1rem" />}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleConfirm();
+              }}
+              w={{ base: "100%", xs: 100 }}
               loading={loading}
             >
               Save
-            </ConfirmButton>
+            </Button>
           </Group>
         </Stack>
       </Modal>
diff --git a/ui/src/ui/confirm-modal.tsx b/ui/src/ui/confirm-modal.tsx
index 261803d7c..9523c37ea 100644
--- a/ui/src/ui/confirm-modal.tsx
+++ b/ui/src/ui/confirm-modal.tsx
@@ -116,16 +116,21 @@ export default function ConfirmModal({
           {additional}
 
           <Group justify="end">
-            <ConfirmButton
-              icon={icon}
-              disabled={disabled || input !== confirmText}
-              onClick={() => {
+            <Button
+              justify="space-between"
+              w={{ base: "100%", xs: 190 }}
+              miw="fit-content"
+              rightSection={
+                loading ? <Loader color="white" size="1rem" /> : icon
+              }
+              disabled={loading || disabled || input !== confirmText}
+              onClick={(e) => {
+                e.stopPropagation();
                 onConfirm ? onConfirm().then(() => close()) : close();
               }}
-              loading={loading}
             >
               {confirmButtonContent ?? children}
-            </ConfirmButton>
+            </Button>
           </Group>
         </Stack>
       </Modal>
diff --git a/ui/src/ui/create-modal.tsx b/ui/src/ui/create-modal.tsx
index 4db6cc4db..f743b8a99 100644
--- a/ui/src/ui/create-modal.tsx
+++ b/ui/src/ui/create-modal.tsx
@@ -65,7 +65,6 @@ export default function CreateModal({
       </Modal>
 
       <Button
-        variant="default"
         leftSection={leftSection || <ICONS.Create size="1rem" />}
         onClick={open}
         w={{ base: "100%", xs: "fit-content" }}