diff --git a/src/blocks/AboutProfile/Component.tsx b/src/blocks/AboutProfile/Component.tsx
index 04244e6..1e2730a 100644
--- a/src/blocks/AboutProfile/Component.tsx
+++ b/src/blocks/AboutProfile/Component.tsx
@@ -1,5 +1,7 @@
+'use client'
+
 import React from 'react'
-import { ImageMedia } from '../ImageMedia' // Adjust this path to wherever your ImageMedia file lives
+import { ImageMedia } from '@/components/ImageMedia' // Fixed path alias
 import type { Media as MediaType } from '@/payload-types'
 
 type ButtonGroup = {
@@ -29,7 +31,6 @@ export function AboutProfileBlock({
 }: AboutProfileBlockProps) {
   const isRight = imagePosition === 'right'
 
-  // Using your unified ImageMedia component handles S3 URLs, fallback widths, heights, and alt texts seamlessly
   const imageEl = image ? (
     <div className="w-full sm:w-[340px] shrink-0 rounded-xl overflow-hidden bg-muted/50">
       <ImageMedia
@@ -71,7 +72,7 @@ export function AboutProfileBlock({
           {(hasPrimary || hasSecondary) && (
             <div className="flex flex-wrap gap-3 mt-2">
               {hasPrimary && (
-                <a // <--- Fixed missing '<' opening bracket here
+                <a
                   href={primaryButton.url}
                   download
                   className="flex items-center gap-2 text-sm px-5 py-2.5 rounded-lg bg-muted/50 border border-foreground/10 text-foreground/70 hover:text-foreground/90 hover:bg-muted transition-colors"
@@ -81,7 +82,7 @@ export function AboutProfileBlock({
                 </a>
               )}
               {hasSecondary && (
-                <a // <--- Fixed missing '<' opening bracket here
+                <a
                   href={secondaryButton.url}
                   target={secondaryButton.newTab ? '_blank' : '_self'}
                   rel="noopener noreferrer"