diff --git a/app/app.config.ts b/app/app.config.ts
index 14a0d43..3d480e4 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -1,6 +1,9 @@
 // @keep-sorted
 export default defineAppConfig({
   ui: {
+    container: {
+      base: "w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8",
+    },
     prose: {
       // pre: {
       //   slots: {
diff --git a/app/components/blog/Header.vue b/app/components/blog/Header.vue
index 692077f..59608fb 100644
--- a/app/components/blog/Header.vue
+++ b/app/components/blog/Header.vue
@@ -19,15 +19,15 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <header class="py-12">
-    <div class="text-center mb-8">
-      <div class="flex items-center justify-center gap-3 mb-6">
+  <header class="py-12 w-full">
+    <div class="grid items-center text-center mb-8 w-full px-4">
+      <div class="flex flex-wrap items-center justify-center gap-3 mb-6">
         <div
-          class="flex items-center text-sm font-bold text-violet-600 dark:text-violet-400 bg-violet-500/10 px-3 py-1 rounded-full border border-violet-500/20">
+          class="flex items-center text-sm font-bold text-violet-600 dark:text-violet-400 bg-violet-500/10 px-3 py-1 rounded-full border border-violet-500/20 shrink-0">
           <Icon name="mdi:calendar" class="mr-2 w-4 h-4" />
           {{ date }}
         </div>
-        <div class="flex items-center gap-2 flex-wrap">
+        <div class="flex items-center justify-center gap-2 flex-wrap">
           <template v-for="tag in tags" :key="tag">
             <NuxtLink :to="`/tags/${tag.toLocaleLowerCase()}`">
               <span
@@ -49,7 +49,7 @@ withDefaults(defineProps<Props>(), {
       </p>
     </div>
 
-    <div class="relative group max-w-4xl mx-auto mb-12 w-full">
+    <div class="relative group w-full mb-12 px-4">
       <div
         class="absolute inset-0 bg-linear-to-tr from-violet-500/20 to-fuchsia-500/20 rounded-3xl blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
       <NuxtImg
diff --git a/app/components/main/header.vue b/app/components/main/header.vue
index 8ec2dbe..a67fe34 100644
--- a/app/components/main/header.vue
+++ b/app/components/main/header.vue
@@ -35,7 +35,7 @@ watch(
           <NuxtLink
             to="/"
             class="flex items-center gap-2 h-10 px-4 rounded-full bg-white/80 dark:bg-slate-900/80 border border-zinc-200/50 dark:border-white/10 shadow-sm backdrop-blur-xl transition-transform active:scale-95">
-            <Icon name="fa-solid:cat" size="18" class="text-primary flex items-center" />
+            <!-- <Icon name="fa-solid:cat" size="18" class="text-primary flex items-center" /> -->
             <span class="text-base font-bold text-primary">{{ siteConfig.siteMeta.title }}</span>
           </NuxtLink>
 
@@ -74,7 +74,7 @@ watch(
               'hover:bg-zinc-100 dark:hover:bg-white/10': !isActive('/'),
             }">
             <NuxtLink to="/" class="flex h-12 duration-200 items-center gap-2 px-4 text-lg">
-              <Icon name="fa-solid:cat" size="20" class="flex items-center text-primary" />
+              <!-- <Icon name="fa-solid:cat" size="20" class="flex items-center text-primary" /> -->
               <span class="font-bold text-primary">{{ siteConfig.siteMeta.title }}</span>
             </NuxtLink>
           </div>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 0ce3999..2c235d7 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -3,7 +3,8 @@ const route = useRoute();
 </script>
 
 <template>
-  <div class="gd-container font-spacegrotesk relative overflow-x-hidden">
+  <!-- <UContainer> -->
+  <div class="font-spacegrotesk relative overflow-x-hidden">
     <MainHeader />
     <main>
       <slot />
@@ -21,6 +22,7 @@ const route = useRoute();
       <!-- <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] mix-blend-overlay"></div> -->
     </div>
   </div>
+  <!-- </UContainer> -->
 </template>
 
 <style scoped>