diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..ab47a38
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MISSION CONTROL // DevOps Kokpit</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <!-- Arka plan ışık kümeleri -->
+  <div class="bg-orb bg-orb--a"></div>
+  <div class="bg-orb bg-orb--b"></div>
+  <div class="scanlines"></div>
+
+  <!-- ÜST BAR -->
+  <header class="topbar glass">
+    <div class="brand">
+      <span class="brand-bolt"></span>
+      <div>
+        <h1>MISSION&nbsp;CONTROL</h1>
+        <p class="tagline">siber sunucu · devops izleme kokpiti</p>
+      </div>
+    </div>
+    <div class="topstats">
+      <div class="stat">
+        <span class="dot dot--on"></span>
+        <div><b id="serverStatus">LINKING…</b><small>uplink</small></div>
+      </div>
+      <div class="stat"><div><b id="runCount">6</b><small>running procs</small></div></div>
+      <div class="stat"><div><b id="uptime">0:00</b><small>uptime</small></div></div>
+      <div class="stat"><div><b id="alarmCount">0</b><small>alerts</small></div></div>
+    </div>
+  </header>
+
+  <!-- METRİK GAUGE'LERİ -->
+  <section class="row row--gauges">
+    <div class="glass panel gauge-panel">
+      <h2 class="panel-title"><span class="accent accent--cyan"></span>CPU Core</h2>
+      <canvas id="gaugeCpu" width="220" height="220"></canvas>
+      <div class="gauge-label"><b id="cpuPct">0%</b><span>consolidated load</span></div>
+    </div>
+    <div class="glass panel gauge-panel">
+      <h2 class="panel-title"><span class="accent accent--green"></span>Memory Bank</h2>
+      <canvas id="gaugeMem" width="220" height="220"></canvas>
+      <div class="gauge-label"><b id="memPct">0%</b><span><span id="memText">0 MB</span> / 8192 MB</span></div>
+    </div>
+    <div class="glass panel gauge-panel">
+      <h2 class="panel-title"><span class="accent accent--amber"></span>Network Matrix</h2>
+      <canvas id="gaugeNet" width="220" height="220"></canvas>
+      <div class="gauge-label">
+        <b id="netVal">0.0</b><span>▼</span>
+        <span class="net-sub">in <b id="netIn">0.0</b> / out <b id="netOut">0.0</b> Mbps</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- CPU GRAFİK + OLAYLAR -->
+  <section class="row row--primary">
+    <div class="glass panel chart-panel">
+      <div class="panel-head">
+        <h2 class="panel-title"><span class="accent accent--cyan"></span>CPU Load Trace · last 30s</h2>
+        <div class="legend">
+          <span class="lg lg--cyan"></span>cpu %
+          <span class="lg lg--amber"></span>threshold
+        </div>
+      </div>
+      <canvas id="cpuChart" width="980" height="240"></canvas>
+      <div class="chart-axis"><span> 0:30</span><span>0:20</span><span>0:10</span><span>now</span></div>
+    </div>
+
+    <div class="glass panel disk-panel">
+      <h2 class="panel-title"><span class="accent accent--red"></span>Storage Array</h2>
+      <div class="disk-gauge-wrap">
+        <div class="disk-score" id="diskScore">0</div>
+        <div class="disk-unit">%&nbsp;used</div>
+      </div>
+      <canvas id="diskGauge" width="200" height="200"></canvas>
+      <p class="disk-caption"><b id="diskText">0 MB</b> of 1024 GB partition /dev/sda2</p>
+    </div>
+  </section>
+
+  <!-- PROSES TABLOSU -->
+  <section class="glass panel table-panel">
+    <div class="panel-head">
+      <h2 class="panel-title"><span class="accent accent--green"></span>Active Processes</h2>
+      <span class="badge" id="procBadge">6 online</span>
+    </div>
+    <div class="table-scroll">
+      <table id="procTable">
+        <thead>
+          <tr>
+            <th>PID</th>
+            <th>SERVICE</th>
+            <th>CPU %</th>
+            <th>MEMORY</th>
+            <th>STATUS</th>
+            <th class="th-action">ACTION</th>
+          </tr>
+        </thead>
+        <tbody id="procBody"></tbody>
+      </table>
+      <div id="procEmpty" class="empty hidden">no running processes — grid is dark</div>
+    </div>
+  </section>
+
+  <!-- OLAY KONSOLU -->
+  <section class="glass panel log-panel">
+    <div class="panel-head">
+      <h2 class="panel-title"><span class="accent accent--amber"></span>Event Stream</h2>
+      <span class="badge live-badge"><span class="dot-pulse"></span>LIVE</span>
+    </div>
+    <div id="logConsole" class="console" aria-live="polite"></div>
+  </section>
+
+  <script src="app.js"></script>
+</body>
+</html>
