diff --git a/public/images/wireframe_kit.png b/public/images/wireframe_kit.png
new file mode 100644
index 0000000..8993104
Binary files /dev/null and b/public/images/wireframe_kit.png differ
diff --git a/src/components/ProductGrid.jsx b/src/components/ProductGrid.jsx
index bf18636..2fe1783 100644
--- a/src/components/ProductGrid.jsx
+++ b/src/components/ProductGrid.jsx
@@ -6,11 +6,12 @@ import '../styles/variables.css';
 
 gsap.registerPlugin(ScrollTrigger);
 
-const products = [
-    { id: 1, name: 'Portfolio V1', desc: 'Web Design', price: '2023' },
-    { id: 2, name: 'Neon Dreams', desc: 'WebGL Experience', price: '2024' },
-    { id: 3, name: 'Type Lab', desc: 'Typography Tool', price: '2024' },
-    { id: 4, name: 'Audio Vis', desc: 'Sound Reactive', price: '2023' },
+
+
+const REPO_LIST = [
+    'MatissJurevics/Gene-AI',
+    'MatissJurevics/movesync',
+    'MatissJurevics/script-server',
 ];
 
 const ProductGrid = () => {
@@ -18,8 +19,63 @@ const ProductGrid = () => {
     const titleRef = useRef(null);
     const itemRefs = useRef([]);
     const [selectedProject, setSelectedProject] = useState(null);
+    const [products, setProducts] = useState([]);
 
     useEffect(() => {
+        const fetchRepos = async () => {
+            const promises = REPO_LIST.map(async (repoName, index) => {
+                try {
+                    const res = await fetch(`https://api.github.com/repos/${repoName}`);
+                    if (!res.ok) throw new Error('Fetch failed');
+                    const data = await res.json();
+                    return {
+                        id: index + 1,
+                        name: data.name,
+                        desc: data.description || data.language || 'No description',
+                        price: `★ ${data.stargazers_count}`,
+                        language: data.language,
+                        url: data.html_url,
+                        raw: data
+                    };
+                } catch (e) {
+                    console.warn(`Failed to load ${repoName}`, e);
+                    // Fallback or skip
+                    return {
+                        id: index + 1,
+                        name: repoName.split('/')[1],
+                        desc: 'Loading Error',
+                        price: 'NT',
+                        url: '#'
+                    };
+                }
+            });
+
+            const results = await Promise.all(promises);
+
+            // Add Manual Gumroad Project
+            const manualProject = {
+                id: 'wireframe', // unique string ID to avoid collision
+                name: 'Wireframe UI Kit',
+                desc: 'Web Design Resource',
+                price: '$29',
+                url: 'https://saetom.gumroad.com/l/WireframeUIKit',
+                image: '/images/wireframe_kit.png',
+                details: `
+                    A comprehensive Wireframe UI Kit designed to speed up your prototyping workflow.
+                    Includes over 100+ customizable components, varying layouts, and responsive patterns.
+                    Perfect for designers and developers looking to create high-fidelity wireframes quickly.
+                `
+            };
+
+            setProducts([manualProject, ...results]);
+        };
+
+        fetchRepos();
+    }, []);
+
+    useEffect(() => {
+        if (!products.length) return; // Wait for data
+
         const ctx = gsap.context(() => {
             // Animate Title
             gsap.from(titleRef.current, {
@@ -52,7 +108,7 @@ const ProductGrid = () => {
         }, gridRef);
 
         return () => ctx.revert();
-    }, []);
+    }, [products]);
 
     const onEnter = ({ currentTarget }) => {
         gsap.to(currentTarget, { backgroundColor: '#fff', scale: 0.98, duration: 0.3 });
@@ -114,7 +170,9 @@ const ProductGrid = () => {
                                 onClick={() => setSelectedProject(p)}
                             >
                                 <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', zIndex: 2 }}>
-                                    <span className="mono" style={{ fontSize: '0.8rem', color: '#ff4d00' }}>0{p.id}</span>
+                                    <span className="mono" style={{ fontSize: '0.8rem', color: '#ff4d00' }}>
+                                        {typeof p.id === 'number' ? `0${p.id}` : 'NEW'}
+                                    </span>
                                     <div className="indicator" style={{
                                         width: '8px',
                                         height: '8px',
@@ -123,24 +181,32 @@ const ProductGrid = () => {
                                     }}></div>
                                 </div>
 
-                                {/* Placeholder for Product Image */}
+                                {/* Product Image or Placeholder */}
                                 <div className="product-img" style={{
                                     flex: 1,
                                     display: 'flex',
                                     alignItems: 'center',
                                     justifyContent: 'center',
-                                    fontSize: '5rem',
+                                    fontSize: '3rem',
                                     color: '#e0e0e0',
                                     fontWeight: 800,
-                                    userSelect: 'none'
+                                    userSelect: 'none',
+                                    textAlign: 'center',
+                                    wordBreak: 'break-word',
+                                    lineHeight: 1.2,
+                                    overflow: 'hidden'
                                 }}>
-                                    MJ
+                                    {p.image ? (
+                                        <img src={p.image} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                    ) : (
+                                        p.name.substring(0, 10)
+                                    )}
                                 </div>
 
                                 <div style={{ zIndex: 2 }}>
-                                    <h3 style={{ fontSize: '1.5rem', marginBottom: '5px' }}>{p.name}</h3>
+                                    <h3 style={{ fontSize: '1.5rem', marginBottom: '5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</h3>
                                     <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: '#666' }}>
-                                        <span>{p.desc}</span>
+                                        <span style={{ maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.desc}</span>
                                         <span>{p.price}</span>
                                     </div>
                                 </div>
diff --git a/src/components/ProjectModal.jsx b/src/components/ProjectModal.jsx
index 4636ed1..ff5a2ee 100644
--- a/src/components/ProjectModal.jsx
+++ b/src/components/ProjectModal.jsx
@@ -102,9 +102,16 @@ const ProjectModal = ({ project, onClose }) => {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                        borderRight: '1px solid #ccc'
+                        borderRight: '1px solid #ccc',
+                        overflow: 'hidden'
                     }}>
-                        <h1 style={{ fontSize: '8vw', color: '#f0f0f0', fontWeight: '900' }}>MJ</h1>
+                        {project.image ? (
+                            <img src={project.image} alt={project.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                        ) : (
+                            <h1 style={{ fontSize: '8vw', color: '#f0f0f0', fontWeight: '900' }}>
+                                {project.name ? project.name.substring(0, 2).toUpperCase() : 'MJ'}
+                            </h1>
+                        )}
                     </div>
 
                     {/* Right: Info */}
@@ -118,23 +125,18 @@ const ProjectModal = ({ project, onClose }) => {
                     }}>
                         <div>
                             <span className="mono" style={{ color: '#ff4d00', marginBottom: '10px', display: 'block' }}>
-                                {project.price} {/* Using 'price' for Year based on previous data struct */}
+                                {project.price}
                             </span>
                             <h2 className="uppercase" style={{ fontSize: '3rem', lineHeight: 1, marginBottom: '20px' }}>
                                 {project.name}
                             </h2>
                             <p style={{ fontSize: '1.1rem', color: '#444', marginBottom: '40px', lineHeight: 1.6 }}>
-                                This is a detailed description of the {project.name} project.
-                                It explores the intersection of design and technology,
-                                focusing on user experience and visual impact.
+                                {project.details || project.desc || "No details available."}
                             </p>
 
                             <div className="mono" style={{ fontSize: '0.9rem', color: '#666' }}>
-                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Role</h4>
-                                <p>Design, Development</p>
-                                <br />
-                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Tech Stack</h4>
-                                <p>React, Three.js, GSAP</p>
+                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Type</h4>
+                                <p>{project.language || 'Design / Resource'}</p>
                             </div>
                         </div>
 
@@ -152,6 +154,7 @@ const ProjectModal = ({ project, onClose }) => {
                         }}
                             onMouseEnter={(e) => e.target.style.background = '#ff4d00'}
                             onMouseLeave={(e) => e.target.style.background = '#000'}
+                            onClick={() => window.open(project.url, '_blank')}
                         >
                             View Live
                         </button>