diff --git a/actions/logout.ts b/actions/logout.ts
new file mode 100644
index 0000000..093539e
--- /dev/null
+++ b/actions/logout.ts
@@ -0,0 +1,8 @@
+'use server'
+
+import { signOut } from '@/config/auth'
+
+export const logout = async () => {
+  // do something separately from js client bundle prior logging out
+  await signOut()
+}
\ No newline at end of file
diff --git a/app/[locale]/(protected)/_components/navbar.tsx b/app/[locale]/(protected)/_components/navbar.tsx
new file mode 100644
index 0000000..c9fa979
--- /dev/null
+++ b/app/[locale]/(protected)/_components/navbar.tsx
@@ -0,0 +1,47 @@
+// eslint-disable-next-line validate-filename/naming-rules
+'use client'
+
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import { USER_PROFILE_URL } from '@/config/routes'
+import { usePathname } from 'next/navigation'
+import UserButton from '@/components/auth/user-button'
+import LocaleSwitcher from '@/components/locale-switcher'
+
+const Navbar = () => {
+  const pathname = usePathname()
+  //
+  return (
+    <nav className="bg-secondary flex justify-between items-center top-0 absolute px-6 py-4 w-full shadow-sm">
+      <div className="flex gap-x-4">
+        <Button asChild variant={pathname.match(/^\/(en\/|)server/) ? 'default' : 'outline'}>
+          <Link href={'/server'}>
+            Server
+          </Link>
+        </Button>
+        <Button asChild variant={pathname.match(/^\/(en\/|)client/) ? 'default' : 'outline'}>
+          <Link href={'/client'}>
+            Client
+          </Link>
+        </Button>
+        <Button asChild variant={pathname.match(/^\/(en\/|)admin/) ? 'default' : 'outline'}>
+          <Link href={'/admin'}>
+            Admin
+          </Link>
+        </Button>
+        <Button asChild variant={pathname.match(/^\/(en\/|)cabinet/) ? 'default' : 'outline'}>
+          <Link href={USER_PROFILE_URL}>
+            Cabinet
+          </Link>
+        </Button>
+      </div>
+      <div className="flex gap-x-2">
+        <LocaleSwitcher/>
+        <UserButton/>
+      </div>
+
+    </nav>
+  )
+}
+
+export default Navbar
diff --git a/app/[locale]/(protected)/cabinet/page.tsx b/app/[locale]/(protected)/cabinet/page.tsx
index e4ef8af..2941f4e 100644
--- a/app/[locale]/(protected)/cabinet/page.tsx
+++ b/app/[locale]/(protected)/cabinet/page.tsx
@@ -1,17 +1,15 @@
-import { auth, signOut } from '@/config/auth'
+'use client'
 
-const CabinetPage = async () => {
-  const session = await auth()
+import { logout } from '@/actions/logout'
+import { useCurrentUser } from '@/hooks/useCurrentUser'
+
+const CabinetPage = () => {
+  const user = useCurrentUser()
+  const btnOnClick = () => logout()
 
   return (
-    <div>
-      {JSON.stringify(session)}
-      <form action={async () => {
-        'use server'
-        await signOut()
-      }}>
-        <button type="submit">SignOut {session?.user.role}</button>
-      </form>
+    <div className="bg-neutral-100 p-10">
+      <button onClick={btnOnClick} type="submit">SignOut</button>
     </div>
   )
 }
diff --git a/app/[locale]/(protected)/layout.tsx b/app/[locale]/(protected)/layout.tsx
new file mode 100644
index 0000000..5d057b2
--- /dev/null
+++ b/app/[locale]/(protected)/layout.tsx
@@ -0,0 +1,17 @@
+import Navbar from '@/app/[locale]/(protected)/_components/navbar'
+
+interface ProtectedLayoutProps {
+  children: React.ReactNode;
+}
+
+const ProtectedLayout = ({ children }: ProtectedLayoutProps) => {
+  return (
+    <main
+      className="w-full h-full flex flex-col justify-center items-center gap-y-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-sky-400 to-blue-800">
+      <Navbar/>
+      {children}
+    </main>
+  )
+}
+
+export default ProtectedLayout
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 9de5407..5b9f0b7 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -4,6 +4,8 @@ import { ReactElement } from 'react'
 import { I18nProviderClient } from '@/locales/client'
 import { lc } from '@/lib/utils'
 import './globals.css'
+import { SessionProvider } from 'next-auth/react'
+import { auth } from '@/config/auth'
 
 const inter = Inter({ subsets: ['cyrillic'] })
 
@@ -15,13 +17,16 @@ type RootLayoutProps = {
   params: { locale: string }; children: ReactElement;
 }
 
-export default function RootLayout ({ params: { locale }, children }: Readonly<RootLayoutProps>) {
+export default async function RootLayout ({ params: { locale }, children }: Readonly<RootLayoutProps>) {
+  const session = await auth()
 
-  return (<html lang={lc(locale)?.java}>
-  <body className={inter.className}>
-  <I18nProviderClient locale={locale} fallback="Loading...">
-    {children}
-  </I18nProviderClient>
-  </body>
-  </html>)
+  return (<SessionProvider session={session}>
+    <html lang={lc(locale)?.java}>
+    <body className={inter.className}>
+    <I18nProviderClient locale={locale} fallback="Loading...">
+      {children}
+    </I18nProviderClient>
+    </body>
+    </html>
+  </SessionProvider>)
 }
diff --git a/components/auth/logout-button.tsx b/components/auth/logout-button.tsx
new file mode 100644
index 0000000..4261585
--- /dev/null
+++ b/components/auth/logout-button.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { logout } from '@/actions/logout'
+
+interface LogoutButtonProps {
+  children?: React.ReactNode
+}
+
+const LogoutButton = ({ children }: LogoutButtonProps) => {
+  const onClick = () => logout()
+
+  return (
+    <span onClick={onClick} className="cursor-pointer">
+      {children}
+    </span>
+  )
+}
+
+export default LogoutButton
+
+
diff --git a/components/auth/user-button.tsx b/components/auth/user-button.tsx
new file mode 100644
index 0000000..eaa18b5
--- /dev/null
+++ b/components/auth/user-button.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { useCurrentUser } from '@/hooks/useCurrentUser'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { FaUser } from 'react-icons/fa6'
+import { IoExitOutline } from 'react-icons/io5'
+import LogoutButton from '@/components/auth/logout-button'
+
+const UserButton = () => {
+  const user = useCurrentUser()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Avatar>
+          <AvatarImage src={user?.image || ''} alt="User Avatar"/>
+          <AvatarFallback className="bg-sky-400">
+            <FaUser className="text-muted"/>
+          </AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-40" align="end">
+        <LogoutButton>
+          <DropdownMenuItem className="cursor-pointer">
+            <IoExitOutline className="w-4 h-4 mr-2"/>
+            Logout
+          </DropdownMenuItem>
+        </LogoutButton>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default UserButton
diff --git a/components/locale-switcher.tsx b/components/locale-switcher.tsx
index ee48414..3dd6250 100644
--- a/components/locale-switcher.tsx
+++ b/components/locale-switcher.tsx
@@ -3,18 +3,18 @@
 import { useChangeLocale, useCurrentLocale } from '@/locales/client'
 import { LC, type loc } from '@/config/locales'
 import { ChangeEvent } from 'react'
-import styles from '@/styles/locale-switcher.module.scss'
 
 export default function LocaleSwitcher () {
   const changeLocale = useChangeLocale()
   const locale = useCurrentLocale()
   const selectHandler = (e: ChangeEvent<HTMLSelectElement>) => changeLocale(e.target.value as loc)
-
+// {cn(styles['yo-locale-switcher'], 'pr-4')}
   return (//@ts-ignore
-    <select className={styles['yo-locale-switcher']} aria-label="Switch language"
+    <select className="appearance-none bg-transparent block text-center text-xs text-sky-600 py-1 px-2 my-2 mx-0 outline-0"
+            aria-label="Switch locale"
             defaultValue={locale} onChange={selectHandler}
     >
-      {LC.map(item => (<option key={item.iso} value={item.code}>
+      {LC.map(item => (<option key={item.iso} value={item.code} className="pr-4">
         {item.iso.toUpperCase()}
       </option>))}
     </select>)
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..51e507b
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..f69a0d6
--- /dev/null
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/config/auth.ts b/config/auth.ts
index b55ced2..ea736b4 100644
--- a/config/auth.ts
+++ b/config/auth.ts
@@ -11,7 +11,7 @@ import { getTwoFactorConfirmationByUserId } from '@/data/two-factor-confirmation
 
 declare module 'next-auth' {
   interface Session {
-    user: { role: UserRole, locale: loc }
+    user: { role: UserRole, locale: loc, image?: string }
   }
 }
 
diff --git a/hooks/useCurrentUser.ts b/hooks/useCurrentUser.ts
new file mode 100644
index 0000000..d04e5e7
--- /dev/null
+++ b/hooks/useCurrentUser.ts
@@ -0,0 +1,7 @@
+import { useSession } from 'next-auth/react'
+
+export const useCurrentUser = () => {
+  const session = useSession()
+
+  return session.data?.user
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 796b4eb..838e34a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
         "@auth/prisma-adapter": "^1.5.2",
         "@hookform/resolvers": "^3.3.4",
         "@prisma/client": "^5.12.1",
+        "@radix-ui/react-avatar": "^1.0.4",
+        "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-separator": "^1.0.3",
@@ -1104,6 +1106,32 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz",
+      "integrity": "sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -1208,6 +1236,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz",
+      "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-menu": "2.0.6",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
@@ -1291,6 +1348,46 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
+      "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
@@ -1346,6 +1443,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-primitive": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
@@ -1369,6 +1490,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
diff --git a/package.json b/package.json
index 3af3010..87136bb 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
     "@auth/prisma-adapter": "^1.5.2",
     "@hookform/resolvers": "^3.3.4",
     "@prisma/client": "^5.12.1",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
diff --git a/styles/locale-switcher.module.scss b/styles/locale-switcher.module.scss
deleted file mode 100644
index d4242ab..0000000
--- a/styles/locale-switcher.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.yo-locale-switcher {
-  appearance: none;
-  display: block;
-  text-align: center;
-  padding: 0;
-  color: darkblue;
-  //width: 2.5rem;
-  //height: 2.5rem;
-  border-radius: 2px;
-  margin: .5rem 1rem;
-  font-size: .75rem;
-}
\ No newline at end of file