diff --git a/src/layouts/HeaderWithNav.jsx b/src/layouts/HeaderWithNav.jsx
index 835935f..083f734 100644
--- a/src/layouts/HeaderWithNav.jsx
+++ b/src/layouts/HeaderWithNav.jsx
@@ -2,83 +2,52 @@ import React from 'react';
 
 export default function HeaderWithNav() {
     return (
-        <header className='p-3 mb-3 border-bottom'>
-            <div className='container'>
-                <div className='d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start'>
-                    <a
-                        href='/'
-                        className='d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none'
-                    >
-                        {/* <svg className='bi me-2' width='40' height='32'>
-                            <use xlink:href='#bootstrap' />
-                        </svg> */}
-                        <span className='fs-4'>OOIN 智能知识库</span>
+        <header className=' navbar navbar-expand-lg'>
+            <nav class='navbar navbar-expand-lg border-bottom p-3 mb-3 w-100'>
+                <div class='container-fluid'>
+                    <a class='navbar-brand' href='#'>
+                        OOIN 智能知识库
                     </a>
-
-                    <ul className='nav col-12 col-lg-auto col-md-auto me-lg-auto mb-2 justify-content-center mb-md-0'>
-                        <li>
-                            <a href='#' className='nav-link px-2 link-dark'>
-                                知识库
-                            </a>
-                        </li>
-                        <li>
-                            <a href='#' className='nav-link px-2 link-secondary'>
-                                Chat
-                            </a>
-                        </li>
-                    </ul>
-
-                    <ul className='nav'>
-                        <li className='nav-item'>
-                            <a href='#' className='nav-link link-dark px-2'>
-                                Login
-                            </a>
-                        </li>
-                        <li className='nav-item'>
-                            <a href='#' className='nav-link link-dark px-2'>
-                                Sign up
-                            </a>
-                        </li>
-                    </ul>
-
-                    {/* <div className='dropdown text-end'>
-                        <a
-                            href='#'
-                            className='d-block link-dark text-decoration-none dropdown-toggle'
-                            data-bs-toggle='dropdown'
-                            aria-expanded='false'
-                        >
-                            <img
-                                src='https://github.com/mdo.png'
-                                alt='mdo'
-                                width='32'
-                                height='32'
-                                className='rounded-circle'
-                            />
-                        </a>
-                        <ul className='dropdown-menu text-small'>
-                            <li>
-                                <a className='dropdown-item' href='#'>
-                                    Settings
+                    <button
+                        class='navbar-toggler'
+                        type='button'
+                        data-bs-toggle='collapse'
+                        data-bs-target='#navbarText'
+                        aria-controls='navbarText'
+                        aria-expanded='false'
+                        aria-label='Toggle navigation'
+                    >
+                        <span class='navbar-toggler-icon'></span>
+                    </button>
+                    <div class='collapse navbar-collapse' id='navbarText'>
+                        <ul class='navbar-nav me-auto mb-lg-0'>
+                            <li class='nav-item'>
+                                <a class='nav-link active' aria-current='page' href='#'>
+                                    知识库
                                 </a>
                             </li>
-                            <li>
-                                <a className='dropdown-item' href='#'>
-                                    Profile
-                                </a>
-                            </li>
-                            <li>
-                                <hr className='dropdown-divider' />
-                            </li>
-                            <li>
-                                <a className='dropdown-item' href='#'>
-                                    Sign out
+                            <li class='nav-item'>
+                                <a class='nav-link' href='#'>
+                                    Chat
                                 </a>
                             </li>
                         </ul>
-                    </div> */}
+                        <hr className='d-lg-none'/>
+                        <ul class='navbar-nav mb-2 mb-lg-0'>
+                            <li class='nav-item'>
+                                <a class='nav-link text-dark' href='#'>
+                                    Log in
+                                </a>
+                            </li>
+                            <li class='nav-item'>
+                                <a class='nav-link text-dark' href='#'>
+                                    Sign up
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
-            </div>
+            </nav>
         </header>
     );
 }