diff --git a/package.json b/package.json
index fb9a42da..6da70c1f 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "eslint": "8.57.1",
     "eslint-config-love": "101.0.0",
     "eslint-config-next": "15.0.3",
-    "eslint-config-love": "101.0.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-n": "17.14.0",
     "eslint-plugin-promise": "7.2.1",
diff --git a/src/components/about-us/BoardMembers.tsx b/src/components/about-us/BoardMembers.tsx
index 43f8c30b..df840f8a 100644
--- a/src/components/about-us/BoardMembers.tsx
+++ b/src/components/about-us/BoardMembers.tsx
@@ -1,4 +1,4 @@
-import ImageComponent from "@/components/image/Image";
+import ImageComponent from "@/components/image/ImageWithCaption";
 import { FC } from "react";
 import boardSrc from "../../../public/images/about-us/board.jpg";
 
diff --git a/src/components/image/Image.tsx b/src/components/image/Image.tsx
index f82b4771..484682d5 100644
--- a/src/components/image/Image.tsx
+++ b/src/components/image/Image.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { CSSProperties, FC } from "react";
 import Image from "next/image";
 
 type Image = {
@@ -6,24 +6,21 @@ type Image = {
   width: number;
   height: number;
   altText: string;
-  caption: string;
-  attribution: string;
+  sizes?: string;
+  style?: CSSProperties;
   alignment: "left" | "center" | "right";
 };
 
-// const [isHovering, setIsHovering] = useState(false)
-
 const Images: FC<Image> = ({
   image,
   width,
   height,
   altText,
-  caption,
-  attribution,
   alignment,
+  sizes,
+  style,
 }) => {
   let flexAlignment = getFlexAlignment(alignment);
-  let textAlignment = getTextAlignment(alignment);
 
   return (
     <div className={`flex ${flexAlignment}`}>
@@ -33,12 +30,15 @@ const Images: FC<Image> = ({
         }}
       >
         <div className="relative">
-          <Image src={image} alt={altText} height={height} width={width} />
+          <Image
+            src={image}
+            alt={altText}
+            height={height}
+            width={width}
+            sizes={sizes}
+            style={style}
+          />
         </div>
-        <p className={`text-neutral-500 text-sm ${textAlignment}`}>
-          Photo Credit: {attribution}
-        </p>
-        <p className={`${textAlignment}`}>{caption}</p>
       </div>
     </div>
   );
@@ -55,13 +55,3 @@ export const getFlexAlignment = (alignment: string) => {
     return "justify-center";
   }
 };
-
-export const getTextAlignment = (alignment: string) => {
-  if (alignment === "right") {
-    return "text-right";
-  } else if (alignment === "left") {
-    return "text-left";
-  } else {
-    return "text-center";
-  }
-};
diff --git a/src/components/image/ImageWithCaption.tsx b/src/components/image/ImageWithCaption.tsx
new file mode 100644
index 00000000..2792a53b
--- /dev/null
+++ b/src/components/image/ImageWithCaption.tsx
@@ -0,0 +1,67 @@
+import { FC } from "react";
+import Image from "next/image";
+
+type ImageWithCaption = {
+  image: string;
+  width: number;
+  height: number;
+  altText: string;
+  caption?: string;
+  attribution?: string;
+  alignment: "left" | "center" | "right";
+};
+
+const ImagesWithCaption: FC<ImageWithCaption> = ({
+  image,
+  width,
+  height,
+  altText,
+  caption,
+  attribution,
+  alignment,
+}) => {
+  let flexAlignment = getFlexAlignment(alignment);
+  let textAlignment = getTextAlignment(alignment);
+
+  return (
+    <div className={`flex ${flexAlignment}`}>
+      <div
+        style={{
+          width: width,
+        }}
+      >
+        <div className="relative">
+          <Image src={image} alt={altText} height={height} width={width} />
+        </div>
+        {attribution && (
+          <p className={`text-neutral-500 text-sm ${textAlignment}`}>
+            Photo Credit: {attribution}
+          </p>
+        )}
+        {caption && <p className={`${textAlignment}`}>{caption}</p>}
+      </div>
+    </div>
+  );
+};
+
+export default ImagesWithCaption;
+
+export const getFlexAlignment = (alignment: string) => {
+  if (alignment === "right") {
+    return "justify-end";
+  } else if (alignment === "left") {
+    return "justify-start";
+  } else {
+    return "justify-center";
+  }
+};
+
+export const getTextAlignment = (alignment: string) => {
+  if (alignment === "right") {
+    return "text-right";
+  } else if (alignment === "left") {
+    return "text-left";
+  } else {
+    return "text-center";
+  }
+};