diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a7fc17..33ab105 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [2.0.7](https://github.com/geekdada/yasd/compare/v2.0.6...v2.0.7) (2024-09-21)
+
+
+
 ## [2.0.6](https://github.com/geekdada/yasd/compare/v2.0.5...v2.0.6) (2024-09-08)
 
 
diff --git a/package.json b/package.json
index 42d4b5a..02ac25a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "yasd",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "private": true,
   "type": "module",
   "license": "MIT",
@@ -151,7 +151,9 @@
     "twin.macro": "^3.4.0",
     "typescript": "^5.1.6",
     "use-is-in-viewport": "^1.0.9",
+    "usehooks-ts": "^3.1.0",
     "uuid": "^9.0.0",
+    "vaul": "^0.9.4",
     "zod": "^3.21.4",
     "zx": "~7.2.3"
   },
diff --git a/src/components/ActionsModal.tsx b/src/components/ActionsModal.tsx
index 60b6680..a105799 100644
--- a/src/components/ActionsModal.tsx
+++ b/src/components/ActionsModal.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { useMediaQuery } from 'usehooks-ts'
 
 import { Button } from '@/components/ui/button'
 import {
@@ -8,6 +9,15 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/drawer'
+import { BottomSafeArea } from '@/components/VerticalSafeArea'
 
 export type Action = {
   id: number | string
@@ -26,23 +36,49 @@ const ActionsModal = ({
   ...props
 }: ActionsModalProps): JSX.Element => {
   const { t } = useTranslation()
+  const isDesktop = useMediaQuery('(min-width: 768px)')
 
-  return (
-    <Dialog {...props}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-        </DialogHeader>
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-5">
+            {actions.map((action) => (
+              <Button stretch key={action.id} onClick={action.onClick}>
+                {t(action.title)}
+              </Button>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    )
+  }
 
-        <div className="space-y-5">
+  return (
+    <Drawer {...props}>
+      <DrawerContent className="select-none">
+        <DrawerHeader>
+          <DrawerTitle>{title}</DrawerTitle>
+        </DrawerHeader>
+        <DrawerFooter>
           {actions.map((action) => (
             <Button stretch key={action.id} onClick={action.onClick}>
               {t(action.title)}
             </Button>
           ))}
-        </div>
-      </DialogContent>
-    </Dialog>
+          <DrawerClose>
+            <Button className="w-full" variant="outline">
+              {t('common.close')}
+            </Button>
+          </DrawerClose>
+        </DrawerFooter>
+        <BottomSafeArea />
+      </DrawerContent>
+    </Drawer>
   )
 }
 
diff --git a/src/components/BackButton/index.tsx b/src/components/BackButton/index.tsx
index d6fb9af..e177e21 100644
--- a/src/components/BackButton/index.tsx
+++ b/src/components/BackButton/index.tsx
@@ -8,7 +8,7 @@ const BackButton = ({ title }: { title?: string }) => {
   const navigate = useNavigate()
 
   return (
-    <div className="space-x-4">
+    <div className="space-x-4 select-none">
       <Button
         variant="outline"
         onClick={() => navigate(-1)}
diff --git a/src/components/VerticalSafeArea.tsx b/src/components/VerticalSafeArea.tsx
index 6655584..cc3f4d3 100644
--- a/src/components/VerticalSafeArea.tsx
+++ b/src/components/VerticalSafeArea.tsx
@@ -6,7 +6,8 @@ export const BottomSafeArea = () => {
     <div
       className="flex flex-1 sm:hidden"
       css={css`
-        height: env(safe-area-inset-bottom, 0px);
+        height: 0;
+        padding-bottom: env(safe-area-inset-bottom, 0px);
       `}
     ></div>
   )
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
new file mode 100644
index 0000000..650bc59
--- /dev/null
+++ b/src/components/ui/drawer.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '@/utils/shadcn'
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-black/80', className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = 'DrawerContent'
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = 'DrawerHeader'
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = 'DrawerFooter'
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index 105d692..c7d03b0 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -20,7 +20,8 @@
     "sw_updated": "Surge Web Dashboard has been updated, refresh page to use the new version.",
     "refresh": "Refresh",
     "confirm": "Confirm",
-    "cancel": "Cancel"
+    "cancel": "Cancel",
+    "close": "Close"
   },
   "tls_instruction": {
     "title": "Needed a certificate?",
diff --git a/src/i18n/zh/translation.json b/src/i18n/zh/translation.json
index 4b8ec76..041a58b 100644
--- a/src/i18n/zh/translation.json
+++ b/src/i18n/zh/translation.json
@@ -20,7 +20,8 @@
     "sw_updated": "Surge Web Dashboard 已更新，刷新页面以使用新版本。",
     "refresh": "刷新",
     "confirm": "确认",
-    "cancel": "取消"
+    "cancel": "取消",
+    "close": "关闭"
   },
   "tls_instruction": {
     "title": "需要证书吗？",
diff --git a/src/pages/Requests/components/RequestModal.tsx b/src/pages/Requests/components/RequestModal.tsx
index 0f02fa7..ca49454 100644
--- a/src/pages/Requests/components/RequestModal.tsx
+++ b/src/pages/Requests/components/RequestModal.tsx
@@ -31,7 +31,7 @@ import fetcher from '@/utils/fetcher'
 import MethodBadge from './MethodBadge'
 
 const TabsContent = styled(TabsContentOriginal)`
-  ${tw`overflow-auto  h-[25rem] xl:h-[40rem]`}
+  ${tw``}
 `
 
 type RequestModalProps = {
@@ -88,7 +88,17 @@ const RequestModal: React.FC<RequestModalProps> = ({ req, ...props }) => {
         <span className="break-words">{req.URL}</span>
       </div>
 
-      <div>
+      <div
+        className="flex-1 overflow-hidden"
+        css={css`
+          & > div {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+          }
+        `}
+      >
         <Tabs defaultValue="general">
           <TabsList className="grid w-full grid-cols-3 mb-5">
             <TabsTrigger value="general">
@@ -100,130 +110,135 @@ const RequestModal: React.FC<RequestModalProps> = ({ req, ...props }) => {
             <TabsTrigger value="timing">{t('requests.timing_tab')}</TabsTrigger>
           </TabsList>
 
-          <TabsContent value="general">
-            <div className="space-y-4">
-              <DataGroup responsiveTitle={false}>
-                <DataRowMain responsiveFont={false}>
-                  <div>{t('requests.date')}</div>
-                  <div>{dayjs.unix(req.startDate).format('LLL')}</div>
-                </DataRowMain>
-                <DataRowMain responsiveFont={false}>
-                  <div>{t('requests.status')}</div>
-                  <div>{req.status}</div>
-                </DataRowMain>
-
-                {isTruthy(req.completed) && (
+          <div className="flex-1 overflow-y-scroll">
+            <TabsContent value="general">
+              <div className="space-y-4">
+                <DataGroup responsiveTitle={false}>
                   <DataRowMain responsiveFont={false}>
-                    <div>{t('requests.duration')}</div>
-                    <div>
-                      {dayjs
-                        .unix(req.completedDate)
-                        .diff(dayjs.unix(req.startDate))}
-                      ms
-                    </div>
+                    <div>{t('requests.date')}</div>
+                    <div>{dayjs.unix(req.startDate).format('LLL')}</div>
                   </DataRowMain>
-                )}
+                  <DataRowMain responsiveFont={false}>
+                    <div>{t('requests.status')}</div>
+                    <div>{req.status}</div>
+                  </DataRowMain>
+
+                  {isTruthy(req.completed) && (
+                    <DataRowMain responsiveFont={false}>
+                      <div>{t('requests.duration')}</div>
+                      <div>
+                        {dayjs
+                          .unix(req.completedDate)
+                          .diff(dayjs.unix(req.startDate))}
+                        ms
+                      </div>
+                    </DataRowMain>
+                  )}
+
+                  {req.pid !== 0 && req.processPath && (
+                    <DataRowMain responsiveFont={false}>
+                      <div>{t('requests.process')}</div>
+                      <div>
+                        {trimPath(req.processPath)}({req.pid})
+                      </div>
+                    </DataRowMain>
+                  )}
+                </DataGroup>
 
-                {req.pid !== 0 && req.processPath && (
+                <DataGroup responsiveTitle={false}>
                   <DataRowMain responsiveFont={false}>
-                    <div>{t('requests.process')}</div>
-                    <div>
-                      {trimPath(req.processPath)}({req.pid})
-                    </div>
+                    <div>{t('requests.policy_name')}</div>
+                    <div>{req.policyName}</div>
                   </DataRowMain>
-                )}
-              </DataGroup>
+                  <DataRowMain responsiveFont={false}>
+                    <div>{t('requests.rule_name')}</div>
+                    <div>{req.rule}</div>
+                  </DataRowMain>
+                </DataGroup>
 
-              <DataGroup responsiveTitle={false}>
-                <DataRowMain responsiveFont={false}>
-                  <div>{t('requests.policy_name')}</div>
-                  <div>{req.policyName}</div>
-                </DataRowMain>
-                <DataRowMain responsiveFont={false}>
-                  <div>{t('requests.rule_name')}</div>
-                  <div>{req.rule}</div>
-                </DataRowMain>
-              </DataGroup>
+                {!!req.localAddress && !!req.remoteAddress && (
+                  <DataGroup
+                    responsiveTitle={false}
+                    title={t('requests.ip_addr')}
+                  >
+                    <DataRowMain responsiveFont={false}>
+                      <div>{t('requests.local_ip')}</div>
+                      <div>{req.localAddress}</div>
+                    </DataRowMain>
+                    <DataRowMain responsiveFont={false}>
+                      <div>{t('requests.remote_ip')}</div>
+                      <div>
+                        <a
+                          href={`https://ip.sb/ip/${pureIP}`}
+                          target="_blank"
+                          rel="noreferrer noopener"
+                        >
+                          <Search
+                            className="inline mr-1 w-3 h-3"
+                            css={css`
+                              margin-bottom: 2px;
+                            `}
+                          />
+                          {req.remoteAddress}
+                        </a>
+                      </div>
+                    </DataRowMain>
+                  </DataGroup>
+                )}
 
-              {!!req.localAddress && !!req.remoteAddress && (
                 <DataGroup
                   responsiveTitle={false}
-                  title={t('requests.ip_addr')}
+                  title={t('requests.traffic')}
                 >
                   <DataRowMain responsiveFont={false}>
-                    <div>{t('requests.local_ip')}</div>
-                    <div>{req.localAddress}</div>
+                    <div>{t('requests.download')}</div>
+                    <div>{bytes(req.inBytes)}</div>
                   </DataRowMain>
                   <DataRowMain responsiveFont={false}>
-                    <div>{t('requests.remote_ip')}</div>
-                    <div>
-                      <a
-                        href={`https://ip.sb/ip/${pureIP}`}
-                        target="_blank"
-                        rel="noreferrer noopener"
-                      >
-                        <Search
-                          className="inline mr-1 w-3 h-3"
-                          css={css`
-                            margin-bottom: 2px;
-                          `}
-                        />
-                        {req.remoteAddress}
-                      </a>
-                    </div>
+                    <div>{t('requests.upload')}</div>
+                    <div>{bytes(req.outBytes)}</div>
                   </DataRowMain>
                 </DataGroup>
-              )}
-
-              <DataGroup responsiveTitle={false} title={t('requests.traffic')}>
-                <DataRowMain responsiveFont={false}>
-                  <div>{t('requests.download')}</div>
-                  <div>{bytes(req.inBytes)}</div>
-                </DataRowMain>
-                <DataRowMain responsiveFont={false}>
-                  <div>{t('requests.upload')}</div>
-                  <div>{bytes(req.outBytes)}</div>
-                </DataRowMain>
-              </DataGroup>
 
-              <DataGroup responsiveTitle={false} title={t('requests.remark')}>
-                <CodeContent content={req.notes && req.notes.join('\n')} />
+                <DataGroup responsiveTitle={false} title={t('requests.remark')}>
+                  <CodeContent content={req.notes && req.notes.join('\n')} />
+                </DataGroup>
+
+                {isFalsy(req.completed) && req.method !== 'UDP' && (
+                  <DataGroup responsiveTitle={false} title="Action">
+                    <DataRowMain
+                      onClick={() => killRequest(req.id)}
+                      destructive
+                      hideArrow
+                    >
+                      {t('requests.kill_connection_button_title')}...
+                    </DataRowMain>
+                  </DataGroup>
+                )}
+              </div>
+            </TabsContent>
+
+            <TabsContent value="request">
+              <DataGroup
+                responsiveTitle={false}
+                title={t('requests.request_header_title')}
+              >
+                <CodeContent content={req.requestHeader || ''} />
               </DataGroup>
+            </TabsContent>
 
-              {isFalsy(req.completed) && req.method !== 'UDP' && (
-                <DataGroup responsiveTitle={false} title="Action">
-                  <DataRowMain
-                    onClick={() => killRequest(req.id)}
-                    destructive
-                    hideArrow
-                  >
-                    {t('requests.kill_connection_button_title')}...
-                  </DataRowMain>
-                </DataGroup>
-              )}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="request">
-            <DataGroup
-              responsiveTitle={false}
-              title={t('requests.request_header_title')}
-            >
-              <CodeContent content={req.requestHeader || ''} />
-            </DataGroup>
-          </TabsContent>
-
-          <TabsContent value="timing">
-            <DataGroup responsiveTitle={false}>
-              {req.timingRecords &&
-                req.timingRecords.map((item, index) => (
-                  <DataRowMain key={index} responsiveFont={false}>
-                    <div>{item.name}</div>
-                    <div>{item.durationInMillisecond}ms</div>
-                  </DataRowMain>
-                ))}
-            </DataGroup>
-          </TabsContent>
+            <TabsContent value="timing">
+              <DataGroup responsiveTitle={false}>
+                {req.timingRecords &&
+                  req.timingRecords.map((item, index) => (
+                    <DataRowMain key={index} responsiveFont={false}>
+                      <div>{item.name}</div>
+                      <div>{item.durationInMillisecond}ms</div>
+                    </DataRowMain>
+                  ))}
+              </DataGroup>
+            </TabsContent>
+          </div>
         </Tabs>
       </div>
     </>
@@ -231,7 +246,9 @@ const RequestModal: React.FC<RequestModalProps> = ({ req, ...props }) => {
 
   return (
     <Dialog {...props}>
-      <DialogContent>{content}</DialogContent>
+      <DialogContent className="h-[90%] max-w-4xl flex flex-col">
+        {content}
+      </DialogContent>
     </Dialog>
   )
 }
diff --git a/src/pages/Scripting/Evaluate/index.tsx b/src/pages/Scripting/Evaluate/index.tsx
index 02dfa4e..b83ddc4 100644
--- a/src/pages/Scripting/Evaluate/index.tsx
+++ b/src/pages/Scripting/Evaluate/index.tsx
@@ -11,6 +11,7 @@ import { Button } from '@/components/ui/button'
 import {
   Dialog,
   DialogContent,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
@@ -124,13 +125,16 @@ const Page: React.FC = () => {
           }
         }}
       >
-        <DialogContent>
+        <DialogContent className="flex flex-col max-h-[90%]">
           <DialogHeader>
             <DialogTitle>{t('scripting.result')}</DialogTitle>
           </DialogHeader>
-          <div className="w-full overflow-hidden">
+          <div className="w-full overflow-x-hidden overflow-y-scroll">
             <CodeContent content={result} />
           </div>
+          <DialogFooter>
+            <Button onClick={() => setResult('')}>{t('common.close')}</Button>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
     </FixedFullscreenContainer>
diff --git a/yarn.lock b/yarn.lock
index 2ecb47a..d8026cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13959,6 +13959,13 @@ use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
   integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
 
+usehooks-ts@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-3.1.0.tgz#156119f36efc85f1b1952616c02580f140950eca"
+  integrity sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==
+  dependencies:
+    lodash.debounce "^4.0.8"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -14030,6 +14037,13 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vaul@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.9.4.tgz#2e1d8f90481a9f25169226f9cd6f764ad30ca65e"
+  integrity sha512-pcyIy1nEk6798ReNQpbVH/T/dYnoJ3bwyq7jmSp134s+bSvpWoSWQthm3/jfsQRvHNYIEK4ZKbkHUJ3YfLfw1w==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.1"
+
 void-elements@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"