diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 1d6c2b45..0aaa6092 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,12 +1,12 @@
 'use client'
-import Link from 'next/link'
 import Image from 'next/image'
-import { useEffect, useState } from 'react'
+import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { List, MagnifyingGlass, X } from 'phosphor-react'
-import Search from './Search'
+import { useEffect, useState } from 'react'
 import { gettingStartedRoutes, navbarRoutes, routes } from '../../routes/routes'
 import { Accordion, Typography } from '../src'
+import Search from './Search'
 
 const Navbar = () => {
   const [active, setActive] = useState(false)
@@ -97,13 +97,13 @@ const Navbar = () => {
               className="grayscale transition duration-300 hover:grayscale-0 sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
               <MagnifyingGlass size={20} color="#455468" />
             </button>
-            <a
+            <Link
               href="https://github.com/StaticMania/keep-react"
               target="_blank"
               className="grayscale transition duration-300 hover:grayscale-0 sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
               <Image src="/images/icon/github.svg" height={20} width={20} alt="github" />
-            </a>
-            <a
+            </Link>
+            <Link
               href="https://react-storybook.keepdesign.io"
               target="_blank"
               className="grayscale transition duration-300 hover:grayscale-0 sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
@@ -118,13 +118,13 @@ const Navbar = () => {
                 xmlns="http://www.w3.org/2000/svg">
                 <path d="M16.71.243l-.12 2.71a.18.18 0 00.29.15l1.06-.8.9.7a.18.18 0 00.28-.14l-.1-2.76 1.33-.1a1.2 1.2 0 011.279 1.2v21.596a1.2 1.2 0 01-1.26 1.2l-16.096-.72a1.2 1.2 0 01-1.15-1.16l-.75-19.797a1.2 1.2 0 011.13-1.27L16.7.222zM13.64 9.3c0 .47 3.16.24 3.59-.08 0-3.2-1.72-4.89-4.859-4.89-3.15 0-4.899 1.72-4.899 4.29 0 4.45 5.999 4.53 5.999 6.959 0 .7-.32 1.1-1.05 1.1-.96 0-1.35-.49-1.3-2.16 0-.36-3.649-.48-3.769 0-.27 4.03 2.23 5.2 5.099 5.2 2.79 0 4.969-1.49 4.969-4.18 0-4.77-6.099-4.64-6.099-6.999 0-.97.72-1.1 1.13-1.1.45 0 1.25.07 1.19 1.87z"></path>
               </svg>
-            </a>
-            <a
-              href="https://discord.com/invite/xsNDwPks"
+            </Link>
+            <Link
+              href="https://discord.gg/xTf6w2nm9Z"
               target="_blank"
               className="grayscale transition duration-300 hover:grayscale-0 sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
               <Image src="/images/icon/discord.svg" height={20} width={20} alt="github" />
-            </a>
+            </Link>
             <button onClick={() => setActive(!active)}>
               {active ? (
                 <span>
diff --git a/app/components/TopProgressBar.tsx b/app/components/TopProgressBar.tsx
index 5f98f8ca..0c62232f 100644
--- a/app/components/TopProgressBar.tsx
+++ b/app/components/TopProgressBar.tsx
@@ -1,13 +1,12 @@
 'use client'
-
 import { AppProgressBar as ProgressBar } from 'next-nprogress-bar'
-import React from 'react'
+import { Suspense } from 'react'
 
 const TopProgressBar = () => {
   return (
-    <>
+    <Suspense>
       <ProgressBar height="2px" color="#1B4DFF" options={{ showSpinner: false }} />
-    </>
+    </Suspense>
   )
 }
 
diff --git a/package.json b/package.json
index 40f10715..a3e42996 100644
--- a/package.json
+++ b/package.json
@@ -136,5 +136,10 @@
       "npm run lint",
       "npm run format"
     ]
+  },
+  "resolutions": {
+    "string-width": "4.2.2",
+    "strip-ansi": "6.0.1",
+    "wrap-ansi": "7.0.0"
   }
 }