diff --git a/src/blocks/AboutProfile/Component.tsx b/src/blocks/AboutProfile/Component.tsx
index bc4bffd..78a2827 100644
--- a/src/blocks/AboutProfile/Component.tsx
+++ b/src/blocks/AboutProfile/Component.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react'
 import { ImageMedia } from '@/components/Media/ImageMedia'
+import { Container } from '@/components/ui/Container' // Ensure this path is correct
 import type { Media as MediaType } from '@/payload-types'
 
 type ButtonGroup = {
@@ -45,8 +46,8 @@ export function AboutProfileBlock({
   const hasSecondary = secondaryButton?.label && secondaryButton?.url
 
   return (
-    // Standardized vertical padding and alignment
-    <section className="w-full max-w-5xl mx-auto py-12 md:py-24">
+    // Replaced hardcoded max-w-5xl and section with the unified Container
+    <Container className="py-12 md:py-24">
       {(heading || subheading) && (
         <div className="text-center mb-16">
           {heading && (
@@ -97,6 +98,6 @@ export function AboutProfileBlock({
           )}
         </div>
       </div>
-    </section>
+    </Container>
   )
 }
diff --git a/src/blocks/BentoRow/Component.tsx b/src/blocks/BentoRow/Component.tsx
index 26bd8cb..5e13b9f 100644
--- a/src/blocks/BentoRow/Component.tsx
+++ b/src/blocks/BentoRow/Component.tsx
@@ -1,10 +1,8 @@
-import React from 'react'
+'use client'
 
-type Skill = {
-  icon: string
-  title: string
-  tags: string
-}
+import React from 'react'
+import { Container } from '@/components/ui/Container' // Ensure this path is correct
+import type { Skill } from '@/payload-types' // Adjust import based on your project
 
 type BentoRowBlockProps = {
   aboutHeading?: string
@@ -18,8 +16,8 @@ export function BentoRowBlock(props: BentoRowBlockProps) {
   const { aboutHeading, aboutText, aboutCta, skillsHeading, skills } = props
 
   return (
-    // Standardized vertical padding and container constraints
-    <section className="w-full max-w-5xl mx-auto py-12 md:py-24">
+    // Replaced hardcoded max-w-5xl and section with the unified Container
+    <Container className="py-12 md:py-24">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {/* About Section */}
         <div className="bg-muted/50 border border-foreground/10 rounded-2xl p-8 flex flex-col justify-between gap-8">
@@ -94,6 +92,6 @@ export function BentoRowBlock(props: BentoRowBlockProps) {
           )}
         </div>
       </div>
-    </section>
+    </Container>
   )
 }
diff --git a/src/blocks/Contact/Component.tsx b/src/blocks/Contact/Component.tsx
index ecb5ebe..3b870cd 100644
--- a/src/blocks/Contact/Component.tsx
+++ b/src/blocks/Contact/Component.tsx
@@ -1,4 +1,7 @@
+'use client'
+
 import React from 'react'
+import { Container } from '@/components/ui/Container' // Ensure this path is correct
 
 type ContactLink = {
   label: string
@@ -19,7 +22,8 @@ export function ContactBlock(props: ContactBlockProps) {
   const { heading, subtext, email, links } = props
 
   return (
-    <section className="w-full max-w-5xl mx-auto py-12">
+    // Replaced hardcoded max-w-5xl and section with the unified Container
+    <Container className="py-12">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
         <div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
           <div>
@@ -77,6 +81,6 @@ export function ContactBlock(props: ContactBlockProps) {
             })}
         </div>
       </div>
-    </section>
+    </Container>
   )
 }
diff --git a/src/blocks/KanbanColor/Component.tsx b/src/blocks/KanbanColor/Component.tsx
index 085a39f..83f45fb 100644
--- a/src/blocks/KanbanColor/Component.tsx
+++ b/src/blocks/KanbanColor/Component.tsx
@@ -1,4 +1,7 @@
+'use client'
+
 import React from 'react'
+import { Container } from '@/components/ui/Container' // Ensure this path is correct
 
 const colorMap: Record<string, { border: string; dot: string }> = {
   gray: { border: 'border-t-[#888780]', dot: 'bg-[#888780]' },
@@ -18,8 +21,8 @@ export function KanbanColorBlock({ columns }: Props) {
   if (!Array.isArray(columns) || columns.length === 0) return null
 
   return (
-    // Standardized vertical padding to match other page sections
-    <section className="w-full max-w-5xl mx-auto py-12 md:py-24">
+    // Replaced hardcoded max-w-5xl and section with the unified Container
+    <Container className="py-12 md:py-24">
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         {columns.map((col, i) => {
           const { border, dot } = colorMap[col.color ?? 'gray'] ?? colorMap.gray
@@ -50,6 +53,6 @@ export function KanbanColorBlock({ columns }: Props) {
           )
         })}
       </div>
-    </section>
+    </Container>
   )
 }
diff --git a/src/blocks/KanbanHori/Component.tsx b/src/blocks/KanbanHori/Component.tsx
index 809c4d3..b57e2b3 100644
--- a/src/blocks/KanbanHori/Component.tsx
+++ b/src/blocks/KanbanHori/Component.tsx
@@ -1,5 +1,7 @@
-// src/blocks/KanbanHori/Component.tsx
+'use client'
+
 import React from 'react'
+import { Container } from '@/components/ui/Container' // Ensure this path is correct
 
 type Card = { title: string; subtitle?: string }
 type Row = { label: string; cards?: Card[] }
@@ -9,7 +11,8 @@ export function KanbanHoriBlock({ rows }: Props) {
   if (!Array.isArray(rows) || rows.length === 0) return null
 
   return (
-    <section className="w-full max-w-5xl mx-auto px-6 py-16">
+    // Replaced hardcoded max-w-5xl and px-6 with the unified Container
+    <Container className="py-16">
       <div className="flex flex-col gap-4">
         {rows.map((row, i) => (
           <div key={i} className="grid grid-cols-[100px_1fr] gap-4 items-start">
@@ -31,6 +34,6 @@ export function KanbanHoriBlock({ rows }: Props) {
           </div>
         ))}
       </div>
-    </section>
+    </Container>
   )
 }
diff --git a/src/blocks/Showcase/Component.tsx b/src/blocks/Showcase/Component.tsx
index 059f659..8e7fc71 100644
--- a/src/blocks/Showcase/Component.tsx
+++ b/src/blocks/Showcase/Component.tsx
@@ -1,5 +1,8 @@
+'use client'
+
 import React from 'react'
 import Image from 'next/image'
+import { Container } from '@/components/ui/Container'
 import type { Media as MediaType } from '@/payload-types'
 
 type ShowcaseItem = {
@@ -71,7 +74,8 @@ export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | n
   if (!Array.isArray(items) || items.length === 0) return null
 
   return (
-    <section className="w-full max-w-5xl mx-auto py-12">
+    // Replaced hardcoded max-w-5xl and section with the unified Container
+    <Container className="py-12">
       {(heading || subheading) && (
         <div className="mb-8">
           {heading && <h2 className="text-2xl font-medium text-foreground mb-2">{heading}</h2>}
@@ -136,6 +140,6 @@ export function ShowcaseBlock(props: ShowcaseBlockProps): React.ReactElement | n
           )
         })}
       </div>
-    </section>
+    </Container>
   )
 }
diff --git a/src/blocks/Skills/Component.tsx b/src/blocks/Skills/Component.tsx
index 1510161..72b7a40 100644
--- a/src/blocks/Skills/Component.tsx
+++ b/src/blocks/Skills/Component.tsx
@@ -1,4 +1,7 @@
+'use client'
+
 import React from 'react'
+import { Container } from '@/components/ui/Container' // Ensure this path is correct
 
 type SkillCategory = {
   title: string
@@ -14,7 +17,8 @@ type SkillsBlockProps = {
 
 export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps) {
   return (
-    <section className="w-full max-w-5xl mx-auto py-12">
+    // Replaced hardcoded max-w-5xl and section with the unified Container
+    <Container className="py-12">
       {heading && (
         <p className="text-center text-xs tracking-widest uppercase text-foreground/30 mb-6">
           {heading}
@@ -62,6 +66,6 @@ export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps
           ))}
         </div>
       )}
-    </section>
+    </Container>
   )
 }
diff --git a/src/blocks/StatsStrip/Component.tsx b/src/blocks/StatsStrip/Component.tsx
index db2789b..c0b5156 100644
--- a/src/blocks/StatsStrip/Component.tsx
+++ b/src/blocks/StatsStrip/Component.tsx
@@ -1,8 +1,18 @@
+'use client'
+
+import React from 'react'
+import { Container } from '@/components/ui/Container' // Ensure this path is correct
+
+type StatsStripProps = {
+  stats: { value: string; label: string }[]
+}
+
 export function StatsStripBlock({ stats }: StatsStripProps) {
   if (!Array.isArray(stats) || stats.length === 0) return null
 
   return (
-    <section className="w-full max-w-5xl mx-auto py-12 md:py-24">
+    // Replaced hardcoded max-w-5xl and section with the unified Container
+    <Container className="py-12 md:py-24">
       <div className="bg-muted/50 border border-foreground/8 rounded-xl overflow-hidden">
         <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-y md:divide-y-0 divide-foreground/10">
           {stats.map((stat, i) => (
@@ -17,6 +27,6 @@ export function StatsStripBlock({ stats }: StatsStripProps) {
           ))}
         </div>
       </div>
-    </section>
+    </Container>
   )
 }
diff --git a/src/blocks/ToolStack/Component.tsx b/src/blocks/ToolStack/Component.tsx
index 8bd6a42..1e30b67 100644
--- a/src/blocks/ToolStack/Component.tsx
+++ b/src/blocks/ToolStack/Component.tsx
@@ -1,4 +1,7 @@
+'use client'
+
 import React from 'react'
+import { Container } from '@/components/ui/Container' // Ensure this path is correct
 
 type ToolStackBlockProps = {
   heading?: string
@@ -9,8 +12,8 @@ export function ToolStackBlock({ heading, tools }: ToolStackBlockProps) {
   if (!Array.isArray(tools) || tools.length === 0) return null
 
   return (
-    // Standardized vertical spacing to match other page sections
-    <section className="w-full max-w-5xl mx-auto py-12 md:py-24">
+    // Replaced hardcoded max-w-5xl and section with the unified Container
+    <Container className="py-12 md:py-24">
       <div className="bg-muted/50 border border-foreground/10 rounded-2xl p-8">
         {heading && (
           <p className="text-[10px] font-bold tracking-[0.2em] uppercase text-foreground/30 mb-6">
@@ -28,6 +31,6 @@ export function ToolStackBlock({ heading, tools }: ToolStackBlockProps) {
           ))}
         </div>
       </div>
-    </section>
+    </Container>
   )
 }