diff --git a/components.d.ts b/components.d.ts
index 33de859..397e475 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -2,7 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {}
+export {};
 
 /* prettier-ignore */
 declare module 'vue' {
diff --git a/components/global/IntroPost.vue b/components/global/IntroPost.vue
index 86e9599..c28ec5c 100644
--- a/components/global/IntroPost.vue
+++ b/components/global/IntroPost.vue
@@ -7,7 +7,7 @@ const { data }: any = useAsyncData("banner", () =>
   queryContent("notes")
     .where({ banner: props.banner })
     .sort({ date: -1 })
-    .findOne()
+    .findOne(),
 );
 </script>
 <template>
diff --git a/components/global/PageIntro.vue b/components/global/PageIntro.vue
index e6cfe4c..cd0a976 100644
--- a/components/global/PageIntro.vue
+++ b/components/global/PageIntro.vue
@@ -6,7 +6,7 @@ const props = defineProps({
 <template>
   <ContentRenderer :value="props.data">
     <div
-      class="flex flex-col-reverse md:flex-row justify-between items-center h-screen-md"
+      class="flex flex-col-reverse md:flex-row justify-between items-center h-screen-md border-b py-5"
     >
       <div class="basis-2/2 md:basis-1/2 flex-col justify-start items-center">
         <div class="items-center flex gap-3">
@@ -28,7 +28,7 @@ const props = defineProps({
           class="flex max-h-[20rem]"
           :src="data?.thumbnail"
           :alt="data?.title"
-          :placeholder="[50, 25]"
+          :placeholder="[300, 300]"
         />
       </div>
     </div>
diff --git a/composables/user/useUser.ts b/composables/user/useUser.ts
index 41be16d..db75ce7 100644
--- a/composables/user/useUser.ts
+++ b/composables/user/useUser.ts
@@ -63,7 +63,7 @@ export default () => {
         tags: [],
         content: JSON.stringify(profile.value),
       },
-      hexToBytes(certs.value.priv)
+      hexToBytes(certs.value.priv),
     );
     const body: any = await $fetch("/api/members/register", {
       method: "post",
diff --git a/package.json b/package.json
index f85da9b..6acfdc0 100755
--- a/package.json
+++ b/package.json
@@ -77,4 +77,4 @@
       "x64"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/pages/cat/[...slug].vue b/pages/cat/[...slug].vue
index a983463..bad710a 100755
--- a/pages/cat/[...slug].vue
+++ b/pages/cat/[...slug].vue
@@ -3,30 +3,8 @@
     <ContentDoc>
       <template #default="{ doc }">
         <section class="flex flex-col">
-          <div
-            class="flex flex-col-reverse md:flex-row justify-between items-center h-screen-sm border-b md:border-0"
-          >
-            <div
-              class="basis-2/2 md:basis-1/2 flex-col justify-start items-center"
-            >
-              <h2>
-                {{ doc?.title }}
-              </h2>
-              <p>
-                {{ doc?.description }}
-              </p>
-            </div>
-            <div class="basis-2/2 md:basis-1/2 flex justify-end items-center">
-              <nuxt-img
-                preload
-                loading="lazy"
-                sizes="sm:100vw md:50vw lg:400px"
-                class="flex max-h-[30rem]"
-                :src="doc?.thumbnail"
-                :alt="doc?.title"
-              />
-            </div>
-          </div>
+          <LazyPageIntro :data="doc" />
+
           <h3 class="border-b pb-3">جدیدترین ورودی‌ها</h3>
 
           <LazyLatestItems :category="doc.title" class="mx-[4rem]" />
diff --git a/pages/notes/[...slug].vue b/pages/notes/[...slug].vue
index 77b4128..2d55776 100755
--- a/pages/notes/[...slug].vue
+++ b/pages/notes/[...slug].vue
@@ -7,37 +7,8 @@
           class="flex flex-col node-page"
           :class="doc?.dir === 'ltr' ? 'ltr' : 'rtl'"
         >
-          <div
-            class="flex flex-col-reverse md:flex-row justify-between items-center h-screen-sm border-b pb-10"
-          >
-            <div
-              class="basis-2/2 md:basis-1/2 flex-col justify-start items-center"
-            >
-              <h2 class="">
-                {{ doc?.title }}
-              </h2>
-              <p>
-                {{ doc?.description }}
-              </p>
-              <div class="flex flex-row mt-0 list-none items-center gap-2">
-                <span v-for="tag in doc?.tags" :key="tag" class="text-lg">
-                  <span class="font-bold text-xl"> # </span>
-                  {{ tag }}
-                </span>
-              </div>
-            </div>
-            <div class="basis-2/2 md:basis-1/2 flex justify-end items-center">
-              <nuxt-img
-                preload
-                loading="lazy"
-                sizes="sm:100vw md:50vw lg:400px"
-                class="flex max-h-[30rem]"
-                :src="doc?.thumbnail"
-                :alt="doc?.title"
-                :placeholder="[300, 300]"
-              />
-            </div>
-          </div>
+          <LazyPageIntro :data="doc" />
+
           <div class="flex">
             <div class="basis-8/12 pl-4">
               <ContentRenderer :value="doc" class="content mb-10" />