diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx
index 55d805027..f7c6b7917 100644
--- a/src/frontend/src/components/ui/checkbox.tsx
+++ b/src/frontend/src/components/ui/checkbox.tsx
@@ -26,4 +26,20 @@ const Checkbox = React.forwardRef<
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox };
+const CheckBoxDiv = (({ className = "", checked }: {className?: string, checked?: boolean}) => (
+  <div
+    className={cn(
+      className,
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      checked ? "bg-primary text-primary-foreground" : ""
+    )}
+  >
+    {checked && (
+      <div className="flex items-center justify-center text-current">
+        <IconComponent name="Check" className="h-4 w-4" />
+      </div>
+    )}
+  </div>
+));
+
+export { CheckBoxDiv, Checkbox };
diff --git a/src/frontend/src/modals/ConfirmationModal/index.tsx b/src/frontend/src/modals/ConfirmationModal/index.tsx
index e5b8c629f..3530a45ac 100644
--- a/src/frontend/src/modals/ConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/ConfirmationModal/index.tsx
@@ -1,7 +1,11 @@
 import React, { useEffect, useState } from "react";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { Button } from "../../components/ui/button";
-import { ConfirmationModalType, ContentProps, TriggerProps } from "../../types/components";
+import {
+  ConfirmationModalType,
+  ContentProps,
+  TriggerProps,
+} from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 import BaseModal from "../baseModal";
 
@@ -12,15 +16,14 @@ const Trigger: React.FC<TriggerProps> = ({
   children,
   tooltipContent,
   side,
-  asChild,
-}) => {
-  return asChild ? children : (tooltipContent ? (
+}: TriggerProps) => {
+  return tooltipContent ? (
     <ShadTooltip side={side} content={tooltipContent}>
       <div className="h-full w-full">{children}</div>
     </ShadTooltip>
   ) : (
     <div className="h-full w-full">{children}</div>
-  ));
+  );
 };
 function ConfirmationModal({
   title,
@@ -59,13 +62,7 @@ function ConfirmationModal({
 
   return (
     <BaseModal size={size} open={modalOpen} setOpen={setModalOpen}>
-      <>
-        {triggerChild && (
-          <BaseModal.Trigger>
-            {triggerChild}
-          </BaseModal.Trigger>
-        )}
-      </>
+      <BaseModal.Trigger>{triggerChild}</BaseModal.Trigger>
       <BaseModal.Header description={titleHeader ?? null}>
         <span className="pr-2">{title}</span>
         <Icon
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index 15f7c2a6a..e206c0b5d 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -6,7 +6,7 @@ import IconComponent from "../../components/genericIconComponent";
 import Header from "../../components/headerComponent";
 import LoadingComponent from "../../components/loadingComponent";
 import { Button } from "../../components/ui/button";
-import { Checkbox } from "../../components/ui/checkbox";
+import { CheckBoxDiv } from "../../components/ui/checkbox";
 import { Input } from "../../components/ui/input";
 import {
   Table,
@@ -308,6 +308,7 @@ export default function AdminPage() {
                           </TableCell>
                           <TableCell className="relative left-1 truncate py-2 text-align-last-left">
                             <ConfirmationModal
+                              size="x-small"
                               title="Edit"
                               titleHeader={`${user.username}`}
                               modalContentTitle="Attention!"
@@ -330,10 +331,9 @@ export default function AdminPage() {
                                   you are making to this user?
                                 </span>
                               </ConfirmationModal.Content>
-                              <ConfirmationModal.Trigger asChild>
+                              <ConfirmationModal.Trigger>
                                 <div className="flex w-fit">
-                                  <Checkbox
-                                    id="is_active"
+                                  <CheckBoxDiv
                                     checked={user.is_active}
                                   />
                                 </div>
@@ -342,6 +342,7 @@ export default function AdminPage() {
                           </TableCell>
                           <TableCell className="relative left-1 truncate py-2 text-align-last-left">
                             <ConfirmationModal
+                              size="x-small"
                               title="Edit"
                               titleHeader={`${user.username}`}
                               modalContentTitle="Attention!"
@@ -364,10 +365,9 @@ export default function AdminPage() {
                                   you are making to this user?
                                 </span>
                               </ConfirmationModal.Content>
-                              <ConfirmationModal.Trigger asChild>
+                              <ConfirmationModal.Trigger>
                                 <div className="flex w-fit">
-                                  <Checkbox
-                                    id="is_superuser"
+                                  <CheckBoxDiv
                                     checked={user.is_superuser}
                                   />
                                 </div>
@@ -411,6 +411,7 @@ export default function AdminPage() {
                               </UserManagementModal>
 
                               <ConfirmationModal
+                                size="x-small"
                                 title="Delete"
                                 titleHeader="Delete User"
                                 modalContentTitle="Attention!"
@@ -429,7 +430,7 @@ export default function AdminPage() {
                                     This action cannot be undone.
                                   </span>
                                 </ConfirmationModal.Content>
-                                <ConfirmationModal.Trigger tooltipContent="Delete">
+                                <ConfirmationModal.Trigger>
                                   <IconComponent
                                     name="Trash2"
                                     className="ml-2 h-4 w-4 cursor-pointer"
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 9b849ac6f..d604c8812 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -270,7 +270,6 @@ export type TriggerProps = {
   children: ReactNode;
   tooltipContent?: ReactNode;
   side?: "top" | "right" | "bottom" | "left";
-  asChild?: boolean;
 };
 
 export interface languageMap {