diff --git a/src/assets/css/hide-scrollbar.scss b/src/assets/css/hide-scrollbar.scss
new file mode 100644
index 0000000..fe32d78
--- /dev/null
+++ b/src/assets/css/hide-scrollbar.scss
@@ -0,0 +1,15 @@
+body {
+  overflow: hidden;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+#hide-scrollbar {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  overflow: scroll;
+}
\ No newline at end of file
diff --git a/src/components/HideScrollbar.tsx b/src/components/HideScrollbar.tsx
new file mode 100644
index 0000000..43fccf7
--- /dev/null
+++ b/src/components/HideScrollbar.tsx
@@ -0,0 +1,47 @@
+import React, { PropsWithChildren } from 'react'
+import '@/assets/css/hide-scrollbar.scss'
+
+const HideScrollbar: React.FC<PropsWithChildren> = (prop: PropsWithChildren) => {
+    const hideScrollbarRef = useRef<HTMLDivElement>(null)
+    const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
+    const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
+
+    useEffect(() => {
+        const hideScrollbarElement = hideScrollbarRef.current
+
+        const windowResizeListener = () => {
+            setVerticalScrollbarWidth(
+                (hideScrollbarElement?.offsetWidth ?? 0) - (hideScrollbarElement?.clientWidth ?? 0)
+            )
+            setHorizontalScrollbarWidth(
+                (hideScrollbarElement?.offsetHeight ?? 0) -
+                    (hideScrollbarElement?.clientHeight ?? 0)
+            )
+
+            return windowResizeListener
+        }
+
+        window.addEventListener('resize', windowResizeListener())
+
+        return () => {
+            window.removeEventListener('resize', windowResizeListener())
+        }
+    }, [])
+
+    return (
+        <>
+            <div
+                ref={hideScrollbarRef}
+                id={'hide-scrollbar'}
+                style={{
+                    width: `calc(100vw + ${verticalScrollbarWidth}px)`,
+                    height: `calc(100vh + ${horizontalScrollbarWidth}px`
+                }}
+            >
+                {prop.children}
+            </div>
+        </>
+    )
+}
+
+export default HideScrollbar
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 1eeda90..948ef5c 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -44,6 +44,7 @@ const Home: React.FC = () => {
                     </div>
                 </FitCenter>
             </FitFullScreen>
+            <FitFullScreen />
         </>
     )
 }
diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx
index 4f1a3dd..4648329 100644
--- a/src/pages/MainFramework.tsx
+++ b/src/pages/MainFramework.tsx
@@ -2,6 +2,7 @@ import React, { createContext } from 'react'
 import '@/assets/css/header.scss'
 import LoadingMask from '@/components/LoadingMask.tsx'
 import router from '@/router'
+import HideScrollbar from '@/components/HideScrollbar.tsx'
 
 export const MainFrameworkContext = createContext<{
     navbarHiddenState: {
@@ -22,45 +23,47 @@ const MainFramework: React.FC = () => {
 
     return (
         <>
-            <div className={'body'}>
-                <header className={'nav ' + (navbarHidden ? 'hide' : '')}>
-                    <a className={'logo'} href={'https://fatweb.top'}>
-                        <span className={'title'}>FatWeb</span>
-                    </a>
-                    <nav>
-                        <ul className={'menu'}>
-                            {routeChildren?.map((route) => {
-                                return (
-                                    <li className={'item'}>
-                                        <NavLink
-                                            to={route.path ?? ''}
-                                            className={({ isActive, isPending }) =>
-                                                isPending ? 'pending' : isActive ? 'active' : ''
-                                            }
-                                        >
-                                            {(route.handle as RouteHandle).name}
-                                        </NavLink>
-                                    </li>
-                                )
-                            })}
-                        </ul>
-                    </nav>
-                </header>
+            <HideScrollbar>
+                <div className={'body'}>
+                    <header className={'nav ' + (navbarHidden ? 'hide' : '')}>
+                        <a className={'logo'} href={'https://fatweb.top'}>
+                            <span className={'title'}>FatWeb</span>
+                        </a>
+                        <nav>
+                            <ul className={'menu'}>
+                                {routeChildren?.map((route) => {
+                                    return (
+                                        <li className={'item'}>
+                                            <NavLink
+                                                to={route.path ?? ''}
+                                                className={({ isActive, isPending }) =>
+                                                    isPending ? 'pending' : isActive ? 'active' : ''
+                                                }
+                                            >
+                                                {(route.handle as RouteHandle).name}
+                                            </NavLink>
+                                        </li>
+                                    )
+                                })}
+                            </ul>
+                        </nav>
+                    </header>
 
-                <MainFrameworkContext.Provider
-                    value={{ navbarHiddenState: { navbarHidden, setNavbarHidden } }}
-                >
-                    <Suspense
-                        fallback={
-                            <>
-                                <LoadingMask />
-                            </>
-                        }
+                    <MainFrameworkContext.Provider
+                        value={{ navbarHiddenState: { navbarHidden, setNavbarHidden } }}
                     >
-                        <Outlet />
-                    </Suspense>
-                </MainFrameworkContext.Provider>
-            </div>
+                        <Suspense
+                            fallback={
+                                <>
+                                    <LoadingMask />
+                                </>
+                            }
+                        >
+                            <Outlet />
+                        </Suspense>
+                    </MainFrameworkContext.Provider>
+                </div>
+            </HideScrollbar>
         </>
     )
 }