diff --git a/src/components/categoryPageClientComponents.tsx b/src/components/categoryPageClientComponents.tsx
index ac8b908..74b1ff4 100644
--- a/src/components/categoryPageClientComponents.tsx
+++ b/src/components/categoryPageClientComponents.tsx
@@ -23,6 +23,8 @@ import {
 } from '@/components/ui/alert-dialog';
 import { categoryFormSchema } from '@/lib/form-schemas/categoryFormSchema';
 import CategoryForm from '@/components/form/categoryForm';
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 
 export default function CategoryPageClientContent({categories, onSubmit, onDelete, className}: {
     categories: Category[],
@@ -31,6 +33,7 @@ export default function CategoryPageClientContent({categories, onSubmit, onDelet
     className: string,
 }) {
 
+    const isDesktop = useMediaQuery('(min-width: 768px)');
     const router = useRouter();
 
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@@ -97,26 +100,51 @@ export default function CategoryPageClientContent({categories, onSubmit, onDelet
                 <p className="text-3xl font-semibold">Categories</p>
 
                 {/* Edit dialog */}
-                <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                    <DialogTrigger asChild>
-                        <Button
-                            onClick={() => {
-                                setSelectedCategory(undefined);
-                                setIsEditDialogOpen(true);
-                            }}>
-                            Create Category
-                        </Button>
-                    </DialogTrigger>
-                    <DialogContent>
-                        <DialogHeader>
-                            <DialogTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DialogTitle>
-                        </DialogHeader>
-                        <CategoryForm
-                            value={selectedCategory}
-                            onSubmit={handleSubmit}
-                            className="flex flex-row space-x-4 py-4"/>
-                    </DialogContent>
-                </Dialog>
+                {
+                    isDesktop ? (
+                        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                            <DialogTrigger asChild>
+                                <Button
+                                    onClick={() => {
+                                        setSelectedCategory(undefined);
+                                        setIsEditDialogOpen(true);
+                                    }}>
+                                    Create Category
+                                </Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DialogTitle>
+                                </DialogHeader>
+                                <CategoryForm
+                                    value={selectedCategory}
+                                    onSubmit={handleSubmit}
+                                    className="flex flex-row space-x-4 py-4"/>
+                            </DialogContent>
+                        </Dialog>
+                    ) : (
+                        <Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                            <DrawerTrigger asChild>
+                                <Button
+                                    onClick={() => {
+                                        setSelectedCategory(undefined);
+                                        setIsEditDialogOpen(true);
+                                    }}>
+                                    Create Payment
+                                </Button>
+                            </DrawerTrigger>
+                            <DrawerContent className="p-4">
+                                <DrawerHeader>
+                                    <DrawerTitle>{selectedCategory?.id ? 'Update Category' : 'Create Category'}</DrawerTitle>
+                                </DrawerHeader>
+                                <CategoryForm
+                                    value={selectedCategory}
+                                    onSubmit={handleSubmit}
+                                    className="flex flex-row space-x-4 py-4"/>
+                            </DrawerContent>
+                        </Drawer>
+                    )
+                }
             </div>
 
             {/* Data Table */}
diff --git a/src/components/entityPageClientComponents.tsx b/src/components/entityPageClientComponents.tsx
index 4f4a8bd..12697be 100644
--- a/src/components/entityPageClientComponents.tsx
+++ b/src/components/entityPageClientComponents.tsx
@@ -24,6 +24,8 @@ import {
     AlertDialogFooter,
     AlertDialogHeader,
 } from '@/components/ui/alert-dialog';
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 
 export default function EntityPageClientContent({entities, onSubmit, onDelete, className}: {
     entities: Entity[],
@@ -32,6 +34,7 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
     className: string,
 }) {
 
+    const isDesktop = useMediaQuery('(min-width: 768px)');
     const router = useRouter();
 
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@@ -125,26 +128,51 @@ export default function EntityPageClientContent({entities, onSubmit, onDelete, c
                 <p className="text-3xl font-semibold">Entities</p>
 
                 {/* Edit dialog */}
-                <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                    <DialogTrigger asChild>
-                        <Button
-                            onClick={() => {
-                                setSelectedEntity(undefined);
-                                setIsEditDialogOpen(true);
-                            }}>
-                            Create Entity
-                        </Button>
-                    </DialogTrigger>
-                    <DialogContent>
-                        <DialogHeader>
-                            <DialogTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DialogTitle>
-                        </DialogHeader>
-                        <EntityForm
-                            value={selectedEntity}
-                            onSubmit={handleSubmit}
-                            className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
-                    </DialogContent>
-                </Dialog>
+                {
+                    isDesktop ? (
+                        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                            <DialogTrigger asChild>
+                                <Button
+                                    onClick={() => {
+                                        setSelectedEntity(undefined);
+                                        setIsEditDialogOpen(true);
+                                    }}>
+                                    Create Entity
+                                </Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DialogTitle>
+                                </DialogHeader>
+                                <EntityForm
+                                    value={selectedEntity}
+                                    onSubmit={handleSubmit}
+                                    className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
+                            </DialogContent>
+                        </Dialog>
+                    ) : (
+                        <Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                            <DrawerTrigger asChild>
+                                <Button
+                                    onClick={() => {
+                                        setSelectedEntity(undefined);
+                                        setIsEditDialogOpen(true);
+                                    }}>
+                                    Create Payment
+                                </Button>
+                            </DrawerTrigger>
+                            <DrawerContent className="p-4">
+                                <DrawerHeader>
+                                    <DrawerTitle>{selectedEntity?.id ? 'Update Entity' : 'Create Entity'}</DrawerTitle>
+                                </DrawerHeader>
+                                <EntityForm
+                                    value={selectedEntity}
+                                    onSubmit={handleSubmit}
+                                    className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
+                            </DrawerContent>
+                        </Drawer>
+                    )
+                }
             </div>
 
             {/* Filter input */}
diff --git a/src/components/paymentPageClientComponents.tsx b/src/components/paymentPageClientComponents.tsx
index d25f5df..60a21fd 100644
--- a/src/components/paymentPageClientComponents.tsx
+++ b/src/components/paymentPageClientComponents.tsx
@@ -23,6 +23,8 @@ import { paymentFormSchema } from '@/lib/form-schemas/paymentFormSchema';
 import { Category, Entity, Payment } from '@prisma/client';
 import PaymentForm from '@/components/form/paymentForm';
 import { columns } from '@/app/payments/columns';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
 
 export default function PaymentPageClientContent({
     payments,
@@ -40,6 +42,7 @@ export default function PaymentPageClientContent({
     className: string,
 }) {
 
+    const isDesktop = useMediaQuery('(min-width: 768px)');
     const router = useRouter();
 
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@@ -106,28 +109,55 @@ export default function PaymentPageClientContent({
                 <p className="text-3xl font-semibold">Payments</p>
 
                 {/* Edit dialog */}
-                <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                    <DialogTrigger asChild>
-                        <Button
-                            onClick={() => {
-                                setSelectedPayment(undefined);
-                                setIsEditDialogOpen(true);
-                            }}>
-                            Create Payment
-                        </Button>
-                    </DialogTrigger>
-                    <DialogContent>
-                        <DialogHeader>
-                            <DialogTitle>{selectedPayment?.id ? 'Update Payment' : 'Create Payment'}</DialogTitle>
-                        </DialogHeader>
-                        <PaymentForm
-                            value={selectedPayment}
-                            entities={entities}
-                            categories={categories}
-                            onSubmit={handleSubmit}
-                            className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
-                    </DialogContent>
-                </Dialog>
+                {
+                    isDesktop ? (
+                        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                            <DialogTrigger asChild>
+                                <Button
+                                    onClick={() => {
+                                        setSelectedPayment(undefined);
+                                        setIsEditDialogOpen(true);
+                                    }}>
+                                    Create Payment
+                                </Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle>{selectedPayment?.id ? 'Update Payment' : 'Create Payment'}</DialogTitle>
+                                </DialogHeader>
+                                <PaymentForm
+                                    value={selectedPayment}
+                                    entities={entities}
+                                    categories={categories}
+                                    onSubmit={handleSubmit}
+                                    className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
+                            </DialogContent>
+                        </Dialog>
+                    ) : (
+                        <Drawer open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                            <DrawerTrigger asChild>
+                                <Button
+                                    onClick={() => {
+                                        setSelectedPayment(undefined);
+                                        setIsEditDialogOpen(true);
+                                    }}>
+                                    Create Payment
+                                </Button>
+                            </DrawerTrigger>
+                            <DrawerContent className="p-4">
+                                <DrawerHeader>
+                                    <DrawerTitle>{selectedPayment?.id ? 'Update Payment' : 'Create Payment'}</DrawerTitle>
+                                </DrawerHeader>
+                                <PaymentForm
+                                    value={selectedPayment}
+                                    entities={entities}
+                                    categories={categories}
+                                    onSubmit={handleSubmit}
+                                    className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
+                            </DrawerContent>
+                        </Drawer>
+                    )
+                }
             </div>
 
             {/* Data Table */}