diff --git a/components/app/AppBreadcrumb.vue b/components/app/AppBreadcrumb.vue
index 027909fad309457f4d225475edd1f6a9ffc9b4a2..730db45d767159002e60ffb8debaf007b72d5efd 100644
--- a/components/app/AppBreadcrumb.vue
+++ b/components/app/AppBreadcrumb.vue
@@ -21,7 +21,7 @@
           :class="
             index !== items.length - 1
               ? 'text-gray-400'
-              : 'text-gray-600 font-extralight select-all'
+              : 'text-gray-500 font-light select-all'
           "
         >
           {{ item.title }}
diff --git a/components/page/PageHeader.vue b/components/page/PageHeader.vue
index 908eebfe15a78efff71138f7aba555edded0a8c0..3ed2fc09ed8092c41a9b23f310954521ba382b57 100644
--- a/components/page/PageHeader.vue
+++ b/components/page/PageHeader.vue
@@ -1,6 +1,10 @@
 <template>
-  <div class="flex items-center justify-between py-8">
-    <h1 class="text-4xl font-extrabold">{{ document.title }}</h1>
+  <div class="flex items-center justify-between">
+    <h1
+      class="text-3xl md:text-4xl 2xl:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight py-8"
+    >
+      {{ document.title }}
+    </h1>
     <slot />
   </div>
 </template>