diff --git a/src/app/page.tsx b/src/app/page.tsx
index acaa4ac..b16110d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,9 +10,46 @@ import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Award, Briefcase, Code2, Mail, Zap } from 'lucide-react';
+import { Award, Briefcase, Code2, Mail, Zap, Github, ExternalLink } from 'lucide-react';
+import { useState } from 'react';
+
+interface ProjectDetails {
+  id: string;
+  name: string;
+  github?: string;
+  techStack: string[];
+  outcomes: string[];
+}
+
+const projectDetailsMap: Record<string, ProjectDetails> = {
+  "1": {
+    id: "1",    name: "Real-Time Data Pipeline Optimization",    github: "https://github.com",    techStack: ["Apache Spark", "Microsoft Fabric", "Azure Data Factory", "Python"],
+    outcomes: ["35% pipeline performance improvement", "Enterprise-scale data processing", "Automated ETL orchestration"]
+  },
+  "2": {
+    id: "2",    name: "SMI-GNN Drug Interaction Prediction",    github: "https://github.com",    techStack: ["TensorFlow", "Graph Neural Networks", "Python", "PyTorch"],
+    outcomes: ["High-accuracy molecular interaction predictions", "Research publication ready", "Novel GNN architecture implementation"]
+  },
+  "3": {
+    id: "3",    name: "Advanced Analytics Dashboard",    github: "https://github.com",    techStack: ["Power BI", "React", "TypeScript", "Azure SQL"],
+    outcomes: ["Production-ready analytics platform", "Real-time data visualization", "100+ concurrent users support"]
+  }
+};
 
 export default function LandingPage() {
+  const [selectedProject, setSelectedProject] = useState<ProjectDetails | null>(null);
+
+  const handleProjectClick = (projectId: string) => {
+    const project = projectDetailsMap[projectId];
+    if (project) {
+      setSelectedProject(project);
+    }
+  };
+
+  const handleCloseModal = () => {
+    setSelectedProject(null);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="expand-hover"
@@ -156,17 +193,72 @@ export default function LandingPage() {
           gridVariant="two-columns-alternating-heights"
           products={[
             {
-              id: "1",              name: "Real-Time Data Pipeline Optimization",              price: "Enterprise Scale",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png",              imageAlt: "Data pipeline dashboard"
+              id: "1",              name: "Real-Time Data Pipeline Optimization",              price: "Enterprise Scale",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png",              imageAlt: "Data pipeline dashboard",              onProductClick: () => handleProjectClick("1")
             },
             {
-              id: "2",              name: "SMI-GNN Drug Interaction Prediction",              price: "Research Focus",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/molecular-structure-visualization-with-g-1773295366007-01f1dd8e.png",              imageAlt: "Molecular graph neural network"
+              id: "2",              name: "SMI-GNN Drug Interaction Prediction",              price: "Research Focus",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/molecular-structure-visualization-with-g-1773295366007-01f1dd8e.png",              imageAlt: "Molecular graph neural network",              onProductClick: () => handleProjectClick("2")
             },
             {
-              id: "3",              name: "Advanced Analytics Dashboard",              price: "Production Ready",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png",              imageAlt: "Analytics dashboard interface"
+              id: "3",              name: "Advanced Analytics Dashboard",              price: "Production Ready",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AphEdZwP4PlHv0KCb4JmqyDqxO/modern-data-pipeline-dashboard-with-colo-1773295366417-e08aedfa.png",              imageAlt: "Analytics dashboard interface",              onProductClick: () => handleProjectClick("3")
             }
           ]}
           ariaLabel="Projects section"
         />
+        
+        {selectedProject && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={handleCloseModal}>
+            <div className="bg-white dark:bg-slate-900 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+              <div className="p-8">
+                <div className="flex items-center justify-between mb-6">
+                  <h2 className="text-3xl font-bold">{selectedProject.name}</h2>
+                  <button onClick={handleCloseModal} className="text-2xl font-bold text-gray-500 hover:text-gray-700">×</button>
+                </div>
+                
+                <div className="mb-8">
+                  <h3 className="text-xl font-semibold mb-4 flex items-center gap-2">
+                    <Github size={20} />
+                    GitHub Repository
+                  </h3>
+                  {selectedProject.github ? (
+                    <a href={selectedProject.github} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800 flex items-center gap-2">
+                      {selectedProject.github}
+                      <ExternalLink size={16} />
+                    </a>
+                  ) : (
+                    <p className="text-gray-500">GitHub link coming soon</p>
+                  )}
+                </div>
+                
+                <div className="mb-8">
+                  <h3 className="text-xl font-semibold mb-4">Tech Stack</h3>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedProject.techStack.map((tech, index) => (
+                      <span key={index} className="bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100 px-4 py-2 rounded-lg text-sm font-medium">
+                        {tech}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                
+                <div className="mb-8">
+                  <h3 className="text-xl font-semibold mb-4">Key Outcomes</h3>
+                  <ul className="space-y-3">
+                    {selectedProject.outcomes.map((outcome, index) => (
+                      <li key={index} className="flex items-start gap-3">
+                        <span className="text-green-500 font-bold mt-1">✓</span>
+                        <span className="text-gray-700 dark:text-gray-300">{outcome}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                
+                <button onClick={handleCloseModal} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg">
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
 
       <div id="certifications" data-section="certifications">