diff --git a/frontend/src/components/Board/Card/DeleteCard.tsx b/frontend/src/components/Board/Card/DeleteCard.tsx
index 9fd7cb4ee..2a402061b 100644
--- a/frontend/src/components/Board/Card/DeleteCard.tsx
+++ b/frontend/src/components/Board/Card/DeleteCard.tsx
@@ -1,4 +1,11 @@
-import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+} from '@/components/Primitives/AlertDialog';
+import Flex from '@/components/Primitives/Flex';
+import Text from '@/components/Primitives/Text';
 import useCards from '@/hooks/useCards';
 
 interface DeleteProps {
@@ -42,21 +49,22 @@ const DeleteCard = ({
   };
 
   return (
-    <AlertCustomDialog
-      defaultOpen
-      addEllipsis={cardTitle.length > 100}
-      cancelText="Cancel"
-      confirmText="Delete card"
-      handleClose={handleClose}
-      handleConfirm={handleDelete}
-      title="Delete card"
-      variant="danger"
-      text={
-        <>
-          Do you really want to delete <span>{cardTitle}</span> card?
-        </>
-      }
-    />
+    <AlertDialog defaultOpen>
+      <AlertDialogContent title="Delete card">
+        <Text>Do you really want to delete the following card?</Text>
+        <Text ellipsis fontWeight="bold">
+          {cardTitle}
+        </Text>
+        <Flex gap="16" justify="end" css={{ mt: '$24' }}>
+          <AlertDialogCancel variant="primaryOutline" onClick={handleClose}>
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction variant="danger" onClick={handleDelete}>
+            Delete card
+          </AlertDialogAction>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
diff --git a/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx b/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
index 9b509746a..2850852c7 100644
--- a/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
+++ b/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
@@ -1,25 +1,19 @@
-import Icon from '@/components/icons/Icon';
-import {
-  DialogTitleContainer,
-  StyledDialogTitle,
-} from '@/components/Primitives/AlertCustomDialog/styles';
+// TODO: AlertDialog handle is weird!
 import {
   AlertDialog,
+  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
 } from '@/components/Primitives/AlertDialog';
 import Flex from '@/components/Primitives/Flex';
 import Input from '@/components/Primitives/Input';
-import Separator from '@/components/Primitives/Separator';
 import { SchemaChangeColumnName } from '@/schema/schemaChangeColumnName';
-import { ReactNode, useRef } from 'react';
+import { useRef } from 'react';
 import { joiResolver } from '@hookform/resolvers/joi';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { styled } from '@/styles/stitches/stitches.config';
-import Button from '@/components/Primitives/Button';
 import useColumn from '@/hooks/useColumn';
 import CardType from '@/types/card/card';
-import { ButtonsContainer } from '@/components/Board/Settings/styles';
 import Text from '@/components/Primitives/Text';
 import TextArea from '@/components/Primitives/TextArea';
 
@@ -31,7 +25,6 @@ type UpdateColumnNameProps = {
   cards: CardType[];
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;
-  children?: ReactNode;
   cardText?: string;
   isDefaultText?: boolean;
   type: string;
@@ -48,7 +41,6 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
   cards,
   isOpen,
   setIsOpen,
-  children,
   isDefaultText,
   type,
 }) => {
@@ -101,87 +93,56 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
 
   return (
     <AlertDialog open={isOpen}>
-      {children}
-      <AlertDialogContent handleClose={handleClose}>
-        <DialogTitleContainer css={{ px: '$24' }} align="center" justify="between">
-          <StyledDialogTitle heading="4">
-            {type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
-          </StyledDialogTitle>
-
-          <AlertDialogCancel
-            asChild
-            isIcon
-            css={{ '@hover': { '&:hover': { cursor: 'pointer' } } }}
-            onClick={handleClose}
-          >
-            <Flex css={{ '& svg': { color: '$primaryBase' } }}>
-              <Icon css={{ width: '$24', height: '$24' }} name="close" />
-            </Flex>
-          </AlertDialogCancel>
-        </DialogTitleContainer>
+      <AlertDialogContent
+        title={type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
+        handleClose={handleClose}
+      >
         <FormProvider {...methods}>
           <StyledForm
             id="form_dialog"
             onSubmit={methods.handleSubmit(({ title, text }) => {
               handleConfirm(title, text);
             })}
+            direction="column"
+            gap="16"
           >
-            <Flex direction="column" css={{ width: '100%' }}>
-              <Separator css={{ backgroundColor: '$primary100' }} />
-              <Flex direction="column" css={{ width: '100%', px: '$32', pt: '$24' }}>
-                {type === 'ColumnName' ? (
-                  <Input
-                    forceState
-                    id="title"
-                    maxChars="15"
-                    placeholder="Column name"
-                    state="default"
-                    type="text"
-                    showCount
-                    currentValue={columnName}
-                  />
-                ) : (
-                  <>
-                    <Text size="md" color="primary400" fontWeight="regular">
-                      This default text will be visible as placeholder when someone is creating a
-                      new card.
-                    </Text>
-                    <TextArea
-                      floatPlaceholder={false}
-                      id="text"
-                      placeholder={columnTextCard || 'Write your comment here...'}
-                    />
-                  </>
-                )}
-              </Flex>
-              <ButtonsContainer
-                gap={24}
-                align="center"
-                justify="end"
-                css={{
-                  backgroundColor: '$white',
-                  borderRadius: '$12',
-                  border: 'none',
-                }}
+            {type === 'ColumnName' ? (
+              <Input
+                forceState
+                id="title"
+                maxChars="15"
+                placeholder="Column name"
+                state="default"
+                type="text"
+                showCount
+                currentValue={columnName}
+                css={{ mb: '0' }}
+              />
+            ) : (
+              <>
+                <Text size="md" color="primary400" fontWeight="regular">
+                  This default text will be visible as placeholder when someone is creating a new
+                  card.
+                </Text>
+                <TextArea
+                  floatPlaceholder={false}
+                  id="text"
+                  placeholder={columnTextCard || 'Write your comment here...'}
+                />
+              </>
+            )}
+            <Flex gap="16" justify="end">
+              <AlertDialogCancel variant="primaryOutline" onClick={handleClose}>
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction
+                variant="primary"
+                form="form_dialog"
+                ref={submitBtnRef}
+                type="submit"
               >
-                <Button
-                  css={{ margin: '0 $24 0 auto', padding: '$16 $24' }}
-                  variant="primaryOutline"
-                  onClick={handleClose}
-                  type="button"
-                >
-                  Cancel
-                </Button>
-
-                <Button
-                  css={{ marginRight: '$32', padding: '$16 $24' }}
-                  variant="primary"
-                  form="form_dialog"
-                  ref={submitBtnRef}
-                >
-                  {type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
-                </Button>
-              </ButtonsContainer>
+                {type === 'ColumnName' ? 'Update column name' : 'Activate card default text'}
+              </AlertDialogAction>
             </Flex>
           </StyledForm>
         </FormProvider>
diff --git a/frontend/src/components/Board/Settings/partials/Columns/DeleteButton.tsx b/frontend/src/components/Board/Settings/partials/Columns/DeleteButton.tsx
index 61342fb21..581e03030 100644
--- a/frontend/src/components/Board/Settings/partials/Columns/DeleteButton.tsx
+++ b/frontend/src/components/Board/Settings/partials/Columns/DeleteButton.tsx
@@ -1,11 +1,18 @@
 import Flex from '@/components/Primitives/Flex';
-import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
-import { AlertDialogTrigger } from '@radix-ui/react-alert-dialog';
+import Text from '@/components/Primitives/Text';
+// import { AlertDialogTrigger } from '@radix-ui/react-alert-dialog';
 import Tooltip from '@/components/Primitives/Tooltip';
 import Icon from '@/components/icons/Icon';
 import { editColumnsState } from '@/store/board/atoms/board.atom';
 import { useRecoilState } from 'recoil';
-import { DisabledDeleteColumnButton } from './DisabledDeleteButton';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogTrigger,
+} from '@/components/Primitives/AlertDialog';
+import Button from '@/components/Primitives/Button';
 
 interface Props {
   columnTitle: string;
@@ -22,40 +29,35 @@ const DeleteColumnButton = ({ columnTitle, columnIndex, disableDeleteColumn }: P
   };
 
   return (
-    <Flex direction="column">
-      <Flex css={{ alignItems: 'center' }}>
-        <Flex align="center" css={{ ml: '$24' }} gap="24">
-          {disableDeleteColumn ? (
-            <DisabledDeleteColumnButton />
-          ) : (
-            <AlertCustomDialog
-              cancelText="Cancel"
-              confirmText="Delete"
-              css={undefined}
-              defaultOpen={false}
-              handleConfirm={handleDeleteColumn}
-              text={`Do you really want to delete the column ${columnTitle}?`}
-              title="Delete column"
-            >
-              <Tooltip content="Delete column">
-                <AlertDialogTrigger asChild>
-                  <Flex pointer>
-                    <Icon
-                      name="trash-alt"
-                      css={{
-                        color: '$primary400',
-                        mt: '$16',
-                        size: '$20',
-                      }}
-                    />
-                  </Flex>
-                </AlertDialogTrigger>
-              </Tooltip>
-            </AlertCustomDialog>
-          )}
+    <AlertDialog>
+      <Tooltip
+        content={
+          disableDeleteColumn ? 'Your board must have at least one column.' : 'Delete column'
+        }
+      >
+        <AlertDialogTrigger asChild onMouseDown={(e) => e.preventDefault()}>
+          <Button isIcon disabled={disableDeleteColumn}>
+            <Icon
+              name="trash-alt"
+              css={{
+                mt: '$16',
+                size: '$20',
+              }}
+            />
+          </Button>
+        </AlertDialogTrigger>
+      </Tooltip>
+
+      <AlertDialogContent title="Delete column">
+        <Text>
+          Do you really want to delete the column <Text fontWeight="bold">{columnTitle}</Text>?
+        </Text>
+        <Flex gap="16" justify="end" css={{ mt: '$24' }}>
+          <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleDeleteColumn}>Delete</AlertDialogAction>
         </Flex>
-      </Flex>
-    </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
diff --git a/frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx b/frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx
index 62f2baf46..c754cc88c 100644
--- a/frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx
+++ b/frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx
@@ -1,7 +1,14 @@
 import Icon from '@/components/icons/Icon';
-import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
-import { AlertDialogTrigger } from '@/components/Primitives/AlertDialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogTrigger,
+} from '@/components/Primitives/AlertDialog';
 import Button from '@/components/Primitives/Button';
+import Flex from '@/components/Primitives/Flex';
+import Text from '@/components/Primitives/Text';
 import useCards from '@/hooks/useCards';
 
 type Props = {
@@ -11,25 +18,30 @@ type Props = {
 const AlertMergeIntoMain: React.FC<Props> = ({ boardId, socketId }) => {
   const { mergeBoard } = useCards();
 
+  const handleMergeClick = () => {
+    mergeBoard.mutate({ subBoardId: boardId, socketId });
+  };
+
   return (
-    <AlertCustomDialog
-      cancelText="Cancel"
-      confirmText="Merge into main board"
-      defaultOpen={false}
-      text="If you merge your sub-team's board into the main board it can not be edited anymore afterwards. Are you sure you want to merge it?"
-      title="Merge board into main board"
-      variant="primary"
-      handleConfirm={() => {
-        mergeBoard.mutate({ subBoardId: boardId, socketId });
-      }}
-    >
+    <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button size="sm" variant="primaryOutline">
+        <Button variant="primaryOutline" size="sm">
           Merge into main board
           <Icon name="merge" />
         </Button>
       </AlertDialogTrigger>
-    </AlertCustomDialog>
+
+      <AlertDialogContent title="Merge board into main board">
+        <Text>
+          If you merge your sub-team&apos;s board into the main board it can not be edited anymore
+          afterwards. Are you sure you want to merge it?
+        </Text>
+        <Flex gap="16" justify="end" css={{ mt: '$24' }}>
+          <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleMergeClick}>Merge into main board</AlertDialogAction>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
diff --git a/frontend/src/components/CardBoard/DeleteBoard.tsx b/frontend/src/components/CardBoard/DeleteBoard.tsx
index 4f0fa5bc4..d07aef0e7 100644
--- a/frontend/src/components/CardBoard/DeleteBoard.tsx
+++ b/frontend/src/components/CardBoard/DeleteBoard.tsx
@@ -1,9 +1,16 @@
 import Icon from '@/components/icons/Icon';
-import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
-import { AlertDialogTrigger } from '@/components/Primitives/AlertDialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogTrigger,
+} from '@/components/Primitives/AlertDialog';
 import Flex from '@/components/Primitives/Flex';
 import Tooltip from '@/components/Primitives/Tooltip';
 import useBoard from '@/hooks/useBoard';
+import Button from '@/components/Primitives/Button';
+import Text from '@/components/Primitives/Text';
 
 type DeleteBoardProps = {
   boardId: string;
@@ -24,30 +31,30 @@ const DeleteBoard: React.FC<DeleteBoardProps> = ({ boardId, boardName, socketId,
   };
 
   return (
-    <AlertCustomDialog
-      cancelText="Cancel"
-      confirmText="Delete"
-      css={undefined}
-      defaultOpen={false}
-      handleConfirm={handleDelete}
-      text={`Do you really want to delete the board “${boardName}”?`}
-      title="Delete board"
-    >
+    <AlertDialog>
       <Tooltip content="Delete board">
-        <AlertDialogTrigger asChild>
-          <Flex pointer>
+        <AlertDialogTrigger asChild onMouseDown={(e) => e.preventDefault()}>
+          <Button isIcon size="sm">
             <Icon
               name="trash-alt"
               css={{
                 color: '$primary400',
-                width: '$20',
-                height: '$20',
               }}
             />
-          </Flex>
+          </Button>
         </AlertDialogTrigger>
       </Tooltip>
-    </AlertCustomDialog>
+
+      <AlertDialogContent title="Delete board">
+        <Text>
+          Do you really want to delete the board <Text fontWeight="bold">{boardName}</Text>?
+        </Text>
+        <Flex gap="16" justify="end" css={{ mt: '$24' }}>
+          <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx
index 6b3b781ba..e52e9ca3d 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx
@@ -11,7 +11,6 @@ import {
   AlertDialogTrigger,
 } from '@/components/Primitives/AlertDialog';
 import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
 import Text from '@/components/Primitives/Text';
 import useCreateBoard from '@/hooks/useCreateBoard';
 import { Team } from '@/types/team/team';
@@ -171,86 +170,71 @@ const QuickEditSubTeams = ({ team }: QuickEditSubTeamsProps) => {
           Quick edit sub-teams configurations
         </Button>
       </AlertDialogTrigger>
-      <AlertDialogContent css={{ left: '35% !important', top: '200px', flexDirection: 'column' }}>
-        <Flex align="center" css={{ px: '$32', py: '$24' }} justify="between">
-          <Text heading="4">Quick edit sub-teams configurations</Text>
-          <AlertDialogCancel asChild isIcon css={{ p: 0, height: '$24' }}>
-            <Flex
-              css={{
-                '& svg': {
-                  color: '$primary400',
-                  width: '$24 !important',
-                  height: '$24 !important',
-                },
-              }}
-            >
-              <Icon name="close" />
-            </Flex>
-          </AlertDialogCancel>
-        </Flex>
-        <Separator css={{ backgroundColor: '$primary100' }} />
-        <Flex css={{ pt: '$29', px: '$32', pb: '$32' }} direction="column">
-          <Flex>
-            <Flex css={{ position: 'relative', top: '3px' }}>
-              <Icon css={{ width: '$16', height: '$16', color: '$primary500' }} name="info" />
-            </Flex>
-            <Text color="primary500" css={{ pl: '$8' }} size="md">
-              Note, if you change any of the two values below, the other value will adjust
-              accordingly.
-            </Text>
+
+      <AlertDialogContent
+        css={{ left: '35% !important', top: '200px', flexDirection: 'column' }}
+        title="Quick edit sub-teams configurations"
+      >
+        <Flex>
+          <Flex css={{ position: 'relative', top: '3px' }}>
+            <Icon css={{ width: '$16', height: '$16', color: '$primary500' }} name="info" />
           </Flex>
-          <Flex css={{ mt: '$24', width: '100%' }} gap="24">
-            <Flex css={{ width: '100%' }} direction="column" gap="8">
-              <Text label>Sub-teams count</Text>
-              <StyledInput
-                css={{ mb: 0 }}
-                id="teamsCount"
-                variant={values.teamError ? 'error' : 'default'}
-                max={maxTeams}
-                min={minTeams}
-                placeholder=" "
-                type="number"
-                value={values.teamsCount}
-                onChange={handleChangeCountTeams}
-              />
-              <Flex>
-                <Text hint color={values.teamError ? 'dangerBase' : 'primary800'}>
-                  Min {minTeams}, Max {maxTeams}{' '}
-                  <Text hint color="primary300">
-                    sub-teams
-                  </Text>
+          <Text color="primary500" css={{ pl: '$8' }} size="md">
+            Note, if you change any of the two values below, the other value will adjust
+            accordingly.
+          </Text>
+        </Flex>
+        <Flex css={{ mt: '$24', width: '100%' }} gap="24">
+          <Flex css={{ width: '100%' }} direction="column" gap="8">
+            <Text label>Sub-teams count</Text>
+            <StyledInput
+              css={{ mb: 0 }}
+              id="teamsCount"
+              variant={values.teamError ? 'error' : 'default'}
+              max={maxTeams}
+              min={minTeams}
+              placeholder=" "
+              type="number"
+              value={values.teamsCount}
+              onChange={handleChangeCountTeams}
+            />
+            <Flex>
+              <Text hint color={values.teamError ? 'dangerBase' : 'primary800'}>
+                Min {minTeams}, Max {maxTeams}{' '}
+                <Text hint color="primary300">
+                  sub-teams
                 </Text>
-              </Flex>
+              </Text>
             </Flex>
-            <Flex css={{ width: '100%' }} direction="column" gap="8">
-              <Text label>Max sub-team members count</Text>
-              <StyledInput
-                css={{ mb: 0 }}
-                id="maxUsers"
-                variant={values.maxUserError ? 'error' : 'default'}
-                max={maxUsers}
-                min={minUsers}
-                placeholder=" "
-                type="number"
-                value={values.maxUsersCount}
-                onChange={handleMaxMembers}
-              />
-              <Flex>
-                <Text hint color={values.maxUserError ? 'dangerBase' : 'primary800'}>
-                  Min {minUsers}, Max {maxUsers}{' '}
-                  <Text hint color="primary300">
-                    members per team
-                  </Text>
+          </Flex>
+          <Flex css={{ width: '100%' }} direction="column" gap="8">
+            <Text label>Max sub-team members count</Text>
+            <StyledInput
+              css={{ mb: 0 }}
+              id="maxUsers"
+              variant={values.maxUserError ? 'error' : 'default'}
+              max={maxUsers}
+              min={minUsers}
+              placeholder=" "
+              type="number"
+              value={values.maxUsersCount}
+              onChange={handleMaxMembers}
+            />
+            <Flex>
+              <Text hint color={values.maxUserError ? 'dangerBase' : 'primary800'}>
+                Min {minUsers}, Max {maxUsers}{' '}
+                <Text hint color="primary300">
+                  members per team
                 </Text>
-              </Flex>
+              </Text>
             </Flex>
           </Flex>
-          <Flex css={{ mt: '$32' }} gap="24" justify="end">
-            <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleSaveConfigs} disabled={isSubmitDisabled}>
-              Save configurations
-            </AlertDialogAction>
-          </Flex>
+        </Flex>
+        <Flex css={{ mt: '$32' }} gap="24" justify="end">
+          <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleSaveConfigs} disabled={isSubmitDisabled}>
+            Save configurations
+          </AlertDialogAction>
         </Flex>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/frontend/src/components/Primitives/AlertCustomDialog/index.tsx b/frontend/src/components/Primitives/AlertCustomDialog/index.tsx
deleted file mode 100644
index 43f25643a..000000000
--- a/frontend/src/components/Primitives/AlertCustomDialog/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { ReactNode } from 'react';
-import { CSS } from '@stitches/react/types/css-util';
-
-import Icon from '@/components/icons/Icon';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-} from '../AlertDialog';
-import Flex from '../Flex';
-import Separator from '../Separator';
-import {
-  DialogButtons,
-  DialogText,
-  DialogTitleContainer,
-  StyledAlertDialogDescription,
-  StyledDialogTitle,
-} from './styles';
-
-interface BoardAlertDialog {
-  defaultOpen: boolean;
-  text: ReactNode;
-  cancelText: string;
-  confirmText: string;
-  handleConfirm?: () => void;
-  title: ReactNode;
-  handleClose?: () => void;
-  children?: ReactNode;
-  css?: CSS;
-  variant?: 'primary' | 'danger';
-  addEllipsis?: boolean;
-}
-
-const AlertCustomDialog = ({
-  defaultOpen,
-  text,
-  handleClose,
-  handleConfirm,
-  title,
-  cancelText,
-  confirmText,
-  children,
-  css,
-  addEllipsis,
-  variant = 'primary',
-}: BoardAlertDialog) => (
-  <AlertDialog defaultOpen={defaultOpen}>
-    {children}
-    <AlertDialogContent css={{ ...css }} handleClose={handleClose}>
-      <DialogTitleContainer align="center" justify="between">
-        <StyledDialogTitle heading="4">{title}</StyledDialogTitle>
-        <AlertDialogCancel
-          asChild
-          isIcon
-          css={{ '@hover': { '&:hover': { cursor: 'pointer' } } }}
-          onClick={handleClose}
-        >
-          <Flex css={{ '& svg': { color: '$primary400' } }}>
-            <Icon css={{ width: '$24', height: '$24' }} name="close" />
-          </Flex>
-        </AlertDialogCancel>
-      </DialogTitleContainer>
-      <Separator css={{ backgroundColor: '$primary100' }} />
-      <DialogText direction="column" ellipsis={addEllipsis}>
-        <StyledAlertDialogDescription>{text}</StyledAlertDialogDescription>
-      </DialogText>
-      <DialogButtons gap="24" justify="end">
-        <AlertDialogCancel variant="primaryOutline" onClick={handleClose}>
-          {cancelText}
-        </AlertDialogCancel>
-        <AlertDialogAction variant={variant || 'danger'} onClick={handleConfirm}>
-          {confirmText}
-        </AlertDialogAction>
-      </DialogButtons>
-    </AlertDialogContent>
-  </AlertDialog>
-);
-
-AlertCustomDialog.defaultProps = {
-  handleClose: undefined,
-  children: undefined,
-  css: undefined,
-  variant: 'primary',
-  addEllipsis: false,
-};
-
-export default AlertCustomDialog;
diff --git a/frontend/src/components/Primitives/AlertCustomDialog/styles.tsx b/frontend/src/components/Primitives/AlertCustomDialog/styles.tsx
deleted file mode 100644
index f11a5161a..000000000
--- a/frontend/src/components/Primitives/AlertCustomDialog/styles.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { AlertDialogDescription } from '@radix-ui/react-alert-dialog';
-
-import { styled } from '@/styles/stitches/stitches.config';
-
-import Flex from '../Flex';
-import Text from '../Text';
-
-const DialogTitleContainer = styled(Flex, {
-  px: '$32',
-  py: '$24',
-});
-
-const StyledDialogTitle = styled('h4', Text, {
-  margin: 0,
-});
-
-const StyledAlertDialogDescription = styled(AlertDialogDescription, {
-  color: '$primary400',
-  fontSize: '$16',
-  lineHeight: '$24',
-});
-
-const DialogText = styled(Flex, {
-  px: '$32',
-  pt: '$24',
-
-  variants: {
-    ellipsis: {
-      true: {
-        '&>p': {
-          '&>span': {
-            display: '-webkit-box',
-            '-webkit-line-clamp': 3 /* number of lines to show */,
-            lineClamp: 3,
-            '-webkit-box-orient': 'vertical',
-            textOverflow: 'ellipsis',
-          },
-        },
-      },
-    },
-  },
-
-  '&>p': {
-    margin: 0,
-
-    '&>span': {
-      wordBreak: 'break-all',
-      overflow: 'hidden',
-
-      fontWeight: '$bold',
-    },
-  },
-});
-
-const DialogButtons = styled(Flex, {
-  py: '$32',
-  px: '$32',
-});
-
-export {
-  DialogButtons,
-  DialogText,
-  DialogTitleContainer,
-  StyledAlertDialogDescription,
-  StyledDialogTitle,
-};
diff --git a/frontend/src/components/Primitives/AlertDialog.tsx b/frontend/src/components/Primitives/AlertDialog.tsx
index 290291632..e889c8630 100644
--- a/frontend/src/components/Primitives/AlertDialog.tsx
+++ b/frontend/src/components/Primitives/AlertDialog.tsx
@@ -7,6 +7,9 @@ import { overlayShow } from '@/animations/DialogShow';
 import Box from './Box';
 import Button from './Button';
 import Flex from './Flex';
+import Text from './Text';
+import Icon from '../icons/Icon';
+import Separator from './Separator';
 
 const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
   backdropFilter: 'blur(3px)',
@@ -34,15 +37,21 @@ const StyledContent = styled(AlertDialogPrimitive.Content, Flex, Box, {
   '&:focus': { outline: 'none' },
 });
 
-export const AlertDialogTrigger = styled(AlertDialogPrimitive.Trigger, {});
-export const AlertDialogCancel = styled(AlertDialogPrimitive.Cancel, Button, {
-  '@hover': { '&:hover': { cursor: 'pointer' } },
+const StyledTitleContainer = styled(Flex, { px: '$32', py: '$24' });
+const StyledDescription = styled(Flex, {
+  px: '$32',
+  py: '$24',
+  flexDirection: 'column !important',
+  gap: '$8',
 });
+
+export const AlertDialogTrigger = styled(AlertDialogPrimitive.Trigger, {});
 export const AlertDialogAction = styled(AlertDialogPrimitive.Action, Button, {});
+export const AlertDialogCancel = styled(AlertDialogPrimitive.Cancel, Button, {});
 
-type ContentProps = { children?: ReactNode; css?: CSS; handleClose?: () => void };
+type ContentProps = { children?: ReactNode; css?: CSS; handleClose?: () => void; title?: string };
 
-const Content: React.FC<ContentProps> = ({ children, css, handleClose, ...props }) => {
+const Content: React.FC<ContentProps> = ({ children, css, handleClose, title, ...props }) => {
   Content.defaultProps = {
     css: undefined,
     children: undefined,
@@ -52,7 +61,18 @@ const Content: React.FC<ContentProps> = ({ children, css, handleClose, ...props
     <AlertDialogPrimitive.Portal>
       <StyledOverlay />
       <StyledContent css={css} onCloseAutoFocus={handleClose} {...props}>
-        {children}
+        {title && (
+          <>
+            <StyledTitleContainer align="center" justify="between">
+              <Text heading="4">{title}</Text>
+              <AlertDialogCancel isIcon onClick={handleClose}>
+                <Icon name="close" css={{ color: '$primary400' }} />
+              </AlertDialogCancel>
+            </StyledTitleContainer>
+            <Separator css={{ backgroundColor: '$primary100' }} />
+          </>
+        )}
+        <StyledDescription>{children}</StyledDescription>
       </StyledContent>
     </AlertDialogPrimitive.Portal>
   );
@@ -60,4 +80,3 @@ const Content: React.FC<ContentProps> = ({ children, css, handleClose, ...props
 
 export const AlertDialog = AlertDialogPrimitive.Root;
 export const AlertDialogContent = Content;
-export const AlertDialogTitle = AlertDialogPrimitive.Title;
diff --git a/frontend/src/components/Primitives/Button.tsx b/frontend/src/components/Primitives/Button.tsx
index 6190d4fa8..17b976eb5 100644
--- a/frontend/src/components/Primitives/Button.tsx
+++ b/frontend/src/components/Primitives/Button.tsx
@@ -172,6 +172,7 @@ const Button = styled('button', {
         padding: '0 !important',
         width: 'auto !important',
         height: 'auto !important',
+        color: '$primary800 !important',
         backgroundColor: '$transparent !important',
         '@hover': {
           '&:hover': {
@@ -185,6 +186,9 @@ const Button = styled('button', {
         '&:disabled': {
           backgroundColor: '$transparent !important',
           border: 'none',
+          '& svg': {
+            color: '$primary200 !important',
+          },
         },
       },
     },
diff --git a/frontend/src/components/Primitives/Text.tsx b/frontend/src/components/Primitives/Text.tsx
index ba3a9a3ba..0be1c16e2 100644
--- a/frontend/src/components/Primitives/Text.tsx
+++ b/frontend/src/components/Primitives/Text.tsx
@@ -151,6 +151,16 @@ const Text = styled('span', {
         visibility: 'hidden',
       },
     },
+    ellipsis: {
+      true: {
+        display: '-webkit-box',
+        '-webkit-box-orient': 'vertical',
+        '-webkit-line-clamp': 3,
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'pre-wrap',
+      },
+    },
     color: {
       white: {
         color: '$white',
diff --git a/frontend/src/components/Teams/TeamsList/partials/CardTeam/DeleteTeam.tsx b/frontend/src/components/Teams/TeamsList/partials/CardTeam/DeleteTeam.tsx
index a668caa91..0b4d156bb 100644
--- a/frontend/src/components/Teams/TeamsList/partials/CardTeam/DeleteTeam.tsx
+++ b/frontend/src/components/Teams/TeamsList/partials/CardTeam/DeleteTeam.tsx
@@ -1,6 +1,13 @@
 import Icon from '@/components/icons/Icon';
-import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
-import { AlertDialogTrigger } from '@/components/Primitives/AlertDialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogTrigger,
+} from '@/components/Primitives/AlertDialog';
+import Button from '@/components/Primitives/Button';
+import Text from '@/components/Primitives/Text';
 import Flex from '@/components/Primitives/Flex';
 import Tooltip from '@/components/Primitives/Tooltip';
 import useTeam from '@/hooks/useTeam';
@@ -24,30 +31,30 @@ const DeleteTeam: React.FC<DeleteTeamProps> = ({ teamName, teamId, teamUserId, i
     }
   };
   return (
-    <AlertCustomDialog
-      cancelText="Cancel"
-      confirmText="Delete"
-      css={undefined}
-      defaultOpen={false}
-      handleConfirm={handleDelete}
-      text={`Do you really want to delete the team “${teamName}”?`}
-      title="Delete Team"
-    >
-      <Tooltip content="Delete Team">
-        <AlertDialogTrigger asChild>
-          <Flex pointer>
+    <AlertDialog>
+      <Tooltip content="Delete team">
+        <AlertDialogTrigger asChild onMouseDown={(e) => e.preventDefault()}>
+          <Button isIcon size="sm">
             <Icon
               name="trash-alt"
               css={{
                 color: '$primary400',
-                width: '$20',
-                height: '$20',
               }}
             />
-          </Flex>
+          </Button>
         </AlertDialogTrigger>
       </Tooltip>
-    </AlertCustomDialog>
+
+      <AlertDialogContent title="Delete team">
+        <Text>
+          Do you really want to delete the team <Text fontWeight="bold">{teamName}</Text>?
+        </Text>
+        <Flex gap="16" justify="end" css={{ mt: '$24' }}>
+          <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
diff --git a/frontend/src/components/Users/UsersList/partials/CardUser/DeleteUser.tsx b/frontend/src/components/Users/UsersList/partials/CardUser/DeleteUser.tsx
index 9b243f4f7..2f7ea50fb 100644
--- a/frontend/src/components/Users/UsersList/partials/CardUser/DeleteUser.tsx
+++ b/frontend/src/components/Users/UsersList/partials/CardUser/DeleteUser.tsx
@@ -1,7 +1,14 @@
 import Icon from '@/components/icons/Icon';
-import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
-import { AlertDialogTrigger } from '@/components/Primitives/AlertDialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogTrigger,
+} from '@/components/Primitives/AlertDialog';
+import Button from '@/components/Primitives/Button';
 import Flex from '@/components/Primitives/Flex';
+import Text from '@/components/Primitives/Text';
 import Tooltip from '@/components/Primitives/Tooltip';
 import useUser from '@/hooks/useUser';
 import { useSession } from 'next-auth/react';
@@ -22,48 +29,36 @@ const DeleteUser: React.FC<DeleteUserProps> = ({ userId, firstName, lastName })
   };
 
   return (
-    <AlertCustomDialog
-      cancelText="Cancel"
-      confirmText="Delete"
-      css={undefined}
-      defaultOpen={false}
-      text={`Do you really want to delete the user “${firstName} ${lastName}”?`}
-      title="Delete User"
-      variant="danger"
-      handleConfirm={handleDeleteUser}
-    >
-      {loggedUserId !== userId && (
-        <Tooltip content="Delete User">
-          <AlertDialogTrigger asChild>
-            <Flex pointer>
-              <Icon
-                name="trash-alt"
-                css={{
-                  color: '$primary400',
-                  width: '$20',
-                  height: '$20',
-                }}
-              />
-            </Flex>
-          </AlertDialogTrigger>
-        </Tooltip>
-      )}
-      {loggedUserId === userId && (
-        <Tooltip content="Delete User">
-          <Flex pointer>
+    <AlertDialog>
+      <Tooltip content="Delete user">
+        <AlertDialogTrigger asChild onMouseDown={(e) => e.preventDefault()}>
+          <Button isIcon disabled={loggedUserId === userId} size="sm">
             <Icon
               name="trash-alt"
               css={{
                 color: '$primary400',
-                width: '$20',
-                height: '$20',
-                opacity: 0.3,
               }}
             />
-          </Flex>
-        </Tooltip>
-      )}
-    </AlertCustomDialog>
+          </Button>
+        </AlertDialogTrigger>
+      </Tooltip>
+
+      <AlertDialogContent title="Delete user">
+        <Text>
+          Do you really want to delete the user{' '}
+          <Text fontWeight="bold">
+            {firstName} {lastName}
+          </Text>
+          ?
+        </Text>
+        <Flex gap="16" justify="end" css={{ mt: '$24' }}>
+          <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
+          <AlertDialogAction variant="danger" onClick={handleDeleteUser}>
+            Delete
+          </AlertDialogAction>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
diff --git a/frontend/src/stories/AlertDialog.stories.tsx b/frontend/src/stories/AlertDialog.stories.tsx
new file mode 100644
index 000000000..478939a74
--- /dev/null
+++ b/frontend/src/stories/AlertDialog.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { ComponentStory } from '@storybook/react';
+
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from '@/components/Primitives/AlertDialog';
+import Sprite from '@/components/icons/Sprite';
+import Flex from '@/components/Primitives/Flex';
+import Button from '@/components/Primitives/Button';
+
+export default {
+  title: 'Primitives/AlertDialog',
+  component: AlertDialog,
+  parameters: {
+    controls: {
+      expanded: true,
+      exclude: ['ref', 'as', 'css'],
+      sort: 'requiredFirst',
+    },
+    docs: {
+      description: {
+        component: '', // Change main component description in docs page
+      },
+    },
+  },
+  args: {
+    title: 'Alert Dialog Title',
+    children:
+      'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos cum consequuntur quo beatae repudiandae quibusdam ratione dolorum, suscipit expedita nisi accusantium porro hic eligendi molestias dolore, quae officia nihil nemo.',
+  },
+};
+
+const Template: ComponentStory<typeof AlertDialog> = ({ children, ...args }) => (
+  <AlertDialog>
+    <Sprite />
+    {/* Button to Open the Dialog */}
+    <AlertDialogTrigger asChild>
+      <Button>Open Alert Dialog</Button>
+    </AlertDialogTrigger>
+
+    {/* Actual Dialog */}
+    <AlertDialogContent {...args}>
+      {children}
+      <Flex justify="end" gap="16">
+        <AlertDialogCancel variant="primaryOutline">Cancel</AlertDialogCancel>
+        <AlertDialogAction>Action</AlertDialogAction>
+      </Flex>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export const Default = Template.bind({});
+Default.storyName = 'Basic Usage';
diff --git a/frontend/src/stories/Button.stories.tsx b/frontend/src/stories/Button.stories.tsx
index 9e868c9d3..fc45d9c61 100644
--- a/frontend/src/stories/Button.stories.tsx
+++ b/frontend/src/stories/Button.stories.tsx
@@ -142,15 +142,14 @@ export const IconButton: ComponentStory<typeof Button> = ({ children, disabled }
   </Flex>
 );
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
-export const Icons: ComponentStory<typeof Button> = ({ ...args }) => (
+export const Icons: ComponentStory<typeof Button> = ({ disabled }) => (
   <Flex justify="evenly" wrap="wrap">
     <Sprite />
     {SIZE_OPTIONS.map((size) => (
       <Flex direction="column" justify="center" align="center" gap={20} key={size}>
         <Text heading="4">Size {size}</Text>
-        <Button isIcon size={size}>
-          <Icon name="close" css={{ color: 'black' }} />
+        <Button isIcon size={size} disabled={disabled}>
+          <Icon name="close" />
         </Button>
       </Flex>
     ))}