diff --git a/src/app/learn/network-composition/page.mdx b/src/app/learn/network-composition/page.mdx
index c568a9c9..302948ce 100644
--- a/src/app/learn/network-composition/page.mdx
+++ b/src/app/learn/network-composition/page.mdx
@@ -1,4 +1,5 @@
 import {HeroPattern} from "@/components/HeroPattern"
+import Diagram from "@/components/Diagram"
 
 <HeroPattern />
 
@@ -16,8 +17,10 @@ For users and developers, the permaweb offers low-cost, maintenance-free, and pe
 The AR.IO Network integrates decentralized protocols, services, and applications to power the permanent web alongside the traditional internet. 
 Foundational components like Arweave and AO are independently developed, while AR.IO introduces essential services and incentives that enable seamless interaction and accessibility. 
 
-<img src="https://arweave.net/ztJ2iYMIelFOwc4vXv8iYzPAES4bFCf-sdO5ZIc5bKI" />
-<div className="caption">Diagram 1: The Permanent Cloud Network</div>
+<Diagram src="https://arweave.net/ztJ2iYMIelFOwc4vXv8iYzPAES4bFCf-sdO5ZIc5bKI" title="Diagram 1" description="The Permanent Cloud Network" />
+
+{/* <img src="https://arweave.net/ztJ2iYMIelFOwc4vXv8iYzPAES4bFCf-sdO5ZIc5bKI" />
+<div className="caption">Diagram 1: The Permanent Cloud Network</div> */}
 
 Major Components of the Permanent Cloud: 
 
diff --git a/src/components/Diagram.tsx b/src/components/Diagram.tsx
new file mode 100644
index 00000000..e0481956
--- /dev/null
+++ b/src/components/Diagram.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface DiagramProps {
+  src: string;
+  title?: string;
+  description?: string;
+}
+
+const Diagram: React.FC<DiagramProps> = ({ src, title, description }) => {
+  if (!src) {
+    console.error('Diagram component requires a valid src string.');
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col items-center">
+      <img src={src} alt={title || 'Diagram'} className="max-w-full h-auto" />
+      {(title || description) && (
+        <p className="text-center text-sm mt-2">
+          {title && <strong>{title}</strong>}
+          {title && description && ': '}
+          {description}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default Diagram;