Some interactions

components/core/UserNav/DropdownMenu.module.css

@@ -3,7 +3,7 @@
 
   @screen lg {
     @apply absolute right-0 w-screen;
-    max-width: 160px;
+    max-width: 200px;
   }
 
   & .dropdownMenuContainer {
@@ -15,8 +15,12 @@
   }
 
   & .link {
-    @apply cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
+    @apply flex space-x-2 cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
     text-transform: capitalize;
+
+    & .icons svg {
+      @apply w-6 h-6;
+    }
   }
 
   &.off {

components/core/UserNav/DropdownMenu.tsx

@@ -9,7 +9,7 @@ import {
 } from '@react-aria/overlays'
 import Link from 'next/link'
 import cn from 'classnames'
-
+import { Moon, Sun } from '@components/icon'
 interface DropdownMenuProps {
   onClose: () => void
   innerRef: React.MutableRefObject<HTMLInputElement>
@@ -54,7 +54,12 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
               theme === 'dark' ? setTheme('light') : setTheme('dark')
             }
           >
-            Theme: <strong>{theme}</strong>
+            <span>
+              Theme: <strong>{theme}</strong>{' '}
+            </span>
+            <span className={s.icons}>
+              {theme === 'dark' ? <Moon /> : <Sun />}
+            </span>
           </a>
           <Link href="#">
             <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>

components/icon/Moon.tsx

@@ -0,0 +1,19 @@
+const Moon = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+    >
+      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+    </svg>
+  )
+}
+
+export default Moon

components/icon/Sun.tsx

@@ -0,0 +1,27 @@
+const Sun = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+    >
+      <circle cx="12" cy="12" r="5" />
+      <path d="M12 1v2" />
+      <path d="M12 21v2" />
+      <path d="M4.22 4.22l1.42 1.42" />
+      <path d="M18.36 18.36l1.42 1.42" />
+      <path d="M1 12h2" />
+      <path d="M21 12h2" />
+      <path d="M4.22 19.78l1.42-1.42" />
+      <path d="M18.36 5.64l1.42-1.42" />
+    </svg>
+  )
+}
+
+export default Sun

components/icon/index.ts

@@ -6,3 +6,5 @@ export { default as ArrowLeft } from './ArrowLeft'
 export { default as Plus } from './Plus'
 export { default as Minus } from './Minus'
 export { default as Check } from './Check'
+export { default as Sun } from './Sun'
+export { default as Moon } from './Moon'