diff --git a/app/styles.css b/app/styles.css
index ccf3811..c910df6 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -63,4 +63,4 @@ body {
   h4 {
     @apply text-2xl;
   }
-}
\ No newline at end of file
+}
diff --git a/components/Image.tsx b/components/Image.tsx
new file mode 100644
index 0000000..850f7b4
--- /dev/null
+++ b/components/Image.tsx
@@ -0,0 +1,50 @@
+import { ComponentConfig } from '@measured/puck';
+import Image from 'next/image'
+import { useState } from 'react';
+
+export interface ImageComponentProps {
+  src: string;
+  alt: string;
+}
+
+const ImageComponent = ({
+    src,
+    alt,
+} : ImageComponentProps) => {
+    
+
+    return (
+        <Image
+        src={src}
+        alt={alt}
+        style={{  
+          display: "block",
+          margin: "0 auto",
+          width: "100%",
+          height: "auto",
+          maxWidth: "100%",
+        }}
+        />
+    );
+};
+
+export const imageConfig: ComponentConfig<ImageComponentProps> = {
+    render: ImageComponent,
+    fields: {
+      src: {
+        type: "text",
+        label: "Image Source",
+      },
+      alt: {
+        type: "text",
+        label: "Alt Text",
+      }
+    },
+    defaultProps: {
+      src: "https://placehold.co/600x400",
+      alt: "Default Image"
+    },
+  };
+  
+
+export default ImageComponent
diff --git a/components/Text.tsx b/components/Text.tsx
index 358adcd..55bdf86 100644
--- a/components/Text.tsx
+++ b/components/Text.tsx
@@ -1,5 +1,6 @@
 import { ComponentConfig } from "@measured/puck";
 import React from "react";
+import { Style } from "util";
 
 export type TextProps = {
   text: string;
diff --git a/config/page.config.ts b/config/page.config.ts
index 531c418..de23b0f 100644
--- a/config/page.config.ts
+++ b/config/page.config.ts
@@ -3,6 +3,7 @@ import { textConfig } from "@components/Text";
 import type { TextProps } from "@components/Text";
 import { heroConfig } from "@components/Hero";
 import type { HeroProps } from "@components/Hero";
+import { ImageComponentProps, imageConfig } from "@components/Image";
 import { verticalSpaceConfig } from "@components/VerticalSpace";
 import type { VerticalSpaceProps } from "@components/VerticalSpace";
 
@@ -10,6 +11,7 @@ import type { VerticalSpaceProps } from "@components/VerticalSpace";
 type Props = {
     Text: TextProps;
     Hero: HeroProps;
+    Image: ImageComponentProps
     VerticalSpace: VerticalSpaceProps;
 };
 
@@ -17,6 +19,7 @@ export const config: Config<Props> = {
     components: {
         Text: textConfig,
         Hero: heroConfig,
+        Image: imageConfig,
         VerticalSpace: verticalSpaceConfig,
     },
 };
diff --git a/package.json b/package.json
index eee5e80..c2b38ed 100644
--- a/package.json
+++ b/package.json
@@ -25,5 +25,6 @@
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.5.4"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }