diff --git a/app/components/component-docs/dataDisplay/CoreImage.docs.js b/app/components/component-docs/dataDisplay/CoreImage.docs.js
index 5466984..8979967 100644
--- a/app/components/component-docs/dataDisplay/CoreImage.docs.js
+++ b/app/components/component-docs/dataDisplay/CoreImage.docs.js
@@ -1,57 +1,83 @@
-import { CoreClasses, CoreH4, CoreImage } from "@wrappid/core";
+import { CoreImage } from "@wrappid/core";
 
-import CodeImport from "../../CodeImport";
 import CodeSample from "../../CodeSample";
-import ComponentProps from "../../ComponentProps";
+import ComponentDocs from "../ComponentDocs";
+
+const CORE_COMPONENT = CoreImage;
+const CORE_COMPONENT_NAME = (CORE_COMPONENT?.displayName || CORE_COMPONENT?.name);
 
 export default function CoreImageDocs() {
 
   return (
-    <>
-      <CoreH4 styleClasses={[CoreClasses.MARGIN.MY2, CoreClasses.COLOR.TEXT_PRIMARY]}>
-        CoreImage
-      </CoreH4>
-
-      <CodeImport name="CoreImage" />
-
-      <CodeSample
-        title={"Sample CoreImage "}
-        description={"Below is a sample of how to use the CoreImage component."}
-        code={`<CoreImage
+    <ComponentDocs
+      component={CORE_COMPONENT}
+      description={`${CORE_COMPONENT_NAME} is a component that displays an image.`}
+      samples={
+        <>
+          <CodeSample
+            title={`Sample ${CORE_COMPONENT_NAME}`}
+            description={`Below is a sample of how to use the ${CORE_COMPONENT_NAME} component.`}
+            code={`<CoreImage
   width={200}
   height={200}
   alt="Phoenicopterus ruber"
   src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" 
 />`}
-        renderElement={<>
-          <CoreImage
-            width={200}
-            height={200}
-            alt="Phoenicopterus ruber"
-            src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"
-          />
-        </>}
+            expandedCode={`import { ${CORE_COMPONENT_NAME} } from "@wrappid/core";
+
+export default function Sample${CORE_COMPONENT_NAME}() {
+  return (
+    <>
+      <CoreImage
+        width={200}
+        height={200}
+        alt="Phoenicopterus ruber"
+        src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"
       />
+    </>
+  );
+}`}
+            renderElement={<>
+              <CoreImage
+                width={200}
+                height={200}
+                alt="Phoenicopterus ruber"
+                src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"
+              />
+            </>}
+          />
 
-      <CodeSample
-        title={"Alt text"}
-        description={"With alt text set, the image will have alternative text. For demonstration purposes, the image source(src) has been removed."}
-        code={`<CoreImage
+          <CodeSample
+            title={`Alt Text ${CORE_COMPONENT_NAME}`}
+            description={"With alt text set, the image will have alternative text. For demonstration purposes, the image source(src) has been removed."}
+            code={`<CoreImage
   width={200}
   height={200}
   alt="Phoenicopterus ruber"
 />`}
-        renderElement={<>
-          <CoreImage
-            width={200}
-            height={200}
-            alt="Phoenicopterus ruber"
-          />
-        </>}
-      />
-
-      <ComponentProps component={CoreImage} />
+            expandedCode={`import { ${CORE_COMPONENT_NAME} } from "@wrappid/core";
 
+export default function AltText${CORE_COMPONENT_NAME}() {
+  return (
+    <>
+      <CoreImage
+        width={200}
+        height={200}
+        alt="Phoenicopterus ruber"
+      />
     </>
   );
+}`}
+            renderElement={<>
+              <CoreImage
+                width={200}
+                height={200}
+                alt="Phoenicopterus ruber"
+              />
+            </>}
+          />
+        </>
+      }
+    />
+  );
 }