diff --git a/src/components/KnowledgeGraph.astro b/src/components/KnowledgeGraph.astro
index c1cad62..81fb162 100644
--- a/src/components/KnowledgeGraph.astro
+++ b/src/components/KnowledgeGraph.astro
@@ -26,10 +26,12 @@ export interface GraphData {
 interface Props {
   graphData: GraphData;
   height?: string; // e.g., '500px'
+  width?: string; // e.g., '100%'
   initialFilter?: string; // Optional initial filter
+  isMinimal?: boolean; // For smaller/simpler graphs inline in posts
 }
 
-const { graphData, height = "50vh", initialFilter = "all" } = Astro.props;
+const { graphData, height = "400px", width = "100%", initialFilter = "all", isMinimal = false } = Astro.props;
 
 // Generate colors based on node types
 const nodeTypeColors = {
@@ -71,60 +73,159 @@ const nodeTypeCounts = {
   tag: graphData.nodes.filter(node => node.type === 'tag').length,
   category: graphData.nodes.filter(node => node.type === 'category').length
 };
+
+// Determine layout settings based on minimal mode
+const layoutSettings = isMinimal ? {
+  name: 'cose',
+  idealEdgeLength: 60,
+  nodeOverlap: 20,
+  refresh: 20,
+  fit: true,
+  padding: 20,
+  randomize: false,
+  componentSpacing: 60,
+  nodeRepulsion: 800000,
+  edgeElasticity: 150,
+  nestingFactor: 7,
+  gravity: 25,
+  numIter: 1500,
+  initialTemp: 200,
+  coolingFactor: 0.95,
+  minTemp: 1.0,
+  animate: true,
+  animationDuration: 800
+} : {
+  name: 'cose',
+  idealEdgeLength: 75,
+  nodeOverlap: 30,
+  refresh: 20,
+  fit: true,
+  padding: 30,
+  randomize: false,
+  componentSpacing: 60,
+  nodeRepulsion: 1000000,
+  edgeElasticity: 150,
+  nestingFactor: 7,
+  gravity: 30,
+  numIter: 2000,
+  initialTemp: 250,
+  coolingFactor: 0.95,
+  minTemp: 1.0,
+  animate: true,
+  animationDuration: 800
+};
+
+// Default physics settings
+const defaultPhysics = {
+  nodeRepulsion: 9000,
+  edgeElasticity: 50,
+  gravity: 10,
+  linkDistance: 100,
+  nodeSize: 1.0,
+  linkThickness: 1.0
+};
 ---
 
 <!-- Include Cytoscape via CDN with is:inline to ensure it loads before the script runs -->
 <script src="https://unpkg.com/cytoscape@3.25.0/dist/cytoscape.min.js" is:inline></script>
 
-<div class="graph-container-wrapper" style={`--graph-height: ${height};`}>
-  <!-- Physics Toggle Button -->
-  <button id="toggle-physics" class="physics-toggle" aria-label="Physics settings">
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>
+<div class="graph-container-wrapper" style={`width: ${width}; height: ${height};`} data-minimal={isMinimal}>
+  <!-- Fullscreen Toggle Button -->
+  <button id="fullscreen-toggle" class="fullscreen-toggle" aria-label="Toggle fullscreen">
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
+    </svg>
   </button>
   
-  <!-- Physics Controls Panel -->
-  <div id="physics-panel" class="physics-controls">
-    <div class="physics-control-group">
-      <label class="physics-label">Node Repulsion: <span id="repulsion-value">9000</span></label>
-      <input type="range" id="node-repulsion" class="physics-slider" min="1000" max="20000" step="1000" value="9000">
+  <!-- Settings Toggle Button -->
+  <button id="toggle-settings" class="settings-toggle" aria-label="Graph settings">
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="3"></circle>
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+    </svg>
+  </button>
+  
+  <!-- Settings Panel (always visible in fullscreen) -->
+  <div id="settings-panel" class="settings-panel">
+    <h3 class="settings-title">Graph Settings</h3>
+    
+    <div class="settings-section">
+      <h4 class="settings-section-title">Display</h4>
+      
+      <div class="settings-group">
+        <label class="settings-label">Node Size: <span id="node-size-value">1.0</span></label>
+        <input type="range" id="node-size" class="settings-slider" min="0.5" max="2.0" step="0.1" value="1.0">
+      </div>
+      
+      <div class="settings-group">
+        <label class="settings-label">Link Thickness: <span id="link-thickness-value">1.0</span></label>
+        <input type="range" id="link-thickness" class="settings-slider" min="0.5" max="2.0" step="0.1" value="1.0">
+      </div>
+      
+      <div class="settings-group">
+        <label class="settings-label">Link Distance: <span id="link-distance-value">100</span></label>
+        <input type="range" id="link-distance" class="settings-slider" min="50" max="200" step="10" value="100">
+      </div>
+      
+      <div class="settings-group checkbox-group">
+        <input type="checkbox" id="show-labels" class="settings-checkbox" checked>
+        <label for="show-labels" class="settings-checkbox-label">Show Labels</label>
+      </div>
+      
+      <div class="settings-group checkbox-group">
+        <input type="checkbox" id="show-arrows" class="settings-checkbox" checked>
+        <label for="show-arrows" class="settings-checkbox-label">Show Arrows</label>
+      </div>
     </div>
     
-    <div class="physics-control-group">
-      <label class="physics-label">Edge Elasticity: <span id="elasticity-value">50</span></label>
-      <input type="range" id="edge-elasticity" class="physics-slider" min="10" max="100" step="5" value="50">
+    <div class="settings-section">
+      <h4 class="settings-section-title">Physics</h4>
+      
+      <div class="settings-group">
+        <label class="settings-label">Node Repulsion: <span id="repulsion-value">9000</span></label>
+        <input type="range" id="node-repulsion" class="settings-slider" min="1000" max="20000" step="1000" value="9000">
+      </div>
+      
+      <div class="settings-group">
+        <label class="settings-label">Edge Elasticity: <span id="elasticity-value">50</span></label>
+        <input type="range" id="edge-elasticity" class="settings-slider" min="10" max="100" step="5" value="50">
+      </div>
+      
+      <div class="settings-group">
+        <label class="settings-label">Gravity: <span id="gravity-value">10</span></label>
+        <input type="range" id="gravity" class="settings-slider" min="0" max="50" step="5" value="10">
+      </div>
     </div>
     
-    <div class="physics-control-group">
-      <label class="physics-label">Gravity: <span id="gravity-value">10</span></label>
-      <input type="range" id="gravity" class="physics-slider" min="0" max="50" step="5" value="10">
+    <div class="settings-actions">
+      <button id="apply-settings" class="settings-button apply-button">Apply</button>
+      <button id="reset-settings" class="settings-button reset-button">Reset</button>
     </div>
-    
-    <button id="apply-physics" class="physics-button">Apply Settings</button>
-    <button id="reset-physics" class="physics-button">Reset to Defaults</button>
   </div>
 
   <!-- Graph Instructions -->
-  <div class="graph-instructions">
-    <details class="instructions-details">
-      <summary class="instructions-summary">How to use the Knowledge Graph</summary>
-      <div class="instructions-content">
-        <p>This Knowledge Graph visualizes connections between blog content:</p>
-        <ul>
-          <li><span class="node-example post-node"></span> <strong>Posts</strong> - Blog articles (circle nodes)</li>
-          <li><span class="node-example tag-node"></span> <strong>Tags</strong> - Content topics (diamond nodes)</li>
-        </ul>
-        <p>Interactions:</p>
-        <ul>
-          <li>Click a node to see its connections and details</li>
-          <li>Click a tag node to filter posts by that tag</li>
-          <li>Click a post node to highlight that specific post</li>
-          <li>Use the filter buttons below to focus on specific topics</li>
-          <li>Use mouse wheel to zoom in/out and drag to pan</li>
-          <li>Click an empty area to reset the view</li>
-        </ul>
-      </div>
-    </details>
-  </div>
+  {!isMinimal && (
+    <div class="graph-instructions">
+      <details class="instructions-details">
+        <summary class="instructions-summary">How to use the Knowledge Graph</summary>
+        <div class="instructions-content">
+          <p>This Knowledge Graph visualizes connections between blog content:</p>
+          <ul>
+            <li><span class="node-example post-node"></span> <strong>Posts</strong> - Blog articles (circle nodes)</li>
+            <li><span class="node-example tag-node"></span> <strong>Tags</strong> - Content topics (diamond nodes)</li>
+          </ul>
+          <p>Interactions:</p>
+          <ul>
+            <li>Click a node to see its connections and details</li>
+            <li>Click a tag node to filter posts by that tag</li>
+            <li>Click a post node to highlight that specific post</li>
+            <li>Use mouse wheel to zoom in/out and drag to pan</li>
+            <li>Click an empty area to reset the view</li>
+          </ul>
+        </div>
+      </details>
+    </div>
+  )}
 
   <!-- Loading Animation -->
   <div id="graph-loading" class="graph-loading">
@@ -169,54 +270,52 @@ const nodeTypeCounts = {
     <a href="#" id="node-link" class="node-link" target="_self" rel="noopener noreferrer">View Content</a>
   </div>
 
-  <!-- Graph Controls -->
-  <div class="graph-controls">
-     <div class="graph-filters">
-       <button class="graph-filter active" data-filter="all" style="--filter-color: var(--accent-primary);">All</button>
-       <button class="graph-filter" data-filter="posts" style="--filter-color: #3B82F6;">Posts ({nodeTypeCounts.post})</button>
-       <button class="graph-filter" data-filter="tags" style="--filter-color: #10B981;">Tags ({nodeTypeCounts.tag})</button>
-     </div>
-     <div class="graph-actions">
+  <!-- Graph Controls (only in full mode) -->
+  {!isMinimal && (
+    <div class="graph-controls">
+      <div class="graph-filters">
+        <button class="graph-filter active" data-filter="all" style="--filter-color: var(--accent-primary);">All</button>
+        <button class="graph-filter" data-filter="posts" style="--filter-color: #3B82F6;">Posts ({nodeTypeCounts.post})</button>
+        <button class="graph-filter" data-filter="tags" style="--filter-color: #10B981;">Tags ({nodeTypeCounts.tag})</button>
+      </div>
+      <div class="graph-actions">
         <button id="zoom-in" class="graph-action" aria-label="Zoom In">
           <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="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
         </button>
         <button id="zoom-out" class="graph-action" aria-label="Zoom Out">
-           <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="5" y1="12" x2="19" y2="12"></line></svg>
+          <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="5" y1="12" x2="19" y2="12"></line></svg>
         </button>
         <button id="reset-graph" class="graph-action" aria-label="Reset View">
-           <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"><path d="M3 2v6h6"></path><path d="M21 12A9 9 0 0 0 6 5.3L3 8"></path><path d="M21 22v-6h-6"></path><path d="M3 12a9 9 0 0 0 15 6.7l3-2.7"></path></svg>
+          <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"><path d="M3 2v6h6"></path><path d="M21 12A9 9 0 0 0 6 5.3L3 8"></path><path d="M21 22v-6h-6"></path><path d="M3 12a9 9 0 0 0 15 6.7l3-2.7"></path></svg>
         </button>
-        <button id="fullscreen-graph" class="graph-action" aria-label="Fullscreen">
-           <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"><path d="M8 3H5a2 2 0 0 0-2 2v3"></path><path d="M21 8V5a2 2 0 0 0-2-2h-3"></path><path d="M3 16v3a2 2 0 0 0 2 2h3"></path><path d="M16 21h3a2 2 0 0 0 2-2v-3"></path></svg>
-        </button>
-     </div>
-  </div>
+      </div>
+    </div>
+  )}
 
-  <!-- Fullscreen Mode Split View -->
-  <div id="fullscreen-container" class="fullscreen-container">
-    <div class="fullscreen-header">
-      <h2>Knowledge Graph Explorer</h2>
-      <div class="fullscreen-controls">
-        <button id="fullscreen-close" class="fullscreen-btn" aria-label="Close Fullscreen">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"></path><path d="M9 21H3v-6"></path><path d="M21 3l-7 7"></path><path d="M3 21l7-7"></path></svg>
-          Exit Fullscreen
-        </button>
-      </div>
-    </div>
-    <div class="fullscreen-content">
-      <div id="fullscreen-graph" class="fullscreen-graph-container"></div>
-      <div id="fullscreen-article" class="fullscreen-article-container">
-        <div class="article-placeholder">
-          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
-          <p>Select a post in the graph to view its content here</p>
-        </div>
-        <div id="article-content" class="article-content"></div>
-      </div>
-    </div>
-  </div>
+  <!-- Exit Fullscreen Button (only visible in fullscreen) -->
+  <button id="exit-fullscreen" class="exit-fullscreen-button">
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M15 3h6v6"></path>
+      <path d="M9 21H3v-6"></path>
+      <path d="M21 3l-7 7"></path>
+      <path d="M3 21l7-7"></path>
+    </svg>
+    Exit Fullscreen
+  </button>
 </div>
 
-<script define:vars={{ graphData, nodeTypeColors, nodeSizes, predefinedColors, initialFilter }}>
+<!-- Mini Graph Component for inline use in posts -->
+{isMinimal && (
+  <div class="mini-graph-controls">
+    <button id="mini-zoom-in" class="mini-graph-action" aria-label="Zoom In">+</button>
+    <button id="mini-zoom-out" class="mini-graph-action" aria-label="Zoom Out">−</button>
+    <button id="mini-reset" class="mini-graph-action" aria-label="Reset View">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v6h6"></path><path d="M21 12A9 9 0 0 0 6 5.3L3 8"></path><path d="M21 22v-6h-6"></path><path d="M3 12a9 9 0 0 0 15 6.7l3-2.7"></path></svg>
+    </button>
+  </div>
+)}
+
+<script define:vars={{ graphData, nodeTypeColors, nodeSizes, predefinedColors, initialFilter, layoutSettings, defaultPhysics, isMinimal }}>
   // Initialize the graph when the DOM is ready
   function initializeGraph() {
     // Check if Cytoscape is loaded
@@ -231,6 +330,13 @@ const nodeTypeCounts = {
     const nodeDetailsEl = document.getElementById('node-details');
     const closeDetailsBtn = document.getElementById('close-details');
     const graphContainer = document.getElementById('knowledge-graph');
+    const graphWrapper = document.querySelector('.graph-container-wrapper');
+    const settingsPanel = document.getElementById('settings-panel');
+    const settingsToggle = document.getElementById('toggle-settings');
+    const fullscreenToggle = document.getElementById('fullscreen-toggle');
+    const exitFullscreenBtn = document.getElementById('exit-fullscreen');
+    const applySettingsBtn = document.getElementById('apply-settings');
+    const resetSettingsBtn = document.getElementById('reset-settings');
 
     if (!graphContainer) {
         console.error("Knowledge graph container not found!");
@@ -290,6 +396,18 @@ const nodeTypeCounts = {
       }
     });
 
+    // Physics settings for the graph
+    const physicsSettings = {
+      nodeRepulsion: defaultPhysics.nodeRepulsion,
+      edgeElasticity: defaultPhysics.edgeElasticity,
+      gravity: defaultPhysics.gravity,
+      linkDistance: defaultPhysics.linkDistance,
+      nodeSize: defaultPhysics.nodeSize,
+      linkThickness: defaultPhysics.linkThickness,
+      showLabels: true,
+      showArrows: true
+    };
+
     // Initialize Cytoscape
     const cy = cytoscape({
       container: graphContainer,
@@ -344,17 +462,21 @@ const nodeTypeCounts = {
              'line-color': 'rgba(226, 232, 240, 0.2)', 
              'curve-style': 'bezier', 
              'opacity': 0.6, 
-             'z-index': 1 
+             'z-index': 1,
+             'target-arrow-shape': 'triangle',
+             'target-arrow-color': 'rgba(226, 232, 240, 0.2)'
          }},
          // Post-tag edge specific styles
          { selector: 'edge[type="post-tag"]', style: {
              'line-color': 'rgba(16, 185, 129, 0.4)',
-             'line-style': 'dashed'
+             'line-style': 'dashed',
+             'target-arrow-color': 'rgba(16, 185, 129, 0.4)'
          }},
          // Post-post edge specific styles
          { selector: 'edge[type="post-post"]', style: {
              'line-color': 'rgba(59, 130, 246, 0.4)',
-             'line-style': 'solid'
+             'line-style': 'solid',
+             'target-arrow-color': 'rgba(59, 130, 246, 0.4)'
          }},
          // Selection and hover styles
          { selector: '.highlighted', style: { 'background-color': 'data(color)', 'border-color': '#FFFFFF', 'border-width': '3px', 'color': '#FFFFFF', 'text-background-opacity': 0.9, 'opacity': 1, 'z-index': 20 } },
@@ -369,60 +491,14 @@ const nodeTypeCounts = {
              'border-opacity': 1
          }}
       ],
-      // Update layout for better visualization of post-tag connections
-      // Replace the existing layout configuration with this improved one
-      layout: {
-        name: 'cose',
-        idealEdgeLength: 75,       // Increased from previous value
-        nodeOverlap: 30,           // Increased to prevent overlap
-        refresh: 20,
-        fit: true,
-        padding: 30,
-        randomize: false,
-        componentSpacing: 60,
-        nodeRepulsion: 1000000,    // Significantly increased repulsion
-        edgeElasticity: 150,       // Increased elasticity
-        nestingFactor: 7,          // Adjusted nesting
-        gravity: 30,               // Reduced gravity for more spread
-        numIter: 2000,             // Increased iterations for better settling
-        initialTemp: 250,          // Higher initial temperature
-        coolingFactor: 0.95,       // Slower cooling for better layout
-        minTemp: 1.0,
-        animate: true,
-        animationDuration: 800     // Longer animation
-      },
+      layout: layoutSettings,
       zoom: 1, minZoom: 0.1, maxZoom: 3, zoomingEnabled: true, userZoomingEnabled: true, panningEnabled: true, userPanningEnabled: true, boxSelectionEnabled: false,
     });
 
-    // Add improved Obsidian-like dragging behavior
-    cy.on('drag', 'node', function(evt){
-      const node = evt.target;
-      node.lock(); // Lock node during drag to prevent physics interference
-      
-      // Get immediate neighbors (directly connected nodes)
-      const directNeighbors = node.neighborhood('node');
-      
-      // Apply a gentle pull to immediate neighbors
-      if (directNeighbors.length > 0) {
-        directNeighbors.forEach(neighbor => {
-          // Don't move nodes that are being manually dragged
-          if (!neighbor.grabbed()) {
-            // Calculate distance and direction
-            const dx = node.position('x') - neighbor.position('x');
-            const dy = node.position('y') - neighbor.position('y');
-            const distance = Math.sqrt(dx*dx + dy*dy);
-            
-            // Apply gentle force (stronger for closer nodes)
-            const pullFactor = Math.min(0.05, 10/distance);
-            neighbor.position({
-              x: neighbor.position('x') + dx * pullFactor,
-              y: neighbor.position('y') + dy * pullFactor
-            });
-          }
-        });
-      }
-    });
-    
+    // Store cy in window for access from other functions
+    window.cy = cy;
+
+    // Add Obsidian-like dragging behavior
     cy.on('dragfree', 'node', function(evt){
       const node = evt.target;
       setTimeout(() => {
@@ -430,19 +506,39 @@ const nodeTypeCounts = {
       }, 50);
     });
 
-    // Create physics controls object to store settings
-    const physicsSettings = {
-      nodeRepulsion: 9000,
-      edgeElasticity: 50,
-      gravity: 10,
-      animate: true
-    };
-    
     // Function to update physics settings
     function updatePhysics(settings) {
+      // Update node sizes
+      cy.nodes().forEach(node => {
+        const baseSize = node.data('size');
+        node.style('width', baseSize * settings.nodeSize);
+        node.style('height', baseSize * settings.nodeSize);
+      });
+      
+      // Update edge thickness
+      cy.edges().forEach(edge => {
+        const baseWidth = edge.style('width');
+        edge.style('width', parseFloat(baseWidth) * settings.linkThickness);
+      });
+      
+      // Update label visibility
+      if (settings.showLabels) {
+        cy.nodes().style('label', 'data(label)');
+      } else {
+        cy.nodes().style('label', '');
+      }
+      
+      // Update arrow visibility
+      if (settings.showArrows) {
+        cy.edges().style('target-arrow-shape', 'triangle');
+      } else {
+        cy.edges().style('target-arrow-shape', 'none');
+      }
+      
+      // Run layout with updated physics settings
       cy.layout({
         name: 'cose',
-        idealEdgeLength: 100,
+        idealEdgeLength: settings.linkDistance,
         nodeOverlap: 30,
         refresh: 20,
         fit: false, // Don't fit to viewport to maintain current view
@@ -457,7 +553,7 @@ const nodeTypeCounts = {
         initialTemp: 200,
         coolingFactor: 0.95,
         minTemp: 1.0,
-        animate: settings.animate
+        animate: true
       }).run();
     }
     
@@ -474,6 +570,7 @@ const nodeTypeCounts = {
 
     // --- Interactions ---
     let hoverTimeout;
+    
     cy.on('mouseover', 'node', function(e) {
         const node = e.target;
         clearTimeout(hoverTimeout); 
@@ -497,7 +594,7 @@ const nodeTypeCounts = {
       const node = e.target;
       const nodeData = node.data();
       
-      if (nodeDetailsEl) {
+      if (nodeDetailsEl && !isMinimal) {
           // Set node title
           document.getElementById('node-title').textContent = nodeData.label;
           
@@ -601,6 +698,12 @@ const nodeTypeCounts = {
           nodeDetailsEl.classList.add('active');
       }
       
+      // In minimal mode, just make the clicked node navigate to the relevant page
+      if (isMinimal && nodeData.url && nodeData.url !== '#') {
+        window.location.href = nodeData.url;
+        return;
+      }
+      
       // Highlight the node and its connections, fade everything else
       cy.elements().removeClass('highlighted').removeClass('faded'); 
       node.addClass('highlighted');
@@ -608,7 +711,7 @@ const nodeTypeCounts = {
       cy.elements().difference(node.neighborhood().union(node)).addClass('faded');
       
       // If it's a tag node, try to trigger the corresponding tag filter
-      if (nodeData.type === 'tag') {
+      if (nodeData.type === 'tag' && !isMinimal) {
         const tagName = nodeData.label;
         try {
           // Find and click the corresponding tag filter button
@@ -668,24 +771,147 @@ const nodeTypeCounts = {
       });
     });
 
-    // Zoom controls
-    document.getElementById('zoom-in')?.addEventListener('click', () => cy.zoom(cy.zoom() * 1.2));
-    document.getElementById('zoom-out')?.addEventListener('click', () => cy.zoom(cy.zoom() / 1.2));
+    // Zoom controls for both normal and minimal modes
+    const zoomInBtn = isMinimal ? document.getElementById('mini-zoom-in') : document.getElementById('zoom-in');
+    const zoomOutBtn = isMinimal ? document.getElementById('mini-zoom-out') : document.getElementById('zoom-out');
+    const resetBtn = isMinimal ? document.getElementById('mini-reset') : document.getElementById('reset-graph');
+    
+    if (zoomInBtn) zoomInBtn.addEventListener('click', () => cy.zoom(cy.zoom() * 1.2));
+    if (zoomOutBtn) zoomOutBtn.addEventListener('click', () => cy.zoom(cy.zoom() / 1.2));
     
     // Reset button functionality
-    document.getElementById('reset-graph')?.addEventListener('click', () => {
+    if (resetBtn) {
+      resetBtn.addEventListener('click', () => {
         // Reset zoom and position
         cy.fit(null, 30);
         // Reset all filters and highlighting
         cy.elements().removeClass('faded highlighted filtered');
         // Reset active filter buttons
-        const allFilterButton = document.querySelector('.graph-filter[data-filter="all"]');
-        if (allFilterButton) allFilterButton.click();
-        // Close node details panel if open
-        if (nodeDetailsEl) nodeDetailsEl.classList.remove('active');
-        // Reset any selected nodes
-        cy.$(':selected').unselect();
-    });
+        if (!isMinimal) {
+          const allFilterButton = document.querySelector('.graph-filter[data-filter="all"]');
+          if (allFilterButton) allFilterButton.click();
+          // Close node details panel if open
+          if (nodeDetailsEl) nodeDetailsEl.classList.remove('active');
+          // Reset any selected nodes
+          cy.$(':selected').unselect();
+        }
+      });
+    }
+
+    // Settings toggle functionality
+    if (settingsToggle && settingsPanel) {
+      settingsToggle.addEventListener('click', () => {
+        settingsPanel.classList.toggle('active');
+      });
+      
+      // Initialize settings values from defaults
+      document.getElementById('node-repulsion').value = physicsSettings.nodeRepulsion;
+      document.getElementById('repulsion-value').textContent = physicsSettings.nodeRepulsion;
+      
+      document.getElementById('edge-elasticity').value = physicsSettings.edgeElasticity;
+      document.getElementById('elasticity-value').textContent = physicsSettings.edgeElasticity;
+      
+      document.getElementById('gravity').value = physicsSettings.gravity;
+      document.getElementById('gravity-value').textContent = physicsSettings.gravity;
+      
+      document.getElementById('node-size').value = physicsSettings.nodeSize;
+      document.getElementById('node-size-value').textContent = physicsSettings.nodeSize;
+      
+      document.getElementById('link-thickness').value = physicsSettings.linkThickness;
+      document.getElementById('link-thickness-value').textContent = physicsSettings.linkThickness;
+      
+      document.getElementById('link-distance').value = physicsSettings.linkDistance;
+      document.getElementById('link-distance-value').textContent = physicsSettings.linkDistance;
+      
+      document.getElementById('show-labels').checked = physicsSettings.showLabels;
+      document.getElementById('show-arrows').checked = physicsSettings.showArrows;
+      
+      // Update displayed values as sliders change
+      document.getElementById('node-repulsion').addEventListener('input', e => {
+        document.getElementById('repulsion-value').textContent = e.target.value;
+      });
+      
+      document.getElementById('edge-elasticity').addEventListener('input', e => {
+        document.getElementById('elasticity-value').textContent = e.target.value;
+      });
+      
+      document.getElementById('gravity').addEventListener('input', e => {
+        document.getElementById('gravity-value').textContent = e.target.value;
+      });
+      
+      document.getElementById('node-size').addEventListener('input', e => {
+        document.getElementById('node-size-value').textContent = e.target.value;
+      });
+      
+      document.getElementById('link-thickness').addEventListener('input', e => {
+        document.getElementById('link-thickness-value').textContent = e.target.value;
+      });
+      
+      document.getElementById('link-distance').addEventListener('input', e => {
+        document.getElementById('link-distance-value').textContent = e.target.value;
+      });
+      
+      // Apply settings button
+      applySettingsBtn.addEventListener('click', () => {
+        // Update physics settings from form values
+        physicsSettings.nodeRepulsion = parseInt(document.getElementById('node-repulsion').value);
+        physicsSettings.edgeElasticity = parseInt(document.getElementById('edge-elasticity').value);
+        physicsSettings.gravity = parseInt(document.getElementById('gravity').value);
+        physicsSettings.nodeSize = parseFloat(document.getElementById('node-size').value);
+        physicsSettings.linkThickness = parseFloat(document.getElementById('link-thickness').value);
+        physicsSettings.linkDistance = parseInt(document.getElementById('link-distance').value);
+        physicsSettings.showLabels = document.getElementById('show-labels').checked;
+        physicsSettings.showArrows = document.getElementById('show-arrows').checked;
+        
+        // Apply settings
+        updatePhysics(physicsSettings);
+        
+        // Hide settings panel if not in fullscreen
+        if (!document.fullscreenElement) {
+          settingsPanel.classList.remove('active');
+        }
+      });
+      
+      // Reset settings button
+      resetSettingsBtn.addEventListener('click', () => {
+        // Reset values to defaults
+        document.getElementById('node-repulsion').value = defaultPhysics.nodeRepulsion;
+        document.getElementById('repulsion-value').textContent = defaultPhysics.nodeRepulsion;
+        
+        document.getElementById('edge-elasticity').value = defaultPhysics.edgeElasticity;
+        document.getElementById('elasticity-value').textContent = defaultPhysics.edgeElasticity;
+        
+        document.getElementById('gravity').value = defaultPhysics.gravity;
+        document.getElementById('gravity-value').textContent = defaultPhysics.gravity;
+        
+        document.getElementById('node-size').value = defaultPhysics.nodeSize;
+        document.getElementById('node-size-value').textContent = defaultPhysics.nodeSize;
+        
+        document.getElementById('link-thickness').value = defaultPhysics.linkThickness;
+        document.getElementById('link-thickness-value').textContent = defaultPhysics.linkThickness;
+        
+        document.getElementById('link-distance').value = defaultPhysics.linkDistance;
+        document.getElementById('link-distance-value').textContent = defaultPhysics.linkDistance;
+        
+        document.getElementById('show-labels').checked = true;
+        document.getElementById('show-arrows').checked = true;
+        
+        // Reset settings in memory
+        Object.assign(physicsSettings, {
+          nodeRepulsion: defaultPhysics.nodeRepulsion,
+          edgeElasticity: defaultPhysics.edgeElasticity,
+          gravity: defaultPhysics.gravity,
+          nodeSize: defaultPhysics.nodeSize,
+          linkThickness: defaultPhysics.linkThickness,
+          linkDistance: defaultPhysics.linkDistance,
+          showLabels: true,
+          showArrows: true
+        });
+        
+        // Apply reset settings
+        updatePhysics(physicsSettings);
+      });
+    }
 
     // Add mouse wheel zoom controls
     cy.on('zoom', function() {
@@ -696,17 +922,63 @@ const nodeTypeCounts = {
       }
     });
     
-    // Apply initial filter if specified
-    if (initialFilter && initialFilter !== 'all') {
+    // Apply initial filter if specified in full mode
+    if (initialFilter && initialFilter !== 'all' && !isMinimal) {
       const filterButton = document.querySelector(`.graph-filter[data-filter="${initialFilter}"]`);
       if (filterButton) {
         setTimeout(() => filterButton.click(), 500);
       }
     }
     
+    // Fullscreen functionality
+    if (fullscreenToggle && graphWrapper) {
+      fullscreenToggle.addEventListener('click', () => {
+        if (!document.fullscreenElement) {
+          graphWrapper.requestFullscreen().catch(err => {
+            console.error(`Error attempting to enable fullscreen mode: ${err.message}`);
+          });
+        } else {
+          document.exitFullscreen();
+        }
+      });
+    }
+    
+    // Exit fullscreen button (visible only in fullscreen mode)
+    if (exitFullscreenBtn) {
+      exitFullscreenBtn.addEventListener('click', () => {
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+        }
+      });
+    }
+    
+    // Handle fullscreen changes
+    document.addEventListener('fullscreenchange', () => {
+      if (document.fullscreenElement === graphWrapper) {
+        // Entered fullscreen
+        graphWrapper.classList.add('fullscreen');
+        if (settingsPanel) settingsPanel.classList.add('fullscreen-visible');
+        if (exitFullscreenBtn) exitFullscreenBtn.classList.add('visible');
+      } else {
+        // Exited fullscreen
+        graphWrapper.classList.remove('fullscreen');
+        if (settingsPanel) {
+          settingsPanel.classList.remove('fullscreen-visible');
+          settingsPanel.classList.remove('active');
+        }
+        if (exitFullscreenBtn) exitFullscreenBtn.classList.remove('visible');
+      }
+      
+      // Resize graph after a short delay to allow transition
+      setTimeout(() => {
+        cy.resize();
+        cy.fit();
+      }, 200);
+    });
+    
     // Connect search input if it exists
     const searchInput = document.getElementById('search-input');
-    if (searchInput) {
+    if (searchInput && !isMinimal) {
       searchInput.addEventListener('input', e => {
         const term = e.target.value.toLowerCase();
         
@@ -736,7 +1008,7 @@ const nodeTypeCounts = {
     
     // Connect tag filter buttons if they exist
     const tagFilterButtons = document.querySelectorAll('.tag-filter-btn');
-    if (tagFilterButtons.length) {
+    if (tagFilterButtons.length && !isMinimal) {
       tagFilterButtons.forEach(btn => {
         btn.addEventListener('click', () => {
           const tagName = btn.dataset.tag;
@@ -770,238 +1042,44 @@ const nodeTypeCounts = {
         });
       });
     }
-    
-    // Dispatch graphReady event for external listeners
-    document.dispatchEvent(new CustomEvent('graphReady', { detail: { cy } }));
 
-    // Fullscreen mode functionality
-    const fullscreenBtn = document.getElementById('fullscreen-graph');
-    const fullscreenContainer = document.getElementById('fullscreen-container');
-    const fullscreenClose = document.getElementById('fullscreen-close');
-    const fullscreenGraphContainer = document.getElementById('fullscreen-graph');
-    const fullscreenArticle = document.getElementById('fullscreen-article');
-    const articleContent = document.getElementById('article-content');
-    let fullscreenCy = null;
-    
-    if (fullscreenBtn && fullscreenContainer) {
-      fullscreenBtn.addEventListener('click', () => {
-        // Show fullscreen container
-        fullscreenContainer.classList.add('active');
-        document.body.classList.add('graph-fullscreen-mode');
-        
-        // Create a clone of the graph in fullscreen mode if it doesn't exist
-        if (!fullscreenCy) {
-          // Small delay to ensure container is visible first
-          setTimeout(() => {
-            // Clone the Cytoscape graph
-            fullscreenCy = cytoscape({
-              container: fullscreenGraphContainer,
-              elements: cy.json().elements,
-              style: cy.style().json(),
-              layout: { name: 'preset' }, // Use preset layout to maintain positions
-              zoom: cy.zoom(),
-              pan: cy.pan()
-            });
-            
-            // Add same event listeners to the fullscreen graph
-            fullscreenCy.on('tap', 'node', function(e) {
-              const node = e.target;
-              const nodeData = node.data();
-              
-              // Highlight the node and its connections
-              fullscreenCy.elements().removeClass('highlighted').addClass('faded');
-              node.removeClass('faded').addClass('highlighted');
-              node.neighborhood().removeClass('faded').addClass('highlighted');
-              
-              // If it's a post node, load the content
-              if (nodeData.type === 'post' && nodeData.url && nodeData.url !== '#') {
-                // Show loading state
-                articleContent.innerHTML = '<div class="article-loading">Loading article...</div>';
-                
-                // Remove placeholder if exists
-                const placeholder = fullscreenArticle.querySelector('.article-placeholder');
-                if (placeholder) placeholder.classList.add('hidden');
-                
-                // Show content container
-                articleContent.classList.remove('hidden');
-                
-                // Fetch and display article content
-                fetch(nodeData.url)
-                  .then(response => response.text())
-                  .then(html => {
-                    const parser = new DOMParser();
-                    const doc = parser.parseFromString(html, 'text/html');
-                    
-                    // Extract the article content - adjust selector to match your blog structure
-                    const articleElement = doc.querySelector('article') || 
-                                          doc.querySelector('.blog-post-content') || 
-                                          doc.querySelector('main');
-                    
-                    if (articleElement) {
-                      // Create header for the article
-                      const articleHeader = document.createElement('div');
-                      articleHeader.className = 'article-header';
-                      articleHeader.innerHTML = `
-                        <h1>${nodeData.label}</h1>
-                        <a href="${nodeData.url}" class="article-link" target="_blank">
-                          <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"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
-                          View Full Article
-                        </a>
-                      `;
-                      
-                      // Set content
-                      articleContent.innerHTML = '';
-                      articleContent.appendChild(articleHeader);
-                      articleContent.appendChild(articleElement);
-                    } else {
-                      articleContent.innerHTML = `
-                        <div class="article-error">
-                          <h2>${nodeData.label}</h2>
-                          <p>Unable to load article content directly.</p>
-                          <a href="${nodeData.url}" class="article-link" target="_blank">
-                            Open Article in New Tab
-                          </a>
-                        </div>
-                      `;
-                    }
-                  })
-                  .catch(error => {
-                    console.error('Error loading article:', error);
-                    articleContent.innerHTML = `
-                      <div class="article-error">
-                        <h2>Error Loading Content</h2>
-                        <p>There was a problem loading the article content.</p>
-                        <a href="${nodeData.url}" class="article-link" target="_blank">
-                          Open Article in New Tab
-                        </a>
-                      </div>
-                    `;
-                  });
-              } else if (nodeData.type === 'tag') {
-                // For tag nodes, show related posts
-                const connectedPosts = node.neighborhood('node[type="post"]');
-                
-                // Hide placeholder if exists
-                const placeholder = fullscreenArticle.querySelector('.article-placeholder');
-                if (placeholder) placeholder.classList.add('hidden');
-                
-                // Show content container
-                articleContent.classList.remove('hidden');
-                
-                articleContent.innerHTML = `
-                  <div class="tag-posts">
-                    <h2>Posts tagged with: ${nodeData.label}</h2>
-                    <ul class="related-posts-list">
-                      ${connectedPosts.length === 0 
-                        ? '<li>No posts found with this tag</li>' 
-                        : connectedPosts.map(post => {
-                            const postData = post.data();
-                            return `
-                              <li>
-                                <a href="${postData.url}" data-id="${postData.id}" class="post-link">
-                                  ${postData.label}
-                                </a>
-                              </li>
-                            `;
-                          }).join('')
-                      }
-                    </ul>
-                  </div>
-                `;
-                
-                // Add click handlers for the post links
-                setTimeout(() => {
-                  document.querySelectorAll('.post-link').forEach(link => {
-                    link.addEventListener('click', (e) => {
-                      e.preventDefault();
-                      const postId = link.dataset.id;
-                      const postNode = fullscreenCy.getElementById(postId);
-                      if (postNode.length > 0) {
-                        postNode.trigger('tap');
-                      }
-                    });
-                  });
-                }, 100);
-              }
-            });
-            
-            fullscreenCy.on('tap', function(e) {
-              if (e.target === fullscreenCy) {
-                fullscreenCy.elements().removeClass('highlighted faded');
-              }
-            });
-            
-            // Add drag behavior
-            fullscreenCy.on('drag', 'node', function(evt){
-              const node = evt.target;
-              node.lock();
-              
-              // Get immediate neighbors
-              const directNeighbors = node.neighborhood('node');
-              
-              // Apply gentle pull to immediate neighbors
-              if (directNeighbors.length > 0) {
-                directNeighbors.forEach(neighbor => {
-                  if (!neighbor.grabbed()) {
-                    const dx = node.position('x') - neighbor.position('x');
-                    const dy = node.position('y') - neighbor.position('y');
-                    const distance = Math.sqrt(dx*dx + dy*dy);
-                    
-                    const pullFactor = Math.min(0.05, 10/distance);
-                    neighbor.position({
-                      x: neighbor.position('x') + dx * pullFactor,
-                      y: neighbor.position('y') + dy * pullFactor
-                    });
-                  }
-                });
-              }
-            });
-            
-            fullscreenCy.on('dragfree', 'node', function(evt){
-              const node = evt.target;
-              setTimeout(() => {
-                node.unlock();
-              }, 50);
-            });
-          }, 100);
-        } else {
-          // If fullscreenCy already exists, update its elements and layout
-          fullscreenCy.json({ elements: cy.json().elements });
-          fullscreenCy.layout({ name: 'preset' }).run();
-          fullscreenCy.zoom(cy.zoom());
-          fullscreenCy.pan(cy.pan());
-        }
-      });
+    // Add Obsidian-like dragging behavior
+    cy.on('drag', 'node', function(evt){
+      const node = evt.target;
+      node.lock(); // Lock node during drag
       
-      // Close fullscreen mode
-      if (fullscreenClose) {
-        fullscreenClose.addEventListener('click', () => {
-          fullscreenContainer.classList.remove('active');
-          document.body.classList.remove('graph-fullscreen-mode');
-          
-          // Hide any loaded content
-          if (articleContent) {
-            articleContent.innerHTML = '';
-            articleContent.classList.add('hidden');
-          }
-          
-          // Show placeholder again
-          const placeholder = fullscreenArticle.querySelector('.article-placeholder');
-          if (placeholder) placeholder.classList.remove('hidden');
-          
-          // If the main graph exists, sync positions from fullscreen graph
-          if (cy && fullscreenCy) {
-            // Transfer node positions from fullscreen to main graph
-            fullscreenCy.nodes().forEach(node => {
-              const mainNode = cy.getElementById(node.id());
-              if (mainNode.length > 0) {
-                mainNode.position(node.position());
-              }
+      // Get immediate neighbors
+      const directNeighbors = node.neighborhood('node');
+      
+      // Apply a gentle pull to immediate neighbors
+      if (directNeighbors.length > 0) {
+        directNeighbors.forEach(neighbor => {
+          if (!neighbor.grabbed()) {
+            // Calculate distance and direction
+            const dx = node.position('x') - neighbor.position('x');
+            const dy = node.position('y') - neighbor.position('y');
+            const distance = Math.sqrt(dx*dx + dy*dy);
+            
+            // Apply gentle force (stronger for closer nodes)
+            const pullFactor = Math.min(0.05, 10/distance);
+            neighbor.position({
+              x: neighbor.position('x') + dx * pullFactor,
+              y: neighbor.position('y') + dy * pullFactor
             });
           }
         });
       }
-    }
+    });
+        
+    cy.on('dragfree', 'node', function(evt){
+      const node = evt.target;
+      setTimeout(() => {
+        node.unlock(); // Unlock after drag complete
+      }, 50);
+    });
+    
+    // Dispatch graphReady event for external listeners
+    document.dispatchEvent(new CustomEvent('graphReady', { detail: { cy } }));
   }
 
   // Initialize graph on DOMContentLoaded or if already loaded
@@ -1017,10 +1095,19 @@ const nodeTypeCounts = {
   .graph-container-wrapper { 
     position: relative; 
     width: 100%; 
-    height: var(--graph-height, 50vh); 
-    min-height: 400px; 
-    max-height: 800px; 
-    margin-bottom: 2rem;
+    height: 400px; 
+    min-height: 300px; 
+    margin-bottom: 1.5rem;
+    aspect-ratio: 1/1; /* Keep it square */
+  }
+  
+  /* For minimal mode (used in posts) */
+  .graph-container-wrapper[data-minimal="true"] {
+    border-radius: 8px;
+    border: 1px solid var(--card-border);
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    margin-bottom: 1.5rem;
   }
   
   .graph-container { 
@@ -1040,7 +1127,7 @@ const nodeTypeCounts = {
   #knowledge-graph { 
     width: 100%; 
     height: 100%; 
-    z-index: 4; /* Increase z-index to ensure nodes appear above instructions */
+    z-index: 1; 
   }
   
   /* Loading Animation */
@@ -1237,12 +1324,6 @@ const nodeTypeCounts = {
     transform: translateY(-2px);
   }
   
-  .no-tags { 
-    color: var(--text-tertiary); 
-    font-style: italic; 
-    font-size: 0.8rem; 
-  }
-  
   .connections-list { 
     padding-left: 0; 
     list-style: none; 
@@ -1391,29 +1472,20 @@ const nodeTypeCounts = {
     margin-bottom: 1rem;
     width: 100%;
     position: relative;
-    z-index: 5; /* Higher than graph for visibility but lower than open instructions */
+    z-index: 5; /* Make sure this is above the graph */
   }
   
   .instructions-details {
-    background: rgba(15, 23, 42, 0.9); /* More opaque background */
+    background: rgba(15, 23, 42, 0.7);
     border-radius: 8px;
     border: 1px solid var(--border-primary);
     overflow: hidden;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
-    position: relative; /* Changed from absolute */
-    width: 100%;
   }
   
   .instructions-details[open] {
     padding-bottom: 1rem;
-    z-index: 20; /* Very high z-index when open */
-  }
-
-  .instructions-details:not([open]) {
-    background: rgba(15, 23, 42, 0.8);
-    border: 1px solid var(--border-primary);
-    backdrop-filter: blur(5px);
   }
   
   .instructions-summary {
@@ -1425,7 +1497,7 @@ const nodeTypeCounts = {
     align-items: center;
     gap: 0.5rem;
     position: relative;
-    z-index: 3;
+    z-index: 6;
   }
   
   .instructions-summary::before {
@@ -1439,7 +1511,7 @@ const nodeTypeCounts = {
     line-height: 1.5;
     max-width: 800px;
     position: relative;
-    z-index: 3;
+    z-index: 6;
   }
   
   .instructions-content p {
@@ -1469,6 +1541,274 @@ const nodeTypeCounts = {
     transform: rotate(45deg);
   }
   
+  /* Settings Panel */
+  .settings-toggle {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: rgba(20, 30, 50, 0.7);
+    border: none;
+    border-radius: 4px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.8);
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.2s ease;
+  }
+  
+  .settings-toggle:hover {
+    background: rgba(20, 30, 50, 0.9);
+    color: white;
+  }
+  
+  .settings-panel {
+    position: absolute;
+    top: 50px;
+    left: 10px;
+    background: rgba(15, 23, 42, 0.95);
+    border-radius: 8px;
+    padding: 16px;
+    width: 300px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    z-index: 20;
+    display: none;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+    max-height: calc(100% - 70px);
+    overflow-y: auto;
+  }
+  
+  .settings-panel.active,
+  .settings-panel.fullscreen-visible {
+    display: block;
+  }
+  
+  .settings-title {
+    font-size: 1.2rem;
+    margin: 0 0 16px 0;
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .settings-section {
+    margin-bottom: 16px;
+  }
+  
+  .settings-section-title {
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin: 0 0 12px 0;
+    color: var(--accent-primary);
+  }
+  
+  .settings-group {
+    margin-bottom: 12px;
+  }
+  
+  .settings-label {
+    display: block;
+    margin-bottom: 4px;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 14px;
+  }
+  
+  .settings-slider {
+    width: 100%;
+    height: 6px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    outline: none;
+  }
+  
+  .settings-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--accent-primary);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+  
+  .settings-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--accent-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+  }
+  
+  .checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .settings-checkbox {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+  
+  .settings-checkbox-label {
+    font-size: 14px;
+    cursor: pointer;
+  }
+  
+  .settings-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 16px;
+  }
+  
+  .settings-button {
+    flex: 1;
+    padding: 8px 16px;
+    border-radius: 4px;
+    font-size: 14px;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s ease;
+  }
+  
+  .apply-button {
+    background: var(--accent-primary);
+    color: white;
+  }
+  
+  .apply-button:hover {
+    background: var(--accent-secondary);
+  }
+  
+  .reset-button {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+  }
+  
+  .reset-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  /* Fullscreen Toggle Button */
+  .fullscreen-toggle {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(20, 30, 50, 0.7);
+    border: none;
+    border-radius: 4px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.8);
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.2s ease;
+  }
+  
+  .fullscreen-toggle:hover {
+    background: rgba(20, 30, 50, 0.9);
+    color: white;
+  }
+  
+  /* Exit Fullscreen Button */
+  .exit-fullscreen-button {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    background: rgba(20, 30, 50, 0.8);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    cursor: pointer;
+    z-index: 9999;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+  }
+  
+  .exit-fullscreen-button.visible {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  .exit-fullscreen-button:hover {
+    background: rgba(20, 30, 50, 1);
+    transform: translateY(-2px);
+  }
+  
+  /* Fullscreen Mode */
+  .graph-container-wrapper.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw !important;
+    height: 100vh !important;
+    margin: 0;
+    z-index: 9000;
+    background: var(--bg-primary);
+    border-radius: 0;
+  }
+  
+  .graph-container-wrapper.fullscreen .graph-container {
+    border-radius: 0;
+    border: none;
+  }
+  
+  .graph-container-wrapper.fullscreen .settings-panel {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    max-height: calc(100vh - 40px);
+  }
+  
+  /* Mini Graph Controls for Embedded Mode */
+  .mini-graph-controls {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+  }
+  
+  .mini-graph-action {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    background: rgba(15, 23, 42, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .mini-graph-action:hover {
+    background: rgba(15, 23, 42, 0.9);
+    transform: translateY(-2px);
+  }
+  
   /* Media Queries */
   @media screen and (max-width: 768px) {
     .node-details { 
@@ -1501,438 +1841,21 @@ const nodeTypeCounts = {
       padding: 0.3rem 0.6rem;
       font-size: 0.75rem;
     }
-  }
-
-  /* Fullscreen Mode Styles */
-  .fullscreen-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: var(--bg-primary, #0f172a);
-    z-index: 9999;
-    display: flex;
-    flex-direction: column;
-    visibility: hidden;
-    opacity: 0;
-    transition: all 0.3s ease;
-    color: var(--text-primary, #e2e8f0);
+    
+    .settings-panel {
+      width: 250px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
   
-  .fullscreen-container.active {
-    visibility: visible;
-    opacity: 1;
-  }
-  
-  .fullscreen-header {
-    height: 60px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 1.5rem;
-    background: var(--bg-secondary, #1e293b);
-    border-bottom: 1px solid var(--border-primary, #334155);
-  }
-  
-  .fullscreen-header h2 {
-    font-size: 1.2rem;
-    margin: 0;
-    color: var(--text-primary, #e2e8f0);
-  }
-  
-  .fullscreen-controls {
-    display: flex;
-    gap: 1rem;
-  }
-  
-  .fullscreen-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    background: rgba(226, 232, 240, 0.05);
-    color: var(--text-primary, #e2e8f0);
-    border: 1px solid var(--border-primary, #334155);
-    padding: 0.5rem 1rem;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    transition: all 0.2s ease;
-  }
-  
-  .fullscreen-btn:hover {
-    background: rgba(226, 232, 240, 0.1);
-    border-color: var(--accent-primary, #38bdf8);
-  }
-  
-  .fullscreen-content {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-  }
-  
-  .fullscreen-graph-container {
-    width: 60%;
-    height: 100%;
-    background: var(--bg-primary, #0f172a);
-    border-right: 1px solid var(--border-primary, #334155);
-    position: relative;
-  }
-  
-  .fullscreen-article-container {
-    width: 40%;
-    height: 100%;
-    overflow-y: auto;
-    padding: 0;
-    background: var(--bg-secondary, #1e293b);
-  }
-  
-  .article-placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: var(--text-secondary, #94a3b8);
-    text-align: center;
-    padding: 2rem;
-  }
-  
-  .article-placeholder svg {
-    opacity: 0.4;
-    margin-bottom: 1rem;
-  }
-  
-  .article-placeholder p {
-    font-size: 1.1rem;
-    max-width: 300px;
-  }
-  
-  .article-content {
-    padding: 2rem;
-  }
-  
-  .article-content.hidden {
-    display: none;
-  }
-  
-  .article-header {
-    margin-bottom: 2rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid var(--border-primary, #334155);
-  }
-  
-  .article-header h1 {
-    font-size: 1.8rem;
-    margin: 0 0 1rem 0;
-    line-height: 1.3;
-    color: var(--text-primary, #e2e8f0);
-  }
-  
-  .article-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: var(--accent-primary, #38bdf8);
-    text-decoration: none;
-    font-size: 0.9rem;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--accent-primary, #38bdf8);
-    border-radius: 6px;
-    transition: all 0.2s ease;
-  }
-  
-  .article-link:hover {
-    background: rgba(56, 189, 248, 0.1);
-    transform: translateY(-2px);
-  }
-  
-  .article-loading, .article-error {
-    padding: 2rem;
-    text-align: center;
-    color: var(--text-secondary, #94a3b8);
-  }
-  
-  .tag-posts {
-    padding: 2rem;
-  }
-  
-  .tag-posts h2 {
-    font-size: 1.4rem;
-    margin-bottom: 1.5rem;
-    color: var(--text-primary, #e2e8f0);
-  }
-  
-  .related-posts-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  
-  .related-posts-list li {
-    margin-bottom: 0.75rem;
-    padding-bottom: 0.75rem;
-    border-bottom: 1px solid var(--border-secondary, #1f2937);
-  }
-  
-  .related-posts-list .post-link {
-    color: var(--accent-primary, #38bdf8);
-    text-decoration: none;
-    font-size: 1rem;
-    transition: all 0.2s ease;
-    display: block;
-    padding: 0.5rem;
-    border-radius: 4px;
-  }
-  
-  .related-posts-list .post-link:hover {
-    background: rgba(56, 189, 248, 0.05);
-    color: var(--accent-secondary, #0ea5e9);
-    transform: translateX(4px);
-  }
-  
-  .hidden {
-    display: none !important;
-  }
-  
-  body.graph-fullscreen-mode {
-    overflow: hidden;
-  }
-  
-  /* Physics Controls Styles */
-  .physics-toggle {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-primary);
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 15;
-    transition: all 0.2s ease;
-  }
-  
-  .physics-toggle:hover {
-    transform: rotate(20deg);
-    background: var(--bg-tertiary);
-  }
-  
-  .physics-controls {
-    position: absolute;
-    top: 70px;
-    right: 20px;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-primary);
-    border-radius: 8px;
-    padding: 1rem;
-    width: 250px;
-    z-index: 20;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-    transform: translateX(120%);
-    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    opacity: 0;
-    backdrop-filter: blur(10px);
-    display: none;
-  }
-  
-  .physics-controls.active {
-    transform: translateX(0);
-    opacity: 1;
-    display: block;
-  }
-  
-  .physics-control-group {
-    margin-bottom: 1rem;
-  }
-  
-  .physics-label {
-    display: block;
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-    margin-bottom: 0.5rem;
-    font-family: var(--font-mono);
-  }
-  
-  .physics-slider {
-    width: 100%;
-    height: 4px;
-    background: rgba(226, 232, 240, 0.1);
-    border-radius: 2px;
-    outline: none;
-    appearance: none;
-  }
-  
-  .physics-slider::-webkit-slider-thumb {
-    appearance: none;
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background: var(--accent-primary);
-    cursor: pointer;
-    border: none;
-  }
-  
-  .physics-slider::-moz-range-thumb {
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background: var(--accent-primary);
-    cursor: pointer;
-    border: none;
-  }
-  
-  .physics-button {
-    background: rgba(226, 232, 240, 0.05);
-    color: var(--text-primary);
-    border: 1px solid var(--border-primary);
-    padding: 0.5rem 0.75rem;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.85rem;
-    width: 100%;
-    margin-top: 0.5rem;
-    transition: all 0.2s ease;
-  }
-  
-  .physics-button:hover {
-    background: rgba(226, 232, 240, 0.1);
-    border-color: var(--accent-primary);
-  }
-  
-  /* Media Queries for Fullscreen Mode */
-  @media screen and (max-width: 900px) {
-    .fullscreen-content {
-      flex-direction: column;
+  @media screen and (max-width: 480px) {
+    .settings-panel {
+      width: calc(100% - 40px);
     }
     
-    .fullscreen-graph-container, 
-    .fullscreen-article-container {
-      width: 100%;
-      height: 50%;
-    }
-    
-    .fullscreen-graph-container {
-      border-right: none;
-      border-bottom: 1px solid var(--border-primary);
-    }
-    
-    .article-content {
-      padding: 1.5rem;
+    .graph-container-wrapper[data-minimal="true"] {
+      height: 300px;
     }
   }
-
-  @media screen and (max-width: 768px) {
-    // ... existing media queries ...
-    
-    .fullscreen-header {
-      padding: 0 1rem;
-    }
-    
-    .fullscreen-header h2 {
-      font-size: 1rem;
-    }
-    
-    .fullscreen-btn {
-      padding: 0.4rem 0.75rem;
-      font-size: 0.8rem;
-    }
-    
-    .article-header h1 {
-      font-size: 1.5rem;
-    }
-    
-    .physics-controls {
-      width: 200px;
-      right: 50px;
-    }
-  }
-</style>
-
-<script>
-  // Add Physics Controls UI interaction
-  document.addEventListener('DOMContentLoaded', () => {
-    const physicsToggle = document.getElementById('toggle-physics');
-    const physicsPanel = document.getElementById('physics-panel');
-    
-    if (physicsToggle && physicsPanel) {
-      // Toggle physics panel visibility
-      physicsToggle.addEventListener('click', () => {
-        physicsPanel.classList.toggle('active');
-      });
-      
-      // Update value displays as sliders change
-      document.getElementById('node-repulsion')?.addEventListener('input', (e) => {
-        document.getElementById('repulsion-value').textContent = e.target.value;
-      });
-      
-      document.getElementById('edge-elasticity')?.addEventListener('input', (e) => {
-        document.getElementById('elasticity-value').textContent = e.target.value;
-      });
-      
-      document.getElementById('gravity')?.addEventListener('input', (e) => {
-        document.getElementById('gravity-value').textContent = e.target.value;
-      });
-      
-      // Apply physics settings when button is clicked
-      document.getElementById('apply-physics')?.addEventListener('click', () => {
-        if (window.graphPhysics) {
-          const newSettings = {
-            nodeRepulsion: parseInt(document.getElementById('node-repulsion').value),
-            edgeElasticity: parseInt(document.getElementById('edge-elasticity').value),
-            gravity: parseInt(document.getElementById('gravity').value),
-            animate: true
-          };
-          
-          // Update settings object
-          Object.assign(window.graphPhysics.settings, newSettings);
-          
-          // Apply settings
-          window.graphPhysics.update(newSettings);
-          
-          // Close panel after applying
-          physicsPanel.classList.remove('active');
-        }
-      });
-      
-      // Reset physics to defaults
-      document.getElementById('reset-physics')?.addEventListener('click', () => {
-        if (window.graphPhysics) {
-          const defaultSettings = {
-            nodeRepulsion: 9000,
-            edgeElasticity: 50,
-            gravity: 10,
-            animate: true
-          };
-          
-          // Update UI
-          document.getElementById('node-repulsion').value = defaultSettings.nodeRepulsion;
-          document.getElementById('repulsion-value').textContent = defaultSettings.nodeRepulsion;
-          
-          document.getElementById('edge-elasticity').value = defaultSettings.edgeElasticity;
-          document.getElementById('elasticity-value').textContent = defaultSettings.edgeElasticity;
-          
-          document.getElementById('gravity').value = defaultSettings.gravity;
-          document.getElementById('gravity-value').textContent = defaultSettings.gravity;
-          
-          // Update settings object
-          Object.assign(window.graphPhysics.settings, defaultSettings);
-          
-          // Apply settings
-          window.graphPhysics.update(defaultSettings);
-        }
-      });
-      
-      // Click outside to close physics panel
-      document.addEventListener('click', (e) => {
-        if (!physicsPanel.contains(e.target) && e.target !== physicsToggle) {
-          physicsPanel.classList.remove('active');
-        }
-      });
-    }
-  });
-</script>
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cb55c68..3c08203 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,11 @@
 ---
+// src/pages/blog/index.astro - Blog page with enhanced knowledge graph and filtering
 import { getCollection } from 'astro:content';
-import BaseLayout from '../layouts/BaseLayout.astro'; // Corrected path
-import KnowledgeGraph from '../components/KnowledgeGraph.astro'; // Corrected path
-import Terminal from '../components/Terminal.astro'; // Corrected path
-import Header from '../components/Header.astro'; // Import Header
-import Footer from '../components/Footer.astro'; // Import Footer
-import Newsletter from '../components/Newsletter.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import KnowledgeGraph from '../components/KnowledgeGraph.astro';
+import Terminal from '../components/Terminal.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
 
 // Get all blog entries
 const allPosts = await getCollection('posts');
@@ -32,67 +32,87 @@ const postsData = sortedPosts.map(post => ({
   pubDateISO: post.data.pubDate ? new Date(post.data.pubDate).toISOString() : '',
   category: post.data.category || 'Uncategorized',
   tags: post.data.tags || [],
-  heroImage: post.data.heroImage || '/images/placeholders/default.jpg',
+  heroImage: post.data.heroImage || '/images/placeholders/default.jpg', 
   readTime: post.data.readTime || '5 min read',
   isDraft: post.data.draft || false
 }));
 
-// Prepare graph data (Obsidian-style: Posts and Tags)
-const graphNodes = [];
-const graphEdges = [];
-const tagNodes = new Map(); // To avoid duplicate tag nodes
+// Prepare enhanced graph data with both posts and tags
+const graphData = {
+  nodes: [
+    // Add post nodes
+    ...sortedPosts
+      .filter(post => !post.data.draft)
+      .map(post => ({
+        id: post.slug,
+        label: post.data.title,
+        type: 'post',
+        category: post.data.category || 'Uncategorized',
+        tags: post.data.tags || [],
+        url: `/posts/${post.slug}/`
+      })),
+    
+    // Add tag nodes
+    ...allTags.map(tag => ({
+      id: `tag-${tag}`,
+      label: tag,
+      type: 'tag',
+      url: `/tag/${tag}/`
+    }))
+  ],
+  edges: []
+};
 
-// Add post nodes
-sortedPosts.forEach(post => {
-  if (!post.data.draft) { // Exclude drafts from graph
-    graphNodes.push({
-      id: post.slug,
-      label: post.data.title,
-      type: 'post', // Add type for styling/interaction
-      url: `/posts/${post.slug}/` // Add URL for linking
-    });
-
-    // Add tag nodes and edges
-    (post.data.tags || []).forEach(tag => {
-      const tagId = `tag-${tag}`;
-      // Add tag node only if it doesn't exist
-      if (!tagNodes.has(tagId)) {
-        graphNodes.push({
-          id: tagId,
-          label: `#${tag}`, // Prefix with # for clarity
-          type: 'tag' // Add type
-        });
-        tagNodes.set(tagId, true);
-      }
-      // Add edge connecting post to tag
-      graphEdges.push({
+// Create edges between posts and their tags
+sortedPosts
+  .filter(post => !post.data.draft)
+  .forEach(post => {
+    const postTags = post.data.tags || [];
+    
+    // Add edges from post to tags
+    postTags.forEach(tag => {
+      graphData.edges.push({
         source: post.slug,
-        target: tagId,
-        type: 'tag-connection' // Add type
+        target: `tag-${tag}`,
+        type: 'post-tag',
+        strength: 1
       });
     });
-  }
-});
-
-const graphData = { nodes: graphNodes, edges: graphEdges };
+    
+    // Check if post references other posts (optional)
+    // This requires a related_posts field in frontmatter
+    if (post.data.related_posts && Array.isArray(post.data.related_posts)) {
+      post.data.related_posts.forEach(relatedSlug => {
+        // Make sure related post exists
+        if (sortedPosts.some(p => p.slug === relatedSlug)) {
+          graphData.edges.push({
+            source: post.slug,
+            target: relatedSlug,
+            type: 'post-post',
+            strength: 2
+          });
+        }
+      });
+    }
+  });
 
 // Terminal commands for tech effect
 const commands = [
-  {
-    prompt: "[laforceit@argobox]$ ",
-    command: "find ./posts -type f -name \"*.md\" | sort -n | wc -l",
+  { 
+    prompt: "[laforceit@argobox]$ ", 
+    command: "find ./posts -type f -name \"*.md\" | sort -n | wc -l", 
     output: [`${allPosts.length} posts found`]
   },
   {
     prompt: "[laforceit@argobox]$ ",
-    command: "ls -la ./categories",
-    output: allCategories.map(cat => `${cat}`)
+    command: "ls -la ./tags",
+    output: allTags.map(tag => `${tag}`)
   },
   {
     prompt: "[laforceit@argobox]$ ",
     command: "grep -r \"kubernetes\" --include=\"*.md\" ./posts | wc -l",
-    output: [`${allPosts.filter(post =>
-      post.data.tags?.includes('kubernetes') ||
+    output: [`${allPosts.filter(post => 
+      post.data.tags?.includes('kubernetes') || 
       post.data.category === 'Kubernetes' ||
       post.data.title?.toLowerCase().includes('kubernetes') ||
       post.data.description?.toLowerCase().includes('kubernetes')
@@ -101,139 +121,473 @@ const commands = [
 ];
 ---
 
-<BaseLayout title="LaForce IT Blog - Home Lab & DevOps Tutorials" description="Advanced tutorials for DevOps, Kubernetes, Home Lab and Infrastructure engineering">
-  <Header slot="header" active="home" />
-  
-  <main class="main-content">
+<BaseLayout title="Blog | LaForce IT - Home Lab & DevOps Insights" description="Explore articles about Kubernetes, Infrastructure, DevOps, and Home Lab setups">
+  <Header slot="header" />
+  <main>
+    <!-- Hero Section with Terminal -->
     <section class="hero-section">
+      <div class="hero-bg"></div>
       <div class="container">
-        <h1 class="main-heading">Knowledge Graph Explorer</h1>
-        <p class="main-description">
-          Explore connections between articles and topics, or search by keyword
-        </p>
+        <div class="hero-content">
+          <div class="hero-text">
+            <div class="hero-subtitle">Technical Articles & Guides</div>
+            <h1 class="hero-title">Exploring <span>advanced infrastructure</span> and automation</h1>
+            <p class="hero-description">
+              Dive into enterprise-grade home lab setups, Kubernetes deployments, and DevOps best practices for the modern tech enthusiast.
+            </p>
+          </div>
+          <div class="terminal-container">
+            <Terminal commands={commands} title="argobox:~/blog" />
+          </div>
+        </div>
       </div>
     </section>
 
-    <section class="graph-explorer-section">
+    <!-- Blog Content Section -->
+    <section class="blog-content-section">
       <div class="container">
-        <!-- Knowledge Graph Visualization - Full Size -->
-        <div class="knowledge-graph-fullpage">
-          <KnowledgeGraph graphData={graphData} height="70vh" />
-        </div>
-        
-        <div class="search-filter-section">
-          <div class="search-bar">
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="search-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-            <input type="search" id="search-input" placeholder="Search posts..." class="search-input" />
+        <!-- Search and Filter Section with integrated Knowledge Graph -->
+        <div class="search-filter-container">
+          <div class="section-header">
+            <h2 class="section-title">Knowledge Graph & Content Explorer</h2>
+            <p class="section-description">
+              Explore connections between articles and topics, or search by keyword
+            </p>
           </div>
-          <div class="tag-filters">
-            <span class="filter-label">Filter by Tag:</span>
-            <button class="tag-filter-btn active" data-tag="all">All</button>
-            {allTags.map(tag => (
-              <button class="tag-filter-btn" data-tag={tag}>{tag}</button>
-            ))}
+          
+          <!-- Knowledge Graph Visualization -->
+          <div class="knowledge-graph-wrapper">
+            <KnowledgeGraph graphData={graphData} height="500px" />
+          </div>
+          
+          <div class="search-filter-section">
+            <div class="search-bar">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="search-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              <input type="search" id="search-input" placeholder="Search posts..." class="search-input" />
+            </div>
+            <div class="tag-filters">
+              <span class="filter-label">Filter by Tag:</span>
+              <button class="tag-filter-btn active" data-tag="all">All</button>
+              {allTags.map(tag => (
+                <button class="tag-filter-btn" data-tag={tag}>{tag}</button>
+              ))}
+            </div>
           </div>
         </div>
 
-        <div id="blog-grid" class="blog-grid">
-          {sortedPosts.map(post => (
-            <div class="post-card">
-              <div class="post-card-inner">
-                <a href={`/posts/${post.slug}/`} class="post-card-image-link">
-                  <div class="post-card-image" style={`background-image: url('${post.data.heroImage ? (post.data.heroImage.startsWith('/') ? post.data.heroImage : `/${post.data.heroImage}`) : '/images/placeholders/default.jpg'}')`}></div>
-                </a>
-                <div class="post-card-content">
-                  <div class="post-card-meta">
-                    <span class="post-card-date">
-                      {new Date(post.data.pubDate).toLocaleDateString('en-us', {
-                        year: 'numeric',
-                        month: 'short',
-                        day: 'numeric',
-                      })}
-                    </span>
-                    {post.data.readTime && <span class="post-card-readtime">{post.data.readTime}</span>}
-                  </div>
-                  <h2 class="post-card-title">
-                    <a href={`/posts/${post.slug}/`}>{post.data.title}</a>
-                  </h2>
-                  <div class="post-card-excerpt">
-                    <p>{post.data.description}</p>
-                  </div>
-                  <div class="post-card-tags">
-                    {(post.data.tags || []).map(tag => (
-                      <span class="post-tag" data-tag={tag}>#{tag}</span>
-                    ))}
-                  </div>
-                </div>
-              </div>
+        <!-- Blog Grid (populated by JS) -->
+        <div class="blog-section">
+          <div class="section-header">
+            <h2 class="section-title">All Articles</h2>
+            <p class="section-description">
+              Technical insights, infrastructure guides, and DevOps best practices
+            </p>
+          </div>
+          
+          <div class="blog-grid" id="blog-grid">
+            <div class="loading-indicator">
+              <div class="loading-spinner"></div>
+              <span>Loading articles...</span>
             </div>
-          ))}
+          </div>
         </div>
       </div>
     </section>
   </main>
-
-  <Newsletter />
   <Footer slot="footer" />
+
+  <!-- Client-side script for filtering and graph interactions -->
+  <script define:vars={{ postsData, graphData }}>
+    // DOM Elements
+    const searchInput = document.getElementById('search-input');
+    const tagButtons = document.querySelectorAll('.tag-filter-btn');
+    const blogGrid = document.getElementById('blog-grid');
+    
+    // State variables
+    let currentFilterTag = 'all';
+    let currentSearchTerm = '';
+    let cy; // Cytoscape instance will be set by KnowledgeGraph component
+  
+    // Wait for cytoscape instance to be available
+    document.addEventListener('graphReady', (e) => {
+      cy = e.detail.cy;
+      console.log('Graph ready and connected to filtering system');
+    });
+    
+    // Function to create HTML for a single post card
+// Update the post card HTML creation function in the blog/index.astro file
+// Find the function that creates post cards (might be called createPostCardHTML)
+
+function createPostCardHTML(post) {
+  // Make sure tags is an array before stringifying
+  const tagsString = JSON.stringify(post.tags || []);
+  
+  // Create tag pills HTML
+  const tagPills = post.tags.map(tag =>
+    `<span class="post-tag" data-tag="${tag}">${tag}</span>`
+  ).join('');
+  
+  return `
+    <article class="post-card" data-tags='${tagsString}' data-slug="${post.slug}">
+      <div class="post-card-inner">
+        <a href="/posts/${post.slug}/" class="post-image-link">
+          <div class="post-image-container">
+            <img
+              width="720"
+              height="360"
+              src="${post.heroImage}"
+              alt=""
+              class="post-image"
+              loading="lazy"
+            />
+            <div class="post-category-badge">${post.category}</div>
+          </div>
+        </a>
+        <div class="post-content">
+          <div class="post-meta">
+            <time datetime="${post.pubDateISO}">${post.pubDate}</time>
+            <span class="post-read-time">${post.readTime}</span>
+          </div>
+          <h3 class="post-title">
+            <a href="/posts/${post.slug}/">${post.title}</a>
+            ${post.isDraft ? '<span class="draft-badge">Draft</span>' : ''}
+          </h3>
+          <p class="post-excerpt">${post.description}</p>
+          <div class="post-footer">
+            <div class="post-tags">
+              ${tagPills}
+            </div>
+            <a href="/posts/${post.slug}/" class="read-more">Read More</a>
+          </div>
+        </div>
+      </div>
+    </article>
+  `;
+}
+  
+    // Function to filter and update the grid
+    function updateGrid() {
+      const searchTermLower = currentSearchTerm.toLowerCase();
+      
+      // Ensure postsData is available
+      if (typeof postsData === 'undefined' || !postsData) {
+        console.error("postsData is not available in updateGrid");
+        if(blogGrid) blogGrid.innerHTML = '<p class="no-results">Error loading post data.</p>';
+        return;
+      }
+
+      const filteredPosts = postsData.filter(post => {
+        const postTags = post.tags || []; // Ensure tags is an array
+        const matchesTag = currentFilterTag === 'all' || postTags.includes(currentFilterTag);
+        const matchesSearch = searchTermLower === '' ||
+                            post.title.toLowerCase().includes(searchTermLower) ||
+                            post.description.toLowerCase().includes(searchTermLower) ||
+                            postTags.some(tag => tag.toLowerCase().includes(searchTermLower));
+        return matchesTag && matchesSearch;
+      });
+  
+      // Update the grid HTML
+      if (blogGrid) {
+        if (filteredPosts.length > 0) {
+          blogGrid.innerHTML = filteredPosts.map(createPostCardHTML).join('');
+          
+          // Add click handlers to post tag spans
+          document.querySelectorAll('.post-tag').forEach(tagSpan => {
+            tagSpan.addEventListener('click', (e) => {
+              e.preventDefault();
+              const tag = tagSpan.dataset.tag;
+              
+              // Find and click the matching tag filter button
+              const tagBtn = Array.from(tagButtons).find(btn => btn.dataset.tag === tag);
+              if (tagBtn) {
+                tagBtn.click();
+              }
+            });
+          });
+          
+          // If graph is available, highlight matching nodes
+          if (cy) {
+            // Get matching slugs for posts
+            const matchingSlugs = filteredPosts.map(post => post.slug);
+            
+            if (currentFilterTag !== 'all') {
+              // We're filtering by tag - highlight tag node and connected posts
+              cy.elements().addClass('faded').removeClass('highlighted filtered');
+              
+              // Highlight the tag node
+              const tagNode = cy.getElementById(`tag-${currentFilterTag}`);
+              if (tagNode.length > 0) {
+                tagNode.removeClass('faded').addClass('highlighted');
+                
+                // Get connected posts and highlight them
+                const connectedPosts = tagNode.neighborhood('node[type="post"]');
+                connectedPosts.removeClass('faded').addClass('filtered');
+                
+                // Highlight connecting edges
+                tagNode.connectedEdges().removeClass('faded').addClass('highlighted');
+              }
+            } 
+            else if (currentSearchTerm) {
+              // We're searching - highlight matching posts
+              cy.elements().addClass('faded').removeClass('highlighted filtered');
+              
+              // Find and highlight matching post nodes
+              matchingSlugs.forEach(slug => {
+                const node = cy.getElementById(slug);
+                if (node.length > 0) {
+                  node.removeClass('faded').addClass('highlighted');
+                  
+                  // Also show connected tags
+                  const connectedTags = node.neighborhood('node[type="tag"]');
+                  connectedTags.removeClass('faded').addClass('filtered');
+                  
+                  // And highlight edges
+                  node.connectedEdges().removeClass('faded');
+                }
+              });
+            }
+            else {
+              // Reset graph view
+              cy.elements().removeClass('faded highlighted filtered');
+            }
+          }
+        } else {
+          blogGrid.innerHTML = '<p class="no-results">No posts found matching your criteria. Try adjusting your search or filters.</p>';
+          
+          // Reset graph view
+          if (cy) {
+            cy.elements().removeClass('faded highlighted filtered');
+          }
+        }
+      } else {
+        console.error("Blog grid element not found!");
+      }
+    }
+  
+    // Event listener for search input
+    if (searchInput) {
+      searchInput.addEventListener('input', (e) => {
+        currentSearchTerm = e.target.value;
+        updateGrid();
+      });
+    } else {
+      console.error("Search input element not found!");
+    }
+  
+    // Event listeners for tag buttons
+    tagButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        // Update active button style
+        tagButtons.forEach(btn => btn.classList.remove('active'));
+        button.classList.add('active');
+        
+        // Update filter and grid
+        currentFilterTag = button.dataset.tag;
+        updateGrid();
+        
+        // If tag changes but search is active, keep it integrated
+        if (cy && currentFilterTag !== 'all') {
+          // Find the tag node
+          const tagNode = cy.getElementById(`tag-${currentFilterTag}`);
+          if (tagNode.length > 0) {
+            // Center the view on this tag
+            cy.animate({
+              center: { eles: tagNode },
+              zoom: 1.5
+            }, {
+              duration: 500
+            });
+          }
+        }
+      });
+    });
+  
+    // Initial grid population on client side
+    document.addEventListener('DOMContentLoaded', () => {
+      updateGrid(); // Call after DOM is fully loaded
+      
+      // Create link between graph and grid
+      document.addEventListener('graphReady', (e) => {
+        // Add a scroll-to-graph button
+        const searchSection = document.querySelector('.search-filter-section');
+        if (searchSection) {
+          const graphButton = document.createElement('button');
+          graphButton.className = 'graph-toggle-btn';
+          graphButton.innerHTML = `
+            <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">
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+              <line x1="11" y1="8" x2="11" y2="14"></line>
+              <line x1="8" y1="11" x2="14" y2="11"></line>
+            </svg>
+            Explore Knowledge Graph
+          `;
+          graphButton.addEventListener('click', () => {
+            document.querySelector('.knowledge-graph-wrapper').scrollIntoView({ 
+              behavior: 'smooth',
+              block: 'start'
+            });
+          });
+          searchSection.appendChild(graphButton);
+        }
+      });
+    });
+  </script>
 </BaseLayout>
 
 <style>
-  .main-content {
-    padding-bottom: 4rem;
-  }
-  
+  /* Hero Section */
   .hero-section {
-    padding: 3rem 0 1rem;
-    text-align: center;
+    padding: 6rem 0 4rem;
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
   }
   
-  .main-heading {
-    font-size: 3rem;
-    font-weight: 800;
-    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+  .hero-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+      radial-gradient(circle at 20% 35%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
+      radial-gradient(circle at 75% 15%, rgba(59, 130, 246, 0.1) 0%, transparent 45%),
+      radial-gradient(circle at 85% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
+    z-index: -1;
+  }
+  
+  .hero-bg::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+      linear-gradient(rgba(226, 232, 240, 0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(226, 232, 240, 0.03) 1px, transparent 1px);
+    background-size: 30px 30px;
+  }
+  
+  .container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 clamp(1rem, 5vw, 3rem);
+  }
+  
+  .hero-content {
+    display: flex;
+    align-items: center;
+    gap: 4rem;
+  }
+  
+  .hero-text {
+    flex: 1;
+  }
+  
+  .hero-subtitle {
+    font-family: var(--font-mono);
+    color: var(--accent-primary);
+    font-size: var(--font-size-sm);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  
+  .hero-subtitle::before {
+    content: '>';
+    font-weight: bold;
+  }
+  
+  .hero-title {
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    line-height: 1.1;
+    margin-bottom: 1.5rem;
+  }
+  
+  .hero-title span {
+    background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
-    margin-bottom: 1rem;
   }
   
-  .main-description {
-    font-size: 1.2rem;
+  .hero-description {
+    color: var(--text-secondary);
+    font-size: var(--font-size-lg);
+    margin-bottom: 1.5rem;
+    max-width: 540px;
+  }
+
+  .terminal-container {
+    flex: 1;
+    max-width: 560px;
+  }
+  
+  /* Blog Content Section */
+  .blog-content-section {
+    padding: 2rem 0 5rem;
+  }
+  
+  .section-header {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto 2rem;
+  }
+  
+  .section-title {
+    font-size: clamp(1.75rem, 3vw, 2.5rem);
+    margin-bottom: 1rem;
+    position: relative;
+    display: inline-block;
+  }
+  
+  .section-title::after {
+    content: '';
+    position: absolute;
+    height: 4px;
+    width: 60px;
+    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 2px;
+  }
+  
+  .section-description {
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto;
   }
   
-  .graph-explorer-section {
-    padding: 1rem 0 2rem;
-  }
-  
-  .container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 1.5rem;
-  }
-  
-  .knowledge-graph-fullpage {
-    margin-bottom: 2rem;
+  /* Search Filter Container with Knowledge Graph */
+  .search-filter-container {
+    margin-bottom: 4rem;
+    background: rgba(15, 23, 42, 0.3);
     border-radius: 12px;
+    border: 1px solid var(--border-primary);
     overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  }
+  
+  .knowledge-graph-wrapper {
+    width: 100%;
+    padding: 0;
+    margin: 0 0 1.5rem;
   }
   
   .search-filter-section {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
-    gap: 1rem;
+    padding: 1.5rem;
+    position: relative;
   }
   
   .search-bar {
+    margin-bottom: 1.5rem;
     position: relative;
-    flex: 1;
-    min-width: 250px;
-    max-width: 400px;
   }
   
   .search-icon {
@@ -241,18 +595,25 @@ const commands = [
     left: 1rem;
     top: 50%;
     transform: translateY(-50%);
-    color: var(--text-secondary);
+    color: var(--text-tertiary);
   }
   
   .search-input {
     width: 100%;
-    background: rgba(15, 23, 42, 0.5);
+    padding: 0.75rem 1rem 0.75rem 2.5rem;
+    background-color: var(--bg-primary);
     border: 1px solid var(--card-border);
-    padding: 0.75rem 1rem 0.75rem 3rem;
     border-radius: 8px;
     color: var(--text-primary);
-    font-family: var(--font-mono);
-    font-size: 0.9rem;
+    font-size: 1rem;
+    font-family: var(--font-sans);
+    transition: all 0.3s ease;
+  }
+  
+  .search-input:focus {
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
+    outline: none;
   }
   
   .search-input::placeholder {
@@ -289,6 +650,7 @@ const commands = [
     background-color: rgba(226, 232, 240, 0.1);
     color: var(--text-primary);
     border-color: rgba(56, 189, 248, 0.4);
+    transform: translateY(-2px);
   }
   
   .tag-filter-btn.active {
@@ -298,12 +660,42 @@ const commands = [
     font-weight: 600;
   }
   
+  .graph-toggle-btn {
+    position: absolute;
+    top: 1.5rem;
+    right: 1.5rem;
+    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+    color: var(--bg-primary);
+    border: none;
+    padding: 0.6rem 1rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.2);
+  }
+  
+  .graph-toggle-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(6, 182, 212, 0.3);
+  }
+  
+  /* Blog Section and Grid */
+  .blog-section {
+    margin-top: 4rem;
+  }
+  
   .blog-grid {
+    margin: 2rem 0;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 2rem;
   }
   
+  /* Enhanced Post Card Styles */
   .post-card {
     height: 100%;
     transition: all 0.3s ease;
@@ -325,303 +717,269 @@ const commands = [
   
   .post-card:hover .post-card-inner {
     transform: translateY(-5px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-    border-color: rgba(56, 189, 248, 0.3);
+    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.15);
+    border-color: rgba(56, 189, 248, 0.4);
   }
   
-  .post-card-image-link {
+  .post-image-link {
     display: block;
-    height: 180px;
-    overflow: hidden;
+    text-decoration: none;
   }
   
-  .post-card-image {
+  .post-image-container {
+    position: relative;
+  }
+  
+  .post-image {
     width: 100%;
-    height: 100%;
-    background-size: cover;
-    background-position: center;
+    height: 200px;
+    object-fit: cover;
     transition: transform 0.5s ease;
   }
   
-  .post-card:hover .post-card-image {
+  .post-card:hover .post-image {
     transform: scale(1.05);
   }
   
-  .post-card-content {
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-  }
-  
-  .post-card-meta {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
-    font-size: 0.8rem;
-    color: var(--text-secondary);
+  .post-category-badge {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    color: var(--bg-primary);
+    padding: 0.35rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.25);
     font-family: var(--font-mono);
   }
   
-  .post-card-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    line-height: 1.4;
-    margin: 0 0 0.75rem 0;
+  .post-content {
+    padding: 1.5rem;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
   }
   
-  .post-card-title a {
+  .post-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+  }
+  
+  .post-title {
+    font-size: 1.25rem;
+    margin-bottom: 0.75rem;
+    line-height: 1.3;
+  }
+  
+  .post-title a {
     color: var(--text-primary);
     text-decoration: none;
-    transition: color 0.2s ease;
+    transition: color 0.3s ease;
   }
   
-  .post-card-title a:hover {
+  .post-title a:hover {
     color: var(--accent-primary);
   }
   
-  .post-card-excerpt {
-    font-size: 0.9rem;
+  .draft-badge {
+    display: inline-block;
+    background: rgba(245, 158, 11, 0.2);
+    color: #F59E0B;
+    font-size: 0.7rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+    font-family: var(--font-mono);
+  }
+  
+  .post-excerpt {
     color: var(--text-secondary);
-    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
     flex-grow: 1;
   }
   
-  .post-card-tags {
+  .post-footer {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+    justify-content: space-between;
+    align-items: center;
     margin-top: auto;
   }
   
+  .post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
   .post-tag {
-    background: rgba(56, 189, 248, 0.1);
-    color: var(--accent-primary);
-    font-size: 0.75rem;
+    background: rgba(16, 185, 129, 0.1);
+    color: #10B981;
     padding: 0.2rem 0.5rem;
     border-radius: 4px;
-    transition: all 0.2s ease;
+    font-size: 0.7rem;
+    font-family: var(--font-mono);
     cursor: pointer;
+    transition: all 0.2s ease;
   }
   
   .post-tag:hover {
-    background: rgba(56, 189, 248, 0.2);
+    background: rgba(16, 185, 129, 0.2);
     transform: translateY(-2px);
   }
   
-  /* Responsive adjustments */
+  .read-more {
+    color: var(--accent-primary);
+    text-decoration: none;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    transition: color 0.3s ease;
+  }
+  
+  .read-more:hover {
+    color: var(--accent-secondary);
+  }
+  
+  .read-more::after {
+    content: '→';
+    transition: transform 0.3s ease;
+  }
+  
+  .post-card:hover .read-more::after {
+    transform: translateX(3px);
+  }
+  
+  .no-results {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 3rem;
+    color: var(--text-secondary);
+    background: rgba(15, 23, 42, 0.2);
+    border-radius: 10px;
+    border: 1px dashed var(--card-border);
+  }
+  
+  /* Loading Indicator */
+  .loading-indicator {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    color: var(--text-secondary);
+  }
+  
+  .loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(6, 182, 212, 0.3);
+    border-radius: 50%;
+    border-top-color: var(--accent-primary);
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
+  }
+  
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+  
+  /* Responsive Adjustments */
+  @media (max-width: 1024px) {
+    .hero-content {
+      flex-direction: column;
+      gap: 2rem;
+    }
+    
+    .terminal-container {
+      max-width: 100%;
+      width: 100%;
+    }
+    
+    .hero-text {
+      text-align: center;
+      align-items: center;
+    }
+    
+    .hero-description {
+      max-width: 100%;
+    }
+    
+    .graph-toggle-btn {
+      top: auto;
+      bottom: 1.5rem;
+      right: 1.5rem;
+    }
+  }
+  
   @media (max-width: 768px) {
-    .main-heading {
-      font-size: 2.25rem;
+    .hero-section {
+      padding: 4rem 0 3rem;
+    }
+    
+    .section-header {
+      margin-bottom: 2rem;
+    }
+    
+    .search-filter-section {
+      padding: 1rem;
     }
     
     .blog-grid {
       grid-template-columns: 1fr;
     }
     
-    .search-filter-section {
-      flex-direction: column;
-      align-items: stretch;
+    .graph-toggle-btn {
+      padding: 0.5rem;
+      right: 1rem;
+      bottom: 1rem;
     }
     
-    .search-bar {
-      max-width: 100%;
+    .graph-toggle-btn span {
+      display: none;
     }
   }
-</style>
 
-<script define:vars={{ postsData: sortedPosts, graphData }}>
-  // DOM Elements
-  const searchInput = document.getElementById('search-input');
-  const tagButtons = document.querySelectorAll('.tag-filter-btn');
-  const blogGrid = document.getElementById('blog-grid');
-  
-  // State variables
-  let currentFilterTag = 'all';
-  let currentSearchTerm = '';
-  let cy; // Cytoscape instance
-  
-  // Wait for cytoscape instance to be available
-  document.addEventListener('graphReady', (e) => {
-    cy = e.detail.cy;
-    setupGraphInteractions();
-  });
-  
-  function setupGraphInteractions() {
-    if (!cy) return;
-    
-    // Make post tags in the blog grid clickable
-    document.querySelectorAll('.post-tag').forEach(tagEl => {
-      tagEl.addEventListener('click', (e) => {
-        e.preventDefault();
-        const tagName = tagEl.dataset.tag;
-        
-        // Find and click the matching tag filter button
-        const tagFilterBtn = Array.from(tagButtons).find(btn => btn.dataset.tag === tagName);
-        if (tagFilterBtn) {
-          tagFilterBtn.click();
-        }
-      });
-    });
-    
-    // Setup tag filter buttons
-    tagButtons.forEach(btn => {
-      btn.addEventListener('click', () => {
-        // Update active button
-        tagButtons.forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        
-        // Get the tag to filter by
-        const tag = btn.dataset.tag;
-        currentFilterTag = tag;
-        
-        // Update grid contents
-        updateGrid();
-        
-        // Highlight corresponding tag in the graph
-        if (tag === 'all') {
-          // Reset all highlighting
-          cy.elements().removeClass('highlighted filtered faded');
-        } else {
-          // Find the tag node and highlight it
-          const tagNode = cy.getElementById(`tag-${tag}`);
-          if (tagNode.length > 0) {
-            cy.elements().addClass('faded').removeClass('highlighted filtered');
-            tagNode.removeClass('faded').addClass('highlighted');
-            
-            // Highlight connected posts
-            const connectedPosts = tagNode.neighborhood('node[type="post"]');
-            connectedPosts.removeClass('faded').addClass('filtered');
-            
-            // Highlight connecting edges
-            tagNode.connectedEdges().removeClass('faded').addClass('highlighted');
-            
-            // Center the view on the tag and its connections
-            cy.animate({
-              fit: {
-                eles: tagNode.union(connectedPosts),
-                padding: 50
-              },
-              duration: 500
-            });
-          }
-        }
-      });
-    });
-    
-    // Setup search input
-    if (searchInput) {
-      searchInput.addEventListener('input', (e) => {
-        currentSearchTerm = e.target.value.trim().toLowerCase();
-        updateGrid();
-        
-        // Highlight matching posts in the graph
-        if (currentSearchTerm) {
-          const matchingPosts = cy.nodes().filter(node => {
-            const nodeData = node.data();
-            return nodeData.type === 'post' && 
-                  nodeData.label.toLowerCase().includes(currentSearchTerm);
-          });
-          
-          if (matchingPosts.length > 0) {
-            cy.elements().addClass('faded').removeClass('highlighted filtered');
-            matchingPosts.removeClass('faded').addClass('highlighted');
-            
-            // Center the view on matching posts
-            cy.animate({
-              fit: {
-                eles: matchingPosts,
-                padding: 50
-              },
-              duration: 500
-            });
-          }
-        } else if (currentFilterTag === 'all') {
-          // Reset graph view if search is cleared and no tag filter is active
-          cy.elements().removeClass('highlighted filtered faded');
-          cy.fit(null, 40);
-        }
-      });
-    }
-  }
-  
-  // Updates the grid based on current filter and search
-  function updateGrid() {
-    const filteredPosts = postsData.filter(post => {
-      // Filter by tag
-      const passesTagFilter = currentFilterTag === 'all' || 
-                             (post.data.tags && post.data.tags.includes(currentFilterTag));
-      
-      // Filter by search term
-      const passesSearch = !currentSearchTerm || 
-                          post.data.title.toLowerCase().includes(currentSearchTerm) ||
-                          (post.data.description && post.data.description.toLowerCase().includes(currentSearchTerm)) ||
-                          (post.data.tags && post.data.tags.some(tag => tag.toLowerCase().includes(currentSearchTerm)));
-      
-      return passesTagFilter && passesSearch;
-    });
-    
-    // Update the grid HTML
-    if (blogGrid) {
-      if (filteredPosts.length > 0) {
-        blogGrid.innerHTML = filteredPosts.map(createPostCardHTML).join('');
-        
-        // Add click handlers to post tag spans
-        document.querySelectorAll('.post-tag').forEach(tagSpan => {
-          tagSpan.addEventListener('click', (e) => {
-            e.preventDefault();
-            const tag = tagSpan.dataset.tag;
-            
-            // Find and click the matching tag filter button
-            const tagBtn = Array.from(tagButtons).find(btn => btn.dataset.tag === tag);
-            if (tagBtn) {
-              tagBtn.click();
-            }
-          });
-        });
-        
-        // If graph is available, highlight matching nodes
-        if (cy) {
-          const matchingSlugs = filteredPosts.map(post => post.slug);
-          
-          if (currentFilterTag !== 'all') {
-            // Tag filtering is already handled by tag button click
-          } else if (currentSearchTerm) {
-            // Highlight posts that match the search
-            cy.elements().addClass('faded').removeClass('highlighted filtered');
-            cy.nodes().filter(node => {
-              return node.data('type') === 'post' && matchingSlugs.includes(node.id());
-            }).removeClass('faded').addClass('highlighted');
-          } else {
-            // Reset highlighting
-            cy.elements().removeClass('highlighted filtered faded');
-          }
-        }
-      } else {
-        blogGrid.innerHTML = `
-          <div class="no-results">
-            <p>No posts found matching your criteria.</p>
-            <button class="reset-filters-btn">Reset Filters</button>
-          </div>
-        `;
-        
-        document.querySelector('.reset-filters-btn')?.addEventListener('click', () => {
-          // Reset search and filters
-          if (searchInput) searchInput.value = '';
-          currentSearchTerm = '';
-          
-          // Reset tag filter to "All"
-          const allTagBtn = Array.from(tagButtons).find(btn => btn.dataset.tag === 'all');
-          if (allTagBtn) allTagBtn.click();
-        });
-      }
-    }
-  }
-  
-  // Initialize grid and interactions when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', setupGraphInteractions);
-  } else {
-    setupGraphInteractions();
-  }
-</script>
\ No newline at end of file
+/* Add CSS to make the image link more obvious on hover */
+.post-image-link {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px 8px 0 0; /* Match card radius */
+}
+
+.post-image-link:hover .post-image {
+  transform: scale(1.05);
+  transition: transform 0.5s ease;
+}
+
+.post-image-link::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(6, 182, 212, 0.1); /* Use accent color with alpha */
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none; /* Allow clicks through */
+}
+
+.post-image-link:hover::after {
+  opacity: 1;
+}
+</style>
\ No newline at end of file