diff --git a/themes/example/LayoutBase.js b/themes/example/LayoutBase.js
index 4d8f592c..eb39ffd1 100644
--- a/themes/example/LayoutBase.js
+++ b/themes/example/LayoutBase.js
@@ -28,9 +28,9 @@ const LayoutBase = props => {
 
                 <Title {...props} />
 
-                <div className="container max-w-4xl mx-auto md:flex items-start py-8">
+                <div className="container max-w-4xl mx-auto md:flex items-start py-8 px-2">
 
-                    <div className='px-2 w-full flex-grow'>{children}</div>
+                    <div className='w-full flex-grow'>{children}</div>
 
                     <SideBar {...props} />
 
diff --git a/themes/example/LayoutPage.js b/themes/example/LayoutPage.js
index d8bb93ba..fc19035f 100644
--- a/themes/example/LayoutPage.js
+++ b/themes/example/LayoutPage.js
@@ -1,71 +1,10 @@
-import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { BlogList } from './components/BlogList'
 import LayoutBase from './LayoutBase'
 
 export const LayoutPage = props => {
-  const { page } = props
-  const { posts, postCount } = props
-
-  const { locale } = useGlobal()
-  const router = useRouter()
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
-
-  const showNext =
-    page < totalPage &&
-    posts.length === BLOG.POSTS_PER_PAGE &&
-    posts.length < postCount
-
-  const currentPage = +page
   return (
     <LayoutBase {...props}>
-      {posts.map(p => (
-        <div key={p.id} className="border my-12">
-          <Link href={`/article/${p.slug}`}>
-            <a className="underline cursor-pointer">{p.title}</a>
-          </Link>
-          <div>{p.summary}</div>
-        </div>
-      ))}
-
-      <div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
-        <Link
-          href={{
-            pathname:
-              currentPage === 2
-                ? `${BLOG.SUB_PATH || '/'}`
-                : `/page/${currentPage - 1}`,
-            query: router.query.s ? { s: router.query.s } : {}
-          }}
-          passHref
-        >
-          <a
-            rel="prev"
-            className={`${
-              currentPage === 1 ? 'invisible' : 'visible'
-            } text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
-          >
-            ← {locale.PAGINATION.PREV}
-          </a>
-        </Link>
-        <Link
-          href={{
-            pathname: `/page/${currentPage + 1}`,
-            query: router.query.s ? { s: router.query.s } : {}
-          }}
-          passHref
-        >
-          <a
-            rel="next"
-            className={`${
-              showNext ? 'visible' : 'invisible'
-            } text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
-          >
-            {locale.PAGINATION.NEXT} →
-          </a>
-        </Link>
-      </div>
+        <BlogList {...props} />
     </LayoutBase>
   )
 }
diff --git a/themes/example/components/BlogList.js b/themes/example/components/BlogList.js
index 057d45ef..a0f4fe6b 100644
--- a/themes/example/components/BlogList.js
+++ b/themes/example/components/BlogList.js
@@ -5,13 +5,12 @@ import { useRouter } from 'next/router'
 import Link from 'next/link'
 
 export const BlogList = (props) => {
-  const { posts, postCount } = props
+  const { page, posts, postCount } = props
 
   const { locale } = useGlobal()
   const router = useRouter()
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
 
-  const page = 1
   const showNext =
         page < totalPage &&
         posts.length === BLOG.POSTS_PER_PAGE &&
@@ -33,7 +32,7 @@ export const BlogList = (props) => {
                     by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
                     <span className="font-bold mx-1"> | </span>
                     <a href="#" className="text-gray-700">{p.category}</a>
-                    <span className="font-bold mx-1"> | </span>
+                    {/* <span className="font-bold mx-1"> | </span> */}
                     {/* <a href="#" className="text-gray-700">2 Comments</a> */}
                 </div>
 
@@ -44,7 +43,7 @@ export const BlogList = (props) => {
         ))}
 
         <div className="flex justify-between text-xs">
-            <Link href="/">
+            <Link href={{ pathname: currentPage - 1 === 1 ? `${BLOG.SUB_PATH || '/'}` : `/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}>
                 <a className={`${currentPage > 1 ? 'bg-black ' : 'bg-gray '} text-white no-underline py-2 px-3 rounded`}>{locale.PAGINATION.PREV}</a>
             </Link>
             <Link href={{ pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} }}>