diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 2fc138fd..f655c551 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -28,7 +28,7 @@ const Navbar = () => {
   }
 
   return (
-    <header className="border-metal-100 fixed top-0 z-50 w-full border-b bg-white">
+    <header className="fixed top-0 z-50 w-full border-b border-metal-100 bg-white">
       <div className="relative px-6 2xl:container">
         <nav className="flex items-center justify-between py-4">
           <div className="flex items-center space-x-28">
@@ -42,7 +42,7 @@ const Navbar = () => {
                   key={nav.id}
                   href={nav.href}
                   target={nav.redirect ? '_blank' : '_self'}
-                  className="text-metal-500 hover:text-metal-900 active:text-metal-900 text-body-5 font-normal">
+                  className="text-body-5 font-normal text-metal-500 hover:text-metal-900 active:text-metal-900">
                   {nav.name}
                 </Link>
               ))}
@@ -78,14 +78,14 @@ const Navbar = () => {
               </svg>
             </a>
             <a
-              href="https://discord.com/invite/xsNDwPks"
+              href="https://discord.gg/fSxDJyvJmr"
               target="_blank"
               className="rounded hover:bg-primary-50 sm:bg-primary-25 sm:p-3">
-              <DiscordLogo size={20} color="#5562EA" />
+              <Image src="/images/icon/discord.svg" height={20} width={20} alt="github" />
             </a>
             <Link
               href="/docs/getting-started/Introduction"
-              className="border-metal-900 bg-metal-900 hover:bg-metal-800 focus:ring-metal-800 active:bg-metal-900 group h-min  w-fit justify-center rounded-md border px-4 py-2.5 text-center text-body-5 font-medium capitalize text-white transition-all duration-75 ease-in focus:ring-4">
+              className="group h-min w-fit justify-center rounded-md border border-metal-900  bg-metal-900 px-4 py-2.5 text-center text-body-5 font-medium capitalize text-white transition-all duration-75 ease-in hover:bg-metal-800 focus:ring-4 focus:ring-metal-800 active:bg-metal-900">
               get started
             </Link>
           </div>
@@ -135,7 +135,7 @@ const Navbar = () => {
           </div>
           <div
             id="linkPage"
-            className={`border-l-metal-100 fixed right-0 top-[73px] h-screen w-72 overflow-y-auto border-l bg-white pl-8 transition-all duration-300 lg:hidden ${
+            className={`fixed right-0 top-[73px] h-screen w-72 overflow-y-auto border-l border-l-metal-100 bg-white pl-8 transition-all duration-300 lg:hidden ${
               active ? 'translate-x-0' : 'translate-x-full'
             }`}>
             <div className="mt-5 space-y-3 pr-4">
@@ -156,13 +156,13 @@ const Navbar = () => {
                     theme={{
                       base: 'text-metal-500 font-normal',
                     }}>
-                    <ul className="border-l-metal-100 -ml-px mt-3 space-y-2 border-l">
+                    <ul className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
                       {navbarRoutes.map((route) => (
                         <li key={route.id}>
                           <Link
-                            className={`text-metal-500 hover:border-metal-500 hover:text-metal-900 -ml-px border-l  border-l-transparent pl-3 text-body-5 leading-[28px] tracking-[-0.2px] hover:-ml-px hover:border-l ${
+                            className={`-ml-px border-l border-l-transparent pl-3 text-body-5  leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
                               IsActive(route.href)
-                                ? '!border-metal-900 text-metal-900 border-l transition-all duration-150'
+                                ? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
                                 : ''
                             }`}
                             href={route.href}>
@@ -191,13 +191,13 @@ const Navbar = () => {
                     theme={{
                       base: 'text-metal-500 font-normal',
                     }}>
-                    <ul className="border-l-metal-100 -ml-px mt-3 space-y-2 border-l">
+                    <ul className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
                       {gettingStartedRoutes.map((route) => (
                         <li key={route.id}>
                           <Link
-                            className={`text-metal-500 hover:border-metal-500 hover:text-metal-900 -ml-px border-l  border-l-transparent pl-3 text-body-5 leading-[28px] tracking-[-0.2px] hover:-ml-px hover:border-l ${
+                            className={`-ml-px border-l border-l-transparent pl-3 text-body-5  leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
                               IsActive(route.href)
-                                ? '!border-metal-900 text-metal-900 border-l transition-all duration-150'
+                                ? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
                                 : ''
                             }`}
                             href={route.href}>
@@ -227,13 +227,13 @@ const Navbar = () => {
                     theme={{
                       base: '',
                     }}>
-                    <ul className="border-l-metal-100 mt-3 space-y-2 border-l pb-24">
+                    <ul className="mt-3 space-y-2 border-l border-l-metal-100 pb-24">
                       {routes.map((route) => (
                         <li key={route.id}>
                           <Link
-                            className={`text-metal-500 hover:border-metal-500 hover:text-metal-900 -ml-px border-l  border-l-transparent pl-3 text-body-5 leading-[28px] tracking-[-0.2px] hover:-ml-px hover:border-l ${
+                            className={`-ml-px border-l border-l-transparent pl-3 text-body-5  leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
                               IsActive(route.href)
-                                ? '!border-metal-900 text-metal-900 border-l transition-all duration-150'
+                                ? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
                                 : ''
                             }`}
                             href={route.href}>
diff --git a/public/images/icon/discord.svg b/public/images/icon/discord.svg
new file mode 100644
index 00000000..9b4ed8fe
--- /dev/null
+++ b/public/images/icon/discord.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+   <circle cx="512" cy="512" r="512" style="fill:#5865f2"/>
+   <path d="M689.43 349a422.21 422.21 0 0 0-104.22-32.32 1.58 1.58 0 0 0-1.68.79 294.11 294.11 0 0 0-13 26.66 389.78 389.78 0 0 0-117.05 0 269.75 269.75 0 0 0-13.18-26.66 1.64 1.64 0 0 0-1.68-.79A421 421 0 0 0 334.44 349a1.49 1.49 0 0 0-.69.59c-66.37 99.17-84.55 195.9-75.63 291.41a1.76 1.76 0 0 0 .67 1.2 424.58 424.58 0 0 0 127.85 64.63 1.66 1.66 0 0 0 1.8-.59 303.45 303.45 0 0 0 26.15-42.54 1.62 1.62 0 0 0-.89-2.25 279.6 279.6 0 0 1-39.94-19 1.64 1.64 0 0 1-.16-2.72c2.68-2 5.37-4.1 7.93-6.22a1.58 1.58 0 0 1 1.65-.22c83.79 38.26 174.51 38.26 257.31 0a1.58 1.58 0 0 1 1.68.2c2.56 2.11 5.25 4.23 8 6.24a1.64 1.64 0 0 1-.14 2.72 262.37 262.37 0 0 1-40 19 1.63 1.63 0 0 0-.87 2.28 340.72 340.72 0 0 0 26.13 42.52 1.62 1.62 0 0 0 1.8.61 423.17 423.17 0 0 0 128-64.63 1.64 1.64 0 0 0 .67-1.18c10.68-110.44-17.88-206.38-75.7-291.42a1.3 1.3 0 0 0-.63-.63zM427.09 582.85c-25.23 0-46-23.16-46-51.6s20.38-51.6 46-51.6c25.83 0 46.42 23.36 46 51.6.02 28.44-20.37 51.6-46 51.6zm170.13 0c-25.23 0-46-23.16-46-51.6s20.38-51.6 46-51.6c25.83 0 46.42 23.36 46 51.6.01 28.44-20.17 51.6-46 51.6z" style="fill:#fff"/>
+</svg>
\ No newline at end of file