diff --git a/components/sections/TechnologyStack.tsx b/components/sections/TechnologyStack.tsx
index 21153bb..6bfb182 100644
--- a/components/sections/TechnologyStack.tsx
+++ b/components/sections/TechnologyStack.tsx
@@ -3,12 +3,12 @@
 import { motion } from 'framer-motion';
 
 const technologies = [
-  { name: 'Corestore', description: 'Decentralized storage' },
-  { name: 'Hyperswarm', description: 'Peer discovery' },
-  { name: 'Holesail', description: 'UDP hole-punching' },
-  { name: 'Autopass', description: 'Secure invitations' },
-  { name: 'Node.js', description: 'Runtime environment' },
-  { name: 'Protomux', description: 'Channel multiplexing' },
+  { name: 'Corestore', description: 'Decentralized storage', url: 'https://www.npmjs.com/package/corestore' },
+  { name: 'Hyperswarm', description: 'Peer discovery', url: 'https://www.npmjs.com/package/hyperswarm' },
+  { name: 'Holesail', description: 'Secure Tunnels', url: 'https://holesail.io' },
+  { name: 'Autopass', description: 'Secure invitations', url: 'https://www.npmjs.com/package/autopass' },
+  { name: 'Node.js', description: 'Runtime', url: 'https://nodejs.org' },
+  { name: 'Protomux', description: 'Channel multiplexing', url: 'https://www.npmjs.com/package/protomux' },
 ];
 
 export default function TechnologyStack() {
@@ -26,13 +26,16 @@ export default function TechnologyStack() {
 
         <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
           {technologies.map((tech, index) => (
-            <motion.div
+            <motion.a
               key={tech.name}
+              href={tech.url}
+              target="_blank"
+              rel="noopener noreferrer"
               initial={{ opacity: 0, scale: 0.9 }}
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
               transition={{ duration: 0.3, delay: index * 0.1 }}
-              className="text-center p-6 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-500 transition-colors"
+              className="text-center p-6 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-500 transition-colors cursor-pointer block"
             >
               <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
                 {tech.name}
@@ -40,7 +43,7 @@ export default function TechnologyStack() {
               <p className="text-sm text-gray-600 dark:text-gray-400">
                 {tech.description}
               </p>
-            </motion.div>
+            </motion.a>
           ))}
         </div>
       </div>