diff --git a/blog.config.js b/blog.config.js
index 5c189b9b..b3c84657 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -110,7 +110,9 @@ const BLOG = {
     '/category': 'LayoutCategoryIndex',
     '/[prefix]': 'LayoutSlug',
     '/[prefix]/[slug]': 'LayoutSlug',
-    '/[prefix]/[slug]/[...suffix]': 'LayoutSlug'
+    '/[prefix]/[slug]/[...suffix]': 'LayoutSlug',
+    '/signin': 'LayoutSignIn',
+    '/signup': 'LayoutSignUp'
   },
 
   CAN_COPY: process.env.NEXT_PUBLIC_CAN_COPY || true, // 是否允许复制页面内容 默认允许，如果设置为false、则全栈禁止复制内容。
diff --git a/pages/signin.js b/pages/signin.js
new file mode 100644
index 00000000..9abfb1f8
--- /dev/null
+++ b/pages/signin.js
@@ -0,0 +1,29 @@
+import BLOG from '@/blog.config'
+import { getGlobalData } from '@/lib/notion/getNotionData'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 登录
+ * @param {*} props
+ * @returns
+ */
+const SignIn = props => {
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
+  return <Layout {...props} />
+}
+
+export async function getStaticProps() {
+  const from = 'SignIn'
+  const props = await getGlobalData({ from })
+
+  delete props.allPages
+  return {
+    props,
+    revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND)
+  }
+}
+
+export default SignIn
diff --git a/pages/signup.js b/pages/signup.js
new file mode 100644
index 00000000..d570d46b
--- /dev/null
+++ b/pages/signup.js
@@ -0,0 +1,29 @@
+import BLOG from '@/blog.config'
+import { getGlobalData } from '@/lib/notion/getNotionData'
+import { useRouter } from 'next/router'
+import { getLayoutByTheme } from '@/themes/theme'
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 注册
+ * @param {*} props
+ * @returns
+ */
+const SignUp = props => {
+  // 根据页面路径加载不同Layout文件
+  const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() })
+  return <Layout {...props} />
+}
+
+export async function getStaticProps() {
+  const from = 'SignIn'
+  const props = await getGlobalData({ from })
+
+  delete props.allPages
+  return {
+    props,
+    revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND)
+  }
+}
+
+export default SignUp
diff --git a/themes/example/index.js b/themes/example/index.js
index 4cc14163..2bb24981 100644
--- a/themes/example/index.js
+++ b/themes/example/index.js
@@ -26,7 +26,6 @@ import { useRouter } from 'next/router'
 import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import { siteConfig } from '@/lib/config'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 
 /**
  * 基础布局框架
@@ -262,21 +261,6 @@ const LayoutTagIndex = (props) => {
   )
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -287,6 +271,5 @@ export {
   Layout404,
   LayoutPostList,
   LayoutCategoryIndex,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js
index 42e32b3f..70b367fb 100644
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -21,7 +21,6 @@ import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import { siteConfig } from '@/lib/config'
 import WWAds from '@/components/WWAds'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 
 const Live2D = dynamic(() => import('@/components/Live2D'))
 
@@ -250,21 +249,6 @@ const LayoutTagIndex = (props) => {
     </>
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-  // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -275,6 +259,5 @@ export {
   Layout404,
   LayoutPostList,
   LayoutCategoryIndex,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index ad9ee1d9..73ea61d8 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -34,7 +34,6 @@ import Link from 'next/link'
 import dynamic from 'next/dynamic'
 import { siteConfig } from '@/lib/config'
 import NotionIcon from '@/components/NotionIcon'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
 const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
 
@@ -362,21 +361,6 @@ const LayoutTagIndex = (props) => {
   </>
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -387,6 +371,5 @@ export {
   Layout404,
   LayoutPostList,
   LayoutCategoryIndex,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 8def285d..f10be1a2 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -39,7 +39,6 @@ import LazyImage from '@/components/LazyImage'
 import WWAds from '@/components/WWAds'
 import { AdSlot } from '@/components/GoogleAdsense'
 import { siteConfig } from '@/lib/config'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 import { isBrowser } from '@/lib/utils'
 
 /**
@@ -499,21 +498,6 @@ const LayoutTagIndex = props => {
   )
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -524,6 +508,5 @@ export {
   Layout404,
   LayoutPostList,
   LayoutCategoryIndex,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/hexo/index.js b/themes/hexo/index.js
index b0ec998c..add49e0a 100644
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -32,7 +32,6 @@ import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import { siteConfig } from '@/lib/config'
 import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 
 // 主题全局状态
 const ThemeGlobalHexo = createContext()
@@ -365,21 +364,6 @@ const LayoutTagIndex = props => {
   )
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -390,6 +374,5 @@ export {
   Layout404,
   LayoutCategoryIndex,
   LayoutPostList,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/landing/index.js b/themes/landing/index.js
index 405d246c..d7301d4c 100644
--- a/themes/landing/index.js
+++ b/themes/landing/index.js
@@ -21,7 +21,6 @@ import Loading from '@/components/Loading'
 import { isBrowser } from '@/lib/utils'
 import { siteConfig } from '@/lib/config'
 import { Pricing } from './components/Pricing'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 import { useEffect } from 'react'
 
 /**
@@ -114,21 +113,6 @@ const LayoutCategoryIndex = (props) => <><Hero /></>
 const LayoutPostList = (props) => <><Hero /></>
 const LayoutTagIndex = (props) => <><Hero /></>
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -139,6 +123,5 @@ export {
   Layout404,
   LayoutPostList,
   LayoutCategoryIndex,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/matery/index.js b/themes/matery/index.js
index 453335ba..6adc6e05 100644
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -30,7 +30,6 @@ import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import { siteConfig } from '@/lib/config'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 import { isBrowser } from '@/lib/utils'
 
 /**
@@ -379,21 +378,6 @@ const LayoutTagIndex = props => {
   )
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -404,6 +388,5 @@ export {
   LayoutSlug,
   Layout404,
   LayoutCategoryIndex,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/medium/index.js b/themes/medium/index.js
index d150b813..b4d56abd 100644
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -34,7 +34,6 @@ import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import ArticleInfo from './components/ArticleInfo'
 import { siteConfig } from '@/lib/config'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 
 // 主题全局状态
 const ThemeGlobalMedium = createContext()
@@ -347,21 +346,6 @@ const LayoutTagIndex = props => {
   )
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -372,6 +356,5 @@ export {
   LayoutSlug,
   Layout404,
   LayoutCategoryIndex,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/nav/index.js b/themes/nav/index.js
index 1ec389e3..2b2e4973 100755
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -34,7 +34,6 @@ import { siteConfig } from '@/lib/config'
 import Live2D from '@/components/Live2D'
 import BlogArchiveItem from './components/BlogArchiveItem'
 import NotionIcon from '@/components/NotionIcon'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 import { useRouter } from 'next/router'
 import { isBrowser } from '@/lib/utils'
 
@@ -346,21 +345,6 @@ const LayoutTagIndex = (props) => {
   return <></>
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -371,6 +355,5 @@ export {
   Layout404,
   LayoutCategoryIndex,
   LayoutPostList,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/next/index.js b/themes/next/index.js
index c20dda4c..e0ee29f7 100644
--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -27,7 +27,6 @@ import { siteConfig } from '@/lib/config'
 import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
 import Announcement from './components/Announcement'
 import Card from './components/Card'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 
 // 主题全局状态
 const ThemeGlobalNext = createContext()
@@ -360,21 +359,6 @@ const LayoutTagIndex = (props) => {
     </>
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -385,6 +369,5 @@ export {
   Layout404,
   LayoutCategoryIndex,
   LayoutPostList,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/nobelium/index.js b/themes/nobelium/index.js
index 33815164..85e6faa5 100644
--- a/themes/nobelium/index.js
+++ b/themes/nobelium/index.js
@@ -24,7 +24,6 @@ import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
 import { siteConfig } from '@/lib/config'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 import { useRouter } from 'next/router'
 
 // 主题全局状态
@@ -303,21 +302,6 @@ const LayoutTagIndex = (props) => {
   )
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -328,6 +312,5 @@ export {
   Layout404,
   LayoutPostList,
   LayoutCategoryIndex,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/plog/index.js b/themes/plog/index.js
index 92e77c58..2bb9b610 100644
--- a/themes/plog/index.js
+++ b/themes/plog/index.js
@@ -21,7 +21,6 @@ import Modal from './components/Modal'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import { useRouter } from 'next/router'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 
 // 主题全局状态
 const ThemeGlobalPlog = createContext()
@@ -268,21 +267,6 @@ const LayoutTagIndex = (props) => {
   )
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -293,6 +277,5 @@ export {
   Layout404,
   LayoutPostList,
   LayoutCategoryIndex,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/simple/index.js b/themes/simple/index.js
index b907391d..cf15cb1c 100644
--- a/themes/simple/index.js
+++ b/themes/simple/index.js
@@ -11,7 +11,6 @@ import replaceSearchResult from '@/components/Mark'
 import dynamic from 'next/dynamic'
 import NotionPage from '@/components/NotionPage'
 import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 import { useRouter } from 'next/router'
 
 // 主题组件
@@ -297,21 +296,6 @@ const LayoutTagIndex = (props) => {
   )
 }
 
-/**
- * 根据路径 获取对应的layout
- * @param {*} path
- * @returns
- */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
-}
-
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -322,6 +306,5 @@ export {
   Layout404,
   LayoutCategoryIndex,
   LayoutPostList,
-  LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutTagIndex
 }
diff --git a/themes/starter/components/Banner.js b/themes/starter/components/Banner.js
new file mode 100644
index 00000000..220633ce
--- /dev/null
+++ b/themes/starter/components/Banner.js
@@ -0,0 +1,53 @@
+/**
+ * 详情页面顶部条
+ * @returns
+ */
+export const Banner = ({ title, description }) => {
+  return <>
+    {/* <!-- ====== Banner Section Start --> */}
+    <div
+      className="relative z-10 overflow-hidden pb-[60px] pt-[120px] dark:bg-dark md:pt-[130px] lg:pt-[160px]"
+    >
+      <div
+        className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-stroke/0 via-stroke to-stroke/0 dark:via-dark-3"
+      ></div>
+      <div className="container">
+        <div className="flex flex-wrap items-center -mx-4">
+          <div className="w-full px-4">
+            <div className="text-center">
+              <h1
+                className="mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]"
+              >
+                {title}
+              </h1>
+              <p className="mb-5 text-base text-body-color dark:text-dark-6">
+                {description}
+              </p>
+
+              {/* <ul className="flex items-center justify-center gap-[10px]">
+                <li>
+                  <a
+                    href="index.html"
+                    className="flex items-center gap-[10px] text-base font-medium text-dark dark:text-white"
+                  >
+                    Home
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="javascript:void(0)"
+                    className="flex items-center gap-[10px] text-base font-medium text-body-color"
+                  >
+                    <span className="text-body-color dark:text-dark-6"> / </span>
+                    Blog Details
+                  </a>
+                </li>
+              </ul> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    {/* <!-- ====== Banner Section End --> */}
+    </>
+}
diff --git a/themes/starter/components/Footer.js b/themes/starter/components/Footer.js
index 9724123b..46fcee62 100644
--- a/themes/starter/components/Footer.js
+++ b/themes/starter/components/Footer.js
@@ -7,7 +7,6 @@ import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
 
 /* eslint-disable @next/next/no-img-element */
 export const Footer = (props) => {
-  console.log('prop', props)
   const latestPosts = props?.latestPosts ? props?.latestPosts.slice(0, 2) : []
 
   return <>
@@ -72,7 +71,7 @@ export const Footer = (props) => {
                     href={url}
                     className="group flex items-center gap-[22px]"
                 >
-                    <div className="overflow-hidden rounded w-20">
+                    <div className="overflow-hidden rounded w-20 h-12">
                     <img
                         src={item.pageCoverThumbnail}
                         alt={item.title}
@@ -81,7 +80,7 @@ export const Footer = (props) => {
                     <span
                     className="line-clamp-2 max-w-[180px] text-base text-gray-7 group-hover:text-white"
                     >
-                    {item.summary}
+                    {item.title}
                     </span>
                 </a>
                 })}
diff --git a/themes/starter/components/Logo.js b/themes/starter/components/Logo.js
index f2492f52..56d8268f 100644
--- a/themes/starter/components/Logo.js
+++ b/themes/starter/components/Logo.js
@@ -1,7 +1,7 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
 import { siteConfig } from '@/lib/config';
 import { useGlobal } from '@/lib/global';
 import throttle from 'lodash.throttle';
-import Link from 'next/link'
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import CONFIG from '../config';
@@ -18,41 +18,42 @@ export const Logo = ({ white }) => {
   const [logoTextColor, setLogoTextColor] = useState('text-white')
 
   useEffect(() => {
+    // 滚动监听
+    const throttleMs = 200
+    const navBarScrollListener = throttle(() => {
+      const scrollY = window.scrollY;
+      // 何时显示浅色或白底的logo
+      if (white || isDarkMode || (!isDarkMode && router.route === '/' && scrollY < 1)) {
+        setLogo(siteConfig('STARTER_LOGO_WHITE', null, CONFIG))
+        setLogoTextColor('text-white')
+      } else {
+        setLogo(siteConfig('STARTER_LOGO', null, CONFIG))
+        setLogoTextColor('text-black')
+      }
+    }, throttleMs)
+
     navBarScrollListener()
     window.addEventListener('scroll', navBarScrollListener)
     return () => {
       window.removeEventListener('scroll', navBarScrollListener)
     }
-  })
+  }, [])
 
-  // 滚动监听
-  const throttleMs = 200
-  const navBarScrollListener = throttle(() => {
-    const scrollY = window.scrollY;
-    // 何时显示浅色或白底的logo
-    if (white || isDarkMode || (!isDarkMode && router.route === '/' && scrollY < 1)) {
-      setLogo(siteConfig('STARTER_LOGO_WHITE', null, CONFIG))
-      setLogoTextColor('text-white')
-    } else {
-      setLogo(siteConfig('STARTER_LOGO', null, CONFIG))
-      setLogoTextColor('text-black')
-    }
-  }, throttleMs)
-
-  return <>
-    <div className="w-60 max-w-full px-4">
-        <Link href="/" className="navbar-logo flex items-center w-full py-5">
-        <>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        {logo && <img
-            src={logo}
-            alt="logo"
-            className="header-logo w-full"
-        />}
-        {/* logo文字 */}
-        <span className={`${logoTextColor} py-1.5 header-logo-text whitespace-nowrap text-2xl font-semibold`}>{siteConfig('TITLE')}</span>
-        </>
-        </Link>
+  return <div className="w-60 max-w-full px-4">
+        <div className="navbar-logo flex items-center w-full py-5 cursor-pointer">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            {logo && <img
+                onClick={() => {
+                  router.push('/')
+                }}
+                src={logo}
+                alt="logo"
+                className="header-logo w-full"
+            />}
+            {/* logo文字 */}
+            <span onClick={() => { router.push('/') }} className={`${logoTextColor} dark:text-white py-1.5 header-logo-text whitespace-nowrap text-2xl font-semibold`}>
+                {siteConfig('TITLE')}
+            </span>
+        </div>
     </div>
-    </>
 }
diff --git a/themes/starter/components/NavBar.js b/themes/starter/components/NavBar.js
index 3d5ee672..603313a5 100644
--- a/themes/starter/components/NavBar.js
+++ b/themes/starter/components/NavBar.js
@@ -1,25 +1,33 @@
 /* eslint-disable no-unreachable */
 import throttle from 'lodash.throttle';
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { MenuList } from './MenuList';
 import { DarkModeButton } from './DarkModeButton';
 import { Logo } from './Logo';
 import { useRouter } from 'next/router';
 import { siteConfig } from '@/lib/config';
 import CONFIG from '../config';
+import { useGlobal } from '@/lib/global';
 
 /**
  * 顶部导航栏
  */
 export const NavBar = (props) => {
   const router = useRouter()
+  const { isDarkMode } = useGlobal()
+  const [buttonTextColor, setColor] = useState(router.route === '/' ? 'text-white' : '')
   useEffect(() => {
+    if (isDarkMode) {
+      setColor('text-white')
+    } else {
+      setColor(router.route === '/' ? 'text-white' : '')
+    }
     // ======= Sticky
     window.addEventListener('scroll', navBarScollListener)
     return () => {
       window.removeEventListener('scroll', navBarScollListener)
     }
-  }, [])
+  }, [isDarkMode])
 
   // 滚动监听
   const throttleMs = 200
@@ -61,13 +69,13 @@ export const NavBar = (props) => {
                         <div className="hidden sm:flex">
                             <a
                             href={siteConfig('STARTER_NAV_BUTTON_1_URL', null, CONFIG)}
-                            className={`loginBtn px-[22px] py-2 text-base font-medium ${router.route === '/' ? 'text-white' : ''} hover:opacity-70`}
+                            className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}
                             >
                            {siteConfig('STARTER_NAV_BUTTON_1_TEXT', null, CONFIG)}
                             </a>
                             <a
                             href={siteConfig('STARTER_NAV_BUTTON_2_URL', null, CONFIG)}
-                            className={`signUpBtn rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium ${router.route === '/' ? 'text-white' : ''} duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}
+                            className={`signUpBtn ${buttonTextColor} rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}
                             >
                            {siteConfig('STARTER_NAV_BUTTON_2_TEXT', null, CONFIG)}
                             </a>
diff --git a/themes/starter/components/SignInForm.js b/themes/starter/components/SignInForm.js
new file mode 100644
index 00000000..88781171
--- /dev/null
+++ b/themes/starter/components/SignInForm.js
@@ -0,0 +1,97 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { Logo } from './Logo'
+import { SVGCircleBg2 } from './svg/SVGCircleBG2'
+import { SVGCircleBG3 } from './svg/SVGCircleBG3'
+import { SVGFacebook } from './svg/SVGFacebook'
+import { SVGGoogle } from './svg/SVGGoogle'
+import { SVGTwitter } from './svg/SVGTwitter'
+
+/**
+ * 登录
+ * @returns
+ */
+export const SignInForm = () => {
+  return <>
+      {/* <!-- ====== Forms Section Start --> */}
+  <section className="bg-[#F4F7FF] py-14 lg:py-20 dark:bg-dark">
+    <div className="container">
+      <div className="flex flex-wrap -mx-4">
+        <div className="w-full px-4">
+          <div
+            className="wow fadeInUp relative mx-auto max-w-[525px] overflow-hidden rounded-lg bg-white dark:bg-dark-2 py-14 px-8 text-center sm:px-12 md:px-[60px]"
+            data-wow-delay=".15s">
+            <div className="mb-10 text-center">
+              <div href="javascript:void(0)" className="mx-auto inline-block max-w-[160px]">
+                <Logo/>
+              </div>
+            </div>
+
+            {/* 表单内容 */}
+            <form>
+              <div className="mb-[22px]">
+                <input type="email" placeholder="Email"
+                  className="w-full px-5 py-3 text-base transition bg-transparent border rounded-md outline-none border-stroke dark:border-dark-3 text-body-color dark:text-dark-6 placeholder:text-dark-6 focus:border-primary dark:focus:border-primary focus-visible:shadow-none" />
+              </div>
+              <div className="mb-[22px]">
+                <input type="password" placeholder="Password"
+                  className="w-full px-5 py-3 text-base transition bg-transparent border rounded-md outline-none border-stroke dark:border-dark-3 text-body-color dark:text-dark-6 placeholder:text-dark-6 focus:border-primary dark:focus:border-primary focus-visible:shadow-none" />
+              </div>
+              <div className="mb-9">
+                <input type="submit" value="Sign In"
+                  className="w-full px-5 py-3 text-base text-white transition duration-300 ease-in-out border rounded-md cursor-pointer border-primary bg-primary hover:bg-blue-dark" />
+              </div>
+            </form>
+
+            <span className="relative block text-center z-1 mb-7">
+              <span className="absolute left-0 block w-full h-px -z-1 top-1/2 bg-stroke dark:bg-dark-3"></span>
+              <span className="relative z-10 inline-block px-3 text-base bg-white dark:bg-dark-2 text-body-secondary">Connect With</span>
+            </span>
+
+            {/* 社交平台 */}
+            <ul className="flex justify-between -mx-2 mb-9">
+              <li className="w-full px-2">
+                <a href="javascript:void(0)"
+                  className="flex h-11 items-center justify-center rounded-md bg-[#4064AC] transition hover:bg-opacity-90">
+                 <SVGFacebook className='fill-white'/>
+                </a>
+              </li>
+              <li className="w-full px-2">
+                <a href="javascript:void(0)"
+                  className="flex h-11 items-center justify-center rounded-md bg-[#1C9CEA] transition hover:bg-opacity-90">
+                  <SVGTwitter className='fill-white'/>
+                </a>
+              </li>
+              <li className="w-full px-2">
+                <a href="javascript:void(0)"
+                  className="flex h-11 items-center justify-center rounded-md bg-[#D64937] transition hover:bg-opacity-90">
+                  <SVGGoogle className='fill-white'/>
+                </a>
+              </li>
+            </ul>
+            <a href="javascript:void(0)" className="inline-block mb-2 text-base text-dark dark:text-white hover:text-primary dark:hover:text-primary">
+              Forget Password?
+            </a>
+            <p className="text-base text-body-secondary">
+              Not a member yet?
+              <a href="signup.html" className="text-primary hover:underline">
+                Sign Up
+              </a>
+            </p>
+
+            <div>
+              <span className="absolute top-1 right-1">
+                <SVGCircleBg2/>
+              </span>
+              <span className="absolute left-1 bottom-1">
+                <SVGCircleBG3/>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  {/* <!-- ====== Forms Section End --> */}
+  </>
+}
diff --git a/themes/starter/components/SignUpForm.js b/themes/starter/components/SignUpForm.js
new file mode 100644
index 00000000..eb26e6aa
--- /dev/null
+++ b/themes/starter/components/SignUpForm.js
@@ -0,0 +1,160 @@
+import { Logo } from './Logo'
+
+/**
+ * 注册
+ * @returns
+ */
+export const SignUpForm = () => {
+  return <>
+  {/* <!-- ====== Forms Section Start --> */}
+  <section className="bg-[#F4F7FF] py-14 lg:py-[90px] dark:bg-dark">
+    <div className="container">
+      <div className="flex flex-wrap -mx-4">
+        <div className="w-full px-4">
+          <div
+            className="wow fadeInUp relative mx-auto max-w-[525px] overflow-hidden rounded-xl shadow-form bg-white dark:bg-dark-2 py-14 px-8 text-center sm:px-12 md:px-[60px]"
+            data-wow-delay=".15s">
+            <div className="mb-10 text-center">
+              <a href="javascript:void(0)" className="mx-auto inline-block max-w-[160px]">
+               <Logo/>
+              </a>
+            </div>
+            <form>
+              <div className="mb-[22px]">
+                <input type="text" placeholder="Name"
+                  className="w-full px-5 py-3 text-base transition bg-transparent border rounded-md outline-none border-stroke dark:border-dark-3 text-body-color dark:text-dark-6 placeholder:text-dark-6 focus:border-primary dark:focus:border-primary focus-visible:shadow-none" />
+              </div>
+              <div className="mb-[22px]">
+                <input type="email" placeholder="Email"
+                  className="w-full px-5 py-3 text-base transition bg-transparent border rounded-md outline-none border-stroke dark:border-dark-3 text-body-color dark:text-dark-6 placeholder:text-dark-6 focus:border-primary dark:focus:border-primary focus-visible:shadow-none" />
+              </div>
+              <div className="mb-[22px]">
+                <input type="password" placeholder="Password"
+                  className="w-full px-5 py-3 text-base transition bg-transparent border rounded-md outline-none border-stroke dark:border-dark-3 text-body-color dark:text-dark-6 placeholder:text-dark-6 focus:border-primary dark:focus:border-primary focus-visible:shadow-none" />
+              </div>
+              <div className="mb-9">
+                <input type="submit" value="Sign Up"
+                  className="w-full px-5 py-3 text-base text-white transition duration-300 ease-in-out border rounded-md cursor-pointer border-primary bg-primary hover:bg-blue-dark" />
+              </div>
+            </form>
+            <span className="relative block text-center z-1 mb-7">
+              <span className="absolute left-0 block w-full h-px -z-1 top-1/2 bg-stroke dark:bg-dark-3"></span>
+              <span className="relative z-10 inline-block px-3 text-base bg-white dark:bg-dark-2 text-body-secondary">Connect With</span>
+            </span>
+            <ul className="flex justify-between -mx-2 mb-9">
+              <li className="w-full px-2">
+                <a href="javascript:void(0)"
+                  className="flex h-11 items-center justify-center rounded-md bg-[#4064AC] transition hover:bg-opacity-90">
+                  <svg width="10" height="20" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M9.29878 8H7.74898H7.19548V7.35484V5.35484V4.70968H7.74898H8.91133C9.21575 4.70968 9.46483 4.45161 9.46483 4.06452V0.645161C9.46483 0.290323 9.24343 0 8.91133 0H6.89106C4.70474 0 3.18262 1.80645 3.18262 4.48387V7.29032V7.93548H2.62912H0.747223C0.359774 7.93548 0 8.29032 0 8.80645V11.129C0 11.5806 0.304424 12 0.747223 12H2.57377H3.12727V12.6452V19.129C3.12727 19.5806 3.43169 20 3.87449 20H6.47593C6.64198 20 6.78036 19.9032 6.89106 19.7742C7.00176 19.6452 7.08478 19.4194 7.08478 19.2258V12.6774V12.0323H7.66596H8.91133C9.2711 12.0323 9.54785 11.7742 9.6032 11.3871V11.3548V11.3226L9.99065 9.09677C10.0183 8.87097 9.99065 8.6129 9.8246 8.35484C9.76925 8.19355 9.52018 8.03226 9.29878 8Z"
+                      fill="white" />
+                  </svg>
+                </a>
+              </li>
+              <li className="w-full px-2">
+                <a href="javascript:void(0)"
+                  className="flex h-11 items-center justify-center rounded-md bg-[#1C9CEA] transition hover:bg-opacity-90">
+                  <svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M19.5516 2.75538L20.9 1.25245C21.2903 0.845401 21.3968 0.53229 21.4323 0.375734C20.3677 0.939335 19.3742 1.1272 18.7355 1.1272H18.4871L18.3452 1.00196C17.4935 0.344423 16.429 0 15.2935 0C12.8097 0 10.8581 1.81605 10.8581 3.91389C10.8581 4.03914 10.8581 4.22701 10.8935 4.35225L11 4.97847L10.2548 4.94716C5.7129 4.82192 1.9871 1.37769 1.38387 0.782779C0.390323 2.34834 0.958064 3.85127 1.56129 4.79061L2.76774 6.54403L0.851613 5.6047C0.887097 6.91977 1.45484 7.95303 2.55484 8.7045L3.5129 9.33072L2.55484 9.67515C3.15806 11.272 4.50645 11.9296 5.5 12.18L6.8129 12.4932L5.57097 13.2446C3.58387 14.4971 1.1 14.4031 0 14.3092C2.23548 15.6869 4.89677 16 6.74194 16C8.12581 16 9.15484 15.8748 9.40322 15.7808C19.3387 13.7143 19.8 5.8865 19.8 4.32094V4.10176L20.0129 3.97652C21.2194 2.97456 21.7161 2.44227 22 2.12916C21.8935 2.16047 21.7516 2.22309 21.6097 2.2544L19.5516 2.75538Z"
+                      fill="white" />
+                  </svg>
+                </a>
+              </li>
+              <li className="w-full px-2">
+                <a href="javascript:void(0)"
+                  className="flex h-11 items-center justify-center rounded-md bg-[#D64937] transition hover:bg-opacity-90">
+                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M17.8477 8.17132H9.29628V10.643H15.4342C15.1065 14.0743 12.2461 15.5574 9.47506 15.5574C5.95916 15.5574 2.8306 12.8821 2.8306 9.01461C2.8306 5.29251 5.81018 2.47185 9.47506 2.47185C12.2759 2.47185 13.9742 4.24567 13.9742 4.24567L15.7024 2.47185C15.7024 2.47185 13.3783 0.000145544 9.35587 0.000145544C4.05223 -0.0289334 0 4.30383 0 8.98553C0 13.5218 3.81386 18 9.44526 18C14.4212 18 17.9967 14.7141 17.9967 9.79974C18.0264 8.78198 17.8477 8.17132 17.8477 8.17132Z"
+                      fill="white" />
+                  </svg>
+                </a>
+              </li>
+            </ul>
+
+            <p className="mb-4 text-base text-body-secondary">
+              By creating an account you are agree with our
+              <a href="javascript:void(0)" className="text-primary hover:underline">
+                Privacy
+              </a>
+              and
+              <a href="javascript:void(0)" className="text-primary hover:underline">
+                Policy
+              </a>
+            </p>
+
+            <p className="text-base text-body-secondary">
+              Already have an account?
+              <a href="signin.html" className="text-primary hover:underline">
+                Sign In
+              </a>
+            </p>
+
+            <div>
+              <span className="absolute top-1 right-1">
+                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <circle cx="1.39737" cy="38.6026" r="1.39737" transform="rotate(-90 1.39737 38.6026)"
+                    fill="#3056D3" />
+                  <circle cx="1.39737" cy="1.99122" r="1.39737" transform="rotate(-90 1.39737 1.99122)"
+                    fill="#3056D3" />
+                  <circle cx="13.6943" cy="38.6026" r="1.39737" transform="rotate(-90 13.6943 38.6026)"
+                    fill="#3056D3" />
+                  <circle cx="13.6943" cy="1.99122" r="1.39737" transform="rotate(-90 13.6943 1.99122)"
+                    fill="#3056D3" />
+                  <circle cx="25.9911" cy="38.6026" r="1.39737" transform="rotate(-90 25.9911 38.6026)"
+                    fill="#3056D3" />
+                  <circle cx="25.9911" cy="1.99122" r="1.39737" transform="rotate(-90 25.9911 1.99122)"
+                    fill="#3056D3" />
+                  <circle cx="38.288" cy="38.6026" r="1.39737" transform="rotate(-90 38.288 38.6026)" fill="#3056D3" />
+                  <circle cx="38.288" cy="1.99122" r="1.39737" transform="rotate(-90 38.288 1.99122)" fill="#3056D3" />
+                  <circle cx="1.39737" cy="26.3057" r="1.39737" transform="rotate(-90 1.39737 26.3057)"
+                    fill="#3056D3" />
+                  <circle cx="13.6943" cy="26.3057" r="1.39737" transform="rotate(-90 13.6943 26.3057)"
+                    fill="#3056D3" />
+                  <circle cx="25.9911" cy="26.3057" r="1.39737" transform="rotate(-90 25.9911 26.3057)"
+                    fill="#3056D3" />
+                  <circle cx="38.288" cy="26.3057" r="1.39737" transform="rotate(-90 38.288 26.3057)" fill="#3056D3" />
+                  <circle cx="1.39737" cy="14.0086" r="1.39737" transform="rotate(-90 1.39737 14.0086)"
+                    fill="#3056D3" />
+                  <circle cx="13.6943" cy="14.0086" r="1.39737" transform="rotate(-90 13.6943 14.0086)"
+                    fill="#3056D3" />
+                  <circle cx="25.9911" cy="14.0086" r="1.39737" transform="rotate(-90 25.9911 14.0086)"
+                    fill="#3056D3" />
+                  <circle cx="38.288" cy="14.0086" r="1.39737" transform="rotate(-90 38.288 14.0086)" fill="#3056D3" />
+                </svg>
+              </span>
+              <span className="absolute left-1 bottom-1">
+                <svg width="29" height="40" viewBox="0 0 29 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <circle cx="2.288" cy="25.9912" r="1.39737" transform="rotate(-90 2.288 25.9912)" fill="#3056D3" />
+                  <circle cx="14.5849" cy="25.9911" r="1.39737" transform="rotate(-90 14.5849 25.9911)"
+                    fill="#3056D3" />
+                  <circle cx="26.7216" cy="25.9911" r="1.39737" transform="rotate(-90 26.7216 25.9911)"
+                    fill="#3056D3" />
+                  <circle cx="2.288" cy="13.6944" r="1.39737" transform="rotate(-90 2.288 13.6944)" fill="#3056D3" />
+                  <circle cx="14.5849" cy="13.6943" r="1.39737" transform="rotate(-90 14.5849 13.6943)"
+                    fill="#3056D3" />
+                  <circle cx="26.7216" cy="13.6943" r="1.39737" transform="rotate(-90 26.7216 13.6943)"
+                    fill="#3056D3" />
+                  <circle cx="2.288" cy="38.0087" r="1.39737" transform="rotate(-90 2.288 38.0087)" fill="#3056D3" />
+                  <circle cx="2.288" cy="1.39739" r="1.39737" transform="rotate(-90 2.288 1.39739)" fill="#3056D3" />
+                  <circle cx="14.5849" cy="38.0089" r="1.39737" transform="rotate(-90 14.5849 38.0089)"
+                    fill="#3056D3" />
+                  <circle cx="26.7216" cy="38.0089" r="1.39737" transform="rotate(-90 26.7216 38.0089)"
+                    fill="#3056D3" />
+                  <circle cx="14.5849" cy="1.39761" r="1.39737" transform="rotate(-90 14.5849 1.39761)"
+                    fill="#3056D3" />
+                  <circle cx="26.7216" cy="1.39761" r="1.39737" transform="rotate(-90 26.7216 1.39761)"
+                    fill="#3056D3" />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  {/* <!-- ====== Forms Section End --> */}
+  </>
+}
diff --git a/themes/starter/components/svg/SVGCircleBG2.js b/themes/starter/components/svg/SVGCircleBG2.js
new file mode 100644
index 00000000..842d2a5e
--- /dev/null
+++ b/themes/starter/components/svg/SVGCircleBG2.js
@@ -0,0 +1,35 @@
+/**
+ * 圆点背景图
+ */
+export const SVGCircleBg2 = () => {
+  return <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="1.39737" cy="38.6026" r="1.39737" transform="rotate(-90 1.39737 38.6026)"
+      fill="#3056D3" />
+    <circle cx="1.39737" cy="1.99122" r="1.39737" transform="rotate(-90 1.39737 1.99122)"
+      fill="#3056D3" />
+    <circle cx="13.6943" cy="38.6026" r="1.39737" transform="rotate(-90 13.6943 38.6026)"
+      fill="#3056D3" />
+    <circle cx="13.6943" cy="1.99122" r="1.39737" transform="rotate(-90 13.6943 1.99122)"
+      fill="#3056D3" />
+    <circle cx="25.9911" cy="38.6026" r="1.39737" transform="rotate(-90 25.9911 38.6026)"
+      fill="#3056D3" />
+    <circle cx="25.9911" cy="1.99122" r="1.39737" transform="rotate(-90 25.9911 1.99122)"
+      fill="#3056D3" />
+    <circle cx="38.288" cy="38.6026" r="1.39737" transform="rotate(-90 38.288 38.6026)" fill="#3056D3" />
+    <circle cx="38.288" cy="1.99122" r="1.39737" transform="rotate(-90 38.288 1.99122)" fill="#3056D3" />
+    <circle cx="1.39737" cy="26.3057" r="1.39737" transform="rotate(-90 1.39737 26.3057)"
+      fill="#3056D3" />
+    <circle cx="13.6943" cy="26.3057" r="1.39737" transform="rotate(-90 13.6943 26.3057)"
+      fill="#3056D3" />
+    <circle cx="25.9911" cy="26.3057" r="1.39737" transform="rotate(-90 25.9911 26.3057)"
+      fill="#3056D3" />
+    <circle cx="38.288" cy="26.3057" r="1.39737" transform="rotate(-90 38.288 26.3057)" fill="#3056D3" />
+    <circle cx="1.39737" cy="14.0086" r="1.39737" transform="rotate(-90 1.39737 14.0086)"
+      fill="#3056D3" />
+    <circle cx="13.6943" cy="14.0086" r="1.39737" transform="rotate(-90 13.6943 14.0086)"
+      fill="#3056D3" />
+    <circle cx="25.9911" cy="14.0086" r="1.39737" transform="rotate(-90 25.9911 14.0086)"
+      fill="#3056D3" />
+    <circle cx="38.288" cy="14.0086" r="1.39737" transform="rotate(-90 38.288 14.0086)" fill="#3056D3" />
+  </svg>
+}
diff --git a/themes/starter/components/svg/SVGCircleBG3.js b/themes/starter/components/svg/SVGCircleBG3.js
new file mode 100644
index 00000000..0390998d
--- /dev/null
+++ b/themes/starter/components/svg/SVGCircleBG3.js
@@ -0,0 +1,24 @@
+export const SVGCircleBG3 = () => {
+  return <svg width="29" height="40" viewBox="0 0 29 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="2.288" cy="25.9912" r="1.39737" transform="rotate(-90 2.288 25.9912)" fill="#3056D3" />
+    <circle cx="14.5849" cy="25.9911" r="1.39737" transform="rotate(-90 14.5849 25.9911)"
+      fill="#3056D3" />
+    <circle cx="26.7216" cy="25.9911" r="1.39737" transform="rotate(-90 26.7216 25.9911)"
+      fill="#3056D3" />
+    <circle cx="2.288" cy="13.6944" r="1.39737" transform="rotate(-90 2.288 13.6944)" fill="#3056D3" />
+    <circle cx="14.5849" cy="13.6943" r="1.39737" transform="rotate(-90 14.5849 13.6943)"
+      fill="#3056D3" />
+    <circle cx="26.7216" cy="13.6943" r="1.39737" transform="rotate(-90 26.7216 13.6943)"
+      fill="#3056D3" />
+    <circle cx="2.288" cy="38.0087" r="1.39737" transform="rotate(-90 2.288 38.0087)" fill="#3056D3" />
+    <circle cx="2.288" cy="1.39739" r="1.39737" transform="rotate(-90 2.288 1.39739)" fill="#3056D3" />
+    <circle cx="14.5849" cy="38.0089" r="1.39737" transform="rotate(-90 14.5849 38.0089)"
+      fill="#3056D3" />
+    <circle cx="26.7216" cy="38.0089" r="1.39737" transform="rotate(-90 26.7216 38.0089)"
+      fill="#3056D3" />
+    <circle cx="14.5849" cy="1.39761" r="1.39737" transform="rotate(-90 14.5849 1.39761)"
+      fill="#3056D3" />
+    <circle cx="26.7216" cy="1.39761" r="1.39737" transform="rotate(-90 26.7216 1.39761)"
+      fill="#3056D3" />
+  </svg>
+}
diff --git a/themes/starter/components/svg/SVGFacebook.js b/themes/starter/components/svg/SVGFacebook.js
index d5104d31..3d9836e3 100644
--- a/themes/starter/components/svg/SVGFacebook.js
+++ b/themes/starter/components/svg/SVGFacebook.js
@@ -1,11 +1,11 @@
-export const SVGFacebook = () => {
+export const SVGFacebook = ({ className }) => {
   return <svg
     width="18"
     height="18"
     viewBox="0 0 18 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    className="fill-current"
+    className={className}
   >
     <path
       d="M13.3315 7.25625H11.7565H11.194V6.69375V4.95V4.3875H11.7565H12.9377C13.2471 4.3875 13.5002 4.1625 13.5002 3.825V0.84375C13.5002 0.534375 13.2752 0.28125 12.9377 0.28125H10.8846C8.66272 0.28125 7.11584 1.85625 7.11584 4.19062V6.6375V7.2H6.55334H4.64084C4.24709 7.2 3.88147 7.50937 3.88147 7.95937V9.98438C3.88147 10.3781 4.19084 10.7438 4.64084 10.7438H6.49709H7.05959V11.3063V16.9594C7.05959 17.3531 7.36897 17.7188 7.81897 17.7188H10.4627C10.6315 17.7188 10.7721 17.6344 10.8846 17.5219C10.9971 17.4094 11.0815 17.2125 11.0815 17.0437V11.3344V10.7719H11.6721H12.9377C13.3033 10.7719 13.5846 10.5469 13.6408 10.2094V10.1813V10.1531L14.0346 8.2125C14.0627 8.01562 14.0346 7.79063 13.8658 7.56562C13.8096 7.425 13.5565 7.28437 13.3315 7.25625Z"
diff --git a/themes/starter/components/svg/SVGGoogle.js b/themes/starter/components/svg/SVGGoogle.js
new file mode 100644
index 00000000..2773996a
--- /dev/null
+++ b/themes/starter/components/svg/SVGGoogle.js
@@ -0,0 +1,14 @@
+export const SVGGoogle = ({ className }) => {
+  return <svg
+className={className}
+  width="18"
+
+   height="18"
+   viewBox="0 0 18 18"
+   fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M17.8477 8.17132H9.29628V10.643H15.4342C15.1065 14.0743 12.2461 15.5574 9.47506 15.5574C5.95916 15.5574 2.8306 12.8821 2.8306 9.01461C2.8306 5.29251 5.81018 2.47185 9.47506 2.47185C12.2759 2.47185 13.9742 4.24567 13.9742 4.24567L15.7024 2.47185C15.7024 2.47185 13.3783 0.000145544 9.35587 0.000145544C4.05223 -0.0289334 0 4.30383 0 8.98553C0 13.5218 3.81386 18 9.44526 18C14.4212 18 17.9967 14.7141 17.9967 9.79974C18.0264 8.78198 17.8477 8.17132 17.8477 8.17132Z"
+      fill="white" />
+  </svg>
+}
diff --git a/themes/starter/components/svg/SVGTwitter.js b/themes/starter/components/svg/SVGTwitter.js
index cfdc63ad..dcef95fc 100644
--- a/themes/starter/components/svg/SVGTwitter.js
+++ b/themes/starter/components/svg/SVGTwitter.js
@@ -1,11 +1,11 @@
-export const SVGTwitter = () => {
+export const SVGTwitter = ({ className }) => {
   return <svg
     width="18"
     height="18"
     viewBox="0 0 18 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    className="fill-current"
+    className={className}
   >
     <path
       d="M16.4647 4.83752C16.565 4.72065 16.4343 4.56793 16.2859 4.62263C15.9549 4.74474 15.6523 4.82528 15.2049 4.875C15.7552 4.56855 16.0112 4.13054 16.2194 3.59407C16.2696 3.46467 16.1182 3.34725 15.9877 3.40907C15.458 3.66023 14.8864 3.84658 14.2854 3.95668C13.6913 3.3679 12.8445 3 11.9077 3C10.1089 3 8.65027 4.35658 8.65027 6.02938C8.65027 6.26686 8.67937 6.49818 8.73427 6.71966C6.14854 6.59919 3.84286 5.49307 2.24098 3.79696C2.13119 3.68071 1.93197 3.69614 1.86361 3.83792C1.68124 4.21619 1.57957 4.63582 1.57957 5.07762C1.57957 6.12843 2.15446 7.05557 3.02837 7.59885C2.63653 7.58707 2.2618 7.51073 1.91647 7.38116C1.74834 7.31808 1.5556 7.42893 1.57819 7.59847C1.75162 8.9004 2.80568 9.97447 4.16624 10.2283C3.89302 10.2978 3.60524 10.3347 3.30754 10.3347C3.23536 10.3347 3.16381 10.3324 3.0929 10.3281C2.91247 10.3169 2.76583 10.4783 2.84319 10.6328C3.35357 11.6514 4.45563 12.3625 5.73809 12.3847C4.62337 13.1974 3.21889 13.6816 1.69269 13.6816C1.50451 13.6816 1.42378 13.9235 1.59073 14.0056C2.88015 14.6394 4.34854 15 5.90878 15C11.9005 15 15.1765 10.384 15.1765 6.38067C15.1765 6.24963 15.1732 6.11858 15.1672 5.98877C15.6535 5.66205 16.0907 5.27354 16.4647 4.83752Z"
diff --git a/themes/starter/index.js b/themes/starter/index.js
index 9cd92d63..aa95a5c9 100644
--- a/themes/starter/index.js
+++ b/themes/starter/index.js
@@ -31,8 +31,10 @@ import { Brand } from './components/Brand'
 import { Footer } from './components/Footer'
 import { BackToTopButton } from './components/BackToTopButton'
 import { MadeWithButton } from './components/MadeWithButton'
-import { LAYOUT_MAPPINGS } from '@/blog.config'
 import { SVG404 } from './components/svg/SVG404'
+import { Banner } from './components/Banner'
+import { SignInForm } from './components/SignInForm'
+import { SignUpForm } from './components/SignUpForm'
 
 /**
  * 一些外部js
@@ -62,7 +64,7 @@ const LayoutBase = (props) => {
     loadExternal()
   }, [])
 
-  return <div id='theme-starter' className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col scroll-smooth`}>
+  return <div id='theme-starter' className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:bg-black scroll-smooth`}>
             <Style/>
             <NavBar {...props}/>
 
@@ -116,15 +118,23 @@ const LayoutIndex = (props) => {
 const LayoutSlug = (props) => {
   // 如果 是 /article/[slug] 的文章路径则进行重定向到另一个域名
   const router = useRouter()
-  if (JSON.parse(siteConfig('LANDING_POST_REDIRECT_ENABLE', null, CONFIG)) && isBrowser && router.route === '/[prefix]/[slug]') {
+  if (siteConfig('LANDING_POST_REDIRECT_ENABLE', null, CONFIG) && isBrowser && router.route === '/[prefix]/[slug]') {
     const redirectUrl = siteConfig('LANDING_POST_REDIRECT_URL', null, CONFIG) + router.asPath.replace('?theme=landing', '')
     router.push(redirectUrl)
     return <div id='theme-landing'><Loading /></div>
   }
 
+  const { post } = props
   return <>
-        <div id='container-inner' className='mx-auto max-w-screen-lg p-12'>
-            <NotionPage {...props} />
+        <Banner title={post?.title} description={post?.summary}/>
+        <div className="container grow">
+            <div className="flex flex-wrap justify-center -mx-4">
+                <div className="w-full p-4">
+                    <div id='container-inner' className='mx-auto'>
+                        <NotionPage {...props} />
+                    </div>
+                </div>
+            </div>
         </div>
     </>
 }
@@ -176,21 +186,31 @@ const Layout404 = (props) => {
 const LayoutCategoryIndex = (props) => <></>
 const LayoutPostList = (props) => <></>
 const LayoutTagIndex = (props) => <></>
+
 /**
- * 根据路径 获取对应的layout
- * @param {*} path
+ * 登录页面
+ * @param {*} props
  * @returns
  */
-const getLayoutNameByPath = (path) => {
-  // 检查特殊处理的路径
-  if (LAYOUT_MAPPINGS[path]) {
-    return LAYOUT_MAPPINGS[path];
-  } else {
-    // 没有特殊处理的路径返回默认layout名称
-    return 'LayoutSlug';
-  }
+const LayoutSignIn = (props) => {
+  return <>
+        <div className='grow mt-20'>
+            <SignInForm/>
+        </div>
+    </>
 }
 
+/**
+ * 注册页面
+ * @param {*} props
+ * @returns
+ */
+const LayoutSignUp = (props) => <>
+        <div className='grow mt-20'>
+            <SignUpForm/>
+        </div>
+</>
+
 export {
   CONFIG as THEME_CONFIG,
   LayoutBase,
@@ -202,5 +222,6 @@ export {
   LayoutPostList,
   LayoutCategoryIndex,
   LayoutTagIndex,
-  getLayoutNameByPath
+  LayoutSignIn,
+  LayoutSignUp
 }
diff --git a/themes/theme.js b/themes/theme.js
index e14a7a32..cd70675e 100644
--- a/themes/theme.js
+++ b/themes/theme.js
@@ -1,9 +1,10 @@
-import BLOG from '@/blog.config'
+import BLOG, { LAYOUT_MAPPINGS } from '@/blog.config'
 import { getQueryParam, getQueryVariable, isBrowser } from '../lib/utils'
 import dynamic from 'next/dynamic'
 import getConfig from 'next/config'
 import * as ThemeComponents from '@theme-components'
-// 所有主题在next.config.js中扫描
+
+// 在next.config.js中扫描所有主题
 export const { THEMES = [] } = getConfig().publicRuntimeConfig
 
 /**
@@ -13,9 +14,9 @@ export const { THEMES = [] } = getConfig().publicRuntimeConfig
  */
 export const getGlobalLayoutByTheme = (themeQuery) => {
   if (themeQuery !== BLOG.THEME) {
-    return dynamic(() => import(`@/themes/${themeQuery}`).then(m => m[m.getLayoutNameByPath(-1)]), { ssr: true })
+    return dynamic(() => import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]), { ssr: true })
   } else {
-    return ThemeComponents[ThemeComponents.getLayoutNameByPath('-1')]
+    return ThemeComponents[getLayoutNameByPath('-1')]
   }
 }
 
@@ -32,13 +33,28 @@ export const getLayoutByTheme = ({ router, theme }) => {
       setTimeout(() => {
         checkThemeDOM()
       }, 500);
-      return m[m.getLayoutNameByPath(router.pathname)]
+      return m[getLayoutNameByPath(router.pathname, router.asPath)]
     }), { ssr: true })
   } else {
     setTimeout(() => {
       checkThemeDOM()
     }, 100);
-    return ThemeComponents[ThemeComponents.getLayoutNameByPath(router.pathname)]
+    return ThemeComponents[getLayoutNameByPath(router.pathname, router.asPath)]
+  }
+}
+
+/**
+ * 根据路径 获取对应的layout
+ * @param {*} path
+ * @returns
+ */
+const getLayoutNameByPath = (path) => {
+  console.log('path', path, LAYOUT_MAPPINGS[path])
+  if (LAYOUT_MAPPINGS[path]) {
+    return LAYOUT_MAPPINGS[path];
+  } else {
+    // 没有特殊处理的路径返回默认layout名称
+    return 'LayoutSlug';
   }
 }