diff --git a/src/client/components/DataTable.tsx b/src/client/components/DataTable.tsx
index 53f78e3..7bfd56b 100644
--- a/src/client/components/DataTable.tsx
+++ b/src/client/components/DataTable.tsx
@@ -112,7 +112,7 @@ export function DataTable<TData>({
                   )}
 
                   {row.getVisibleCells().map((cell, i) => (
-                    <TableCell key={cell.id}>
+                    <TableCell key={cell.id} className="text-nowrap">
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext()
diff --git a/src/client/components/layout/Menu.tsx b/src/client/components/layout/Menu.tsx
index 7731b96..5019ad2 100644
--- a/src/client/components/layout/Menu.tsx
+++ b/src/client/components/layout/Menu.tsx
@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { useRouterState } from '@tanstack/react-router';
 import { useWatch } from '@/hooks/useWatch';
+import { cn } from '@/utils/style';
 
 export const MobileLayoutMenu: React.FC<{
   list?: React.ReactNode;
@@ -16,21 +17,19 @@ export const MobileLayoutMenu: React.FC<{
     setOpen(false);
   });
 
-  if (!props.list) {
-    return <div />;
-  }
-
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger>
-        <Button variant="outline" size="icon">
-          <LuMenu />
-        </Button>
-      </SheetTrigger>
-      <SheetContent side="left" className="w-11/12">
-        <ScrollArea className="h-full">{props.list}</ScrollArea>
-      </SheetContent>
-    </Sheet>
+    <div className={cn(props.list ? 'opacity-100' : 'opacity-0')}>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger>
+          <Button variant="outline" size="icon">
+            <LuMenu />
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left" className="w-11/12">
+          <ScrollArea className="h-full">{props.list}</ScrollArea>
+        </SheetContent>
+      </Sheet>
+    </div>
   );
 });
 MobileLayoutMenu.displayName = 'MobileLayoutMenu';
diff --git a/src/client/components/monitor/StatusPage/index.tsx b/src/client/components/monitor/StatusPage/index.tsx
index 46d856e..0e76902 100644
--- a/src/client/components/monitor/StatusPage/index.tsx
+++ b/src/client/components/monitor/StatusPage/index.tsx
@@ -106,7 +106,7 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
         <div
           className={clsx(
             'mx-auto overflow-auto px-4 py-8',
-            !editMode ? 'w-4/5' : 'w-2/3'
+            !editMode ? 'w-4/5 sm:w-full' : 'w-2/3'
           )}
         >
           <div className="flex">
diff --git a/src/client/routes/page/add.tsx b/src/client/routes/page/add.tsx
index 46a9c5f..fb217da 100644
--- a/src/client/routes/page/add.tsx
+++ b/src/client/routes/page/add.tsx
@@ -10,6 +10,7 @@ import {
   MonitorStatusPageEditForm,
   MonitorStatusPageEditFormValues,
 } from '@/components/monitor/StatusPage/EditForm';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 export const Route = createFileRoute('/page/add')({
   beforeLoad: routeAuthBeforeLoad,
@@ -47,17 +48,19 @@ function PageAddComponent() {
     <CommonWrapper
       header={<h1 className="text-xl font-bold">{t('Add Page')}</h1>}
     >
-      <div className="p-4">
-        <Card>
-          <CardContent className="pt-4">
-            <MonitorStatusPageEditForm
-              saveButtonLabel="Next"
-              isLoading={createPageMutation.isLoading}
-              onFinish={handleSubmit}
-            />
-          </CardContent>
-        </Card>
-      </div>
+      <ScrollArea className="h-full">
+        <div className="p-4">
+          <Card>
+            <CardContent className="pt-4">
+              <MonitorStatusPageEditForm
+                saveButtonLabel="Next"
+                isLoading={createPageMutation.isLoading}
+                onFinish={handleSubmit}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </ScrollArea>
     </CommonWrapper>
   );
 }