diff --git a/app/[locale]/(blog)/article/[...slug]/page.tsx b/app/[locale]/(blog)/article/[...slug]/page.tsx
index b8b70b8..830ddf6 100644
--- a/app/[locale]/(blog)/article/[...slug]/page.tsx
+++ b/app/[locale]/(blog)/article/[...slug]/page.tsx
@@ -106,7 +106,6 @@ export default async function Page({ params }: { params: { slug: string[]; local
   return (
     <section className={cn("lg:gap-8 xl:grid", has_toc ? "xl:grid-cols-[1fr_400px]" : "")}>
       <Shell
-        variant={"sidebar"}
         as="article"
         className={cn("relative mx-auto flex min-h-screen flex-col", has_toc ? "xl:pl-[250px]" : "xl:px-[100px]")}
       >
diff --git a/app/[locale]/(blog)/project/page.tsx b/app/[locale]/(blog)/project/page.tsx
index 1ca058f..93c132c 100644
--- a/app/[locale]/(blog)/project/page.tsx
+++ b/app/[locale]/(blog)/project/page.tsx
@@ -28,7 +28,7 @@ export default async function Home({ searchParams }: Props) {
   const subpost = posts.slice((page - 1) * env.POST_PAGE_SIZES, page * env.POST_PAGE_SIZES);
 
   return (
-    <Shell variant="centered" className="md:pb-10">
+    <Shell variant="default" className="md:pb-10">
       <PageHeader>
         <PageHeaderHeading size="lg" className="text-center">
           Project
diff --git a/app/[locale]/(lobby)/page.tsx b/app/[locale]/(lobby)/page.tsx
index 93fa9c9..bd823cf 100644
--- a/app/[locale]/(lobby)/page.tsx
+++ b/app/[locale]/(lobby)/page.tsx
@@ -36,11 +36,7 @@ export default async function Home({ searchParams }: Props) {
         <PageHeaderDescription>{t("Description")}</PageHeaderDescription>
       </PageHeader>
       <Separator className="mb-2.5" />
-      <PostRowsLayout
-        items={subpost}
-        className="gap-8 md:grid-cols-2"
-        gridClassName="bg-zinc-100 dark:bg-inherit"
-      ></PostRowsLayout>
+      <PostRowsLayout items={subpost} className="gap-4 md:grid-cols-2" gridClassName="py-8 bg-muted"></PostRowsLayout>
       {/* <Separator className="mt-10" /> */}
       <PostPagination total={total} pageSize={env.POST_PAGE_SIZES}></PostPagination>
       {page == 1 && <TagFooter posts={posts}></TagFooter>}
diff --git a/app/[locale]/tags/[tag]/page.tsx b/app/[locale]/tags/[tag]/page.tsx
index 584babd..3058dca 100644
--- a/app/[locale]/tags/[tag]/page.tsx
+++ b/app/[locale]/tags/[tag]/page.tsx
@@ -11,6 +11,7 @@ import { env } from "@/env.mjs";
 import { PostPagination } from "@/components/pagination";
 import { PostRowsLayout } from "@/components/layouts/list-post-row";
 import { CacheQueryDatabase } from "@/app/notion/api/cache-wrapper";
+import { Separator } from "@/components/ui/separator";
 // import { PostCardLayout } from "@/components/layouts/list-postcard";
 
 export const revalidate = env.REVALIDATE_PAGES; // revalidate the data interval
@@ -52,7 +53,8 @@ export default async function Home({ params, searchParams }: Props) {
           {tag}
         </PageHeaderHeading>
       </PageHeader>
-      <PostRowsLayout items={subpost} className="divide-y"></PostRowsLayout>
+      <Separator className="mb-2.5" />
+      <PostRowsLayout items={subpost} className="gap-2 divide-y" gridClassName="py-6"></PostRowsLayout>
       {total > env.POST_PAGE_SIZES ? (
         <PostPagination total={total} pageSize={env.POST_PAGE_SIZES}></PostPagination>
       ) : null}
diff --git a/app/notion/_components/callout.tsx b/app/notion/_components/callout.tsx
index a2e491e..9a4a8e2 100644
--- a/app/notion/_components/callout.tsx
+++ b/app/notion/_components/callout.tsx
@@ -18,10 +18,7 @@ export function CalloutRender({ block, className, level = 1 }: CalloutBlockProps
   return (
     <div
       key={id}
-      className={cn(
-        className,
-        "my-0.5 flex w-full items-center rounded-md border border-none bg-stone-100 p-4 dark:bg-stone-500"
-      )}
+      className={cn(className, "my-0.5 flex w-full items-center rounded-md border border-none bg-muted p-4 ")}
     >
       {icon && <IconRender type={icon.type} emoji={icon.emoji} external={icon.external} file={icon.file} />}
       <div className="ml-3 w-full whitespace-pre-wrap break-words">
diff --git a/app/notion/_components/quote.tsx b/app/notion/_components/quote.tsx
index f3a297b..438e8c0 100644
--- a/app/notion/_components/quote.tsx
+++ b/app/notion/_components/quote.tsx
@@ -16,7 +16,7 @@ export function QuoteRender({ block, level = 1, className }: QuoteBlockProps) {
   } = block;
 
   return (
-    <blockquote key={id} className={cn(className, "my-1.5 whitespace-pre-wrap border-l-[3px] border-black pl-4")}>
+    <blockquote key={id} className={cn(className, "my-1.5 whitespace-pre-wrap border-l-[4px] border-secondary pl-4")}>
       <RichText title={rich_text} />
       {children &&
         children.map((child: any) => <RenderBlock key={child.id} block={child} level={level + 1}></RenderBlock>)}
diff --git a/app/notion/_components/to-do.tsx b/app/notion/_components/to-do.tsx
index 1728537..bc54be7 100644
--- a/app/notion/_components/to-do.tsx
+++ b/app/notion/_components/to-do.tsx
@@ -20,7 +20,7 @@ export function TodoRender({ block, className, level = 0 }: TodoProps) {
     <div key={id} className={cn(className, style)}>
       <label htmlFor={id}>
         <input
-          className="mx-1 my-1.5 h-[1.1rem] w-[1.1rem] rounded-none border-8 align-middle"
+          className="mx-1 my-1.5 h-[1.1rem] w-[1.1rem] rounded-none border-8 border-inherit align-middle"
           type="checkbox"
           id={id}
           defaultChecked={checked}
diff --git a/app/notion/text.tsx b/app/notion/text.tsx
index 9598fe7..9a7a3f4 100644
--- a/app/notion/text.tsx
+++ b/app/notion/text.tsx
@@ -53,7 +53,7 @@ function annotationStyle(annotations: any, className?: string) {
   const { bold, code, color, italic, strikethrough, underline } = annotations;
   const names = [
     bold ? "font-bold" : "",
-    code ? "text-red-600 bg-slate-200	px-1" : "",
+    code ? "text-ring bg-muted px-1" : "",
     italic ? "italic" : "",
     strikethrough ? "line-through" : "",
     underline ? "underline underline-offset-4 decoration-1" : "",
diff --git a/components/layouts/list-post-row.tsx b/components/layouts/list-post-row.tsx
index 1667a48..9d7d968 100644
--- a/components/layouts/list-post-row.tsx
+++ b/components/layouts/list-post-row.tsx
@@ -21,12 +21,12 @@ function PostRowGrid({ post, className }: { post: any; className?: string }) {
   const desc = rawText(post.properties?.Summary?.rich_text);
   const tags = post.properties?.Tags?.multi_select;
   return (
-    <div key={slug} className={cn(className, "group rounded px-4 py-8")}>
+    <div key={slug} className={cn(className, "group rounded px-4")}>
       <article className="flex flex-1 flex-col space-y-2">
         <CardDescription className="inline-block">{formatDate(edit_time)}</CardDescription>
         <span className="sr-only">{title}</span>
         <Link href={`/article/${slug}`} prefetch={false}>
-          <CardHeader className="px-0 py-1 font-serif group-hover:text-red-500">
+          <CardHeader className="px-0 py-1 font-serif group-hover:text-primary">
             <CardTitle>{title}</CardTitle>
           </CardHeader>
         </Link>
diff --git a/components/layouts/list-postcard.tsx b/components/layouts/list-postcard.tsx
index 65647c3..4c1b95b 100644
--- a/components/layouts/list-postcard.tsx
+++ b/components/layouts/list-postcard.tsx
@@ -13,7 +13,7 @@ export function PostCardLayout({ items }: PostCardLayoutProps) {
   }
 
   return (
-    <section className="grid grid-cols-1 gap-8 md:grid-cols-2">
+    <section className="grid grid-cols-1 gap-8 md:grid-cols-3">
       <React.Suspense
         fallback={Array.from({ length: 2 }).map((_, i) => (
           <PostCardSkeleton key={i} />
diff --git a/components/post-tags.tsx b/components/post-tags.tsx
index e1ebfdb..b94dedf 100644
--- a/components/post-tags.tsx
+++ b/components/post-tags.tsx
@@ -30,7 +30,7 @@ export function PostTags({ tags, className }: PostTagProps) {
 
 export function TagItem({ name }: { name: string }) {
   return (
-    <li className="inline-block px-2 font-serif hover:text-accent-foreground">
+    <li className="inline-block pr-2 font-serif hover:text-accent-foreground">
       <Link
         href={`/tags/${encodeURI(name)}/`}
         className="font-medium leading-tight hover:text-red-500"
diff --git a/middleware.ts b/middleware.ts
index 3d9a042..0364210 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -16,5 +16,5 @@ export default withLogging(intl);
 export const config = {
   // Match only internationalized pathnames
   // matcher: "/((?!api|static|.*\\..*|_next).*)",
-  matcher: "/((?!api|_next/static|_next/image|favicon.ico).*)",
+  matcher: "/((?!api|static|_next/static|_next/image|favicon.ico).*)",
 };