diff --git a/web/src/lib/components/home/Fabric.svelte b/web/src/lib/components/home/Fabric.svelte
deleted file mode 100644
index ce22e690..00000000
--- a/web/src/lib/components/home/Fabric.svelte
+++ /dev/null
@@ -1,141 +0,0 @@
-<!-- Note: This can be deleted. It is now in components/ui/connections/Connections.svelte -->
-
-<!-- <script lang="ts">
-    import { onMount, onDestroy } from 'svelte';
-    import { ParticleSystem } from './ParticleSystem';
-    import { createParticleGradient } from '$lib/utils/canvas';
-    
-    export let particleCount = 100;
-    export let particleSize = 3;
-    export let particleSpeed = 0.5;
-    export let connectionDistance = 100;
-    
-    let canvas: HTMLCanvasElement;
-    let ctx: CanvasRenderingContext2D;
-    let animationFrame: number;
-    let particleSystem: ParticleSystem;
-    let isMouseOver = false;
-    let browser = false;
-
-    function handleMouseMove(event: MouseEvent) {
-      if (!isMouseOver) return;
-      const rect = canvas.getBoundingClientRect();
-      const x = event.clientX - rect.left;
-      const y = event.clientY - rect.top;
-      particleSystem?.updateMousePosition(x, y);
-    }
-  
-    function handleMouseEnter() {
-      isMouseOver = true;
-    }
-  
-    function handleMouseLeave() {
-      isMouseOver = false;
-      const centerX = canvas.width / 2;
-      const centerY = canvas.height / 2;
-      particleSystem?.updateMousePosition(centerX, centerY);
-    }
-    
-    function handleResize() {
-      if (!browser) return;
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-      particleSystem?.updateDimensions(canvas.width, canvas.height);
-    }
-    
-    function drawConnections() {
-      const particles = particleSystem.getParticles();
-      ctx.lineWidth = 0.5;
-      
-      for (let i = 0; i < particles.length; i++) {
-        for (let j = i + 1; j < particles.length; j++) {
-          const dx = particles[i].x - particles[j].x;
-          const dy = particles[i].y - particles[j].y;
-          const distance = Math.sqrt(dx * dx + dy * dy);
-          
-          if (distance < connectionDistance) {
-            const alpha = 1 - (distance / connectionDistance);
-            ctx.strokeStyle = `rgba(255, 255, 255, ${alpha * 0.15})`; // Slightly reduced opacity
-            ctx.beginPath();
-            ctx.moveTo(particles[i].x, particles[i].y);
-            ctx.lineTo(particles[j].x, particles[j].y);
-            ctx.stroke();
-          }
-        }
-      }
-    }
-    
-    function drawParticles() {
-      const particles = particleSystem.getParticles();
-      
-      particles.forEach(particle => {
-        const gradient = createParticleGradient(
-          ctx,
-          particle.x,
-          particle.y,
-          particle.size,
-          particle.color
-        );
-        
-        ctx.beginPath();
-        ctx.fillStyle = gradient;
-        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
-        ctx.fill();
-      });
-    }
-    
-    function animate() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      
-      particleSystem.update();
-      drawConnections();
-      drawParticles();
-      
-      animationFrame = requestAnimationFrame(animate);
-    }
-    
-    onMount(() => {
-      browser = true;
-      if (!browser) return;
-        
-      ctx = canvas.getContext('2d')!;
-      handleResize();
-      
-      particleSystem = new ParticleSystem(
-        particleCount,
-        particleSize,
-        particleSpeed,
-        canvas.width,
-        canvas.height
-      );
-      
-      window.addEventListener('resize', handleResize);
-      animationFrame = requestAnimationFrame(animate);
-    });
-    
-    onDestroy(() => {
-      if (!browser) return;
-      window.removeEventListener('resize', handleResize);
-      cancelAnimationFrame(animationFrame);
-    });
-  </script>
-  
-  <canvas
-    bind:this={canvas}
-    on:mousemove={handleMouseMove}
-    on:mouseenter={handleMouseEnter}
-    on:mouseleave={handleMouseLeave}
-    class="particle-wave"
-  />
-  
-  <style>
-    .particle-wave {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: transparent;
-    }
-  </style> --> 
diff --git a/web/src/lib/components/home/ParticleSystem.ts b/web/src/lib/components/home/ParticleSystem.ts
deleted file mode 100644
index a73191b7..00000000
--- a/web/src/lib/components/home/ParticleSystem.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-// Note: This can be deleted. It is now in components/ui/connections/ParticleSystem.ts
-
-//import type { Particle } from '$lib/types/interfaces/particle';
-//import { generateGradientColor } from '$lib/utils/colors';
-//
-//export class ParticleSystem {
-//  private particles: Particle[] = [];
-//  private width: number;
-//  private height: number;
-//  private mouseX: number = 0;
-//  private mouseY: number = 0;
-//  private targetMouseX: number = 0;
-//  private targetMouseY: number = 0;
-//
-//  constructor(
-//    private readonly count: number,
-//    private readonly baseSize: number,
-//    private readonly speed: number,
-//    width: number,
-//    height: number
-//  ) {
-//    this.width = width;
-//    this.height = height;
-//    this.mouseX = width / 2;
-//    this.mouseY = height / 2;
-//    this.targetMouseX = this.mouseX;
-//    this.targetMouseY = this.mouseY;
-//    this.initParticles();
-//  }
-//
-//  private initParticles(): void {
-//    this.particles = [];
-//    for (let i = 0; i < this.count; i++) {
-//      // Distribute particles across the entire width
-//      const x = Math.random() * this.width;
-//      // Distribute particles vertically around the middle with some variation
-//      const yOffset = (Math.random() - 0.5) * 100;
-//
-//      this.particles.push({
-//        x,
-//        y: this.height / 2 + yOffset,
-//        baseY: this.height / 2 + yOffset,
-//        speed: (Math.random() - 0.5) * this.speed * 0.5, // Reduced base speed
-//        angle: Math.random() * Math.PI * 2,
-//        size: this.baseSize * (0.8 + Math.random() * 0.4),
-//        color: generateGradientColor(this.height / 2 + yOffset, this.height),
-//        velocityX: (Math.random() - 0.5) * this.speed // Reduced initial velocity
-//      });
-//    }
-//  }
-//
-//  public updateDimensions(width: number, height: number): void {
-//    this.width = width;
-//    this.height = height;
-//    this.mouseX = width / 2;
-//    this.mouseY = height / 2;
-//    this.targetMouseX = this.mouseX;
-//    this.targetMouseY = this.mouseY;
-//    this.initParticles();
-//  }
-//
-//  public updateMousePosition(x: number, y: number): void {
-//    this.targetMouseX = x;
-//    this.targetMouseY = y;
-//  }
-//
-//  public update(): void {
-//    // Smooth mouse movement
-//    this.mouseX += (this.targetMouseX - this.mouseX) * 0.05; // Slower mouse tracking
-//    this.mouseY += (this.targetMouseY - this.mouseY) * 0.05;
-//
-//    this.particles.forEach(particle => {
-//      // Update horizontal position with constant motion
-//      particle.x += particle.velocityX;
-//
-//      // Wave motion
-//      particle.angle += particle.speed;
-//      const waveAmplitude = 30 * (this.mouseY / this.height); // Reduced amplitude
-//      const frequencyFactor = (this.mouseX / this.width);
-//
-//      // Calculate vertical position with wave effect
-//      particle.y = particle.baseY + 
-//        Math.sin(particle.angle * frequencyFactor + particle.x * 0.01) * // Slower wave
-//        waveAmplitude;
-//
-//      // Update particle color based on position
-//      particle.color = generateGradientColor(particle.y, this.height);
-//
-//      // Screen wrapping with position preservation
-//      if (particle.x < 0) {
-//        particle.x = this.width;
-//        particle.baseY = this.height / 2 + (Math.random() - 0.5) * 100;
-//      }
-//      if (particle.x > this.width) {
-//        particle.x = 0;
-//        particle.baseY = this.height / 2 + (Math.random() - 0.5) * 100;
-//      }
-//
-//      // Very subtle velocity adjustment to maintain spread
-//      if (Math.abs(particle.velocityX) < 0.1) {
-//        particle.velocityX += (Math.random() - 0.5) * 0.02;
-//      }
-//
-//      // Gentle velocity dampening
-//      particle.velocityX *= 0.99;
-//    });
-//  }
-//
-//  public getParticles(): Particle[] {
-//    return this.particles;
-//  }
-//}
diff --git a/web/src/lib/components/home/Terminal.svelte b/web/src/lib/components/home/Terminal.svelte
deleted file mode 100644
index 2f81d7ba..00000000
--- a/web/src/lib/components/home/Terminal.svelte
+++ /dev/null
@@ -1,184 +0,0 @@
-<!-- This file can be deleted. It is now in ui/components/terminal/Terminal.svelte -->
-
-<!-- <script lang="ts">
-  import { onMount } from 'svelte';
-  // import { fade } from 'svelte/transition';
-  import { goto } from '$app/navigation';
-
-  let mounted = false;
-  let currentCommand = '';
-  let commandHistory: string[] = [];
-  let showCursor = true;
-
-  let terminalContent = '';
-  let typing = false;
-  
-  const pages = {
-    home: 'Welcome to Fabric\n\nType `help` to see available commands.',
-    about: 'About Fabric',
-    chat: 'Enter `chat` to start a chat session.',
-    posts: 'Enter `posts` to view blog posts.',
-    tags: 'Enter `tags` to view tags.',
-    contact: 'Enter `contact` to view contact info.',
-    help: `Available commands:
-- help: Show this help message
-- about: Navigate to About page
-- chat: Start a chat session
-- posts: View all blog posts
-- tags: Browse content by tags
-- contact: Get in touch
-- clear: Clear the terminal
-- ls: List available pages`,
-  };
-
-  // Simulate typing effect
-  async function typeContent(content: string) {
-    typing = true;
-    terminalContent = '';
-    for (const char of content) {
-      terminalContent += char;
-      await new Promise(resolve => setTimeout(resolve, 20));
-    }
-    typing = false;
-  }
-
-  function handleCommand(cmd: string) {
-    commandHistory = [...commandHistory, cmd];
-    
-    switch (cmd) {
-      case 'clear':
-        terminalContent = '';
-        break;
-      case 'help':
-        typeContent(pages.help);
-        break;
-      case 'about':
-        goto('/about');
-        break;
-      case 'chat':
-        goto('/chat');
-        break;
-      case 'posts': 
-        goto('/posts');
-        break;
-      case 'tags':
-        goto('/tags');
-        break;
-      case 'contact':
-        goto('/contact');
-        break;
-      case 'ls':
-        typeContent(Object.keys(pages).join('\n'));
-        break;
-      default:
-          const page = cmd.slice(3);
-          if (pages[page]) {
-            typeContent(pages[page]);
-          } else {
-            typeContent(`Error: Page '${page}' not found`);
-          }
-        }
-    }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (typing) return;
-
-    if (event.key === 'Enter') {
-      handleCommand(currentCommand.trim());
-      currentCommand = '';
-    }
-  }
-
-  onMount(() => {
-    mounted = true;
-    setInterval(() => {
-      showCursor = !showCursor;
-    }, 500);
-
-    // Initial content
-    typeContent(pages.home);
-  });
-</script>
-
-<div class="pt-2 pb-8 px-4">
-  <div class="container mx-auto max-w-4xl">
-    <div class="terminal-window backdrop-blur-sm">
-      <!-- Terminal header
-            Comment Continued -->
-<!--      <div class="terminal-header flex items-center gap-2 px-4 py-2 border-b border-gray-700/50">
-        <div class="flex gap-2">
-          <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
-          <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
-          <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
-        </div>
-        <span class="text-sm text-gray-400 ml-2">me@localhost</span>
-      </div>
-
-      <div class="p-6">
-        <div class="mb-4 whitespace-pre-wrap terminal-text leading-relaxed">{terminalContent}</div>
-
-        <!-- Command input 
-              Comment Continued -->
-<!--        {#if mounted}
-          <div class="flex items-center command-input">
-            <span class="mr-2 terminal-prompt font-bold">$</span>
-            <!-- {#if showCursor}
-              <span class="animate-blink terminal-text">▋</span>
-            {/if} -->
-<!--             <input
-              type="text"
-              bind:value={currentCommand}
-              on:keydown={handleKeydown}
-              class="flex-1 bg-transparent border-none outline-none terminal-text caret-primary-500"
-              placeholder="Type a command..."
-            />
-          </div>
-        {/if}
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  .terminal-window {
-    @apply rounded-lg border border-gray-700/50 bg-gray-900/95 shadow-2xl;
-    box-shadow: 0 0 60px -15px rgba(0, 0, 0, 0.3);
-  }
-
-  .terminal-text {
-    @apply font-mono text-green-400/90;
-  }
-
-  .terminal-prompt {
-    @apply text-blue-400/90;
-  }
-
-  input::placeholder {
-    @apply text-gray-600;
-  }
-
-  /* .animate-blink {
-    animation: blink 1s step-end infinite;
-    flex-col: 1; 
-
-  }*/
-
-  @keyframes blink {
-    50% {
-      opacity: 0;
-    }
-  }
-
-  /* Custom scrollbar */
-  ::-webkit-scrollbar {
-    @apply w-2;
-  }
-
-  ::-webkit-scrollbar-track {
-    @apply bg-gray-800/50 rounded-full;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    @apply bg-gray-600/50 rounded-full hover:bg-gray-500/50 transition-colors;
-  }
-</style> -->