diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index c9e2fc8..83089f3 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -17,17 +17,20 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22
-          cache: "npm"
+          node-version: 24
+          cache: "bun"
+
+      - name: Install Bun
+        run: npm install -g bun
 
       - name: Install dependencies
-        run: npm ci
+        run: bun install
 
       - name: Check Linting
-        run: npm run lint
+        run: bun run lint
 
       - name: Check Format
-        run: npm run format
+        run: bun run format
 
-      - name: Playgourd build check
-        run: npm run build
+      - name: Playgroud build check
+        run: bun run build
diff --git a/app/components/blog/Header.vue b/app/components/blog/Header.vue
index 3842a93..692077f 100644
--- a/app/components/blog/Header.vue
+++ b/app/components/blog/Header.vue
@@ -40,7 +40,7 @@ withDefaults(defineProps<Props>(), {
       </div>
 
       <h1
-        class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-zinc-800 dark:text-zinc-100 mb-6 tracking-tight leading-tight break-words">
+        class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-zinc-800 dark:text-zinc-100 mb-6 tracking-tight leading-tight wrap-break-word">
         {{ title }}
       </h1>
 
diff --git a/app/pages/posts/[post].vue b/app/pages/posts/[post].vue
index bd42fe3..ecb4b69 100644
--- a/app/pages/posts/[post].vue
+++ b/app/pages/posts/[post].vue
@@ -43,7 +43,7 @@ useHead({
 </script>
 
 <template>
-  <div class="px-6 container max-w-6xl mx-auto sm:grid grid-cols-12 gap-x-12">
+  <div class="px-4 md:px-6 container max-w-6xl mx-auto sm:grid grid-cols-12 gap-x-12">
     <div class="col-span-12 lg:col-span-8">
       <BlogHeader
         :title="data.title"
@@ -53,7 +53,7 @@ useHead({
         :description="data.description"
         :tags="data.tags" />
       <div
-        class="prose prose-zinc dark:prose-invert max-w-none prose-headings:scroll-mt-28 prose-headings:tracking-tight prose-headings:font-bold prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-p:leading-relaxed prose-p:text-zinc-600 dark:prose-p:text-zinc-400 prose-a:text-violet-600 dark:prose-a:text-violet-400 prose-a:no-underline hover:prose-a:underline prose-blockquote:border-l-4 prose-blockquote:border-violet-500 prose-blockquote:bg-violet-500/5 prose-blockquote:py-1 prose-blockquote:px-6 prose-blockquote:rounded-r-xl prose-blockquote:italic prose-img:rounded-3xl prose-img:shadow-xl prose-code:text-violet-600 dark:prose-code:text-violet-400 prose-code:bg-violet-500/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-pre:bg-slate-900 dark:prose-pre:bg-slate-950 prose-pre:rounded-2xl prose-pre:shadow-2xl prose-pre:border prose-pre:border-white/5">
+        class="prose prose-zinc dark:prose-invert max-w-none w-full prose-headings:scroll-mt-28 prose-headings:tracking-tight prose-headings:font-bold prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-p:leading-relaxed prose-p:text-zinc-600 dark:prose-p:text-zinc-400 prose-a:text-violet-600 dark:prose-a:text-violet-400 prose-a:no-underline hover:prose-a:underline prose-blockquote:border-l-4 prose-blockquote:border-violet-500 prose-blockquote:bg-violet-500/5 prose-blockquote:py-1 prose-blockquote:px-6 prose-blockquote:rounded-r-xl prose-blockquote:italic prose-img:rounded-3xl prose-img:shadow-xl prose-code:text-violet-600 dark:prose-code:text-violet-400 prose-code:bg-violet-500/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-pre:bg-slate-900 dark:prose-pre:bg-slate-950 prose-pre:rounded-2xl prose-pre:shadow-2xl prose-pre:border prose-pre:border-white/5">
         <ContentRenderer v-if="articles" :value="articles">
           <template #empty>
             <p>No content found.</p>