diff --git a/src/app/page.tsx b/src/app/page.tsx
index b39a62c..26b699a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,13 @@
 'use client';
 
 import { useState } from 'react';
-import { Icon, WhyMyRatingLogo } from '@/components';
+import { Icon, WhyMyRatingLogo, InfrastructureDiagram } from '@/components';
 
-type TabId = 'home' | 'settings';
+type TabId = 'home' | 'infrastructure' | 'settings';
 
 const tabs: { id: TabId; label: string; icon: string }[] = [
   { id: 'home', label: 'Home', icon: 'star' },
+  { id: 'infrastructure', label: 'Infrastructure', icon: 'git-branch' },
   { id: 'settings', label: 'Settings', icon: 'settings' },
 ];
 
@@ -17,6 +18,7 @@ const whyratingLinks = [
   { name: 'Gmail', url: 'https://mail.google.com/mail/?authuser=info@whyrating.com', icon: 'mail', description: 'info@whyrating.com business email' },
   { name: 'Business Tracker', url: 'https://docs.google.com/spreadsheets/d/1ZCfS5GysnoSq__WN2dXKUag8hc89hlLnzQBtpBgubXc/edit?gid=0#gid=0', icon: 'table', description: 'Business tracking spreadsheet' },
   { name: 'Snappymail', url: 'http://nuc.lan:8082', icon: 'mail', description: 'Self-hosted email client' },
+  { name: 'WhyOps', url: 'http://whyops.nuc.lan', icon: 'settings', description: 'Scraping, pipelines & testing backoffice' },
 ];
 
 export default function Home() {
@@ -88,6 +90,23 @@ export default function Home() {
           </>
         )}
 
+        {activeTab === 'infrastructure' && (
+          <>
+            <div className="mb-8">
+              <h2 className="text-2xl font-semibold text-slate-900 dark:text-stone-100 mb-2">
+                System Architecture
+              </h2>
+              <p className="text-slate-500 dark:text-stone-500">
+                WhyRating infrastructure overview - drag nodes to rearrange, hover for details
+              </p>
+            </div>
+
+            <div className="bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm p-6 overflow-hidden">
+              <InfrastructureDiagram />
+            </div>
+          </>
+        )}
+
         {activeTab === 'settings' && (
           <div className="max-w-2xl">
             <div className="bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm p-6">