diff --git a/src/components/FileContributors.tsx b/src/components/FileContributors.tsx
index f98e4c6eefe..1e727925591 100644
--- a/src/components/FileContributors.tsx
+++ b/src/components/FileContributors.tsx
@@ -12,12 +12,15 @@ import type { ChildOnlyProp, FileContributor } from "@/lib/types"
 
 import { Button } from "@/components/Buttons"
 import InlineLink from "@/components/Link"
-import Modal from "@/components/Modal"
 import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import Modal from "./ui/dialog-modal"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
 const ContributorList = ({ children }: Required<ChildOnlyProp>) => (
   <UnorderedList maxH="2xs" m={0} mt={6} overflowY="scroll">
     {children}
@@ -61,12 +64,14 @@ const FileContributors = ({
         date: Date.now().toString(),
       } as FileContributor)
 
+  const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
+
   return (
     <>
       <Modal
-        isOpen={isModalOpen}
-        onClose={() => setModalOpen(false)}
-        size={{ base: "full", md: "xl" }}
+        open={isModalOpen}
+        onOpenChange={(open) => setModalOpen(open)}
+        size={modalSize}
         title={<Translation id="contributors" />}
       >
         <Translation id="contributors-thanks" />
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
deleted file mode 100644
index 11d2e80c59b..00000000000
--- a/src/components/Modal/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react"
-import {
-  Button,
-  HStack,
-  Modal as ChakraModal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalContentProps,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  type ModalProps as ChakraModalProps,
-} from "@chakra-ui/react"
-
-export type ModalProps = ChakraModalProps & {
-  children?: React.ReactNode
-  title?: React.ReactNode
-  actionButtonLabel?: string
-  contentProps?: ModalContentProps
-}
-
-const Modal = ({
-  children,
-  title,
-  actionButtonLabel,
-  contentProps,
-  ...restProps
-}: ModalProps) => {
-  return (
-    <ChakraModal isCentered scrollBehavior="outside" {...restProps}>
-      <ModalOverlay />
-
-      <ModalContent {...contentProps}>
-        <HStack>
-          <ModalHeader>{title}</ModalHeader>
-          <ModalCloseButton />
-        </HStack>
-        <ModalBody>{children}</ModalBody>
-        {actionButtonLabel && (
-          <ModalFooter>
-            <Button variant="outline">Cancel</Button>
-            <Button>{actionButtonLabel}</Button>
-          </ModalFooter>
-        )}
-      </ModalContent>
-    </ChakraModal>
-  )
-}
-
-export default Modal
diff --git a/src/components/Quiz/QuizzesModal.tsx b/src/components/Quiz/QuizzesModal.tsx
index 38298e49467..8b0580606ce 100644
--- a/src/components/Quiz/QuizzesModal.tsx
+++ b/src/components/Quiz/QuizzesModal.tsx
@@ -1,11 +1,13 @@
 import { QuizStatus } from "@/lib/types"
 
-import Modal from "../Modal"
+import Modal, { type ModalProps } from "../ui/dialog-modal"
 import { Center } from "../ui/flex"
 
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
 type QuizzesModalProps = {
   isQuizModalOpen: boolean
-  onQuizModalClose: () => void
+  onQuizModalOpenChange: (open: boolean) => void
   children: React.ReactNode
   quizStatus: QuizStatus
 }
@@ -14,7 +16,7 @@ const QuizzesModal = ({
   children,
   quizStatus,
   isQuizModalOpen,
-  onQuizModalClose,
+  onQuizModalOpenChange,
   ...props
 }: QuizzesModalProps) => {
   // TODO: remove bang in utility class names when Modal is migrated
@@ -25,11 +27,13 @@ const QuizzesModal = ({
     return "!bg-error-light dark:!bg-error-dark"
   }
 
+  const size = useBreakpointValue<ModalProps["size"]>({ base: "xl", md: "md" })!
+
   return (
     <Modal
-      isOpen={isQuizModalOpen}
-      onClose={onQuizModalClose}
-      size={{ base: "full", md: "xl" }}
+      open={isQuizModalOpen}
+      onOpenChange={onQuizModalOpenChange}
+      size={size}
       contentProps={{ className: getStatusColorClass() }}
       {...props}
     >
diff --git a/src/components/Quiz/stories/QuizModal.stories.tsx b/src/components/Quiz/stories/QuizModal.stories.tsx
index b8f61dc6b3c..df64747c900 100644
--- a/src/components/Quiz/stories/QuizModal.stories.tsx
+++ b/src/components/Quiz/stories/QuizModal.stories.tsx
@@ -17,7 +17,7 @@ const meta = {
   args: {
     isQuizModalOpen: true,
     quizStatus: "neutral",
-    onQuizModalClose: fn(),
+    onQuizModalOpenChange: fn(),
     children: "",
     widgetProps: {
       quizKey: LAYER_2_QUIZ_KEY,
diff --git a/src/components/Simulator/SimulatorModal.tsx b/src/components/Simulator/SimulatorModal.tsx
index 1d2d7dea07f..c38ef765efd 100644
--- a/src/components/Simulator/SimulatorModal.tsx
+++ b/src/components/Simulator/SimulatorModal.tsx
@@ -1,35 +1,9 @@
 import React from "react"
-import {
-  type ModalContentProps,
-  type ModalProps,
-  UseDisclosureReturn,
-} from "@chakra-ui/react"
 
-import Modal from "../Modal"
+import Modal, { type ModalProps } from "../ui/dialog-modal"
 
-type SimulatorModalProps = ModalContentProps &
-  Pick<ModalProps, "size"> & {
-    isOpen: UseDisclosureReturn["isOpen"]
-    onClose: UseDisclosureReturn["onClose"]
-    children?: React.ReactNode
-  }
+type SimulatorModalProps = Omit<ModalProps, "size">
 
-export const SimulatorModal = ({
-  isOpen,
-  onClose,
-  children,
-  ...restProps
-}: SimulatorModalProps) => {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      isCentered
-      size="full"
-      scrollBehavior="outside"
-      contentProps={restProps}
-    >
-      {children}
-    </Modal>
-  )
+export const SimulatorModal = (props: SimulatorModalProps) => {
+  return <Modal size="xl" {...props} isSimulator />
 }
diff --git a/src/components/Simulator/index.tsx b/src/components/Simulator/index.tsx
index 64acaea2863..d324c1d467d 100644
--- a/src/components/Simulator/index.tsx
+++ b/src/components/Simulator/index.tsx
@@ -4,6 +4,8 @@ import { Flex, type FlexProps, Grid } from "@chakra-ui/react"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import type { ModalProps } from "../ui/dialog-modal"
+
 import { PATH_ID_QUERY_PARAM, SIMULATOR_ID } from "./constants"
 import { Explanation } from "./Explanation"
 import type {
@@ -41,14 +43,16 @@ export const Simulator = ({ children, data }: SimulatorProps) => {
   }
 
   // When simulator closed: log event, clear URL params and close modal
-  const onClose = (): void => {
-    trackCustomEvent({
-      eventCategory: "simulator",
-      eventAction: `${pathId}_click`,
-      eventName: `close-from-step-${step + 1}`,
-    })
-    // Clearing URL Params will reset pathId, and close modal
-    clearUrlParams()
+  const onClose: ModalProps["onOpenChange"] = (open) => {
+    if (!open) {
+      trackCustomEvent({
+        eventCategory: "simulator",
+        eventAction: `${pathId}_click`,
+        eventName: `close-from-step-${step + 1}`,
+      })
+      // Clearing URL Params will reset pathId, and close modal
+      clearUrlParams()
+    }
   }
 
   // Remove URL search param if invalid pathId
@@ -181,7 +185,7 @@ export const Simulator = ({ children, data }: SimulatorProps) => {
           })}
         </Flex>
       </Flex>
-      <SimulatorModal isOpen={isOpen} onClose={onClose}>
+      <SimulatorModal open={isOpen} onOpenChange={onClose}>
         <Template>
           {explanation ? (
             <Explanation
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/ui/__stories__/Modal.stories.tsx
similarity index 68%
rename from src/components/Modal/Modal.stories.tsx
rename to src/components/ui/__stories__/Modal.stories.tsx
index 27cb3b501db..4ad9aece047 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/ui/__stories__/Modal.stories.tsx
@@ -1,18 +1,20 @@
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
 
-import ModalComponent from "."
+import ModalComponent from "../dialog-modal"
 
 const meta = {
   title: "Molecules/Overlay Content/Modal",
   component: ModalComponent,
   args: {
-    isOpen: true,
+    defaultOpen: true,
     title: "Modal Title",
     children:
       "This is the base component to be used in the modal window. Please change the text to preview final content for ethereum.org",
-    actionButtonLabel: "Save",
-    // Required prop, but not used in the current stories
-    onClose: () => {},
+    actionButton: {
+      label: "Save",
+      onClick: fn(),
+    },
   },
 } satisfies Meta<typeof ModalComponent>
 
@@ -22,8 +24,8 @@ type Story = StoryObj<typeof meta>
 
 export const Modal: Story = {}
 
-export const Full: Story = {
+export const Xl: Story = {
   args: {
-    size: "full",
+    size: "xl",
   },
 }
diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
new file mode 100644
index 00000000000..0ec69203a1c
--- /dev/null
+++ b/src/components/ui/dialog-modal.tsx
@@ -0,0 +1,218 @@
+import * as React from "react"
+import { MdClose } from "react-icons/md"
+import { tv, type VariantProps } from "tailwind-variants"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+
+import { cn } from "@/lib/utils/cn"
+
+import { Button } from "./buttons/Button"
+import { Center, Flex } from "./flex"
+
+const dialogVariant = tv({
+  slots: {
+    content:
+      "data-[state=open]:animate-contentShow w-full grid gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
+    overlay:
+      "data-[state=open]:animate-overlayShow overflow-y-auto p-4 grid place-items-center fixed inset-0 bg-black/70 z-overlay",
+    header: "relative pe-12",
+    title: "text-2xl",
+    footer: "pt-8",
+    close: "text-md size-8 z-10 absolute end-0 top-0",
+  },
+  variants: {
+    size: {
+      md: {
+        content: "max-w-xl",
+      },
+      xl: {
+        content: "max-w-[1004px]",
+      },
+    },
+    isSimulator: {
+      true: {
+        close: "static ms-auto",
+        header: "pe-0",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})
+
+type DialogVariants = VariantProps<typeof dialogVariant>
+
+const DialogStylesContext = React.createContext(dialogVariant())
+
+const useDialogStyles = () => React.useContext(DialogStylesContext)
+
+type DialogProps = DialogPrimitive.DialogProps & DialogVariants
+
+const Dialog = ({ size, isSimulator, ...props }: DialogProps) => {
+  const styles = dialogVariant({ size, isSimulator })
+  return (
+    <DialogStylesContext.Provider value={styles}>
+      <DialogPrimitive.Root {...props} />
+    </DialogStylesContext.Provider>
+  )
+}
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  const { overlay } = useDialogStyles()
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(overlay(), className)}
+      {...props}
+    />
+  )
+})
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+type DialogContentProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+>
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, ...props }, ref) => {
+  const { content } = useDialogStyles()
+  return (
+    <DialogPortal>
+      <DialogOverlay>
+        <DialogPrimitive.Content
+          ref={ref}
+          className={cn(content(), className)}
+          {...props}
+        >
+          {children}
+        </DialogPrimitive.Content>
+      </DialogOverlay>
+    </DialogPortal>
+  )
+})
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const { header, close } = useDialogStyles()
+  return (
+    <div className={cn(header(), className)} {...props}>
+      {children}
+      <Center className={close()} asChild>
+        <DialogPrimitive.Close>
+          <MdClose size="20" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </Center>
+    </div>
+  )
+}
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const { footer } = useDialogStyles()
+  return <div className={cn(footer(), className)} {...props} />
+}
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => {
+  const { title } = useDialogStyles()
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn(title(), className)}
+      {...props}
+    />
+  )
+})
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export type ModalProps = DialogProps & {
+  children?: React.ReactNode
+  title?: React.ReactNode
+  actionButton?: {
+    label: string
+    onClick: () => void
+  }
+  contentProps?: DialogContentProps
+}
+
+const Modal = ({
+  children,
+  title,
+  actionButton,
+  contentProps,
+  ...restProps
+}: ModalProps) => {
+  return (
+    <Dialog {...restProps}>
+      <DialogContent {...contentProps}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>{children}</DialogDescription>
+        {actionButton && (
+          <DialogFooter>
+            <Flex className="justify-end gap-2">
+              <DialogClose asChild>
+                <Button variant="outline" isSecondary>
+                  Cancel
+                </Button>
+              </DialogClose>
+              <Button onClick={actionButton.onClick}>
+                {actionButton.label}
+              </Button>
+            </Flex>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default Modal
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/src/pages/developers/tutorials.tsx b/src/pages/developers/tutorials.tsx
index 4ddcb2a9522..56da3af5a02 100644
--- a/src/pages/developers/tutorials.tsx
+++ b/src/pages/developers/tutorials.tsx
@@ -21,13 +21,13 @@ import Emoji from "@/components/Emoji"
 import FeedbackCard from "@/components/FeedbackCard"
 import { BaseLink } from "@/components/Link"
 import MainArticle from "@/components/MainArticle"
-import Modal from "@/components/Modal"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
 import Translation from "@/components/Translation"
 import { getSkillTranslationId, Skill } from "@/components/TutorialMetadata"
 import TutorialTags from "@/components/TutorialTags"
+import Modal from "@/components/ui/dialog-modal"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -42,6 +42,7 @@ import {
 
 import externalTutorials from "@/data/externalTutorials.json"
 
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 const FilterTag = forwardRef<{ isActive: boolean; name: string }, "button">(
@@ -205,6 +206,8 @@ const TutorialPage = ({
   }
 
   const dir = contentNotTranslated ? "ltr" : "unset"
+
+  const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
   return (
     <Flex
       as={MainArticle}
@@ -248,9 +251,9 @@ const TutorialPage = ({
       </Text>
 
       <Modal
-        isOpen={isModalOpen}
-        onClose={() => setModalOpen(false)}
-        size={{ base: "full", md: "xl" }}
+        open={isModalOpen}
+        onOpenChange={(open) => setModalOpen(open)}
+        size={modalSize}
         contentProps={{ dir }}
         title={
           <Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
diff --git a/src/pages/quizzes.tsx b/src/pages/quizzes.tsx
index 408a7d335ce..5e690b30fb5 100644
--- a/src/pages/quizzes.tsx
+++ b/src/pages/quizzes.tsx
@@ -3,7 +3,7 @@ import { GetStaticProps, InferGetStaticPropsType, NextPage } from "next"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { FaGithub } from "react-icons/fa"
-import { Box, Flex, Icon, Stack, Text, useDisclosure } from "@chakra-ui/react"
+import { Box, Flex, Icon, Stack, Text } from "@chakra-ui/react"
 
 import { BasePageProps, Lang, QuizKey, QuizStatus } from "@/lib/types"
 
@@ -28,6 +28,7 @@ import { ethereumBasicsQuizzes, usingEthereumQuizzes } from "@/data/quizzes"
 
 import { INITIAL_QUIZ } from "@/lib/constants"
 
+import { useDisclosure } from "@/hooks/useDisclosure"
 import HeroImage from "@/public/images/heroes/quizzes-hub-hero.png"
 
 const handleGHAdd = () =>
@@ -65,7 +66,7 @@ const QuizzesHubPage: NextPage<
   const [userStats, updateUserStats] = useLocalQuizData()
   const [quizStatus, setQuizStatus] = useState<QuizStatus>("neutral")
   const [currentQuiz, setCurrentQuiz] = useState<QuizKey>(INITIAL_QUIZ)
-  const { onOpen, isOpen, onClose } = useDisclosure()
+  const { onOpen, isOpen, setValue } = useDisclosure()
 
   const commonQuizListProps = useMemo(
     () => ({
@@ -91,7 +92,7 @@ const QuizzesHubPage: NextPage<
       />
       <QuizzesModal
         isQuizModalOpen={isOpen}
-        onQuizModalClose={onClose}
+        onQuizModalOpenChange={setValue}
         quizStatus={quizStatus}
       >
         <QuizWidget