diff --git a/src/components/MiniGraph.astro b/src/components/MiniGraph.astro
index 65318f5..bf1b5ca 100644
--- a/src/components/MiniGraph.astro
+++ b/src/components/MiniGraph.astro
@@ -1,5 +1,5 @@
 ---
-// MiniGraph.astro - A standalone mini knowledge graph component
+// MiniGraph.astro - A standalone mini knowledge graph component with fullscreen capability
 // This component is designed to work independently from the blog structure
 
 // Define props interface
@@ -68,7 +68,9 @@ const nodes = [
     id: slug,
     label: title,
     type: "post",
-    level: 0
+    level: 0,
+    category: category,
+    tags: tags
   },
   // Level 1: Tag nodes
   ...tags.map(tag => ({
@@ -82,7 +84,9 @@ const nodes = [
     id: post.slug,
     label: post.data.title,
     type: "post",
-    level: 1
+    level: 1,
+    category: post.data.category || "Uncategorized",
+    tags: post.data.tags || []
   })),
   // Level 2: Related tags nodes
   ...relatedPostsTags.map(tag => ({
@@ -96,7 +100,9 @@ const nodes = [
     id: post.slug,
     label: post.data.title,
     type: "post",
-    level: 2
+    level: 2,
+    category: post.data.category || "Uncategorized",
+    tags: post.data.tags || []
   })),
   // Level 2: Tags from Level 2 posts
   ...[...level2Tags].map(tag => ({
@@ -141,18 +147,100 @@ const edges = [
 
 // Prepare graph data object
 const graphData = { nodes, edges };
+
+// Define colors for categories
+const predefinedColors = {
+  'Kubernetes': '#326CE5', 'Docker': '#2496ED', 'DevOps': '#FF6F61',
+  'Homelab': '#06B6D4', 'Networking': '#9333EA', 'Infrastructure': '#10B981',
+  'Automation': '#F59E0B', 'Security': '#EF4444', 'Monitoring': '#6366F1',
+  'Storage': '#8B5CF6', 'Obsidian': '#7C3AED', 'Tutorial': '#3B82F6',
+  'Uncategorized': '#A0AEC0'
+};
 ---
 
 <!-- Super simple HTML structure -->
 <div class="knowledge-graph-wrapper">
   <h4 class="graph-title">Post Connections</h4>
   <div id={graphId} class="mini-graph-container"></div>
+  
+  <!-- Fullscreen Toggle Button -->
+  <button id={`${graphId}-fullscreen-toggle`} class="fullscreen-toggle" aria-label="Toggle fullscreen">
+    <svg id={`${graphId}-fullscreen-enter`} class="fullscreen-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="15 3 21 3 21 9"></polyline>
+      <polyline points="9 21 3 21 3 15"></polyline>
+      <line x1="21" y1="3" x2="14" y2="10"></line>
+      <line x1="3" y1="21" x2="10" y2="14"></line>
+    </svg>
+    <svg id={`${graphId}-fullscreen-exit`} class="fullscreen-icon hidden" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="4 14 10 14 10 20"></polyline>
+      <polyline points="20 10 14 10 14 4"></polyline>
+      <line x1="14" y1="10" x2="21" y2="3"></line>
+      <line x1="3" y1="21" x2="10" y2="14"></line>
+    </svg>
+  </button>
+</div>
+
+<!-- Fullscreen container (initially hidden) -->
+<div id={`${graphId}-fullscreen`} class="fullscreen-container">
+  <div class="fullscreen-header">
+    <div class="fullscreen-title">Knowledge Graph</div>
+    <button id={`${graphId}-exit-fullscreen`} class="exit-fullscreen" aria-label="Exit fullscreen">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+  </div>
+  
+  <div class="fullscreen-content">
+    <!-- Fullscreen graph container -->
+    <div id={`${graphId}-fullscreen-graph`} class="fullscreen-graph"></div>
+    
+    <!-- Info panel -->
+    <div id={`${graphId}-info-panel`} class="info-panel">
+      <div class="info-panel-header">
+        <h3 id={`${graphId}-info-title`} class="info-title">Node Info</h3>
+        <button id={`${graphId}-close-info`} class="close-info" aria-label="Close info panel">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="info-content">
+        <div class="info-type">
+          <span class="info-label">Type:</span>
+          <span id={`${graphId}-info-type`} class="info-value type-value">Post</span>
+        </div>
+        
+        <div id={`${graphId}-info-category-container`} class="info-category">
+          <span class="info-label">Category:</span>
+          <span id={`${graphId}-info-category`} class="info-value category-value">Category</span>
+        </div>
+        
+        <div id={`${graphId}-info-tags-container`} class="info-tags">
+          <span class="info-label">Tags:</span>
+          <div id={`${graphId}-info-tags`} class="tags-container"></div>
+        </div>
+        
+        <div class="info-connections">
+          <span class="info-label">Connections:</span>
+          <ul id={`${graphId}-info-connections`} class="connections-list"></ul>
+        </div>
+        
+        <a href="#" id={`${graphId}-info-link`} class="info-link" target="_self">View Content</a>
+      </div>
+    </div>
+  </div>
 </div>
 
 <!-- Minimal CSS -->
 <style>
+  /* Base styles for mini graph */
   .knowledge-graph-wrapper {
     width: 100%;
+    position: relative;
     margin-bottom: 1rem;
   }
 
@@ -170,10 +258,286 @@ const graphData = { nodes, edges };
     border: 1px solid var(--card-border, rgba(56, 189, 248, 0.2));
     background: rgba(15, 23, 42, 0.2);
   }
+  
+  /* Fullscreen toggle button */
+  .fullscreen-toggle {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    background: rgba(30, 41, 59, 0.7);
+    border: 1px solid var(--border-primary, rgba(56, 189, 248, 0.3));
+    color: var(--text-primary, #e2e8f0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 2;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+  
+  .fullscreen-toggle:hover {
+    background: rgba(30, 41, 59, 0.9);
+    transform: translateY(-2px);
+  }
+  
+  .fullscreen-icon {
+    width: 16px;
+    height: 16px;
+  }
+  
+  .hidden {
+    display: none;
+  }
+  
+  /* Fullscreen container */
+  .fullscreen-container {
+    display: none; /* Hidden by default */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: var(--bg-primary, #0f172a);
+    z-index: 9999;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  
+  .fullscreen-container.active {
+    display: flex;
+  }
+  
+  .fullscreen-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid var(--border-primary, rgba(56, 189, 248, 0.2));
+    background: rgba(15, 23, 42, 0.8);
+    backdrop-filter: blur(8px);
+  }
+  
+  .fullscreen-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary, #e2e8f0);
+  }
+  
+  .exit-fullscreen {
+    width: 36px;
+    height: 36px;
+    border-radius: 6px;
+    background: rgba(30, 41, 59, 0.7);
+    border: 1px solid var(--border-primary, rgba(56, 189, 248, 0.2));
+    color: var(--text-primary, #e2e8f0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .exit-fullscreen:hover {
+    background: rgba(30, 41, 59, 0.9);
+  }
+  
+  .fullscreen-content {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
+  
+  .fullscreen-graph {
+    flex: 1;
+    height: 100%;
+    border-right: 1px solid var(--border-primary, rgba(56, 189, 248, 0.2));
+  }
+  
+  /* Info panel */
+  .info-panel {
+    width: 0;
+    height: 100%;
+    background: var(--bg-secondary, #1e293b);
+    transition: width 0.3s ease;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .info-panel.active {
+    width: 350px;
+  }
+  
+  .info-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border-primary, rgba(56, 189, 248, 0.1));
+  }
+  
+  .info-title {
+    font-size: 1.2rem;
+    margin: 0;
+    color: var(--text-primary, #e2e8f0);
+    font-weight: 600;
+  }
+  
+  .close-info {
+    background: none;
+    border: none;
+    color: var(--text-secondary, #94a3b8);
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+  }
+  
+  .close-info:hover {
+    color: var(--text-primary, #e2e8f0);
+    background: rgba(255, 255, 255, 0.1);
+  }
+  
+  .info-content {
+    padding: 1.5rem;
+    overflow-y: auto;
+    flex: 1;
+  }
+  
+  .info-type, .info-category, .info-tags, .info-connections {
+    margin-bottom: 1.25rem;
+  }
+  
+  .info-label {
+    display: block;
+    color: var(--text-secondary, #94a3b8);
+    font-size: 0.85rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  .type-value {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
+  }
+  
+  .post-type {
+    background-color: rgba(59, 130, 246, 0.15);
+    color: #3B82F6;
+  }
+  
+  .tag-type {
+    background-color: rgba(16, 185, 129, 0.15);
+    color: #10B981;
+  }
+  
+  .category-value {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+  }
+  
+  .tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .tag {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10B981;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .tag:hover {
+    background: rgba(16, 185, 129, 0.2);
+    transform: translateY(-2px);
+  }
+  
+  .connections-list {
+    padding-left: 0;
+    list-style: none;
+    margin: 0;
+    max-height: 150px;
+    overflow-y: auto;
+  }
+  
+  .connections-list li {
+    color: var(--text-secondary, #94a3b8);
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  .connections-list a {
+    color: var(--accent-primary, #38bdf8);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+  
+  .connections-list a:hover {
+    color: var(--accent-secondary, #06b6d4);
+    text-decoration: underline;
+  }
+  
+  .info-link {
+    display: block;
+    background: linear-gradient(90deg, var(--accent-primary, #38bdf8), var(--accent-secondary, #06b6d4));
+    color: var(--bg-primary, #0f172a);
+    font-weight: 500;
+    padding: 0.6rem 1.25rem;
+    border-radius: 6px;
+    text-decoration: none;
+    text-align: center;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.2);
+    margin-top: 1rem;
+  }
+  
+  .info-link:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(6, 182, 212, 0.3);
+  }
+  
+  /* Media queries for mobile responsiveness */
+  @media screen and (max-width: 768px) {
+    .fullscreen-content {
+      flex-direction: column;
+    }
+    
+    .fullscreen-graph {
+      height: 60%;
+      border-right: none;
+      border-bottom: 1px solid var(--border-primary, rgba(56, 189, 248, 0.2));
+    }
+    
+    .info-panel {
+      width: 100%;
+      height: 0;
+    }
+    
+    .info-panel.active {
+      width: 100%;
+      height: 40%;
+    }
+  }
 </style>
 
 <!-- Standalone initialization script -->
-<script define:vars={{ graphId, graphData }}>
+<script define:vars={{ graphId, graphData, predefinedColors }}>
   // Wait for page to fully load
   window.addEventListener('load', function() {
     // Retry initialization multiple times in case Cytoscape or the DOM isn't ready yet
@@ -205,6 +569,22 @@ const graphData = { nodes, edges };
         return;
       }
 
+      // Fullscreen elements
+      const fullscreenToggle = document.getElementById(`${graphId}-fullscreen-toggle`);
+      const fullscreenContainer = document.getElementById(`${graphId}-fullscreen`);
+      const fullscreenGraph = document.getElementById(`${graphId}-fullscreen-graph`);
+      const exitFullscreenBtn = document.getElementById(`${graphId}-exit-fullscreen`);
+      const fullscreenEnterIcon = document.getElementById(`${graphId}-fullscreen-enter`);
+      const fullscreenExitIcon = document.getElementById(`${graphId}-fullscreen-exit`);
+      const infoPanel = document.getElementById(`${graphId}-info-panel`);
+      const closeInfoBtn = document.getElementById(`${graphId}-close-info`);
+      
+      // State variables
+      let isFullscreen = false;
+      let cy = null;         // Mini graph instance
+      let cyFullscreen = null; // Fullscreen graph instance
+      let originalStyles = {}; // To restore page layout after exiting fullscreen
+      
       try {
         // Check if we have any nodes
         if (graphData.nodes.length === 0) {
@@ -212,148 +592,517 @@ const graphData = { nodes, edges };
           return;
         }
 
-        // Initialize Cytoscape
-        const cy = cytoscape({
-          container,
-          elements: [
-            ...graphData.nodes.map(node => ({
-              data: {
-                id: node.id,
-                label: node.label,
-                type: node.type,
-                level: node.level
-              }
-            })),
-            ...graphData.edges.map((edge, index) => ({
-              data: {
-                id: `e${index}`,
-                source: edge.source,
-                target: edge.target,
-                type: edge.type
-              }
-            }))
-          ],
-          style: [
-            // Base node style
-            {
-              selector: 'node',
-              style: {
-                'background-color': '#3B82F6',
-                'label': 'data(label)',
-                'width': 20,
-                'height': 20,
-                'font-size': '8px',
-                'color': '#E2E8F0',
-                'text-valign': 'bottom',
-                'text-halign': 'center',
-                'text-margin-y': 5,
-                'text-wrap': 'ellipsis',
-                'text-max-width': '60px'
-              }
-            },
-            // Current post node style (Level 0)
-            {
-              selector: 'node[type="post"][level=0]',
-              style: {
-                'background-color': '#06B6D4',
-                'width': 30,
-                'height': 30,
-                'font-size': '9px',
-                'text-max-width': '80px',
-                'border-width': 2,
-                'border-color': '#38BDF8'
-              }
-            },
-            // Related post node style (Level 1)
-            {
-              selector: 'node[type="post"][level=1]',
-              style: {
-                'background-color': '#3B82F6',
-                'width': 25,
-                'height': 25,
-                'font-size': '8px'
-              }
-            },
-            // Distant post node style (Level 2)
-            {
-              selector: 'node[type="post"][level=2]',
-              style: {
-                'background-color': '#60A5FA',
-                'width': 20,
-                'height': 20,
-                'font-size': '7px',
-                'opacity': 0.8
-              }
-            },
-            // Primary tag node style (Level 1)
-            {
-              selector: 'node[type="tag"][level=1]',
-              style: {
-                'background-color': '#10B981',
-                'shape': 'diamond',
-                'width': 20,
-                'height': 20
-              }
-            },
-            // Secondary tag node style (Level 2)
-            {
-              selector: 'node[type="tag"][level=2]',
-              style: {
-                'background-color': '#34D399',
-                'shape': 'diamond',
-                'width': 15,
-                'height': 15,
-                'opacity': 0.8
-              }
-            },
-            // Direct edge style
-            {
-              selector: 'edge[type="post-tag"]',
-              style: {
-                'width': 1.5,
-                'line-color': 'rgba(16, 185, 129, 0.7)',
-                'line-style': 'solid',
-                'curve-style': 'bezier',
-                'opacity': 0.8
-              }
-            },
-            // Related post edge style
-            {
-              selector: 'edge[type="post-related"]',
-              style: {
-                'width': 1.5,
-                'line-color': 'rgba(59, 130, 246, 0.7)',
-                'line-style': 'dashed',
-                'curve-style': 'bezier',
-                'opacity': 0.8
-              }
-            },
-            // Secondary connections
-            {
-              selector: 'edge[type="tag-post"]',
-              style: {
-                'width': 1,
-                'line-color': 'rgba(16, 185, 129, 0.4)',
-                'line-style': 'dotted',
-                'curve-style': 'bezier',
-                'opacity': 0.6
-              }
+        // Generate node colors based on type and category
+        const nodeElements = graphData.nodes.map(node => {
+          let nodeColor = '#3B82F6'; // Default blue for posts
+          
+          if (node.type === 'tag') {
+            nodeColor = '#10B981'; // Green for tags
+          } else if (node.type === 'post' && node.category) {
+            // Use category color for posts if available
+            nodeColor = predefinedColors[node.category] || '#3B82F6';
+          }
+          
+          // Adjust opacity based on level
+          const levelOpacity = node.level === 0 ? 1 : 
+                               node.level === 1 ? 0.85 : 0.7;
+          
+          // Calculate node size based on level
+          const nodeSize = node.level === 0 ? 30 : 
+                           node.level === 1 ? 22 : 16;
+          
+          return {
+            data: {
+              id: node.id,
+              label: node.label,
+              type: node.type,
+              level: node.level,
+              category: node.category,
+              tags: node.tags || [],
+              color: nodeColor,
+              opacity: levelOpacity,
+              size: nodeSize
             }
-          ],
-          // Improved layout for multi-level visualization
+          };
+        });
+        
+        // Generate edge elements
+        const edgeElements = graphData.edges.map((edge, index) => ({
+          data: {
+            id: `e${index}`,
+            source: edge.source,
+            target: edge.target,
+            type: edge.type
+          }
+        }));
+        
+        // Combine nodes and edges
+        const elements = [...nodeElements, ...edgeElements];
+        
+        // Define common style array to be used by both graph instances
+        const graphStyles = [
+          // Base node style
+          {
+            selector: 'node',
+            style: {
+              'background-color': 'data(color)',
+              'label': 'data(label)',
+              'width': 'data(size)',
+              'height': 'data(size)',
+              'font-size': '8px',
+              'color': '#E2E8F0',
+              'text-valign': 'bottom',
+              'text-halign': 'center',
+              'text-margin-y': 5,
+              'text-wrap': 'ellipsis',
+              'text-max-width': '60px',
+              'text-background-opacity': 0.7,
+              'text-background-color': '#0F1219',
+              'text-background-padding': '2px',
+              'text-background-shape': 'roundrectangle',
+              'border-width': 2,
+              'border-color': '#0F1219',
+              'border-opacity': 0.8,
+              'opacity': 'data(opacity)'
+            }
+          },
+          // Post node styles
+          {
+            selector: 'node[type="post"]',
+            style: {
+              'shape': 'ellipse',
+              'text-max-width': '80px'
+            }
+          },
+          // Current post node (Level 0)
+          {
+            selector: 'node[type="post"][level=0]',
+            style: {
+              'border-width': 3,
+              'border-color': '#38BDF8'
+            }
+          },
+          // Tag node styles
+          {
+            selector: 'node[type="tag"]',
+            style: {
+              'shape': 'diamond',
+              'width': 'mapData(level, 0, 2, 25, 15)',
+              'height': 'mapData(level, 0, 2, 25, 15)'
+            }
+          },
+          // Edge styles
+          {
+            selector: 'edge',
+            style: {
+              'width': 1.5,
+              'line-color': 'rgba(226, 232, 240, 0.2)',
+              'curve-style': 'bezier',
+              'opacity': 0.6
+            }
+          },
+          // Post-tag edges
+          {
+            selector: 'edge[type="post-tag"]',
+            style: {
+              'line-color': 'rgba(16, 185, 129, 0.7)',
+              'line-style': 'solid'
+            }
+          },
+          // Related post edges
+          {
+            selector: 'edge[type="post-related"]',
+            style: {
+              'line-color': 'rgba(59, 130, 246, 0.7)',
+              'line-style': 'dashed'
+            }
+          },
+          // Level 2 connections
+          {
+            selector: 'edge[type="tag-post"]',
+            style: {
+              'line-color': 'rgba(16, 185, 129, 0.4)',
+              'line-style': 'dotted',
+              'opacity': 0.5
+            }
+          },
+          // Highlight styles
+          {
+            selector: '.highlighted',
+            style: {
+              'background-color': 'data(color)',
+              'border-color': '#FFFFFF',
+              'border-width': 3,
+              'text-background-opacity': 0.9,
+              'color': '#FFFFFF',
+              'opacity': 1,
+              'z-index': 20
+            }
+          },
+          {
+            selector: '.faded',
+            style: {
+              'opacity': 0.2,
+              'text-opacity': 0.3
+            }
+          },
+          {
+            selector: 'node:selected',
+            style: {
+              'border-width': 4,
+              'border-color': '#FFFFFF'
+            }
+          }
+        ];
+        
+        // Initialize mini graph with cose layout
+        cy = cytoscape({
+          container,
+          elements,
+          style: graphStyles,
           layout: {
-            name: 'concentric', // NOTE: This is concentric, not cose as requested earlier
-            concentric: function(node) {
-              // Use node level for concentric layout
-              return 10 - node.data('level') * 3;
-            },
-            levelWidth: function() { return 2; },
-            minNodeSpacing: 40,
+            name: 'cose',
+            idealEdgeLength: 50,
+            nodeOverlap: 20,
+            refresh: 20,
+            fit: true,
+            padding: 15,
+            randomize: false,
+            componentSpacing: 70,
+            nodeRepulsion: 400000,
+            edgeElasticity: 100,
+            nestingFactor: 5,
+            gravity: 80,
+            numIter: 1000,
+            initialTemp: 200,
+            coolingFactor: 0.95,
+            minTemp: 1.0,
             animate: false
+          },
+          minZoom: 0.5,
+          maxZoom: 2,
+          wheelSensitivity: 0.2
+        });
+        
+        // Fit graph to container
+        cy.fit(undefined, 20);
+        
+        // Add event listeners
+        cy.on('tap', 'node', function(evt) {
+          const node = evt.target;
+          highlightNode(node, cy);
+        });
+        
+        // Add fullscreen toggle functionality if the button exists
+        if (fullscreenToggle && fullscreenContainer) {
+          fullscreenToggle.addEventListener('click', function() {
+            enterFullscreenMode();
+          });
+        }
+        
+        // Exit fullscreen when button is clicked
+        if (exitFullscreenBtn) {
+          exitFullscreenBtn.addEventListener('click', function() {
+            exitFullscreenMode();
+          });
+        }
+        
+        // Close info panel when close button is clicked
+        if (closeInfoBtn && infoPanel) {
+          closeInfoBtn.addEventListener('click', function() {
+            infoPanel.classList.remove('active');
+          });
+        }
+        
+        // Toggle fullscreen mode by keyboard ESC
+        document.addEventListener('keydown', function(e) {
+          if (e.key === 'Escape' && isFullscreen) {
+            exitFullscreenMode();
           }
         });
-
-        // Make nodes clickable
+        
+        // Function to enter fullscreen mode
+        function enterFullscreenMode() {
+          if (isFullscreen) return;
+          
+          isFullscreen = true;
+          
+          // Show fullscreen container
+          fullscreenContainer.classList.add('active');
+          
+          // Update fullscreen toggle icons
+          fullscreenEnterIcon.classList.add('hidden');
+          fullscreenExitIcon.classList.remove('hidden');
+          
+          // Store original styles of important page elements to restore later
+          saveOriginalStyles();
+          
+          // Initialize fullscreen graph if not already done
+          if (!cyFullscreen && fullscreenGraph) {
+            initFullscreenGraph();
+          }
+          
+          // Prevent body scroll
+          document.body.style.overflow = 'hidden';
+        }
+        
+        // Function to exit fullscreen mode
+        function exitFullscreenMode() {
+          if (!isFullscreen) return;
+          
+          isFullscreen = false;
+          
+          // Hide fullscreen container
+          fullscreenContainer.classList.remove('active');
+          
+          // Update fullscreen toggle icons
+          fullscreenEnterIcon.classList.remove('hidden');
+          fullscreenExitIcon.classList.add('hidden');
+          
+          // Close info panel
+          if (infoPanel) {
+            infoPanel.classList.remove('active');
+          }
+          
+          // Restore original page layout
+          restoreOriginalStyles();
+          
+          // Allow body scroll again
+          document.body.style.overflow = '';
+        }
+        
+        // Save original styles of page elements before entering fullscreen
+        function saveOriginalStyles() {
+          originalStyles = {
+            bodyOverflow: document.body.style.overflow,
+            // Add other elements that need to be restored later
+          };
+          
+          // Check for sidebar, content containers, etc. and save their styles
+          const sidebar = document.querySelector('.sidebar, aside, nav');
+          const mainContent = document.querySelector('main, .content, article');
+          
+          if (sidebar) {
+            originalStyles.sidebar = {
+              element: sidebar,
+              display: sidebar.style.display,
+              visibility: sidebar.style.visibility,
+              position: sidebar.style.position,
+              zIndex: sidebar.style.zIndex
+            };
+          }
+          
+          if (mainContent) {
+            originalStyles.mainContent = {
+              element: mainContent,
+              marginLeft: mainContent.style.marginLeft,
+              width: mainContent.style.width,
+              maxWidth: mainContent.style.maxWidth
+            };
+          }
+        }
+        
+        // Restore original styles when exiting fullscreen
+        function restoreOriginalStyles() {
+          document.body.style.overflow = originalStyles.bodyOverflow || '';
+          
+          // Restore sidebar if it exists
+          if (originalStyles.sidebar && originalStyles.sidebar.element) {
+            const sidebar = originalStyles.sidebar.element;
+            sidebar.style.display = originalStyles.sidebar.display;
+            sidebar.style.visibility = originalStyles.sidebar.visibility;
+            sidebar.style.position = originalStyles.sidebar.position;
+            sidebar.style.zIndex = originalStyles.sidebar.zIndex;
+          }
+          
+          // Restore main content if it exists
+          if (originalStyles.mainContent && originalStyles.mainContent.element) {
+            const mainContent = originalStyles.mainContent.element;
+            mainContent.style.marginLeft = originalStyles.mainContent.marginLeft;
+            mainContent.style.width = originalStyles.mainContent.width;
+            mainContent.style.maxWidth = originalStyles.mainContent.maxWidth;
+          }
+        }
+        
+        // Initialize the fullscreen graph
+        function initFullscreenGraph() {
+          if (!fullscreenGraph) return;
+          
+          // Create a new cytoscape instance for fullscreen with the same data
+          cyFullscreen = cytoscape({
+            container: fullscreenGraph,
+            elements: elements,
+            style: graphStyles,
+            layout: {
+              name: 'cose',
+              idealEdgeLength: 80,
+              nodeOverlap: 20,
+              refresh: 20,
+              fit: true,
+              padding: 30,
+              randomize: false,
+              componentSpacing: 100,
+              nodeRepulsion: 450000,
+              edgeElasticity: 100,
+              nestingFactor: 5,
+              gravity: 80,
+              numIter: 1000,
+              initialTemp: 200,
+              coolingFactor: 0.95,
+              minTemp: 1.0,
+              animate: false
+            },
+            minZoom: 0.2,
+            maxZoom: 3,
+            wheelSensitivity: 0.3
+          });
+          
+          // Fit graph to container
+          cyFullscreen.fit(undefined, 30);
+          
+          // Add fullscreen interactions
+          addFullscreenInteractions();
+        }
+        
+        // Add interactions for fullscreen mode
+        function addFullscreenInteractions() {
+          // Click on node to show info
+          cyFullscreen.on('tap', 'node', function(evt) {
+            const node = evt.target;
+            const nodeData = node.data();
+            
+            // Highlight the selected node
+            highlightNode(node, cyFullscreen);
+            
+            // Show info panel
+            showNodeInfo(nodeData);
+          });
+          
+          // Click on background to reset
+          cyFullscreen.on('tap', function(evt) {
+            if (evt.target === cyFullscreen) {
+              // Remove highlights
+              cyFullscreen.elements().removeClass('highlighted faded');
+              
+              // Hide info panel
+              if (infoPanel) {
+                infoPanel.classList.remove('active');
+              }
+            }
+          });
+        }
+        
+        // Highlight a node and its connections
+        function highlightNode(node, cyInstance) {
+          // Remove previous highlights
+          cyInstance.elements().removeClass('highlighted faded');
+          
+          // Highlight selected node and its neighborhood
+          node.addClass('highlighted');
+          node.neighborhood().addClass('highlighted');
+          
+          // Fade the rest
+          cyInstance.elements().difference(node.neighborhood().union(node)).addClass('faded');
+        }
+        
+        // Show node info in the panel
+        function showNodeInfo(nodeData) {
+          if (!infoPanel) return;
+          
+          // Set node title
+          document.getElementById(`${graphId}-info-title`).textContent = nodeData.label;
+          
+          // Set node type
+          const typeEl = document.getElementById(`${graphId}-info-type`);
+          typeEl.textContent = nodeData.type.charAt(0).toUpperCase() + nodeData.type.slice(1);
+          typeEl.className = `info-value type-value ${nodeData.type}-type`;
+          
+          // Set category if it's a post
+          const categoryContainer = document.getElementById(`${graphId}-info-category-container`);
+          const categoryEl = document.getElementById(`${graphId}-info-category`);
+          
+          if (nodeData.type === 'post' && nodeData.category) {
+            categoryContainer.style.display = 'block';
+            categoryEl.textContent = nodeData.category;
+            
+            // Use category colors
+            const catColor = predefinedColors[nodeData.category] || '#A0AEC0';
+            categoryEl.style.backgroundColor = `${catColor}33`; // Add alpha
+            categoryEl.style.color = catColor;
+          } else {
+            categoryContainer.style.display = 'none';
+          }
+          
+          // Set tags
+          const tagsContainer = document.getElementById(`${graphId}-info-tags-container`);
+          const tagsEl = document.getElementById(`${graphId}-info-tags`);
+          
+          if (nodeData.type === 'post' && nodeData.tags && nodeData.tags.length > 0) {
+            tagsContainer.style.display = 'block';
+            tagsEl.innerHTML = '';
+            
+            nodeData.tags.forEach(tag => {
+              const tagEl = document.createElement('span');
+              tagEl.className = 'tag';
+              tagEl.textContent = tag;
+              tagEl.addEventListener('click', () => {
+                // Try to find and highlight the tag node
+                const tagNode = cyFullscreen.getElementById(`tag-${tag}`);
+                if (tagNode.length > 0) {
+                  highlightNode(tagNode, cyFullscreen);
+                  showNodeInfo(tagNode.data());
+                }
+              });
+              tagsEl.appendChild(tagEl);
+            });
+          } else {
+            tagsContainer.style.display = 'none';
+          }
+          
+          // Set connections
+          const connectionsEl = document.getElementById(`${graphId}-info-connections`);
+          connectionsEl.innerHTML = '';
+          
+          const neighbors = cyFullscreen.getElementById(nodeData.id).neighborhood('node');
+          if (neighbors.length > 0) {
+            neighbors.forEach(neighbor => {
+              const neighborData = neighbor.data();
+              const li = document.createElement('li');
+              const a = document.createElement('a');
+              a.href = '#';
+              a.textContent = neighborData.label;
+              a.addEventListener('click', (e) => {
+                e.preventDefault();
+                highlightNode(neighbor, cyFullscreen);
+                showNodeInfo(neighborData);
+              });
+              li.appendChild(a);
+              connectionsEl.appendChild(li);
+            });
+          } else {
+            const li = document.createElement('li');
+            li.textContent = 'No connections';
+            connectionsEl.appendChild(li);
+          }
+          
+          // Set link based on node type
+          const linkEl = document.getElementById(`${graphId}-info-link`);
+          if (nodeData.type === 'post') {
+            linkEl.textContent = 'Read Post';
+            linkEl.href = `/posts/${nodeData.id}/`;
+          } else if (nodeData.type === 'tag') {
+            linkEl.textContent = 'View Tag';
+            linkEl.href = `/tag/${nodeData.label}/`;
+          } else {
+            linkEl.textContent = 'View Content';
+            linkEl.href = '#';
+          }
+          
+          // Show the panel
+          infoPanel.classList.add('active');
+        }
+        
+        // Make nodes clickable in mini graph
         cy.on('tap', 'node[type="tag"]', function(evt) {
           const node = evt.target;
           const tagName = node.data('label');
@@ -365,10 +1114,6 @@ const graphData = { nodes, edges };
           const postSlug = node.id();
           window.location.href = `/posts/${postSlug}/`;
         });
-
-        // Fit graph to container
-        cy.fit(undefined, 20);
-
       } catch (error) {
         console.error('[MiniGraph] Error initializing graph:', error);
         container.innerHTML = '<div style="padding:10px;color:#a0aec0;text-align:center;">Error loading graph</div>';
diff --git a/src/components/Newsletter.astro b/src/components/Newsletter.astro
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/deleteDigitalGardenGraph.astro b/src/components/deleteDigitalGardenGraph.astro
deleted file mode 100644
index 6dc9ba7..0000000
--- a/src/components/deleteDigitalGardenGraph.astro
+++ /dev/null
@@ -1,166 +0,0 @@
----
-// Digital Garden Graph Visualization
-// This component creates a network graph visualization of content relationships
----
-
-<div class="digital-garden-graph">
-    <div class="graph-container">
-        <svg id="digital-garden-svg" width="100%" height="400"></svg>
-    </div>
-    <div class="graph-legend">
-        <span class="legend-item">
-            <span class="dot post-dot"></span>
-            <span>Blog Posts</span>
-        </span>
-        <span class="legend-item">
-            <span class="dot config-dot"></span>
-            <span>Configurations</span>
-        </span>
-        <span class="legend-item">
-            <span class="dot project-dot"></span>
-            <span>Projects</span>
-        </span>
-    </div>
-</div>
-
-<style>
-    .digital-garden-graph {
-        margin: 2rem 0;
-        border-radius: 1rem;
-        border: 1px solid var(--card-border);
-        background-color: var(--card-bg);
-        overflow: hidden;
-    }
-    
-    .graph-container {
-        width: 100%;
-        height: 400px;
-        position: relative;
-    }
-    
-    .graph-legend {
-        display: flex;
-        justify-content: center;
-        gap: 2rem;
-        padding: 1rem;
-        border-top: 1px solid var(--card-border);
-    }
-    
-    .legend-item {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        color: var(--text-secondary);
-        font-size: 0.85rem;
-    }
-    
-    .dot {
-        display: inline-block;
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-    }
-    
-    .post-dot {
-        background-color: var(--accent-primary);
-    }
-    
-    .config-dot {
-        background-color: var(--accent-secondary);
-    }
-    
-    .project-dot {
-        background-color: var(--accent-tertiary);
-    }
-</style>
-
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const svg = document.getElementById('digital-garden-svg');
-        if (!svg) return;
-        
-        // Set up the SVG dimensions
-        const width = svg.clientWidth;
-        const height = 400;
-        
-        // Define nodes - this would typically come from your content metadata
-        // For this demo, we'll create a sample dataset
-        const nodes = [
-            { id: 'k3s-cluster', type: 'post', x: width * 0.2, y: height * 0.3 },
-            { id: 'prometheus', type: 'post', x: width * 0.4, y: height * 0.5 },
-            { id: 'cloudflare-tunnel', type: 'post', x: width * 0.6, y: height * 0.3 },
-            { id: 'gitops-flux', type: 'post', x: width * 0.5, y: height * 0.7 },
-            { id: 'longhorn-storage', type: 'config', x: width * 0.3, y: height * 0.6 },
-            { id: 'metallb', type: 'config', x: width * 0.7, y: height * 0.5 },
-            { id: 'argobox', type: 'project', x: width * 0.5, y: height * 0.2 },
-        ];
-        
-        // Define links between nodes
-        const links = [
-            { source: 'k3s-cluster', target: 'prometheus' },
-            { source: 'k3s-cluster', target: 'longhorn-storage' },
-            { source: 'k3s-cluster', target: 'argobox' },
-            { source: 'prometheus', target: 'gitops-flux' },
-            { source: 'cloudflare-tunnel', target: 'argobox' },
-            { source: 'longhorn-storage', target: 'prometheus' },
-            { source: 'argobox', target: 'metallb' },
-            { source: 'metallb', target: 'cloudflare-tunnel' },
-        ];
-        
-        // Create SVG elements
-        // First the links
-        links.forEach(link => {
-            const sourceNode = nodes.find(n => n.id === link.source);
-            const targetNode = nodes.find(n => n.id === link.target);
-            
-            if (sourceNode && targetNode) {
-                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                line.setAttribute('x1', sourceNode.x);
-                line.setAttribute('y1', sourceNode.y);
-                line.setAttribute('x2', targetNode.x);
-                line.setAttribute('y2', targetNode.y);
-                line.setAttribute('stroke', 'rgba(226, 232, 240, 0.1)');
-                line.setAttribute('stroke-width', '2');
-                svg.appendChild(line);
-            }
-        });
-        
-        // Then the nodes
-        nodes.forEach(node => {
-            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            circle.setAttribute('cx', node.x);
-            circle.setAttribute('cy', node.y);
-            circle.setAttribute('r', '8');
-            
-            // Assign color based on node type
-            if (node.type === 'post') {
-                circle.setAttribute('fill', 'var(--accent-primary)');
-            } else if (node.type === 'config') {
-                circle.setAttribute('fill', 'var(--accent-secondary)');
-            } else {
-                circle.setAttribute('fill', 'var(--accent-tertiary)');
-            }
-            
-            // Add hover effect
-            circle.onmouseover = () => {
-                circle.setAttribute('r', '12');
-                circle.style.cursor = 'pointer';
-            };
-            circle.onmouseout = () => {
-                circle.setAttribute('r', '8');
-            };
-            
-            // Add node label
-            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            text.setAttribute('x', node.x);
-            text.setAttribute('y', node.y + 20);
-            text.setAttribute('font-size', '12');
-            text.setAttribute('fill', 'var(--text-secondary)');
-            text.setAttribute('text-anchor', 'middle');
-            text.textContent = node.id.replace(/-/g, ' ');
-            
-            svg.appendChild(circle);
-            svg.appendChild(text);
-        });
-    });
-</script> 
\ No newline at end of file
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index fa49613..59b923a 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -5,7 +5,6 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
-import Newsletter from '../components/Newsletter.astro';
 import MiniKnowledgeGraph from '../components/MiniKnowledgeGraph.astro';
 import { getCollection } from 'astro:content';
 
@@ -235,7 +234,6 @@ const fallbackCurrentPost = currentPost || {
     </aside>
   </div>
 
-  <Newsletter />
   <Footer slot="footer" />
 </BaseLayout>
 
diff --git a/src/pages/api/confirm.ts b/src/pages/api/confirm.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/api/subscribe.ts b/src/pages/api/subscribe.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/api/unsubscribe.ts b/src/pages/api/unsubscribe.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/categories/index.astro b/src/pages/categories/index.astro
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/configurations.astro b/src/pages/configurations.astro
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/stack.astro b/src/pages/stack.astro
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/subscription-confirmed.astro b/src/pages/subscription-confirmed.astro
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/test-graph.astro b/src/pages/test-graph.astro
deleted file mode 100644
index 4fc366f..0000000
--- a/src/pages/test-graph.astro
+++ /dev/null
@@ -1,179 +0,0 @@
----
-import BaseLayout from '../layouts/BaseLayout.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
-import MiniKnowledgeGraph from '../components/MiniKnowledgeGraph.astro';
-import { getCollection } from 'astro:content';
-
-// Get all posts
-const allPosts = await getCollection('posts').catch(error => {
-  console.error('Error fetching posts collection:', error);
-  return [];
-});
-
-// Try blog collection if posts doesn't exist
-const blogPosts = allPosts.length === 0 ? await getCollection('blog').catch(() => []) : [];
-const combinedPosts = [...allPosts, ...blogPosts];
-
-// Use the first post as a test post
-const testPost = combinedPosts.length > 0 ? combinedPosts[0] : {
-  slug: 'test-post',
-  data: {
-    title: 'Test Post',
-    tags: ['test', 'graph'],
-    category: 'Test'
-  }
-};
-
-// Create related posts - use the next 3 posts in the collection or create test posts
-const relatedPosts = combinedPosts.length > 1 
-  ? combinedPosts.slice(1, 4) 
-  : [
-    {
-      slug: 'related-1',
-      data: {
-        title: 'Related Post 1',
-        tags: ['test', 'graph'],
-        category: 'Test'
-      }
-    },
-    {
-      slug: 'related-2',
-      data: {
-        title: 'Related Post 2',
-        tags: ['test'],
-        category: 'Test'
-      }
-    }
-  ];
----
-
-<BaseLayout title="Test MiniKnowledgeGraph">
-  <Header slot="header" />
-  
-  <div class="container mx-auto px-4 py-8">
-    <h1 class="text-3xl font-bold mb-6">MiniKnowledgeGraph Test Page</h1>
-    
-    <div class="bg-slate-800 rounded-lg p-6 mb-8">
-      <p class="mb-4">This is a test page to ensure the MiniKnowledgeGraph component is working properly.</p>
-      
-      <div class="border border-slate-700 rounded-lg p-4 mb-6">
-        <h2 class="text-xl font-bold mb-4">Test Post Details:</h2>
-        <p><strong>Title:</strong> {testPost.data.title}</p>
-        <p><strong>Slug:</strong> {testPost.slug}</p>
-        <p><strong>Tags:</strong> {testPost.data.tags?.join(', ') || 'None'}</p>
-        <p><strong>Category:</strong> {testPost.data.category || 'None'}</p>
-        <p><strong>Related Posts:</strong> {relatedPosts.length}</p>
-      </div>
-      
-      <div class="mini-knowledge-graph-area">
-        <h2 class="text-xl font-bold mb-4">MiniKnowledgeGraph Component:</h2>
-        
-        <div class="mini-knowledge-graph-wrapper">
-          <MiniKnowledgeGraph
-            currentPost={testPost}
-            relatedPosts={relatedPosts}
-            height="300px"
-            title="Test Graph"
-          />
-        </div>
-        
-        <!-- Debug Information Display -->
-        <div class="debug-info mt-4 p-4 bg-gray-900 rounded-lg">
-          <h3 class="text-lg font-bold mb-2">Debug Info</h3>
-          <div id="debug-container">Loading debug info...</div>
-        </div>
-      </div>
-    </div>
-  </div>
-  
-  <Footer slot="footer" />
-</BaseLayout>
-
-<style>
-  .mini-knowledge-graph-area {
-    margin-top: 2rem;
-  }
-  
-  .mini-knowledge-graph-wrapper {
-    width: 100%;
-    border-radius: 10px;
-    overflow: hidden;
-    display: block !important;
-    position: relative;
-    min-height: 300px;
-    height: 300px;
-    background: var(--card-bg, #1e293b);
-    border: 1px solid var(--card-border, #334155);
-    visibility: visible !important;
-  }
-  
-  .debug-info {
-    font-family: monospace;
-    font-size: 0.8rem;
-    line-height: 1.4;
-  }
-</style>
-
-<script>
-  // Debug utility for testing the knowledge graph
-  document.addEventListener('DOMContentLoaded', function() {
-    setTimeout(checkGraphStatus, 500);
-    
-    // Also check after window load
-    window.addEventListener('load', function() {
-      setTimeout(checkGraphStatus, 1000);
-    });
-  });
-  
-  function checkGraphStatus() {
-    const debugContainer = document.getElementById('debug-container');
-    if (!debugContainer) return;
-    
-    // Get container info
-    const container = document.querySelector('.mini-knowledge-graph-wrapper');
-    const cyContainer = document.getElementById('mini-cy');
-    
-    // Check for cytoscape instance
-    const cyInstance = window.miniCy;
-    
-    let html = '<ul>';
-    
-    // Container dimensions
-    if (container) {
-      html += `<li>Container: ${container.offsetWidth}x${container.offsetHeight}px</li>`;
-      html += `<li>Display: ${getComputedStyle(container).display}</li>`;
-      html += `<li>Visibility: ${getComputedStyle(container).visibility}</li>`;
-    } else {
-      html += '<li>Container: Not found</li>';
-    }
-    
-    // Cytoscape container
-    if (cyContainer) {
-      html += `<li>Cy Container: ${cyContainer.offsetWidth}x${cyContainer.offsetHeight}px</li>`;
-    } else {
-      html += '<li>Cy Container: Not found</li>';
-    }
-    
-    // Cytoscape instance
-    html += `<li>Cytoscape object: ${typeof cytoscape !== 'undefined' ? 'Available' : 'Not available'}</li>`;
-    html += `<li>Cytoscape instance: ${cyInstance ? 'Initialized' : 'Not initialized'}</li>`;
-    
-    // If instance exists, get more details
-    if (cyInstance) {
-      html += `<li>Nodes: ${cyInstance.nodes().length}</li>`;
-      html += `<li>Edges: ${cyInstance.edges().length}</li>`;
-    }
-    
-    html += '</ul>';
-    
-    // Add refresh button
-    html += '<button id="refresh-debug" class="mt-2 px-3 py-1 bg-blue-700 text-white rounded hover:bg-blue-600">' + 
-            'Refresh Debug Info</button>';
-    
-    debugContainer.innerHTML = html;
-    
-    // Add event listener to refresh button
-    document.getElementById('refresh-debug')?.addEventListener('click', checkGraphStatus);
-  }
-</script> 
\ No newline at end of file
diff --git a/src/pages/unsubscribe.astro b/src/pages/unsubscribe.astro
deleted file mode 100644
index e69de29..0000000