diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index c744453..f004745 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -2,65 +2,125 @@
 
 import {
     NavigationMenu,
+    navigationMenuIconTriggerStyle,
     NavigationMenuItem,
     NavigationMenuLink,
     NavigationMenuList,
     navigationMenuTriggerStyle,
 } from '@/components/ui/navigation-menu';
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
-import { User } from 'lucide-react';
+import { Banknote, Home, Menu, Tag, User, UserSearch } from 'lucide-react';
+import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
+import { Button } from '@/components/ui/button';
 
 export default function Navigation() {
 
+    const [open, setOpen] = useState(false);
+
     return (
         <div className="flex sticky items-center border-b border-border bg-background">
-            <NavigationMenu>
-                <NavigationMenuList className="flex w-screen items-center justify-between sm:px-4 py-2">
-                    <div className="inline-flex space-x-2">
-
-                        <img src={'/logo_white.png'} alt="Finances" className="h-10 w-10 mx-3"/>
-
-                        <NavigationMenuItem>
-                            <Link href="/" legacyBehavior passHref>
-                                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                    Dashboard
-                                </NavigationMenuLink>
+            <div className="md:hidden">
+                <Drawer open={open} onOpenChange={open => setOpen(open)}>
+                    <DrawerTrigger asChild>
+                        <Button size="icon" variant="ghost" className="m-2">
+                            <Menu/>
+                        </Button>
+                    </DrawerTrigger>
+                    <DrawerContent>
+                        <div className="flex flex-col space-y-2 w-full rounded-none p-4">
+                            <Link
+                                href="/"
+                                className={navigationMenuIconTriggerStyle()}
+                                onClick={() => setOpen(false)}
+                                passHref>
+                                <Home/>
+                                <span>Dashboard</span>
                             </Link>
-                        </NavigationMenuItem>
-                        <NavigationMenuItem>
-                            <Link href="/payments" legacyBehavior passHref>
-                                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                    Payments
-                                </NavigationMenuLink>
+                            <Link
+                                href="/payments"
+                                className={navigationMenuIconTriggerStyle()}
+                                onClick={() => setOpen(false)}
+                                passHref>
+                                <Banknote/>
+                                <span>Payments</span>
                             </Link>
-                        </NavigationMenuItem>
-                        <NavigationMenuItem>
-                            <Link href="/entities" legacyBehavior passHref>
-                                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                    Entities
-                                </NavigationMenuLink>
+                            <Link
+                                href="/entities"
+                                className={navigationMenuIconTriggerStyle()}
+                                onClick={() => setOpen(false)}
+                                passHref>
+                                <UserSearch/>
+                                <span>Entities</span>
                             </Link>
-                        </NavigationMenuItem>
-                        <NavigationMenuItem>
-                            <Link href="/categories" legacyBehavior passHref>
-                                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                    Categories
-                                </NavigationMenuLink>
+                            <Link
+                                href="/categories"
+                                className={navigationMenuIconTriggerStyle()}
+                                onClick={() => setOpen(false)}
+                                passHref>
+                                <Tag/>
+                                <span>Categories</span>
                             </Link>
-                        </NavigationMenuItem>
-                    </div>
-
-                    <NavigationMenuItem>
-                        <Link href="/account" legacyBehavior passHref>
-                            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                                <span className="sr-only">Account</span>
+                            <Link
+                                href="/account"
+                                className={navigationMenuIconTriggerStyle()}
+                                onClick={() => setOpen(false)}
+                                passHref>
                                 <User/>
-                            </NavigationMenuLink>
-                        </Link>
-                    </NavigationMenuItem>
-                </NavigationMenuList>
-            </NavigationMenu>
+                                <span>Account</span>
+                            </Link>
+                        </div>
+                    </DrawerContent>
+                </Drawer>
+            </div>
+            <div className="hidden md:flex">
+                <NavigationMenu>
+                    <NavigationMenuList className="flex w-screen items-center justify-between sm:px-4 py-2">
+                        <div className="inline-flex space-x-2">
+
+                            <img src={'/logo_white.png'} alt="Finances" className="h-10 w-10 mx-3"/>
+
+                            <NavigationMenuItem>
+                                <Link href="/" legacyBehavior passHref>
+                                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                                        Dashboard
+                                    </NavigationMenuLink>
+                                </Link>
+                            </NavigationMenuItem>
+                            <NavigationMenuItem>
+                                <Link href="/payments" legacyBehavior passHref>
+                                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                                        Payments
+                                    </NavigationMenuLink>
+                                </Link>
+                            </NavigationMenuItem>
+                            <NavigationMenuItem>
+                                <Link href="/entities" legacyBehavior passHref>
+                                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                                        Entities
+                                    </NavigationMenuLink>
+                                </Link>
+                            </NavigationMenuItem>
+                            <NavigationMenuItem>
+                                <Link href="/categories" legacyBehavior passHref>
+                                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                                        Categories
+                                    </NavigationMenuLink>
+                                </Link>
+                            </NavigationMenuItem>
+                        </div>
+
+                        <NavigationMenuItem>
+                            <Link href="/account" legacyBehavior passHref>
+                                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                                    <span className="sr-only">Account</span>
+                                    <User/>
+                                </NavigationMenuLink>
+                            </Link>
+                        </NavigationMenuItem>
+                    </NavigationMenuList>
+                </NavigationMenu>
+            </div>
         </div>
     );
 }
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
index 800788d..71f001a 100644
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -44,6 +44,10 @@ const navigationMenuTriggerStyle = cva(
     'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
 );
 
+const navigationMenuIconTriggerStyle = cva(
+    'group inline-flex h-10 w-full items-center justify-start rounded-md bg-background px-4 py-2 space-x-4 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+);
+
 const NavigationMenuTrigger = React.forwardRef<
     React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
     React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
@@ -117,6 +121,7 @@ NavigationMenuIndicator.displayName =
 
 export {
     navigationMenuTriggerStyle,
+    navigationMenuIconTriggerStyle,
     NavigationMenu,
     NavigationMenuList,
     NavigationMenuItem,