diff --git a/apps/web/app/[locale]/components/Icons/ArrowDown.tsx b/apps/web/app/[locale]/components/Icons/ArrowDown.tsx
new file mode 100644
index 0000000..944b751
--- /dev/null
+++ b/apps/web/app/[locale]/components/Icons/ArrowDown.tsx
@@ -0,0 +1,13 @@
+export function ArrowDown({ color = 'currentColor' }) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.667 7.33203L8.00033 9.33203L5.33366 7.33203"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/app/[locale]/components/Icons/ArrowRight.tsx b/apps/web/app/[locale]/components/Icons/ArrowRight.tsx
new file mode 100644
index 0000000..e0ba1bc
--- /dev/null
+++ b/apps/web/app/[locale]/components/Icons/ArrowRight.tsx
@@ -0,0 +1,13 @@
+export function ArrowRight({ color = 'currentColor' }) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.33301 5.33203L9.33301 7.9987L7.33301 10.6654"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/app/[locale]/components/Icons/MenuBar.tsx b/apps/web/app/[locale]/components/Icons/MenuBar.tsx
new file mode 100644
index 0000000..77af803
--- /dev/null
+++ b/apps/web/app/[locale]/components/Icons/MenuBar.tsx
@@ -0,0 +1,14 @@
+export function MenuBar({ color = 'currentColor' }) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13.5 4.66797H2.5C2.22386 4.66797 2 4.89183 2 5.16797C2 5.44411 2.22386 5.66797 2.5 5.66797H13.5C13.7761 5.66797 14 5.44411 14 5.16797C14 4.89183 13.7761 4.66797 13.5 4.66797Z"
+        fill={color}
+      />
+      <path
+        d="M8.70833 10H2.29167C2.13058 10 2 10.2239 2 10.5C2 10.7761 2.13058 11 2.29167 11H8.70833C8.86942 11 9 10.7761 9 10.5C9 10.2239 8.86942 10 8.70833 10Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/app/[locale]/components/Icons/index.tsx b/apps/web/app/[locale]/components/Icons/index.tsx
index 55479f2..fcfcf0a 100644
--- a/apps/web/app/[locale]/components/Icons/index.tsx
+++ b/apps/web/app/[locale]/components/Icons/index.tsx
@@ -9,5 +9,7 @@ export { Skull } from './Skull';
 export { Sword } from './Sword';
 export { Ticket } from './Ticket';
 export { Twitter } from './Twitter';
+export { ArrowDown } from './ArrowDown';
+export { MenuBar } from './MenuBar';
 // Custom
 export { Loader } from './Loader';
diff --git a/apps/web/app/[locale]/components/Navbar/index.tsx b/apps/web/app/[locale]/components/Navbar/index.tsx
index 4378ff3..bd0d6d2 100644
--- a/apps/web/app/[locale]/components/Navbar/index.tsx
+++ b/apps/web/app/[locale]/components/Navbar/index.tsx
@@ -1,11 +1,27 @@
-import { Button, Container, Flex } from '@lawallet/ui';
+import { useState } from 'react';
+import { Button, Container, Flex, Icon, Text } from '@lawallet/ui';
 import { useTranslations } from 'next-intl';
 import { type ReactNode } from 'react';
 import { Link } from '../../../../navigation';
 
+import { appTheme } from '../../../../config/exports';
+
 import LocaleSwitcher from '../LocaleSwitcher/LocaleSwitcher';
-import { NavbarStyle } from './style';
 import { IsoAnimated } from '../IsoAnimated';
+import { AutoAvatar } from '../AutoAvatar';
+import { MenuBar } from '../Icons';
+
+import {
+  NavbarStyle,
+  UserButton,
+  UserButtonMenu,
+  UserMenu,
+  UserMenuBody,
+  UserMenuFooter,
+  UserMenuHead,
+  UserMenuItem,
+} from './style';
+import { ArrowRight } from '../Icons/ArrowRight';
 
 interface NavbarProps {
   children?: ReactNode;
@@ -15,6 +31,8 @@ interface NavbarProps {
 export function Navbar({ children, isoAnimated = true }: NavbarProps) {
   const t = useTranslations();
 
+  const [showMenu, setShowMenu] = useState(false);
+
   return (
     <>
       <NavbarStyle>
@@ -39,7 +57,67 @@ export function Navbar({ children, isoAnimated = true }: NavbarProps) {
                 </Button>
               </Link>
 
-              <LocaleSwitcher />
+              {/* <LocaleSwitcher /> */}
+
+              <UserButtonMenu>
+                <UserButton $background={appTheme.colors.primary15} onClick={() => setShowMenu(!showMenu)}>
+                  <Icon>
+                    <MenuBar color={appTheme.colors.primary} />
+                  </Icon>
+                </UserButton>
+                <UserMenu $show={showMenu}>
+                  <UserMenuHead onClick={() => setShowMenu(!showMenu)}>
+                    <Flex flex={1} align="center" gap={4}>
+                      <AutoAvatar walias={'asd@lawallet.ar'} size={6} />
+                      <Text color={appTheme.colors.gray50}>Desconocido</Text>
+                    </Flex>
+                    <Icon>
+                      <MenuBar color={appTheme.colors.primary} />
+                    </Icon>
+                  </UserMenuHead>
+                  <UserMenuBody>
+                    {/* <Link href=""> */}
+                    <UserMenuItem>
+                      <Flex align="center">
+                        <Text>Mi perfil</Text>
+                      </Flex>
+                      Ver
+                    </UserMenuItem>
+                    {/* </Link> */}
+                    {/* <button> */}
+                    <UserMenuItem>
+                      <Flex align="center">
+                        <Text>Idioma</Text>
+                      </Flex>
+                    </UserMenuItem>
+                    {/* </button> */}
+                  </UserMenuBody>
+                  <UserMenuFooter>
+                    <Link href="">
+                      <Text>Idioma</Text>
+                      <Flex flex={0} align="center">
+                        <Text size="small" isBold color={appTheme.colors.primary}>
+                          ES
+                        </Text>
+                        <Icon>
+                          <ArrowRight color={appTheme.colors.primary} />
+                        </Icon>
+                      </Flex>
+                    </Link>
+                    <button>
+                      <Text>Idioma</Text>
+                      <Flex flex={0} align="center">
+                        <Text size="small" isBold color={appTheme.colors.primary}>
+                          ES
+                        </Text>
+                        <Icon>
+                          <ArrowRight color={appTheme.colors.primary} />
+                        </Icon>
+                      </Flex>
+                    </button>
+                  </UserMenuFooter>
+                </UserMenu>
+              </UserButtonMenu>
             </Flex>
           </Flex>
         </Container>
diff --git a/apps/web/app/[locale]/components/Navbar/style.tsx b/apps/web/app/[locale]/components/Navbar/style.tsx
index 841802a..8677bdc 100644
--- a/apps/web/app/[locale]/components/Navbar/style.tsx
+++ b/apps/web/app/[locale]/components/Navbar/style.tsx
@@ -1,8 +1,90 @@
 import { styled } from 'styled-components';
+import { appTheme } from '../../../../config/exports';
 
 export const NavbarStyle = styled.nav`
+  position: relative;
+  z-index: 10;
+
   display: flex;
   justify-content: center;
   align-items: center;
   height: 60px;
 `;
+
+export const UserButton = styled.button<{ $background: string }>`
+  position: relative;
+  z-index: 0;
+
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 40px;
+
+  padding: 4px 8px;
+
+  background-color: ${(props) => props.$background};
+  border: none;
+  border-radius: 100px;
+
+  cursor: pointer;
+`;
+
+interface UserMenuProps {
+  $show: boolean;
+}
+
+export const UserMenu = styled.div<UserMenuProps>`
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  overflow: hidden;
+
+  display: ${(props) => (props.$show ? 'flex' : 'none')};
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  min-width: 300px;
+
+  background-color: ${appTheme.colors.gray15};
+  border-radius: 12px;
+  border: 1px solid ${appTheme.colors.gray20};
+`;
+
+export const UserButtonMenu = styled.div`
+  position: relative;
+`;
+
+export const UserMenuHead = styled.button`
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+
+  padding: 0 16px;
+
+  border-radius: 12px 12px 0 0;
+  border: none;
+  background-color: transparent;
+`;
+
+export const UserMenuBody = styled.div``;
+export const UserMenuItem = styled.div``;
+export const UserMenuFooter = styled.div`
+  border-top: 1px solid ${appTheme.colors.gray20};
+
+  button,
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 50px;
+    width: 100%;
+
+    padding: 0 12px;
+
+    background-color: transparent;
+    border: none;
+
+    color: ${appTheme.colors.text};
+  }
+`;