diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9e40b0fc..8598c752 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @baseapp-frontend/components
 
+## 1.0.21
+
+### Patch Changes
+
+- Change `Link` component in `NavItem`, to use Link from next/link instead of Material UI Link.
+- Change `Header` border bottom from dashed to solid
+
 ## 1.0.20
 
 ### Patch Changes
diff --git a/packages/components/modules/navigations/web/Header/styled.tsx b/packages/components/modules/navigations/web/Header/styled.tsx
index 1ae4b5e5..dc99bcd2 100644
--- a/packages/components/modules/navigations/web/Header/styled.tsx
+++ b/packages/components/modules/navigations/web/Header/styled.tsx
@@ -31,7 +31,7 @@ export const CustomAppBar = styled(AppBar)<CustomAppBarProps>(({ theme, themeLay
         width: '100%',
         backgroundColor: theme.palette.background.default,
         height: HEADER_HEIGHT.DESKTOP_OFFSET,
-        borderBottom: `dashed 1px ${theme.palette.divider}`,
+        borderBottom: `solid 1px ${theme.palette.divider}`,
       }),
       ...(isNavMini && {
         width: `calc(100% - ${NAV_WIDTH.MINI + 1}px)`,
diff --git a/packages/components/modules/navigations/web/NavMini/NavSectionMini/NavList/NavItem/index.tsx b/packages/components/modules/navigations/web/NavMini/NavSectionMini/NavList/NavItem/index.tsx
index 2453c534..b0dfca66 100644
--- a/packages/components/modules/navigations/web/NavMini/NavSectionMini/NavList/NavItem/index.tsx
+++ b/packages/components/modules/navigations/web/NavMini/NavSectionMini/NavList/NavItem/index.tsx
@@ -4,8 +4,8 @@ import { ChevronIcon } from '@baseapp-frontend/design-system/components/web/icon
 import { Iconify } from '@baseapp-frontend/design-system/components/web/images'
 
 import Box from '@mui/material/Box'
-import Link from '@mui/material/Link'
 import Tooltip from '@mui/material/Tooltip'
+import Link from 'next/link'
 
 import type { NavItemProps } from '../../../../types'
 import { StyledNavItem } from './styled'
@@ -69,10 +69,9 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
           href={path}
           target="_blank"
           rel="noopener noreferrer"
-          color="inherit"
-          underline="none"
-          sx={{
-            width: 1,
+          style={{
+            color: 'inherit',
+            textDecoration: 'none',
             ...(disabled && {
               pointerEvents: 'none',
             }),
@@ -85,10 +84,9 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
     return (
       <Link
         href={path}
-        color="inherit"
-        underline="none"
-        sx={{
-          width: 1,
+        style={{
+          color: 'inherit',
+          textDecoration: 'none',
           ...(disabled && {
             pointerEvents: 'none',
           }),
diff --git a/packages/components/modules/navigations/web/__shared__/NavSectionHorizontal/NavList/NavItem/index.tsx b/packages/components/modules/navigations/web/__shared__/NavSectionHorizontal/NavList/NavItem/index.tsx
index 08d1f03c..6cfb4be0 100644
--- a/packages/components/modules/navigations/web/__shared__/NavSectionHorizontal/NavList/NavItem/index.tsx
+++ b/packages/components/modules/navigations/web/__shared__/NavSectionHorizontal/NavList/NavItem/index.tsx
@@ -75,8 +75,6 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
           href={path}
           target="_blank"
           rel="noopener"
-          color="inherit"
-          underline="none"
           disabled={disabled}
           active={active}
           hasTabLayout={hasTabLayout}
@@ -88,8 +86,6 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
     return (
       <StyledLink
         href={path}
-        color="inherit"
-        underline="none"
         disabled={disabled}
         active={active}
         hasTabLayout={hasTabLayout}
diff --git a/packages/components/modules/navigations/web/__shared__/NavSectionHorizontal/NavList/NavItem/styled.tsx b/packages/components/modules/navigations/web/__shared__/NavSectionHorizontal/NavList/NavItem/styled.tsx
index 53dce3ee..52a7d3f8 100644
--- a/packages/components/modules/navigations/web/__shared__/NavSectionHorizontal/NavList/NavItem/styled.tsx
+++ b/packages/components/modules/navigations/web/__shared__/NavSectionHorizontal/NavList/NavItem/styled.tsx
@@ -1,5 +1,6 @@
-import { Link, ListItemButton } from '@mui/material'
+import { ListItemButton } from '@mui/material'
 import { styled } from '@mui/material/styles'
+import Link from 'next/link'
 
 import { StyledLinkProps, StyledNavItemProps } from './types'
 
@@ -123,6 +124,8 @@ export const StyledNavItem = styled(ListItemButton, {
 export const StyledLink = styled(Link)<StyledLinkProps>(
   ({ theme, disabled, hasTabLayout, active }) => ({
     pointerEvents: disabled ? 'none' : 'cursor',
+    color: 'inherit',
+    textDecoration: 'none',
     display: 'flex',
     alignItems: 'center',
     borderBottom: hasTabLayout && active ? `2px solid ${theme.palette.grey[800]}` : 'none',
@@ -132,3 +135,4 @@ export const StyledLink = styled(Link)<StyledLinkProps>(
     variants: [],
   }),
 )
+
diff --git a/packages/components/modules/navigations/web/__shared__/NavSectionVertical/Group/NavList/NavItem/index.tsx b/packages/components/modules/navigations/web/__shared__/NavSectionVertical/Group/NavList/NavItem/index.tsx
index 60f96098..41b3e2d9 100644
--- a/packages/components/modules/navigations/web/__shared__/NavSectionVertical/Group/NavList/NavItem/index.tsx
+++ b/packages/components/modules/navigations/web/__shared__/NavSectionVertical/Group/NavList/NavItem/index.tsx
@@ -2,7 +2,8 @@ import { forwardRef } from 'react'
 
 import { ChevronIcon } from '@baseapp-frontend/design-system/components/web/icons'
 
-import { Box, Link, Tooltip } from '@mui/material'
+import { Box, Tooltip } from '@mui/material'
+import Link from 'next/link'
 
 import type { NavItemProps } from '../../../../../types'
 import { StyledNavItem } from './styled'
@@ -87,9 +88,9 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
           href={path}
           target="_blank"
           rel="noopener"
-          color="inherit"
-          underline="none"
-          sx={{
+          style={{
+            color: 'inherit',
+            textDecoration: 'none',
             ...(disabled && {
               pointerEvents: 'none',
             }),
@@ -102,9 +103,9 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
     return (
       <Link
         href={path}
-        color="inherit"
-        underline="none"
-        sx={{
+        style={{
+          color: 'inherit',
+          textDecoration: 'none',
           ...(disabled && {
             pointerEvents: 'none',
           }),
diff --git a/packages/components/package.json b/packages/components/package.json
index d5417e85..eaa05731 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c6f29795..50859397 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2794,6 +2794,7 @@ packages:
   '@faker-js/faker@9.4.0':
     resolution: {integrity: sha512-85+k0AxaZSTowL0gXp8zYWDIrWclTbRPg/pm/V0dSFZ6W6D4lhcG3uuZl4zLsEKfEvs69xDbLN2cHQudwp95JA==}
     engines: {node: '>=18.0.0', npm: '>=9.0.0'}
+    deprecated: Please update to a newer version
 
   '@floating-ui/core@1.6.9':
     resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}