diff --git a/packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx b/packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx
index 4d64c387..aa6d4681 100644
--- a/packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx
+++ b/packages/@justverified/plugin/src/lib/dialogs/JustVerifiedDialog/index.tsx
@@ -124,7 +124,6 @@ export const JustVerifiedDialog: FC<JustVerifiedDialogProps> = ({
             gap: '20px',
             display: 'flex',
             flexDirection: 'column',
-            maxWidth: '500px',
           }}
         >
           <Flex justify="space-between" direction="row" gap="10px">
diff --git a/packages/@justweb3/ui/src/lib/ui/Dialog/Dialog.module.css b/packages/@justweb3/ui/src/lib/ui/Dialog/Dialog.module.css
index 1d4a0c90..d69666ae 100644
--- a/packages/@justweb3/ui/src/lib/ui/Dialog/Dialog.module.css
+++ b/packages/@justweb3/ui/src/lib/ui/Dialog/Dialog.module.css
@@ -1,120 +1,147 @@
 /* Overlay styles */
 .overlay {
-    position: fixed;
-    inset: 0;
-    transition: backdrop-filter 100ms ease;
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    animation: overlayShow 700ms cubic-bezier(0.16, 1, 0.3, 1);
+  position: fixed;
+  inset: 0;
+  transition: backdrop-filter 100ms ease;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  animation: overlayShow 700ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @keyframes overlayShow {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Content styles */
 .content {
-    background-color: var(--justweb3-background-color);
-    box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.33);
-    position: fixed;
-    z-index: 9999;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: 40px;
-    transition: all 0.4s ease-in-out;
-    animation: contentShow 700ms cubic-bezier(0.16, 1, 0.3, 1);
-    border-radius: 24px;
-    width: fit-content;
-    max-width: min(1200px, 90vw);
-    min-width: 390px;
-    min-height: 200px;
-    max-height: 80vh;
+  background-color: var(--justweb3-background-color);
+  box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.33);
+  position: fixed;
+  z-index: 9999;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 40px;
+  transition: all 0.4s ease-in-out;
+  animation: contentShow 700ms cubic-bezier(0.16, 1, 0.3, 1);
+  border-radius: 24px;
+  width: fit-content;
+  max-width: min(1200px, 90vw);
+  min-width: 390px;
+  min-height: 200px;
+  max-height: 80vh;
 }
 
 .content:focus {
-    outline: none;
+  outline: none;
 }
 
 @keyframes contentShow {
-    from {
-        opacity: 0;
-        transform: translate(-50%, -50%) scale(0.6);
-    }
-    to {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-    }
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
 }
 
-@media (max-width: 768px) {
-    .content {
-        width: 100vw;
-        max-width: 100vw;
-        min-width: 100vw;
-        max-height: 100vh;
-        border-radius: 0;
-    }
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
-/* Fullscreen modifier */
-.fullScreen {
-    border-radius: 0;
+@keyframes slideDown {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@media (max-width: 768px) {
+  .content {
     width: 100vw;
-    max-width: 100vw;
+    max-width: 100vw !important;
     min-width: 100vw;
-    min-height: 100vh;
     max-height: 100vh;
+    border-radius: 24px 24px 0 0;
+    bottom: 0;
+    left: 0;
+    top: auto;
+    transform: translateY(0);
+    animation: slideUp 550ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .content[data-state='closed'] {
+    animation: slideDown 550ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+
+/* Fullscreen modifier */
+.fullScreen {
+  border-radius: 0;
+  width: 100vw;
+  max-width: 100vw;
+  min-width: 100vw;
+  min-height: 100vh;
+  max-height: 100vh;
 }
 
 /* Title styles */
 .title {
-    margin: 0;
-    font-weight: 500;
-    font-family: var(--justweb3-font-family), serif;
-    color: black;
-    font-size: 17px;
+  margin: 0;
+  font-weight: 500;
+  font-family: var(--justweb3-font-family), serif;
+  color: black;
+  font-size: 17px;
 }
 
 /* Description styles */
 .description {
-    margin: 10px 0 20px;
-    font-family: var(--justweb3-font-family), serif;
-    color: #6b7280;
-    font-size: 15px;
-    line-height: 1.5;
+  margin: 10px 0 20px;
+  font-family: var(--justweb3-font-family), serif;
+  color: #6b7280;
+  font-size: 15px;
+  line-height: 1.5;
 }
 
 /* DialogHeader styles */
 .dialogHeader {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
 }
 
 .dialogHeader > * + * {
-    margin-top: 0.375rem; /* Equivalent to space-y-1.5 in Tailwind CSS */
+  margin-top: 0.375rem; /* Equivalent to space-y-1.5 in Tailwind CSS */
 }
 
 /* DialogFooter styles */
 .dialogFooter {
-    display: flex;
-    flex-direction: column-reverse;
-    padding-top: 20px;
+  display: flex;
+  flex-direction: column-reverse;
+  padding-top: 20px;
 }
 
 @media (min-width: 768px) {
-    .dialogFooter {
-        flex-direction: row;
-        justify-content: flex-end;
-    }
-
-    .dialogFooter > * + * {
-        margin-left: 8px; /* Equivalent to space-x-2 in Tailwind CSS */
-    }
+  .dialogFooter {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
+  .dialogFooter > * + * {
+    margin-left: 8px; /* Equivalent to space-x-2 in Tailwind CSS */
+  }
 }
diff --git a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/JustWeb3Button.module.css b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/JustWeb3Button.module.css
new file mode 100644
index 00000000..a954adf3
--- /dev/null
+++ b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/JustWeb3Button.module.css
@@ -0,0 +1,17 @@
+.desktopSection {
+  display: none;
+}
+
+.mobileSection {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .desktopSection {
+    display: block;
+  }
+
+  .mobileSection {
+    display: none;
+  }
+}
diff --git a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx
index e1d653c4..6428f7d0 100644
--- a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx
+++ b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx
@@ -31,6 +31,8 @@ import { MAppsDialog } from '../../dialogs/MAppsDialog';
 import { getChainIcon } from '../../icons/chain-icons';
 import { getTextRecordIcon } from '../../icons/records-icons';
 import MetadataCard from '../MetadataCard';
+import { DefaultDialog } from '../../dialogs/DefaultDialog';
+import styles from './JustWeb3Button.module.css';
 
 export interface JustWeb3Buttonrops {
   children: ReactNode;
@@ -45,6 +47,7 @@ export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
   const { plugins, mApps } = useContext(JustWeb3Context);
   const { createPluginApi } = useContext(PluginContext);
   const { address } = useMountedAccount();
+  const [mobileDialogOpen, setMobileDialogOpen] = useState(false);
   const { disconnect } = useDisconnect();
   const {
     connectedEns,
@@ -155,203 +158,234 @@ export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
     return children;
   }
 
-  return (
-    <>
-      <MAppsDialog open={openMApps} handleOpenDialog={handleOpenMAppsDialog} />
-      <Popover>
-        <PopoverTrigger>
-          <ClickableItem
-            title={
+  const connectedEnsBtn = (withDialog: boolean) => {
+    return (
+      <ClickableItem
+        title={
+          <P
+            style={{
+              fontWeight: 700,
+              color: 'var(--justweb3-primary-color)',
+              fontSize: '12px',
+            }}
+          >
+            {connectedEns.ens}
+          </P>
+        }
+        left={<Avatar src={avatar} />}
+        style={{
+          backgroundColor: 'var(--justweb3-background-color)',
+          color: 'var(--justweb3-primary-color)',
+        }}
+        contentStyle={{
+          alignItems: 'start',
+        }}
+        onClick={() => {
+          if (withDialog) {
+            setMobileDialogOpen(true);
+          }
+        }}
+      // right={
+      //   <Badge
+      //     withCopy={false}
+      //     style={{
+      //       padding: '5px',
+      //       fontSize: '10px',
+      //       fontWeight: 800,
+      //     }}
+      //   >
+      //     {address && formatText(address, 4)}
+      //     <WalletIcon width={15} />
+      //   </Badge>
+      // }
+      />
+    )
+  }
+
+  const connectedEnsProfileContent = (
+    <Flex direction="column" gap={'10px'}>
+      <Flex direction="column" gap={'10px'}>
+        <Flex direction="row" align="center" justify="space-between">
+          <P
+            style={{
+              fontSize: '12px',
+              fontWeight: 300,
+            }}
+          >
+            Profile Overview
+          </P>
+          <Button
+            variant={'primary'}
+            size={'sm'}
+            rightIcon={
+              <ArrowWhiteIcon
+                width={15}
+                color={'var(--justweb3-primary-color-foreground)'}
+              />
+            }
+            onClick={() => {
+              openEnsProfile(connectedEns?.ens, connectedEns?.chainId);
+            }}
+          >
+            View Full Profile
+          </Button>
+        </Flex>
+        {/* Profile */}
+        <Flex
+          direction="column"
+          gap="15px"
+          padding="10px"
+          border="1px solid #E5E5E5"
+          borderRadius="16px"
+        >
+          <Flex direction="row" align="center" gap="10px">
+            <Avatar src={avatar} size={62} borderSize={'4px'} />
+            <Flex direction="column" gap="5px" justify="flex-start">
               <P
                 style={{
+                  fontSize: '14px',
                   fontWeight: 700,
+                  textAlign: 'left',
+                }}
+              >
+                {records?.sanitizedRecords.display ?? connectedEns.ens}
+              </P>
+              <Badge
+                style={{
+                  fontSize: '10px',
                   color: 'var(--justweb3-primary-color)',
-                  fontSize: '12px',
                 }}
+                withCopy
+                value={connectedEns.ens}
               >
                 {connectedEns.ens}
-              </P>
-            }
-            left={<Avatar src={avatar} />}
+              </Badge>
+            </Flex>
+          </Flex>
+          <Flex
+            direction="row"
+            align="center"
+            gap="10px"
+            justify="flex-start"
+            className={'justweb3scrollbar'}
             style={{
-              backgroundColor: 'var(--justweb3-background-color)',
-              color: 'var(--justweb3-primary-color)',
-            }}
-            contentStyle={{
-              alignItems: 'start',
+              overflowX: 'auto',
+              width: '100%',
+              paddingBottom: '0px',
             }}
-            // right={
-            //   <Badge
-            //     withCopy={false}
-            //     style={{
-            //       padding: '5px',
-            //       fontSize: '10px',
-            //       fontWeight: 800,
-            //     }}
-            //   >
-            //     {address && formatText(address, 4)}
-            //     <WalletIcon width={15} />
-            //   </Badge>
-            // }
-          />
-        </PopoverTrigger>
+          >
+            <MetadataCard
+              variant="address"
+              title="Address"
+              value={connectedEns.address}
+              icon={getChainIcon('eth')}
+            />
+            {!!hasTwitterOrX && (
+              <MetadataCard
+                variant="social"
+                title={hasTwitterOrX.key}
+                value={hasTwitterOrX.value}
+                icon={getTextRecordIcon(hasTwitterOrX.key)}
+              />
+            )}
+            {!!records?.sanitizedRecords.email && (
+              <MetadataCard
+                variant="social"
+                title="Email"
+                value={records?.sanitizedRecords.email}
+                icon={getTextRecordIcon('email')}
+              />
+            )}
+          </Flex>
+        </Flex>
+      </Flex>
+      <Flex direction="column" gap={'10px'}>
+        {plugins.map((plugin) => {
+          const component = plugin.components?.SignInMenu;
+          if (!component) {
+            return null;
+          }
 
-        <BasePopoverContent sideOffset={10} align={'end'}>
-          <Flex direction="column" gap={'10px'}>
-            <Flex direction="column" gap={'10px'}>
-              <Flex direction="row" align="center" justify="space-between">
-                <P
-                  style={{
-                    fontSize: '12px',
-                    fontWeight: 300,
-                  }}
-                >
-                  Profile Overview
-                </P>
-                <Button
-                  variant={'primary'}
-                  size={'sm'}
-                  rightIcon={
-                    <ArrowWhiteIcon
-                      width={15}
-                      color={'var(--justweb3-primary-color-foreground)'}
-                    />
-                  }
-                  onClick={() => {
-                    openEnsProfile(connectedEns?.ens, connectedEns?.chainId);
-                  }}
-                >
-                  View Full Profile
-                </Button>
-              </Flex>
-              {/* Profile */}
-              <Flex
-                direction="column"
-                gap="15px"
-                padding="10px"
-                border="1px solid #E5E5E5"
-                borderRadius="16px"
-              >
-                <Flex direction="row" align="center" gap="10px">
-                  <Avatar src={avatar} size={62} borderSize={'4px'} />
-                  <Flex direction="column" gap="5px" justify="flex-start">
-                    <P
-                      style={{
-                        fontSize: '14px',
-                        fontWeight: 700,
-                        textAlign: 'left',
-                      }}
-                    >
-                      {records?.sanitizedRecords.display ?? connectedEns.ens}
-                    </P>
-                    <Badge
-                      style={{
-                        fontSize: '10px',
-                        color: 'var(--justweb3-primary-color)',
-                      }}
-                      withCopy
-                      value={connectedEns.ens}
-                    >
-                      {connectedEns.ens}
-                    </Badge>
-                  </Flex>
-                </Flex>
-                <Flex
-                  direction="row"
-                  align="center"
-                  gap="10px"
-                  justify="flex-start"
-                  className={'justweb3scrollbar'}
-                  style={{
-                    overflowX: 'auto',
-                    width: '100%',
-                    paddingBottom: '0px',
-                  }}
-                >
-                  <MetadataCard
-                    variant="address"
-                    title="Address"
-                    value={connectedEns.address}
-                    icon={getChainIcon('eth')}
-                  />
-                  {!!hasTwitterOrX && (
-                    <MetadataCard
-                      variant="social"
-                      title={hasTwitterOrX.key}
-                      value={hasTwitterOrX.value}
-                      icon={getTextRecordIcon(hasTwitterOrX.key)}
-                    />
-                  )}
-                  {!!records?.sanitizedRecords.email && (
-                    <MetadataCard
-                      variant="social"
-                      title="Email"
-                      value={records?.sanitizedRecords.email}
-                      icon={getTextRecordIcon('email')}
-                    />
-                  )}
-                </Flex>
-              </Flex>
+          return (
+            <Fragment key={'signin-item-' + plugin.name}>
+              {component(createPluginApi(plugin.name))}
+            </Fragment>
+          );
+        })}
+
+        <ClickableItem
+          left={<MappIcon width={20} />}
+          title={'mApps'}
+          style={{
+            width: '100%',
+          }}
+          onClick={() => setOpenMApps(true)}
+          right={
+            <Flex justify={'space-between'} align={'center'} gap={'5px'}>
+              {mAppsToEnable &&
+                canEnableMApps &&
+                mAppsToEnable.length > 0 && (
+                  <SPAN
+                    style={{
+                      color: '#FEA801',
+                      fontSize: '10px',
+                      fontWeight: 900,
+                    }}
+                  >
+                    Configuration Required
+                  </SPAN>
+                )}
+              <ArrowIcon
+                width={20}
+                color={'var(--justweb3-foreground-color-2)'}
+              />
             </Flex>
-            <Flex direction="column" gap={'10px'}>
-              {plugins.map((plugin) => {
-                const component = plugin.components?.SignInMenu;
-                if (!component) {
-                  return null;
-                }
+          }
+          disabled={!canEnableMApps}
+          loading={isCanEnableMAppsPending}
+        />
 
-                return (
-                  <Fragment key={'signin-item-' + plugin.name}>
-                    {component(createPluginApi(plugin.name))}
-                  </Fragment>
-                );
-              })}
+        <ClickableItem
+          style={{
+            width: '100%',
+          }}
+          left={<LogoutIcon width={20} />}
+          title={'Sign Out'}
+          onClick={signOut}
+          right={<ArrowIcon width={20} />}
+        />
+      </Flex>
+    </Flex>
+  )
 
-              <ClickableItem
-                left={<MappIcon width={20} />}
-                title={'mApps'}
-                style={{
-                  width: '100%',
-                }}
-                onClick={() => setOpenMApps(true)}
-                right={
-                  <Flex justify={'space-between'} align={'center'} gap={'5px'}>
-                    {mAppsToEnable &&
-                      canEnableMApps &&
-                      mAppsToEnable.length > 0 && (
-                        <SPAN
-                          style={{
-                            color: '#FEA801',
-                            fontSize: '10px',
-                            fontWeight: 900,
-                          }}
-                        >
-                          Configuration Required
-                        </SPAN>
-                      )}
-                    <ArrowIcon
-                      width={20}
-                      color={'var(--justweb3-foreground-color-2)'}
-                    />
-                  </Flex>
-                }
-                disabled={!canEnableMApps}
-                loading={isCanEnableMAppsPending}
-              />
+  return (
+    <>
+      <MAppsDialog open={openMApps} handleOpenDialog={handleOpenMAppsDialog} />
+      <div className={styles.desktopSection}>
+        <Popover>
+          <PopoverTrigger>
+            {connectedEnsBtn(false)}
+          </PopoverTrigger>
+          <BasePopoverContent sideOffset={10} align={'end'} side='bottom'>
+            {connectedEnsProfileContent}
+          </BasePopoverContent>
+        </Popover>
+      </div>
+      <div className={styles.mobileSection}>
+        {connectedEnsBtn(true)}
+        <DefaultDialog
+          open={mobileDialogOpen}
+          handleClose={() => setMobileDialogOpen(false)}
+          contentStyle={{
+            width: '100%',
+          }}
+          header={<Flex />}
+          fullScreen={false}
 
-              <ClickableItem
-                style={{
-                  width: '100%',
-                }}
-                left={<LogoutIcon width={20} />}
-                title={'Sign Out'}
-                onClick={signOut}
-                right={<ArrowIcon width={20} />}
-              />
-            </Flex>
-          </Flex>
-        </BasePopoverContent>
-      </Popover>
+        >
+          {connectedEnsProfileContent}
+        </DefaultDialog>
+      </div>
     </>
   );
 };
diff --git a/packages/@justweb3/widget/src/lib/dialogs/DefaultDialog/index.tsx b/packages/@justweb3/widget/src/lib/dialogs/DefaultDialog/index.tsx
index 56b02f5e..57828e66 100644
--- a/packages/@justweb3/widget/src/lib/dialogs/DefaultDialog/index.tsx
+++ b/packages/@justweb3/widget/src/lib/dialogs/DefaultDialog/index.tsx
@@ -50,7 +50,7 @@ export const DefaultDialog: FC<DefaultDialogProps> = ({
           transition: 'all 0.4 ease-in-out',
           display: 'flex',
           flexDirection: 'column',
-          borderRadius: fullScreen ? '0' : '24px',
+          borderRadius: fullScreen ? '0' : undefined,
           background: 'var(--justweb3-foreground-color-4)',
           boxSizing: 'content-box',
           ...contentStyle,