diff --git a/apps/web/src/components/menu/index.tsx b/apps/web/src/components/menu/index.tsx
index d20d035..ae0e827 100644
--- a/apps/web/src/components/menu/index.tsx
+++ b/apps/web/src/components/menu/index.tsx
@@ -7,16 +7,79 @@ import { HomeIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid'
 import type { Variants } from 'framer-motion'
 import { AnimatePresence, motion } from 'framer-motion'
 import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { signOut, useSession } from 'next-auth/react'
-
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
 import { useGlobalSearchStore } from '@/store/use-global-search'
-import { useLayoutState } from '@/store/use-layout-state'
 import { useModalStore } from '@/store/use-modal'
-
+import { useLayoutState } from '@/store/use-layout-state'
+import { Skeleton } from '../skeleton'
 import { MyAccountModal } from '../modals/account/info'
 import { AuthModal } from '../modals/auth'
-import { Skeleton } from '../skeleton'
-import { MenuItem } from './item'
+import { PlaylistMenu } from './playlist'
+
+interface MenuItemProps {
+  children: React.ReactNode
+  icon: JSX.Element
+  href?: string
+  onClick?: () => void
+  className?: string
+  active?: boolean
+  loading?: boolean
+  tag?: 'button' | 'a' | 'div'
+}
+
+const MenuItem = ({
+  children,
+  icon,
+  href,
+  onClick,
+  className,
+  active,
+  loading,
+  tag = 'button',
+}: MenuItemProps) => {
+  const router = useRouter()
+
+  const activeClassname =
+    (active ?? router.pathname === href)
+      ? `stroke-primary-500 text-primary-500`
+      : ''
+
+  const Wrapper = href ? Link : tag
+
+  return (
+    <li
+      className={twMerge(
+        `group hover:bg-surface-900 rounded-3xl transition-colors duration-300`,
+        (active ?? router.pathname === href) && 'bg-surface-900',
+        className
+      )}
+    >
+      <Wrapper
+        href={href || '#'}
+        className={twMerge(
+          'block truncate md:w-full md:px-8 md:py-5 py-2',
+          loading && 'cursor-wait'
+        )}
+        onClick={onClick}
+      >
+        <span className='flex md:flex-col md:items-center'>
+          {React.cloneElement<HTMLElement>(icon, {
+            className: `w-7 md:mx-2 mx-4 inline transition-colors ${activeClassname}`,
+          })}
+          <span
+            className={`hidden text-sm transition-colors md:inline ${activeClassname}`}
+          >
+            {children}
+          </span>
+        </span>
+      </Wrapper>
+    </li>
+  )
+}
 
 const navAnim: Variants = {
   hidden: {
@@ -89,8 +152,10 @@ export const Menu = () => {
             {
               label: 'Sign Out',
               onClick: async () => {
-                await signOut({ redirect: false })
-                return
+                if (session.status === 'authenticated') {
+                  await signOut({ redirect: false })
+                  return
+                }
               },
               icon: (
                 <ArrowLeftStartOnRectangleIcon className='mr-2 h-5 shrink-0' />
@@ -173,7 +238,7 @@ export const Menu = () => {
                   animate='show'
                   variants={navAnim}
                 >
-                  <div>Menu playlist</div>
+                  <PlaylistMenu />
                 </motion.div>
               )}
             </AnimatePresence>