diff --git a/ui/ssr-example/src/client/component/Header/GlobalStyle.tsx b/ui/ssr-example/src/client/component/Header/GlobalStyle.tsx
index e8652a13..1afe57ac 100644
--- a/ui/ssr-example/src/client/component/Header/GlobalStyle.tsx
+++ b/ui/ssr-example/src/client/component/Header/GlobalStyle.tsx
@@ -14,6 +14,7 @@ export const GlobalStyle = () => {
         padding: 3px 5px;
       }
       .hljs {
+        --hljs-color: #383a42;
         color: #383a42;
         background: #fafafa;
       }
@@ -87,6 +88,7 @@ export const GlobalStyle = () => {
         padding: 3px 5px;
       }
       .hljs {
+        --hljs-color: #e9e9f4;
         color: #e9e9f4;
         background: #282936;
       }
diff --git a/ui/ssr-example/src/client/component/ScrollControl/ScrollControlTool.tsx b/ui/ssr-example/src/client/component/ScrollControl/ScrollControlTool.tsx
index b25448a3..6d510373 100644
--- a/ui/ssr-example/src/client/component/ScrollControl/ScrollControlTool.tsx
+++ b/ui/ssr-example/src/client/component/ScrollControl/ScrollControlTool.tsx
@@ -52,8 +52,8 @@ export const ScrollControlTool = ({
                   cursor="pointer"
                   borderRadius="full"
                   sx={{
-                    backgroundColor: currentSection === i ? "red" : "initial",
-                    border: currentSection === i ? "none" : "1px solid #e2e2e2",
+                    backgroundColor: currentSection === i ? "purple.600" : "initial",
+                    border: currentSection === i ? "none" : "1.5px solid #e2e2e2",
                   }}
                   onClick={() => clickHandler(i)}
                 />
diff --git a/ui/ssr-example/src/client/container/Section/Main.tsx b/ui/ssr-example/src/client/container/Section/Main.tsx
index 836fefb7..9eb542e7 100644
--- a/ui/ssr-example/src/client/container/Section/Main.tsx
+++ b/ui/ssr-example/src/client/container/Section/Main.tsx
@@ -63,7 +63,7 @@ export const MainSection = () => {
             This website is built with <Tag>@my-react</Tag> project. <br /> Version: @my-react/react [{reactVersion}]; @my-react/react-dom [{reactDOMVersion}]
             (enableMockReact: <Checkbox isChecked={enableMockReact.current} readOnly />)
           </Text>
-          <HStack marginTop="14" spacing="4" display={{ base: "none", md: "flex" }} fontSize={{ md: "12px", lg: "14px", xl: "16px" }}>
+          <HStack marginTop="14" spacing="3" display={{ base: "none", md: "flex" }} fontSize={{ md: "12px", lg: "13px", xl: "14px" }}>
             <Button
               variant="solid"
               fontSize="inherit"
diff --git a/ui/ssr-example/src/client/container/Section/Next.tsx b/ui/ssr-example/src/client/container/Section/Next.tsx
index e3950ed1..fda73036 100644
--- a/ui/ssr-example/src/client/container/Section/Next.tsx
+++ b/ui/ssr-example/src/client/container/Section/Next.tsx
@@ -1,10 +1,13 @@
 import { Box, Button, Container, Flex, HStack, Heading, Icon, Spacer, Tag, Text, Tooltip, useColorModeValue } from "@chakra-ui/react";
+import { useEffect, useRef } from "react";
 import { HiChevronDoubleRight } from "react-icons/hi";
+import { useLocation } from "react-router";
 
 import { Section } from "@client/component";
 import { Card } from "@client/component/Card";
 import { NextPlayground } from "@client/component/NextPlayground";
 import { CONTAINER_WIDTH } from "@client/config/container";
+import { useIsMounted } from "@client/hooks";
 import { mark } from "@client/utils/markdown";
 
 // const Iframe = chakra("iframe");
@@ -49,6 +52,18 @@ const renderBody = mark.render(shellMd);
 export const NextSection = () => {
   const bgColor = useColorModeValue("gray.300", "gray.600");
 
+  const { hash } = useLocation();
+
+  const isMounted = useIsMounted();
+
+  const ref = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    if (isMounted && hash && hash === "#next-section") {
+      ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [hash, isMounted]);
+
   return (
     <Container maxWidth={CONTAINER_WIDTH} minHeight="100vh" marginTop="4%">
       <Flex justifyContent="center" flexDirection={{ base: "column", md: "row" }} marginX={{ base: "2", md: "6%", lg: "8%", xl: "10%", "2xl": "12%" }}>
@@ -115,8 +130,8 @@ export const NextSection = () => {
           />
         </Section>
       </Flex>
-      <Card overflow="hidden" marginX={{ base: "2", md: "6%", lg: "8%", xl: "10%", "2xl": "12%" }}>
-        <Flex padding="1" fontFamily="monospace" alignItems="center">
+      <Card ref={ref} overflow="hidden" marginX={{ base: "2", md: "6%", lg: "8%", xl: "10%", "2xl": "12%" }}>
+        <Flex padding="1" fontFamily="monospace" alignItems="center" as="a" href="#next-section">
           <Icon as={HiChevronDoubleRight}></Icon>
           <Text marginLeft={2}>NextJS + @my-react</Text>
         </Flex>
diff --git a/ui/ssr-example/src/client/container/Section/Vite.tsx b/ui/ssr-example/src/client/container/Section/Vite.tsx
index 0a56ba0f..aa4a3968 100644
--- a/ui/ssr-example/src/client/container/Section/Vite.tsx
+++ b/ui/ssr-example/src/client/container/Section/Vite.tsx
@@ -1,10 +1,13 @@
 import { Box, Button, Container, Flex, Heading, Icon, Spacer, Tag, Text, Tooltip, useColorModeValue } from "@chakra-ui/react";
+import { useEffect, useRef } from "react";
 import { HiChevronDoubleRight } from "react-icons/hi";
+import { useLocation } from "react-router";
 
 import { Section } from "@client/component";
 import { Card } from "@client/component/Card";
 import { VitePlayground } from "@client/component/VitePlayground";
 import { CONTAINER_WIDTH } from "@client/config/container";
+import { useIsMounted } from "@client/hooks";
 import { mark } from "@client/utils/markdown";
 
 const shellMd = `
@@ -34,6 +37,18 @@ const renderBody = mark.render(shellMd);
 export const ViteSection = () => {
   const bgColor = useColorModeValue("gray.300", "gray.600");
 
+  const { hash } = useLocation();
+
+  const ref = useRef<HTMLDivElement>();
+
+  const isMounted = useIsMounted();
+
+  useEffect(() => {
+    if (isMounted && hash && hash === "#vite-section") {
+      ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [hash, isMounted]);
+
   return (
     <Container maxWidth={CONTAINER_WIDTH} minHeight="100vh" marginTop="4%">
       <Flex justifyContent="center" flexDirection={{ base: "column", md: "row" }} marginX={{ base: "2", md: "6%", lg: "8%", xl: "10%", "2xl": "12%" }}>
@@ -80,8 +95,8 @@ export const ViteSection = () => {
           />
         </Section>
       </Flex>
-      <Card overflow="hidden" marginX={{ base: "2", md: "6%", lg: "8%", xl: "10%", "2xl": "12%" }}>
-        <Flex padding="1" fontFamily="monospace" alignItems="center">
+      <Card ref={ref} overflow="hidden" marginX={{ base: "2", md: "6%", lg: "8%", xl: "10%", "2xl": "12%" }}>
+        <Flex padding="1" fontFamily="monospace" alignItems="center" as="a" href="#vite-section">
           <Icon as={HiChevronDoubleRight}></Icon>
           <Text marginLeft={2}>Vite + @my-react</Text>
         </Flex>
diff --git a/ui/ssr-example/src/client/pages/index.tsx b/ui/ssr-example/src/client/pages/index.tsx
index c2d34dfd..194e0495 100644
--- a/ui/ssr-example/src/client/pages/index.tsx
+++ b/ui/ssr-example/src/client/pages/index.tsx
@@ -11,7 +11,7 @@ const ApiSection = __REACT__ && !__STREAM__ ? _ApiSection : lazy(() => import("@
 
 const Page = () => {
   return (
-    <Box fontFamily='fantasy'>
+    <Box fontFamily="sans-serif">
       <ScrollControl initialSectionLength={4}>
         <ScrollContent>
           <ScrollSection>
diff --git a/ui/ssr-example/src/client/styles/global.scss b/ui/ssr-example/src/client/styles/global.scss
index cde1e3d4..f8fdc7bd 100644
--- a/ui/ssr-example/src/client/styles/global.scss
+++ b/ui/ssr-example/src/client/styles/global.scss
@@ -418,6 +418,6 @@ blockquote {
 }
 
 .code-num {
-  color: initial;
+  color: var(--hljs-color);
   font-style: initial;
 }