diff --git a/apps/admin/app/dashboard/layout.tsx b/apps/admin/app/dashboard/layout.tsx
index c92782c..013e9ca 100644
--- a/apps/admin/app/dashboard/layout.tsx
+++ b/apps/admin/app/dashboard/layout.tsx
@@ -1,6 +1,5 @@
 import { Header } from '@/components/header';
 import { SidebarLeft } from '@/components/sidebar-left';
-import { ScrollArea } from '@shadcn/ui/scroll-area';
 import { SidebarInset, SidebarProvider } from '@shadcn/ui/sidebar';
 import { cookies } from 'next/headers';
 
@@ -10,11 +9,9 @@ export default async function DashboardLayout({ children }: { children: React.Re
   return (
     <SidebarProvider defaultOpen={defaultOpen}>
       <SidebarLeft />
-      <SidebarInset className='flex-grow overflow-hidden'>
+      <SidebarInset className='relative flex-grow overflow-hidden'>
         <Header />
-        <div className='flex h-[calc(100vh-56px)] flex-1 flex-col gap-4 p-4'>
-          <ScrollArea className='h-full flex-grow overflow-hidden'>{children}</ScrollArea>
-        </div>
+        <div className='h-[calc(100vh-56px)] gap-4 overflow-auto p-4'>{children}</div>
       </SidebarInset>
     </SidebarProvider>
   );
diff --git a/apps/user/app/(main)/(user)/order/purchase.tsx b/apps/user/app/(main)/(user)/order/purchase.tsx
index 171077c..d9d228b 100644
--- a/apps/user/app/(main)/(user)/order/purchase.tsx
+++ b/apps/user/app/(main)/(user)/order/purchase.tsx
@@ -76,11 +76,11 @@ export default function Purchase({
         if (!open) setSubscribe(undefined);
       }}
     >
-      <DialogContent className='flex h-full max-w-screen-lg flex-col overflow-hidden border-none md:h-auto'>
-        <DialogHeader>
+      <DialogContent className='flex h-full max-w-screen-lg flex-col overflow-hidden border-none p-0 md:h-auto'>
+        <DialogHeader className='p-6 pb-0'>
           <DialogTitle>{t('buySubscription')}</DialogTitle>
         </DialogHeader>
-        <div className='grid w-full gap-3 lg:grid-cols-2'>
+        <div className='grid w-full flex-grow gap-3 overflow-auto p-6 pt-0 lg:grid-cols-2'>
           <Card className='border-transparent shadow-none md:border-inherit md:shadow'>
             <CardContent className='grid gap-3 p-0 text-sm md:p-6'>
               <SubscribeDetail
@@ -110,7 +110,7 @@ export default function Purchase({
                     quantity: Number(value),
                   });
                 }}
-                className='flex flex-wrap gap-2'
+                className='flex flex-wrap gap-0.5 *:w-20 md:gap-2'
               >
                 <div className='relative'>
                   <RadioGroupItem value='1' id='1' className='peer sr-only' />
@@ -154,7 +154,7 @@ export default function Purchase({
               </div>
               <div className='font-semibold'>{t('paymentMethod')}</div>
               <RadioGroup
-                className='grid grid-cols-5 gap-2'
+                className='mb-6 grid grid-cols-5 gap-2'
                 value={params.payment}
                 onValueChange={(value) => {
                   setParams({
diff --git a/packages/ui/src/pro-table/pagination.tsx b/packages/ui/src/pro-table/pagination.tsx
index ade2d30..0ad0f07 100644
--- a/packages/ui/src/pro-table/pagination.tsx
+++ b/packages/ui/src/pro-table/pagination.tsx
@@ -21,11 +21,11 @@ interface PaginationProps<TData> {
 export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
   return (
     <div className='flex flex-wrap items-center justify-between gap-2'>
-      <div className='text-muted-foreground flex-1 whitespace-nowrap'>
+      <div className='text-muted-foreground flex-1 whitespace-nowrap text-center sm:text-left'>
         {text?.textPageOf?.(table.getState().pagination.pageIndex + 1, table.getPageCount()) ||
           `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
       </div>
-      <div className='flex items-center gap-2'>
+      <div className='flex flex-grow items-center justify-center gap-2 sm:justify-end'>
         <div className='flex items-center space-x-2'>
           <p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
           <Select