diff --git a/components/blur-image.tsx b/components/blur-image.tsx
new file mode 100644
index 0000000..2deba2a
--- /dev/null
+++ b/components/blur-image.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import clsx from "clsx";
+import Image from "next/image";
+import React, { useState } from "react";
+
+interface IBlurImage {
+  height?: any;
+  width?: any;
+  src?: string | any;
+  objectFit?: any;
+  className?: string | any;
+  alt?: string | undefined;
+  layout?: any;
+  [x: string]: any;
+}
+
+export const BlurImage = ({
+  height,
+  width,
+  src,
+  className,
+  _objectFit,
+  alt,
+  layout,
+  ...rest
+}: IBlurImage) => {
+  const [isLoading, setLoading] = useState(true);
+  return (
+    <Image
+      className={clsx(
+        "transition duration-300 transform",
+        isLoading ? "blur-sm scale-105" : "blur-0 scale-100",
+        className,
+      )}
+      onLoad={() => setLoading(false)}
+      src={src}
+      width={width}
+      height={height}
+      loading="lazy"
+      decoding="async"
+      blurDataURL={src}
+      layout={layout}
+      alt={alt ? alt : "Avatar"}
+      {...rest}
+    />
+  );
+};