diff --git a/src/components/AuthMethodFeed/styles.module.css b/src/components/AuthMethodFeed/styles.module.css
index 021929fb2e..0addb0927a 100644
--- a/src/components/AuthMethodFeed/styles.module.css
+++ b/src/components/AuthMethodFeed/styles.module.css
@@ -34,10 +34,14 @@
 }
 
 .info {
-  padding: 0 var(--spacing-base) var(--spacing-loose);
+  padding: 0 var(--spacing-base);
   color: var(--color-grey);
   text-align: center;
 
+  @media (--sm-up) {
+    padding-bottom: var(--spacing-x-tight);
+  }
+
   .errorHint {
     margin-bottom: var(--spacing-base);
     font-size: var(--font-size-sm);
diff --git a/src/components/DialogBeta/Content/index.tsx b/src/components/DialogBeta/Content/index.tsx
new file mode 100644
index 0000000000..d741c76442
--- /dev/null
+++ b/src/components/DialogBeta/Content/index.tsx
@@ -0,0 +1,42 @@
+import classNames from 'classnames'
+
+import Message from '../Message'
+import styles from './styles.module.css'
+
+interface DialogContentProps {
+  noSpacing?: boolean
+  smExtraSpacing?: boolean
+  fixedHeight?: boolean
+  noSpacingBottom?: boolean
+  noMaxHeight?: boolean
+}
+
+const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> & {
+  Message: typeof Message
+} = ({
+  noSpacing,
+  smExtraSpacing = true,
+  noSpacingBottom,
+  noMaxHeight,
+  fixedHeight,
+  children,
+}) => {
+  const contentClasses = classNames({
+    [styles.content]: true,
+    [styles.spacing]: !noSpacing,
+    [styles.smExtraSpacing]: smExtraSpacing,
+    [styles.fixedHeight]: !!fixedHeight,
+    [styles.noSpacingBottom]: !!noSpacingBottom,
+    [styles.noMaxHeight]: !!noMaxHeight,
+  })
+
+  return (
+    <section className={contentClasses} data-dialog-entity>
+      {children}
+    </section>
+  )
+}
+
+DialogContent.Message = Message
+
+export default DialogContent
diff --git a/src/components/DialogBeta/Content/styles.module.css b/src/components/DialogBeta/Content/styles.module.css
new file mode 100644
index 0000000000..e4b49a410e
--- /dev/null
+++ b/src/components/DialogBeta/Content/styles.module.css
@@ -0,0 +1,45 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  max-height: calc(70vh - 4.25rem); /* 4.25rem is the height of header */
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  &.fixedHeight {
+    height: calc(70vh - 4.25rem); /* 4.25rem is the height of header */
+
+    @media (--sm-up) {
+      height: min(30rem, 64vh);
+    }
+  }
+
+  @media (--sm-up) {
+    max-height: min(30rem, 64vh);
+  }
+}
+
+.smExtraSpacing {
+  padding-bottom: var(--spacing-xx-loose);
+
+  @media (--sm-up) {
+    padding-bottom: 0;
+  }
+}
+
+.spacing {
+  padding: var(--spacing-base);
+
+  @media (--sm-up) {
+    padding: 0 var(--spacing-base-loose);
+  }
+}
+
+.noSpacingBottom {
+  padding-bottom: 0;
+}
+
+.noMaxHeight {
+  max-height: none;
+}
diff --git a/src/components/DialogBeta/Footer/index.tsx b/src/components/DialogBeta/Footer/index.tsx
new file mode 100644
index 0000000000..e9f950b6bf
--- /dev/null
+++ b/src/components/DialogBeta/Footer/index.tsx
@@ -0,0 +1,86 @@
+import classNames from 'classnames'
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { Media } from '~/components'
+import { RoundedButton, TextButton } from '~/components/Dialog/Buttons'
+
+import styles from './styles.module.css'
+
+type FooterProps = {
+  btns?: React.ReactNode
+  smUpBtns?: React.ReactNode
+  closeText?: React.ReactNode
+  closeDialog?: () => any
+}
+
+const Footer: React.FC<FooterProps> = ({
+  btns,
+  smUpBtns,
+  closeText,
+  closeDialog,
+}) => {
+  if (!btns && !smUpBtns && !closeDialog) {
+    return null
+  }
+
+  const text = closeText || <FormattedMessage defaultMessage="Cancel" />
+
+  const footerClasses = classNames({
+    [styles.footer]: true,
+  })
+  const hasBtns = btns || closeDialog
+  const hasSmUpBtns = smUpBtns || closeDialog
+
+  const smUpContentClasses = classNames({
+    [styles.smUpContent]: true,
+  })
+
+  const SmUpBtns = () => (
+    <>
+      {hasSmUpBtns && (
+        <Media greaterThan="sm">
+          <section className={smUpContentClasses}>
+            {closeDialog && (
+              <TextButton
+                text={text}
+                color="greyDarker"
+                onClick={closeDialog}
+              />
+            )}
+            {smUpBtns}
+          </section>
+        </Media>
+      )}
+    </>
+  )
+
+  if (hasBtns) {
+    return (
+      <footer className={footerClasses} data-dialog-entity>
+        <Media at="sm">
+          <section className={styles.content}>
+            {btns}
+            {closeDialog && (
+              <RoundedButton
+                text={text}
+                color="greyDarker"
+                onClick={closeDialog}
+              />
+            )}
+          </section>
+        </Media>
+
+        <SmUpBtns />
+      </footer>
+    )
+  }
+
+  return (
+    <footer className={footerClasses}>
+      <SmUpBtns />
+    </footer>
+  )
+}
+
+export default Footer
diff --git a/src/components/DialogBeta/Footer/styles.module.css b/src/components/DialogBeta/Footer/styles.module.css
new file mode 100644
index 0000000000..a41d159d22
--- /dev/null
+++ b/src/components/DialogBeta/Footer/styles.module.css
@@ -0,0 +1,41 @@
+.footer {
+  position: relative;
+}
+
+.content {
+  @mixin flex-center-space-between;
+  @mixin safe-area-botttom;
+
+  flex-direction: column;
+  flex-shrink: 0;
+  padding: var(--spacing-base-loose) var(--spacing-base) 0;
+
+  & > * {
+    flex: 1;
+    width: 100%;
+  }
+
+  & > * + * {
+    margin-top: var(--spacing-base);
+  }
+}
+
+.smUpContent {
+  @mixin flex-center-end;
+
+  padding: 0 var(--spacing-base-loose) 0;
+  margin: var(--spacing-base) 0 var(--spacing-base-loose);
+  text-align: right;
+
+  & > * + * {
+    margin-left: var(--spacing-x-loose);
+  }
+}
+
+/* .smUpContentNoSpacingBottom {
+  margin-bottom: 0;
+}
+
+.smUpSpaceBetween {
+  @mixin flex-center-space-between;
+} */
diff --git a/src/components/DialogBeta/Message/index.tsx b/src/components/DialogBeta/Message/index.tsx
new file mode 100644
index 0000000000..0d0777a0de
--- /dev/null
+++ b/src/components/DialogBeta/Message/index.tsx
@@ -0,0 +1,49 @@
+import classNames from 'classnames'
+
+import { capitalizeFirstLetter } from '~/common/utils'
+
+import styles from './styles.module.css'
+
+interface DialogMessageProps {
+  align?: 'left' | 'center'
+  smUpAlign?: 'left' | 'center'
+  type?: 'error'
+  spacingBottom?: boolean
+}
+
+/**
+ *
+ * Usage:
+ *
+ * ```jsx
+ *   <Dialog.Message>
+ *     <p>grey text</p>
+ *   </Dialog.Message>
+ *
+ *   <Dialog.Message>
+ *     <h3>bold text</h3>
+ *   </Dialog.Message>
+ * ```
+ *
+ */
+const DialogMessage: React.FC<React.PropsWithChildren<DialogMessageProps>> = ({
+  align = 'center',
+  smUpAlign = 'left',
+  spacingBottom,
+  type,
+
+  children,
+}) => {
+  const contentClasses = classNames({
+    [styles.content]: true,
+    [styles.spacingBottom]: !!spacingBottom,
+    [styles[`${type}`]]: !!type,
+    [align ? styles[`align${capitalizeFirstLetter(align)}`] : '']: !!align,
+    [smUpAlign ? styles[`alignSmUp${capitalizeFirstLetter(smUpAlign)}`] : '']:
+      !!smUpAlign,
+  })
+
+  return <section className={contentClasses}>{children}</section>
+}
+
+export default DialogMessage
diff --git a/src/components/DialogBeta/Message/styles.module.css b/src/components/DialogBeta/Message/styles.module.css
new file mode 100644
index 0000000000..e53623b627
--- /dev/null
+++ b/src/components/DialogBeta/Message/styles.module.css
@@ -0,0 +1,75 @@
+.content {
+  & h2 {
+    font-size: var(--font-size-xm);
+  }
+
+  & h3 {
+    font-size: var(--font-size-md);
+    line-height: 2rem;
+  }
+
+  & p {
+    font-size: var(--font-size-sm);
+    line-height: 1.375rem;
+    color: var(--color-grey-dark);
+  }
+
+  & h2 + p,
+  h3 + p,
+  p + p {
+    margin-top: var(--spacing-tight);
+  }
+
+  & ul,
+  & ol {
+    padding-left: var(--spacing-loose);
+    font-size: var(--font-size-md-s);
+    line-height: 1.5rem;
+    color: var(--color-grey-dark);
+  }
+
+  & li {
+    padding-left: var(--spacing-xx-tight);
+    margin: var(--spacing-x-tight) 0;
+  }
+
+  & ul {
+    margin: var(--spacing-base) 0;
+    list-style-type: disc;
+  }
+
+  & ol {
+    margin: var(--spacing-base) 0;
+    list-style-type: decimal;
+  }
+}
+
+.error {
+  & h3 {
+    color: var(--color-red);
+  }
+}
+
+.alignCenter {
+  text-align: center;
+}
+
+.alignLeft {
+  text-align: left;
+}
+
+.alignSmUpCenter {
+  @media (--sm-up) {
+    text-align: center;
+  }
+}
+
+.alignSmUpLeft {
+  @media (--sm-up) {
+    text-align: left;
+  }
+}
+
+.spacingBottom {
+  padding-bottom: var(--spacing-base);
+}
diff --git a/src/components/DialogBeta/index.tsx b/src/components/DialogBeta/index.tsx
new file mode 100644
index 0000000000..6c44d13861
--- /dev/null
+++ b/src/components/DialogBeta/index.tsx
@@ -0,0 +1,212 @@
+import { DialogContent, DialogOverlay } from '@reach/dialog'
+import { VisuallyHidden } from '@reach/visually-hidden'
+import classNames from 'classnames'
+import _get from 'lodash/get'
+import { useEffect, useRef, useState } from 'react'
+import { animated, useSpring } from 'react-spring'
+import { useDrag } from 'react-use-gesture'
+
+import { KEYVALUE } from '~/common/enums'
+import { capitalizeFirstLetter, dom } from '~/common/utils'
+import { Media, useOutsideClick } from '~/components'
+
+import { RoundedButton, TextButton } from '../Dialog/Buttons'
+import Handle from '../Dialog/Handle'
+import Header from '../Dialog/Header'
+import Lazy from '../Dialog/Lazy'
+import Overlay from '../Dialog/Overlay'
+import Content from './Content'
+import Footer from './Footer'
+import styles from './styles.module.css'
+
+export interface DialogBetaOverlayProps {
+  isOpen: boolean | undefined
+  onDismiss: () => void
+  onRest?: () => void
+  dismissOnClickOutside?: boolean
+  dismissOnHandle?: boolean
+}
+
+export type DialogBetaProps = {
+  smBgColor?: 'greyLighter'
+  smUpBgColor?: 'greyLighter'
+  hidePaddingBottom?: boolean
+
+  testId?: string
+} & DialogBetaOverlayProps
+
+const Container: React.FC<
+  React.PropsWithChildren<
+    {
+      style?: React.CSSProperties
+      setDragGoal: (val: any) => void
+      initialFocusRef: React.RefObject<any>
+    } & DialogBetaProps
+  >
+> = ({
+  smBgColor,
+  smUpBgColor,
+  hidePaddingBottom,
+  testId,
+  onDismiss,
+  dismissOnClickOutside = false,
+  dismissOnHandle = true,
+  children,
+  style,
+  setDragGoal,
+  initialFocusRef,
+}) => {
+  const node: React.RefObject<any> | null = useRef(null)
+
+  const containerClasses = classNames({
+    [styles.container]: true,
+    [smBgColor ? styles[`bg${capitalizeFirstLetter(smBgColor)}`] : '']:
+      !!smBgColor,
+    [smUpBgColor ? styles[`bg${capitalizeFirstLetter(smUpBgColor)}SmUp`] : '']:
+      !!smUpBgColor,
+    [styles.hidePaddingBottom]: !!hidePaddingBottom,
+  })
+
+  const closeTopDialog = () => {
+    const dialogs = Array.prototype.slice.call(
+      dom.$$('[data-reach-dialog-overlay]')
+    ) as Element[]
+    const topDialog = dialogs[dialogs.length - 1]
+    const isTopDialog =
+      topDialog && node.current && topDialog.contains(node.current)
+
+    if (!isTopDialog) {
+      return
+    }
+
+    onDismiss()
+  }
+
+  const handleClickOutside = () => {
+    if (!dismissOnClickOutside) {
+      return
+    }
+
+    closeTopDialog()
+  }
+
+  const bind = useDrag(({ down, movement: [, my] }) => {
+    if (!down && my > 30) {
+      onDismiss()
+    } else {
+      setDragGoal({ top: down ? Math.max(my, -30) : 0 })
+    }
+  })
+
+  useOutsideClick(node, handleClickOutside)
+
+  return (
+    <div
+      {...(testId ? { 'data-test-id': testId } : {})}
+      ref={node}
+      className={containerClasses}
+      style={style}
+      onKeyDown={(event) => {
+        if (event.code.toLowerCase() !== KEYVALUE.escape) {
+          return
+        }
+        if (!dismissOnHandle) {
+          return
+        }
+        closeTopDialog()
+      }}
+    >
+      <VisuallyHidden>
+        <button type="button" ref={initialFocusRef} aria-hidden="true" />
+      </VisuallyHidden>
+
+      <Media at="sm">
+        {dismissOnHandle && <Handle closeDialog={onDismiss} {...bind()} />}
+      </Media>
+
+      {children}
+    </div>
+  )
+}
+
+export const DialogBeta: React.ComponentType<
+  React.PropsWithChildren<DialogBetaProps>
+> & {
+  Header: typeof Header
+  Content: typeof Content
+  Footer: typeof Footer
+  TextButton: typeof TextButton
+  RoundedButton: typeof RoundedButton
+  Lazy: typeof Lazy
+} = (props) => {
+  const { isOpen, onRest } = props
+  const [mounted, setMounted] = useState(isOpen)
+  const initialFocusRef = useRef<any>(null)
+
+  // Drag
+  const [{ top }, setDragGoal] = useSpring(() => ({ top: 0 }))
+
+  // Fade In/ Fade Out
+  const [{ opacity }, setFade] = useSpring<{
+    opacity: number
+  }>(() => ({
+    opacity: 0,
+    config: { tension: 270 },
+    onRest: (val: any) => {
+      const isFadedOut = _get(val, 'value.opacity') <= 0
+
+      if (isFadedOut) {
+        setMounted(false)
+        setDragGoal({ top: 0 })
+      }
+
+      if (onRest) {
+        onRest()
+      }
+    },
+  }))
+
+  useEffect(() => {
+    if (isOpen) {
+      setMounted(true)
+      setFade({ opacity: 1 })
+    } else {
+      setFade({ opacity: 0 })
+    }
+  })
+
+  const AnimatedDialogOverlay = animated(DialogOverlay)
+  const AnimatedContainer = animated(Container)
+  const AnimatedOverlay = animated(Overlay)
+
+  if (!mounted) {
+    return null
+  }
+
+  return (
+    <>
+      <AnimatedDialogOverlay
+        className="dialog"
+        initialFocusRef={initialFocusRef}
+      >
+        <AnimatedOverlay style={{ opacity: opacity as any }} />
+
+        <DialogContent aria-labelledby="dialog-title">
+          <AnimatedContainer
+            style={{ opacity: opacity as any, top }}
+            setDragGoal={setDragGoal}
+            initialFocusRef={initialFocusRef}
+            {...props}
+          />
+        </DialogContent>
+      </AnimatedDialogOverlay>
+    </>
+  )
+}
+
+DialogBeta.Header = Header
+DialogBeta.Content = Content
+DialogBeta.Footer = Footer
+DialogBeta.TextButton = TextButton
+DialogBeta.RoundedButton = RoundedButton
+DialogBeta.Lazy = Lazy
diff --git a/src/components/DialogBeta/styles.module.css b/src/components/DialogBeta/styles.module.css
new file mode 100644
index 0000000000..40c49943b1
--- /dev/null
+++ b/src/components/DialogBeta/styles.module.css
@@ -0,0 +1,73 @@
+.overlay {
+  @mixin expand-to-container;
+
+  content: '';
+  background: rgb(0 0 0 / 40%);
+  will-change: opacity;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--color-white);
+  border-radius: var(--spacing-x-tight) var(--spacing-x-tight) 0 0;
+  will-change: transform, top;
+
+  &::before {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: 0;
+    height: 300vh;
+    content: '';
+    background: var(--color-white);
+  }
+
+  & :nth-last-child(1 of [data-dialog-entity]) {
+    @media (--sm-down) {
+      padding-bottom: var(--spacing-xx-loose);
+    }
+  }
+
+  &.bgGreyLighter {
+    background: var(--color-grey-lighter);
+
+    @media (--sm-up) {
+      background: var(--color-white);
+    }
+  }
+
+  &.bgGreyLighterSmUp {
+    @media (--md-up) {
+      background: var(--color-grey-lighter);
+    }
+  }
+
+  @media (--sm-up) {
+    border-radius: var(--spacing-x-tight);
+    will-change: opacity;
+
+    &::before {
+      display: none;
+    }
+  }
+}
+
+.handle {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  z-index: var(--z-index-dialog);
+  padding: var(--spacing-x-tight);
+  transform: translateX(-50%);
+
+  & .icon {
+    display: inline-block;
+    width: 3rem;
+    height: 0.375rem;
+    background: var(--color-grey-lighter);
+    border-radius: var(--spacing-x-tight);
+  }
+}
diff --git a/src/components/Dialogs/AddWalletLoginDialog/Content.tsx b/src/components/Dialogs/AddWalletLoginDialog/Content.tsx
index e42abcb1bd..f01bde8db0 100644
--- a/src/components/Dialogs/AddWalletLoginDialog/Content.tsx
+++ b/src/components/Dialogs/AddWalletLoginDialog/Content.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { WalletType } from '~/common/utils'
-import { AuthWalletFeed, Dialog, WalletAuthForm } from '~/components'
+import { AuthWalletFeed, DialogBeta, WalletAuthForm } from '~/components'
 
 interface Props {
   closeDialog: () => void
@@ -19,7 +19,7 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
 
   return (
     <>
-      <Dialog.Header
+      <DialogBeta.Header
         title={
           <FormattedMessage
             defaultMessage="Connect wallet"
@@ -27,7 +27,7 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
           />
         }
         leftBtn={
-          <Dialog.TextButton
+          <DialogBeta.TextButton
             text={<FormattedMessage defaultMessage="Close" />}
             color="greyDarker"
             onClick={closeDialog}
@@ -38,7 +38,7 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
 
       {isSelect && (
         <>
-          <Dialog.Content>
+          <DialogBeta.Content>
             <AuthWalletFeed
               submitCallback={(type: WalletType) => {
                 setWalletType(type)
@@ -46,11 +46,11 @@ const AddWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
               }}
               hasWalletExist={hasWalletExist}
             />
-          </Dialog.Content>
-          <Dialog.Footer
+          </DialogBeta.Content>
+          <DialogBeta.Footer
             smUpBtns={
               <>
-                <Dialog.TextButton
+                <DialogBeta.TextButton
                   text={<FormattedMessage defaultMessage="Close" />}
                   color="greyDarker"
                   onClick={closeDialog}
diff --git a/src/components/Dialogs/AddWalletLoginDialog/index.tsx b/src/components/Dialogs/AddWalletLoginDialog/index.tsx
index 3b577b31a2..b418f6acf9 100644
--- a/src/components/Dialogs/AddWalletLoginDialog/index.tsx
+++ b/src/components/Dialogs/AddWalletLoginDialog/index.tsx
@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic'
 
-import { Dialog, Spinner, useDialogSwitch } from '~/components'
+import { DialogBeta, Spinner, useDialogSwitch } from '~/components'
 
 interface AddWalletLoginDialogProps {
   children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
@@ -15,15 +15,15 @@ const BaseAddWalletLoginDialog = ({ children }: AddWalletLoginDialogProps) => {
     <>
       {children({ openDialog })}
 
-      <Dialog isOpen={show} onDismiss={closeDialog}>
+      <DialogBeta isOpen={show} onDismiss={closeDialog}>
         <DynamicContent closeDialog={closeDialog} />
-      </Dialog>
+      </DialogBeta>
     </>
   )
 }
 
 export const AddWalletLoginDialog = (props: AddWalletLoginDialogProps) => (
-  <Dialog.Lazy mounted={<BaseAddWalletLoginDialog {...props} />}>
+  <DialogBeta.Lazy mounted={<BaseAddWalletLoginDialog {...props} />}>
     {({ openDialog }) => <>{props.children({ openDialog })}</>}
-  </Dialog.Lazy>
+  </DialogBeta.Lazy>
 )
diff --git a/src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx b/src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx
index 5427f6f934..8dbd7e0c0c 100644
--- a/src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx
+++ b/src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx
@@ -2,7 +2,7 @@ import _pickBy from 'lodash/pickBy'
 import React, { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
-import { Dialog, toast, useMutation } from '~/components'
+import { DialogBeta, toast, useMutation } from '~/components'
 import { RemoveSocialLoginMutation, SocialAccountType } from '~/gql/graphql'
 
 import { REMOVE_SOCIAL_LOGIN } from './gql'
@@ -59,7 +59,7 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({
 
   return (
     <>
-      <Dialog.Header
+      <DialogBeta.Header
         title={
           <FormattedMessage
             defaultMessage="Disconnect from {type}"
@@ -70,35 +70,36 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({
           />
         }
       />
-
-      <Dialog.Message>
-        <p>
-          {isConfirm && (
-            <FormattedMessage
-              defaultMessage="Do you want to disconnect from {type}?"
-              description="src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx"
-              values={{
-                type,
-              }}
-            />
-          )}
-          {isFailure && (
-            <FormattedMessage
-              defaultMessage="Unable to disconnect from {type} temporarily because you do not have any other log in methods (Email/Crypto wallet/Social account)."
-              description="src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx"
-              values={{
-                type,
-              }}
-            />
-          )}
-        </p>
-      </Dialog.Message>
+      <DialogBeta.Content>
+        <DialogBeta.Content.Message>
+          <p>
+            {isConfirm && (
+              <FormattedMessage
+                defaultMessage="Do you want to disconnect from {type}?"
+                description="src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx"
+                values={{
+                  type,
+                }}
+              />
+            )}
+            {isFailure && (
+              <FormattedMessage
+                defaultMessage="Unable to disconnect from {type} temporarily because you do not have any other log in methods (Email/Crypto wallet/Social account)."
+                description="src/components/Dialogs/RemoveSocialLoginDialog/Content.tsx"
+                values={{
+                  type,
+                }}
+              />
+            )}
+          </p>
+        </DialogBeta.Content.Message>
+      </DialogBeta.Content>
 
       {isConfirm && (
-        <Dialog.Footer
+        <DialogBeta.Footer
           btns={
             <>
-              <Dialog.RoundedButton
+              <DialogBeta.RoundedButton
                 text={
                   <FormattedMessage
                     defaultMessage="Disconnect"
@@ -108,7 +109,7 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({
                 loading={loading}
                 onClick={remove}
               />
-              <Dialog.RoundedButton
+              <DialogBeta.RoundedButton
                 text={<FormattedMessage defaultMessage="Close" />}
                 color="greyDarker"
                 onClick={closeDialog}
@@ -117,12 +118,12 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({
           }
           smUpBtns={
             <>
-              <Dialog.TextButton
+              <DialogBeta.TextButton
                 text={<FormattedMessage defaultMessage="Cancel" />}
                 color="greyDarker"
                 onClick={closeDialog}
               />
-              <Dialog.TextButton
+              <DialogBeta.TextButton
                 text={
                   <FormattedMessage
                     defaultMessage="Disconnect"
@@ -138,10 +139,10 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({
       )}
 
       {isFailure && (
-        <Dialog.Footer
+        <DialogBeta.Footer
           btns={
             <>
-              <Dialog.RoundedButton
+              <DialogBeta.RoundedButton
                 text={<FormattedMessage defaultMessage="Close" />}
                 color="greyDarker"
                 onClick={closeDialog}
@@ -150,7 +151,7 @@ const RemoveSocailLoginDialogContent: React.FC<Props> = ({
           }
           smUpBtns={
             <>
-              <Dialog.TextButton
+              <DialogBeta.TextButton
                 text={<FormattedMessage defaultMessage="Close" />}
                 color="greyDarker"
                 onClick={closeDialog}
diff --git a/src/components/Dialogs/RemoveSocialLoginDialog/index.tsx b/src/components/Dialogs/RemoveSocialLoginDialog/index.tsx
index 18e1dd2e18..56e599e2c1 100644
--- a/src/components/Dialogs/RemoveSocialLoginDialog/index.tsx
+++ b/src/components/Dialogs/RemoveSocialLoginDialog/index.tsx
@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic'
 
-import { Dialog, Spinner, useDialogSwitch } from '~/components'
+import { DialogBeta, Spinner, useDialogSwitch } from '~/components'
 import { SocialAccountType } from '~/gql/graphql'
 
 interface RemoveSocialLoginDialogProps {
@@ -20,9 +20,9 @@ const BaseRemoveSocialLoginDialog = ({
     <>
       {children({ openDialog })}
 
-      <Dialog isOpen={show} onDismiss={closeDialog}>
+      <DialogBeta isOpen={show} onDismiss={closeDialog}>
         <DynamicContent closeDialog={closeDialog} type={type} />
-      </Dialog>
+      </DialogBeta>
     </>
   )
 }
@@ -30,7 +30,7 @@ const BaseRemoveSocialLoginDialog = ({
 export const RemoveSocialLoginDialog = (
   props: RemoveSocialLoginDialogProps
 ) => (
-  <Dialog.Lazy mounted={<BaseRemoveSocialLoginDialog {...props} />}>
+  <DialogBeta.Lazy mounted={<BaseRemoveSocialLoginDialog {...props} />}>
     {({ openDialog }) => <>{props.children({ openDialog })}</>}
-  </Dialog.Lazy>
+  </DialogBeta.Lazy>
 )
diff --git a/src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx b/src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx
index 0810a8d258..aaff21b0a7 100644
--- a/src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx
+++ b/src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDisconnect } from 'wagmi'
 
-import { Dialog, toast, useMutation } from '~/components'
+import { DialogBeta, toast, useMutation } from '~/components'
 import { RemoveWalletLoginMutation } from '~/gql/graphql'
 
 import { REMOVE_WALLET_LOGIN } from './gql'
@@ -49,7 +49,7 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
 
   return (
     <>
-      <Dialog.Header
+      <DialogBeta.Header
         title={
           <FormattedMessage
             defaultMessage="Disconnect wallet"
@@ -58,28 +58,30 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
         }
       />
 
-      <Dialog.Message>
-        <p>
-          {isConfirm && (
-            <FormattedMessage
-              defaultMessage="Are you sure you want to disconnect from this?"
-              description="src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx"
-            />
-          )}
-          {isFailure && (
-            <FormattedMessage
-              defaultMessage="Unable to disconnect the wallet because you have not added or associated another login (Email/Wallet/Social account)."
-              description="src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx"
-            />
-          )}
-        </p>
-      </Dialog.Message>
+      <DialogBeta.Content>
+        <DialogBeta.Content.Message>
+          <p>
+            {isConfirm && (
+              <FormattedMessage
+                defaultMessage="Are you sure you want to disconnect from this?"
+                description="src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx"
+              />
+            )}
+            {isFailure && (
+              <FormattedMessage
+                defaultMessage="Unable to disconnect the wallet because you have not added or associated another login (Email/Wallet/Social account)."
+                description="src/components/Dialogs/RemoveWalletLoginDialog/Content.tsx"
+              />
+            )}
+          </p>
+        </DialogBeta.Content.Message>
+      </DialogBeta.Content>
 
       {isConfirm && (
-        <Dialog.Footer
+        <DialogBeta.Footer
           btns={
             <>
-              <Dialog.RoundedButton
+              <DialogBeta.RoundedButton
                 text={
                   <FormattedMessage
                     defaultMessage="Disconnect"
@@ -89,7 +91,7 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
                 loading={loading}
                 onClick={remove}
               />
-              <Dialog.RoundedButton
+              <DialogBeta.RoundedButton
                 text={<FormattedMessage defaultMessage="Close" />}
                 color="greyDarker"
                 onClick={closeDialog}
@@ -98,12 +100,12 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
           }
           smUpBtns={
             <>
-              <Dialog.TextButton
+              <DialogBeta.TextButton
                 text={<FormattedMessage defaultMessage="Cancel" />}
                 color="greyDarker"
                 onClick={closeDialog}
               />
-              <Dialog.TextButton
+              <DialogBeta.TextButton
                 text={
                   <FormattedMessage
                     defaultMessage="Disconnect"
@@ -119,10 +121,10 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
       )}
 
       {isFailure && (
-        <Dialog.Footer
+        <DialogBeta.Footer
           btns={
             <>
-              <Dialog.RoundedButton
+              <DialogBeta.RoundedButton
                 text={<FormattedMessage defaultMessage="Close" />}
                 color="greyDarker"
                 onClick={closeDialog}
@@ -131,7 +133,7 @@ const RemoveWalletLoginDialogContent: React.FC<Props> = ({ closeDialog }) => {
           }
           smUpBtns={
             <>
-              <Dialog.TextButton
+              <DialogBeta.TextButton
                 text={<FormattedMessage defaultMessage="Close" />}
                 color="greyDarker"
                 onClick={closeDialog}
diff --git a/src/components/Dialogs/RemoveWalletLoginDialog/index.tsx b/src/components/Dialogs/RemoveWalletLoginDialog/index.tsx
index f7d30ce278..a8b38c1c09 100644
--- a/src/components/Dialogs/RemoveWalletLoginDialog/index.tsx
+++ b/src/components/Dialogs/RemoveWalletLoginDialog/index.tsx
@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic'
 
-import { Dialog, Spinner, useDialogSwitch } from '~/components'
+import { DialogBeta, Spinner, useDialogSwitch } from '~/components'
 
 interface RemoveWalletLoginDialogProps {
   children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
@@ -17,9 +17,9 @@ const BaseRemoveWalletLoginDialog = ({
     <>
       {children({ openDialog })}
 
-      <Dialog isOpen={show} onDismiss={closeDialog}>
+      <DialogBeta isOpen={show} onDismiss={closeDialog}>
         <DynamicContent closeDialog={closeDialog} />
-      </Dialog>
+      </DialogBeta>
     </>
   )
 }
@@ -27,7 +27,7 @@ const BaseRemoveWalletLoginDialog = ({
 export const RemoveWalletLoginDialog = (
   props: RemoveWalletLoginDialogProps
 ) => (
-  <Dialog.Lazy mounted={<BaseRemoveWalletLoginDialog {...props} />}>
+  <DialogBeta.Lazy mounted={<BaseRemoveWalletLoginDialog {...props} />}>
     {({ openDialog }) => <>{props.children({ openDialog })}</>}
-  </Dialog.Lazy>
+  </DialogBeta.Lazy>
 )
diff --git a/src/components/Dialogs/SetEmailDialog/Content.tsx b/src/components/Dialogs/SetEmailDialog/Content.tsx
index 1247385671..a545b6c26d 100644
--- a/src/components/Dialogs/SetEmailDialog/Content.tsx
+++ b/src/components/Dialogs/SetEmailDialog/Content.tsx
@@ -16,6 +16,7 @@ import {
 } from '~/common/utils'
 import {
   Dialog,
+  DialogBeta,
   Form,
   LanguageContext,
   useMutation,
@@ -28,8 +29,6 @@ import {
   VerificationCodeType,
 } from '~/gql/graphql'
 
-import styles from './styles.module.css'
-
 interface FormProps {
   closeDialog: () => void
 }
@@ -148,7 +147,7 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
   )
 
   const SubmitButton = (
-    <Dialog.TextButton
+    <DialogBeta.TextButton
       type="submit"
       form={formId}
       disabled={
@@ -161,7 +160,7 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
 
   return (
     <>
-      <Dialog.Header
+      <DialogBeta.Header
         title={
           <FormattedMessage
             defaultMessage="Email address"
@@ -172,10 +171,10 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
         rightBtn={editable ? SubmitButton : undefined}
       />
 
-      {editable && hasPassword && (
-        <>
-          <Dialog.Message noSpacingBottom>
-            <p className={styles.hint}>
+      <DialogBeta.Content>
+        {editable && hasPassword && (
+          <DialogBeta.Content.Message spacingBottom>
+            <p>
               <FormattedMessage
                 defaultMessage="For security, we will {resetHint} for this. You can set your password again after verifying new email address."
                 description="src/components/Dialogs/SetEmailDialog/Content.tsx"
@@ -191,14 +190,12 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
                 }}
               />
             </p>
-          </Dialog.Message>
-        </>
-      )}
+          </DialogBeta.Content.Message>
+        )}
 
-      {!editable && (
-        <>
-          <Dialog.Message noSpacingBottom>
-            <p className={styles.hint}>
+        {!editable && (
+          <DialogBeta.Content.Message spacingBottom>
+            <p>
               <FormattedMessage
                 defaultMessage="Email can be modified up to {count} times per day."
                 description="src/components/Dialogs/SetEmailDialog/Content.tsx"
@@ -207,14 +204,14 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
                 }}
               />
             </p>
-          </Dialog.Message>
-        </>
-      )}
+          </DialogBeta.Content.Message>
+        )}
 
-      <Dialog.Content>{InnerForm}</Dialog.Content>
+        {InnerForm}
+      </DialogBeta.Content>
 
       {editable && (
-        <Dialog.Footer
+        <DialogBeta.Footer
           smUpBtns={
             <>
               <Dialog.TextButton
@@ -228,7 +225,7 @@ const SetEmailDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
         />
       )}
       {!editable && (
-        <Dialog.Footer
+        <DialogBeta.Footer
           smUpBtns={
             <>
               <Dialog.TextButton
diff --git a/src/components/Dialogs/SetEmailDialog/index.tsx b/src/components/Dialogs/SetEmailDialog/index.tsx
index f73db5b708..42e5cabe60 100644
--- a/src/components/Dialogs/SetEmailDialog/index.tsx
+++ b/src/components/Dialogs/SetEmailDialog/index.tsx
@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic'
 
-import { Dialog, Spinner, useDialogSwitch } from '~/components'
+import { DialogBeta, Spinner, useDialogSwitch } from '~/components'
 
 interface SetEmailDialogProps {
   children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
@@ -15,15 +15,15 @@ const BaseSetEmailDialog = ({ children }: SetEmailDialogProps) => {
     <>
       {children({ openDialog })}
 
-      <Dialog isOpen={show} onDismiss={closeDialog}>
+      <DialogBeta isOpen={show} onDismiss={closeDialog}>
         <DynamicContent closeDialog={closeDialog} />
-      </Dialog>
+      </DialogBeta>
     </>
   )
 }
 
 export const SetEmailDialog = (props: SetEmailDialogProps) => (
-  <Dialog.Lazy mounted={<BaseSetEmailDialog {...props} />}>
+  <DialogBeta.Lazy mounted={<BaseSetEmailDialog {...props} />}>
     {({ openDialog }) => <>{props.children({ openDialog })}</>}
-  </Dialog.Lazy>
+  </DialogBeta.Lazy>
 )
diff --git a/src/components/Dialogs/SetEmailDialog/styles.module.css b/src/components/Dialogs/SetEmailDialog/styles.module.css
deleted file mode 100644
index 2152e6894b..0000000000
--- a/src/components/Dialogs/SetEmailDialog/styles.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.hint {
-  @media (--sm-up) {
-    margin-bottom: var(--spacing-base);
-  }
-}
diff --git a/src/components/Dialogs/SetPasswordDialog/Content.tsx b/src/components/Dialogs/SetPasswordDialog/Content.tsx
index 9fdf0bd014..d2c7e5b81c 100644
--- a/src/components/Dialogs/SetPasswordDialog/Content.tsx
+++ b/src/components/Dialogs/SetPasswordDialog/Content.tsx
@@ -12,9 +12,9 @@ import {
 } from '~/common/utils'
 import {
   Dialog,
+  DialogBeta,
   Form,
   LanguageContext,
-  Media,
   Spacer,
   toast,
   useMutation,
@@ -125,7 +125,7 @@ const SetPasswordDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
   )
 
   const SubmitButton = (
-    <Dialog.TextButton
+    <DialogBeta.TextButton
       type="submit"
       form={formId}
       disabled={isSubmitting || values.password.length < 8}
@@ -136,7 +136,7 @@ const SetPasswordDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
 
   return (
     <>
-      <Dialog.Header
+      <DialogBeta.Header
         title={
           <FormattedMessage
             defaultMessage="Login password"
@@ -147,21 +147,20 @@ const SetPasswordDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
         rightBtn={SubmitButton}
       />
 
-      <Dialog.Message>
-        <p>
-          <FormattedMessage
-            defaultMessage="Password must be at least 8 characters long, support letter, numbers and symbols."
-            description="src/components/Dialogs/SetPasswordDialog/Content.tsx"
-          />
-        </p>
-        <Media greaterThan="sm">
+      <DialogBeta.Content>
+        <DialogBeta.Content.Message>
+          <p>
+            <FormattedMessage
+              defaultMessage="Password must be at least 8 characters long, support letter, numbers and symbols."
+              description="src/components/Dialogs/SetPasswordDialog/Content.tsx"
+            />
+          </p>
           <Spacer size="base" />
-        </Media>
-      </Dialog.Message>
-
-      <Dialog.Content>{InnerForm}</Dialog.Content>
+        </DialogBeta.Content.Message>
+        {InnerForm}
+      </DialogBeta.Content>
 
-      <Dialog.Footer
+      <DialogBeta.Footer
         smUpBtns={
           <>
             <Dialog.TextButton
diff --git a/src/components/Dialogs/SetPasswordDialog/index.tsx b/src/components/Dialogs/SetPasswordDialog/index.tsx
index 47355b17ea..1ad1b9c00c 100644
--- a/src/components/Dialogs/SetPasswordDialog/index.tsx
+++ b/src/components/Dialogs/SetPasswordDialog/index.tsx
@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic'
 
-import { Dialog, Spinner, useDialogSwitch } from '~/components'
+import { DialogBeta, Spinner, useDialogSwitch } from '~/components'
 
 interface SetPasswordDialogProps {
   children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode
@@ -15,15 +15,15 @@ const BaseSetPasswordDialog = ({ children }: SetPasswordDialogProps) => {
     <>
       {children({ openDialog })}
 
-      <Dialog isOpen={show} onDismiss={closeDialog}>
+      <DialogBeta isOpen={show} onDismiss={closeDialog}>
         <DynamicContent closeDialog={closeDialog} />
-      </Dialog>
+      </DialogBeta>
     </>
   )
 }
 
 export const SetPasswordDialog = (props: SetPasswordDialogProps) => (
-  <Dialog.Lazy mounted={<BaseSetPasswordDialog {...props} />}>
+  <DialogBeta.Lazy mounted={<BaseSetPasswordDialog {...props} />}>
     {({ openDialog }) => <>{props.children({ openDialog })}</>}
-  </Dialog.Lazy>
+  </DialogBeta.Lazy>
 )
diff --git a/src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx b/src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx
index 1cf2b12ed9..a373a3a35c 100644
--- a/src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx
+++ b/src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { PATHS } from '~/common/enums'
-import { Dialog, toast, useMutation, useRoute } from '~/components'
+import { DialogBeta, toast, useMutation, useRoute } from '~/components'
 import { SetUserNameMutation } from '~/gql/graphql'
 import { USER_PROFILE_PUBLIC } from '~/views/User/UserProfile/gql'
 
@@ -68,7 +68,7 @@ const ConfirmStep: React.FC<Props> = ({ userName, back, closeDialog }) => {
 
   return (
     <>
-      <Dialog.Header
+      <DialogBeta.Header
         title={
           <FormattedMessage
             defaultMessage="Confirm Matters ID"
@@ -76,23 +76,24 @@ const ConfirmStep: React.FC<Props> = ({ userName, back, closeDialog }) => {
           />
         }
       />
+      <DialogBeta.Content>
+        <DialogBeta.Content.Message>
+          <p>
+            <FormattedMessage
+              defaultMessage="This ID cannot be modified. Are you sure you want to use {id} as your Matters ID?"
+              description="src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx"
+              values={{
+                id: <span className="u-highlight">{userName}</span>,
+              }}
+            />
+          </p>
+        </DialogBeta.Content.Message>
+      </DialogBeta.Content>
 
-      <Dialog.Message>
-        <p>
-          <FormattedMessage
-            defaultMessage="This ID cannot be modified. Are you sure you want to use {id} as your Matters ID?"
-            description="src/components/Dialogs/SetUserNameDialog/ConfirmStep.tsx"
-            values={{
-              id: <span className="u-highlight">{userName}</span>,
-            }}
-          />
-        </p>
-      </Dialog.Message>
-
-      <Dialog.Footer
+      <DialogBeta.Footer
         btns={
           <>
-            <Dialog.RoundedButton
+            <DialogBeta.RoundedButton
               disabled={loading}
               text={
                 <FormattedMessage
@@ -103,7 +104,7 @@ const ConfirmStep: React.FC<Props> = ({ userName, back, closeDialog }) => {
               loading={loading}
               onClick={confirmUse}
             />
-            <Dialog.RoundedButton
+            <DialogBeta.RoundedButton
               text={<FormattedMessage defaultMessage="Back" />}
               color="greyDarker"
               onClick={back}
@@ -112,12 +113,12 @@ const ConfirmStep: React.FC<Props> = ({ userName, back, closeDialog }) => {
         }
         smUpBtns={
           <>
-            <Dialog.TextButton
+            <DialogBeta.TextButton
               text={<FormattedMessage defaultMessage="Back" />}
               color="greyDarker"
               onClick={back}
             />
-            <Dialog.TextButton
+            <DialogBeta.TextButton
               disabled={loading}
               text={
                 <FormattedMessage
diff --git a/src/components/Dialogs/SetUserNameDialog/InputStep.tsx b/src/components/Dialogs/SetUserNameDialog/InputStep.tsx
index 401be49c49..24436b2bd5 100644
--- a/src/components/Dialogs/SetUserNameDialog/InputStep.tsx
+++ b/src/components/Dialogs/SetUserNameDialog/InputStep.tsx
@@ -10,13 +10,7 @@ import {
   MIN_USER_NAME_LENGTH,
 } from '~/common/enums'
 import { normalizeUserName, validateUserName } from '~/common/utils'
-import {
-  Dialog,
-  Form,
-  LanguageContext,
-  Spacer,
-  ViewerContext,
-} from '~/components'
+import { DialogBeta, Form, LanguageContext, ViewerContext } from '~/components'
 
 import Field from '../../Form/Field'
 import { QUERY_USER_NAME } from './gql'
@@ -153,7 +147,7 @@ const InputStep: React.FC<Props> = ({ userName, gotoConfirm }) => {
   )
 
   const SubmitButton = (
-    <Dialog.TextButton
+    <DialogBeta.TextButton
       type="submit"
       form={formId}
       disabled={isSubmitting || values.userName.length < MIN_USER_NAME_LENGTH}
@@ -164,7 +158,7 @@ const InputStep: React.FC<Props> = ({ userName, gotoConfirm }) => {
 
   return (
     <>
-      <Dialog.Header
+      <DialogBeta.Header
         title={
           isLegacyUserConfirm ? (
             <FormattedMessage
@@ -179,29 +173,29 @@ const InputStep: React.FC<Props> = ({ userName, gotoConfirm }) => {
           )
         }
       />
-
-      <Dialog.Message>
-        <p>
-          {isLegacyUserConfirm ? (
-            <FormattedMessage
-              defaultMessage="In order to ensure the identity security of the citizens of Matters City, we've upgraded some security settings. Please confirm your Matters ID (cannot be modified once confirmation)."
-              description="src/components/Dialogs/SetUserNameDialog/Content.tsx"
-            />
-          ) : (
-            <FormattedMessage
-              defaultMessage="Matters ID is your unique identifier, and cannot be modified once set."
-              description="src/components/Dialogs/SetUserNameDialog/Content.tsx"
-            />
-          )}
-        </p>
-      </Dialog.Message>
-      <Spacer size="base" />
-      <Dialog.Content>{InnerForm}</Dialog.Content>
-
-      <Dialog.Footer
+      <DialogBeta.Content>
+        <DialogBeta.Content.Message spacingBottom>
+          <p>
+            {isLegacyUserConfirm ? (
+              <FormattedMessage
+                defaultMessage="In order to ensure the identity security of the citizens of Matters City, we've upgraded some security settings. Please confirm your Matters ID (cannot be modified once confirmation)."
+                description="src/components/Dialogs/SetUserNameDialog/Content.tsx"
+              />
+            ) : (
+              <FormattedMessage
+                defaultMessage="Matters ID is your unique identifier, and cannot be modified once set."
+                description="src/components/Dialogs/SetUserNameDialog/Content.tsx"
+              />
+            )}
+          </p>
+        </DialogBeta.Content.Message>
+        {InnerForm}
+      </DialogBeta.Content>
+
+      <DialogBeta.Footer
         btns={
           <>
-            <Dialog.RoundedButton
+            <DialogBeta.RoundedButton
               type="submit"
               color="green"
               form={formId}
diff --git a/src/components/Dialogs/SetUserNameDialog/index.tsx b/src/components/Dialogs/SetUserNameDialog/index.tsx
index ffda527c58..6ead14e874 100644
--- a/src/components/Dialogs/SetUserNameDialog/index.tsx
+++ b/src/components/Dialogs/SetUserNameDialog/index.tsx
@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic'
 
 import { OPEN_SET_USER_NAME_DIALOG } from '~/common/enums'
 import {
-  Dialog,
+  DialogBeta,
   Spinner,
   useDialogSwitch,
   useEventListener,
@@ -21,9 +21,9 @@ const BaseSetUserNameDialog = ({ children }: SetUserNameDialogProps) => {
     <>
       {children && children({ openDialog })}
 
-      <Dialog isOpen={show} onDismiss={closeDialog} dismissOnHandle={false}>
+      <DialogBeta isOpen={show} onDismiss={closeDialog} dismissOnHandle={false}>
         <DynamicContent closeDialog={closeDialog} />
-      </Dialog>
+      </DialogBeta>
     </>
   )
 }
@@ -35,8 +35,8 @@ export const SetUserNameDialog = (props: SetUserNameDialogProps) => {
   }
 
   return (
-    <Dialog.Lazy mounted={<BaseSetUserNameDialog {...props} />}>
+    <DialogBeta.Lazy mounted={<BaseSetUserNameDialog {...props} />}>
       {({ openDialog }) => <Children openDialog={openDialog} />}
-    </Dialog.Lazy>
+    </DialogBeta.Lazy>
   )
 }
diff --git a/src/components/Forms/EmailLoginForm/index.tsx b/src/components/Forms/EmailLoginForm/index.tsx
index 4340186000..b889288105 100644
--- a/src/components/Forms/EmailLoginForm/index.tsx
+++ b/src/components/Forms/EmailLoginForm/index.tsx
@@ -24,7 +24,7 @@ import {
   AuthNormalFeed,
   AuthTabs,
   AuthWalletFeed,
-  Dialog,
+  DialogBeta,
   Form,
   IconLeft20,
   LanguageContext,
@@ -308,7 +308,7 @@ export const EmailLoginForm: React.FC<FormProps> = ({
   )
 
   const SubmitButton = (
-    <Dialog.TextButton
+    <DialogBeta.TextButton
       type="submit"
       form={formId}
       disabled={!values.email || !values.password || isSubmitting}
@@ -320,11 +320,11 @@ export const EmailLoginForm: React.FC<FormProps> = ({
   return (
     <>
       {!isSelectMethod && (
-        <Dialog.Header
+        <DialogBeta.Header
           title={<FormattedMessage defaultMessage="Sign In" />}
           hasSmUpTitle={false}
           leftBtn={
-            <Dialog.TextButton
+            <DialogBeta.TextButton
               text={<FormattedMessage defaultMessage="Back" />}
               color="greyDarker"
               onClick={() => {
@@ -337,7 +337,7 @@ export const EmailLoginForm: React.FC<FormProps> = ({
         />
       )}
 
-      <Dialog.Content noMaxHeight={isInPage}>
+      <DialogBeta.Content noMaxHeight={isInPage}>
         <Media at="sm">
           {isSelectMethod && (
             <AuthTabs
@@ -362,15 +362,13 @@ export const EmailLoginForm: React.FC<FormProps> = ({
           />
         )}
         {isWallet && <AuthWalletFeed submitCallback={gotoWalletConnect} />}
-      </Dialog.Content>
+      </DialogBeta.Content>
 
       {isNormal && !isSelectMethod && (
-        <Dialog.Footer
-          smUpContentNoSpacingBottom={isInPage}
-          smUpSpaceBetween
+        <DialogBeta.Footer
           smUpBtns={
-            <>
-              <Dialog.TextButton
+            <section className={styles.footerBtns}>
+              <DialogBeta.TextButton
                 text={
                   <TextIcon icon={<IconLeft20 size="mdS" />} spacing="xxxtight">
                     <FormattedMessage defaultMessage="Back" />
@@ -382,14 +380,14 @@ export const EmailLoginForm: React.FC<FormProps> = ({
                 }}
               />
               {SubmitButton}
-            </>
+            </section>
           }
         />
       )}
       {((isNormal && isSelectMethod) || isWallet) && !isInPage && (
-        <Dialog.Footer
+        <DialogBeta.Footer
           smUpBtns={
-            <Dialog.TextButton
+            <DialogBeta.TextButton
               color="greyDarker"
               text={<FormattedMessage defaultMessage="Close" />}
               onClick={closeDialog}
diff --git a/src/components/Forms/EmailLoginForm/styles.module.css b/src/components/Forms/EmailLoginForm/styles.module.css
index 100915f25d..0d3614558c 100644
--- a/src/components/Forms/EmailLoginForm/styles.module.css
+++ b/src/components/Forms/EmailLoginForm/styles.module.css
@@ -47,4 +47,12 @@
 
 .footer {
   @mixin flex-center-all;
+
+  margin-top: var(--spacing-base);
+}
+
+.footerBtns {
+  @mixin flex-center-space-between;
+
+  flex: 1;
 }
diff --git a/src/components/Forms/EmailSignUpForm/Init.tsx b/src/components/Forms/EmailSignUpForm/Init.tsx
index 18f25f0155..11737a4f94 100644
--- a/src/components/Forms/EmailSignUpForm/Init.tsx
+++ b/src/components/Forms/EmailSignUpForm/Init.tsx
@@ -13,7 +13,7 @@ import {
   AuthFeedType,
   AuthTabs,
   AuthWalletFeed,
-  Dialog,
+  DialogBeta,
   Form,
   IconLeft20,
   LanguageContext,
@@ -25,6 +25,8 @@ import {
 import SEND_CODE from '~/components/GQL/mutations/sendCode'
 import { SendVerificationCodeMutation } from '~/gql/graphql'
 
+import styles from './styles.module.css'
+
 interface FormProps {
   purpose: 'dialog' | 'page'
   submitCallback: (email: string) => void
@@ -134,7 +136,7 @@ const Init: React.FC<FormProps> = ({
   )
 
   const SubmitButton = (
-    <Dialog.TextButton
+    <DialogBeta.TextButton
       type="submit"
       form={formId}
       disabled={
@@ -152,11 +154,11 @@ const Init: React.FC<FormProps> = ({
 
   return (
     <>
-      <Dialog.Header
+      <DialogBeta.Header
         title={<FormattedMessage defaultMessage="Sign Up" />}
         hasSmUpTitle={false}
         leftBtn={
-          <Dialog.TextButton
+          <DialogBeta.TextButton
             text={<FormattedMessage defaultMessage="Back" />}
             color="greyDarker"
             onClick={back}
@@ -166,7 +168,7 @@ const Init: React.FC<FormProps> = ({
         rightBtn={SubmitButton}
       />
 
-      <Dialog.Content>
+      <DialogBeta.Content>
         <Media at="sm">{InnerForm}</Media>
         <Media greaterThan="sm">
           <AuthTabs
@@ -178,15 +180,13 @@ const Init: React.FC<FormProps> = ({
           {isNormal && <>{InnerForm}</>}
           {isWallet && <AuthWalletFeed submitCallback={gotoWalletConnect} />}
         </Media>
-      </Dialog.Content>
+      </DialogBeta.Content>
 
       {isNormal && (
-        <Dialog.Footer
-          smUpContentNoSpacingBottom={isInPage}
-          smUpSpaceBetween
+        <DialogBeta.Footer
           smUpBtns={
-            <>
-              <Dialog.TextButton
+            <section className={styles.footerBtns}>
+              <DialogBeta.TextButton
                 text={
                   <TextIcon icon={<IconLeft20 size="mdS" />} spacing="xxxtight">
                     <FormattedMessage defaultMessage="Back" />
@@ -197,14 +197,14 @@ const Init: React.FC<FormProps> = ({
               />
 
               {SubmitButton}
-            </>
+            </section>
           }
         />
       )}
       {isWallet && !isInPage && (
-        <Dialog.Footer
+        <DialogBeta.Footer
           smUpBtns={
-            <Dialog.TextButton
+            <DialogBeta.TextButton
               color="greyDarker"
               text={<FormattedMessage defaultMessage="Close" />}
               onClick={closeDialog}
diff --git a/src/components/Forms/EmailSignUpForm/styles.module.css b/src/components/Forms/EmailSignUpForm/styles.module.css
index 6502155fc2..0f2ba323ef 100644
--- a/src/components/Forms/EmailSignUpForm/styles.module.css
+++ b/src/components/Forms/EmailSignUpForm/styles.module.css
@@ -2,3 +2,9 @@
   padding: var(--spacing-base);
   text-align: center;
 }
+
+.footerBtns {
+  @mixin flex-center-space-between;
+
+  flex: 1;
+}
diff --git a/src/components/Forms/SelectAuthMethodForm/index.tsx b/src/components/Forms/SelectAuthMethodForm/index.tsx
index 73b9d023c2..2e061084f2 100644
--- a/src/components/Forms/SelectAuthMethodForm/index.tsx
+++ b/src/components/Forms/SelectAuthMethodForm/index.tsx
@@ -8,7 +8,7 @@ import {
   AuthNormalFeed,
   AuthTabs,
   AuthWalletFeed,
-  Dialog,
+  DialogBeta,
 } from '~/components'
 
 interface FormProps {
@@ -68,12 +68,14 @@ export const SelectAuthMethodForm: React.FC<FormProps> = ({
 
   return (
     <>
-      <Dialog.Content noMaxHeight={isInPage}>{InnerForm}</Dialog.Content>
+      <DialogBeta.Content noMaxHeight={isInPage}>
+        {InnerForm}
+      </DialogBeta.Content>
 
       {isInDialog && (
-        <Dialog.Footer
+        <DialogBeta.Footer
           smUpBtns={
-            <Dialog.TextButton
+            <DialogBeta.TextButton
               color="greyDarker"
               text={<FormattedMessage defaultMessage="Close" />}
               onClick={closeDialog}
diff --git a/src/components/Forms/Verification/LinkSent.tsx b/src/components/Forms/Verification/LinkSent.tsx
index 69c8863bfd..8608821581 100644
--- a/src/components/Forms/Verification/LinkSent.tsx
+++ b/src/components/Forms/Verification/LinkSent.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl'
 
 import { PATHS } from '~/common/enums'
-import { Dialog, Layout, Translate, useRoute } from '~/components'
+import { Dialog, DialogBeta, Layout, Translate, useRoute } from '~/components'
 
 import styles from './styles.module.css'
 
@@ -23,7 +23,7 @@ export const VerificationLinkSent = ({
   if (isRegister) {
     return (
       <>
-        <Dialog.Header
+        <DialogBeta.Header
           title={
             <FormattedMessage
               defaultMessage="Check your inbox"
@@ -34,22 +34,24 @@ export const VerificationLinkSent = ({
           closeText={<FormattedMessage defaultMessage="Close" />}
         />
 
-        <Dialog.Message>
-          <p>
-            <FormattedMessage
-              defaultMessage="The login link has been sent to {email}"
-              description="src/components/Forms/Verification/LinkSent.tsx"
-              values={{
-                email: <span className={styles.email}>{email}</span>,
-              }}
-            />
-          </p>
-        </Dialog.Message>
+        <DialogBeta.Content>
+          <DialogBeta.Content.Message>
+            <p>
+              <FormattedMessage
+                defaultMessage="The login link has been sent to {email}"
+                description="src/components/Forms/Verification/LinkSent.tsx"
+                values={{
+                  email: <span className={styles.email}>{email}</span>,
+                }}
+              />
+            </p>
+          </DialogBeta.Content.Message>
+        </DialogBeta.Content>
 
         {closeDialog && (
-          <Dialog.Footer
+          <DialogBeta.Footer
             smUpBtns={
-              <Dialog.TextButton
+              <DialogBeta.TextButton
                 text={<FormattedMessage defaultMessage="Close" />}
                 color="greyDarker"
                 onClick={closeDialog}
@@ -59,15 +61,15 @@ export const VerificationLinkSent = ({
         )}
 
         {isInPage && (
-          <Dialog.Footer
+          <DialogBeta.Footer
             btns={
-              <Dialog.RoundedButton
+              <DialogBeta.RoundedButton
                 text={<FormattedMessage defaultMessage="Enter Matters" />}
                 onClick={() => router.push(PATHS.HOME)}
               />
             }
             smUpBtns={
-              <Dialog.TextButton
+              <DialogBeta.TextButton
                 text={<FormattedMessage defaultMessage="Enter Matters" />}
                 onClick={() => router.push(PATHS.HOME)}
               />
diff --git a/src/components/Forms/WalletAuthForm/Connect.tsx b/src/components/Forms/WalletAuthForm/Connect.tsx
index d4801aafe3..959ac61bd0 100644
--- a/src/components/Forms/WalletAuthForm/Connect.tsx
+++ b/src/components/Forms/WalletAuthForm/Connect.tsx
@@ -22,7 +22,7 @@ import {
 import {
   AuthFeedType,
   AuthTabs,
-  Dialog,
+  DialogBeta,
   IconLeft20,
   IconMetamask22,
   IconSpinner22,
@@ -252,12 +252,12 @@ const Connect: React.FC<FormProps> = ({
   return (
     <>
       {isLogin && (
-        <Dialog.Header
+        <DialogBeta.Header
           title={<>{isMetamask ? 'MetaMask' : 'WalletConnect'}</>}
           hasSmUpTitle={false}
           leftBtn={
             back ? (
-              <Dialog.TextButton
+              <DialogBeta.TextButton
                 text={<FormattedMessage defaultMessage="Back" />}
                 onClick={onBack}
                 color="greyDarker"
@@ -268,7 +268,7 @@ const Connect: React.FC<FormProps> = ({
         />
       )}
 
-      <Dialog.Content>
+      <DialogBeta.Content>
         {isLogin && (
           <Media greaterThan="sm">
             <AuthTabs
@@ -303,14 +303,12 @@ const Connect: React.FC<FormProps> = ({
             />
           </span>
         </section>
-      </Dialog.Content>
+      </DialogBeta.Content>
 
-      <Dialog.Footer
-        smUpContentNoSpacingBottom={isInPage}
-        smUpSpaceBetween
+      <DialogBeta.Footer
         smUpBtns={
           <>
-            <Dialog.TextButton
+            <DialogBeta.TextButton
               text={
                 <TextIcon icon={<IconLeft20 size="mdS" />} spacing="xxxtight">
                   <FormattedMessage
@@ -324,7 +322,7 @@ const Connect: React.FC<FormProps> = ({
             />
 
             {isInDialog && (
-              <Dialog.TextButton
+              <DialogBeta.TextButton
                 text={<FormattedMessage defaultMessage="Close" />}
                 color="greyDarker"
                 onClick={onCloseDialog}
diff --git a/src/components/Forms/WalletAuthForm/styles.module.css b/src/components/Forms/WalletAuthForm/styles.module.css
index a504e1c6c5..0cbad5f1fc 100644
--- a/src/components/Forms/WalletAuthForm/styles.module.css
+++ b/src/components/Forms/WalletAuthForm/styles.module.css
@@ -95,10 +95,13 @@
   gap: var(--spacing-tight);
   align-self: stretch;
   height: 6.88rem;
-  margin-bottom: var(--spacing-loose);
   font-size: var(--font-size-sm);
   line-height: 1.375rem;
   color: var(--color-grey-darker);
   background: var(--color-green-lighter);
   border-radius: 0.5rem;
+
+  @media (--sm-up) {
+    margin-bottom: var(--spacing-xx-tight);
+  }
 }
diff --git a/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx b/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx
index 1a8eb7a855..e5e0f9106d 100644
--- a/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx
+++ b/src/components/GlobalDialogs/UniversalAuthDialog/index.tsx
@@ -10,7 +10,7 @@ import {
 import { WalletType } from '~/common/utils'
 import {
   AuthFeedType,
-  Dialog,
+  DialogBeta,
   ReCaptchaProvider,
   Spinner,
   useDialogSwitch,
@@ -90,7 +90,11 @@ const BaseUniversalAuthDialog = () => {
   )
 
   return (
-    <Dialog isOpen={show} onDismiss={closeDialog} testId={TEST_ID.DIALOG_AUTH}>
+    <DialogBeta
+      isOpen={show}
+      onDismiss={closeDialog}
+      testId={TEST_ID.DIALOG_AUTH}
+    >
       {currStep === 'select-login-method' && (
         <DynamicSelectAuthMethodForm
           purpose="dialog"
@@ -166,7 +170,7 @@ const BaseUniversalAuthDialog = () => {
           email={email}
         />
       )}
-    </Dialog>
+    </DialogBeta>
   )
 }
 
@@ -182,9 +186,9 @@ const UniversalAuthDialog = () => {
   }
 
   return (
-    <Dialog.Lazy mounted={<BaseUniversalAuthDialog />}>
+    <DialogBeta.Lazy mounted={<BaseUniversalAuthDialog />}>
       {({ openDialog }) => <Children openDialog={openDialog} />}
-    </Dialog.Lazy>
+    </DialogBeta.Lazy>
   )
 }
 
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 4c8fe89e30..f1f348b9bd 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -13,6 +13,7 @@ export * from './Cover'
 export * from './CurrencyFormatter'
 export * from './DateTime'
 export * from './Dialog'
+export * from './DialogBeta'
 export * from './Error'
 export * from './Expandable'
 export * from './Form'
diff --git a/src/views/Auth/Universal/styles.module.css b/src/views/Auth/Universal/styles.module.css
index f693216761..4f0a2f08d4 100644
--- a/src/views/Auth/Universal/styles.module.css
+++ b/src/views/Auth/Universal/styles.module.css
@@ -23,4 +23,6 @@
 
 .footer {
   @mixin flex-center-all;
+
+  margin-top: var(--spacing-base);
 }