diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..bf94c17
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pathfinder AI — A* Görsel Labirent Çözücü</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧠</text></svg>">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>🧠 Pathfinder AI</h1>
+      <p class="subtitle">A* Algoritması ile Görsel Labirent Çözücü</p>
+    </header>
+
+    <div class="controls">
+      <button id="btn-bul" class="btn btn-primary">🚀 Yolu Bul</button>
+      <button id="btn-sifirla" class="btn btn-secondary">🧹 Sıfırla</button>
+      <button id="btn-temizle" class="btn btn-secondary">🗑 Duvarları Sil</button>
+      <div class="speed-wrap">
+        <label for="speed">Hız:</label>
+        <input type="range" id="speed" min="1" max="10" value="6">
+        <span id="speed-value">6</span>
+      </div>
+    </div>
+
+    <div id="stats" class="stats">
+      <div class="stat"><span class="dot dot-start"></span> Başlangıç</div>
+      <div class="stat"><span class="dot dot-goal"></span> Bitiş</div>
+      <div class="stat" id="visited-count">Ziyaret: 0</div>
+      <div class="stat" id="path-length">Yol: —</div>
+    </div>
+
+    <div class="grid-wrap">
+      <div id="grid" class="grid"></div>
+    </div>
+
+    <div class="legend">
+      <div class="legend-item"><span class="legend-swatch wall-swatch"></span> Duvar (surükleyerek çiz)</div>
+      <div class="legend-item"><span class="legend-swatch start-swatch"></span> Başlangıç (sürükle)</div>
+      <div class="legend-item"><span class="legend-swatch goal-swatch"></span> Bitiş (sürükle)</div>
+      <div class="legend-item"><span class="legend-swatch visited-swatch"></span> Ziyaret edilen</div>
+      <div class="legend-item"><span class="legend-swatch path-swatch"></span> En kısa yol</div>
+      <div class="legend-item"><span class="legend-swatch current-swatch"></span> Anlık açık düğüm</div>
+    </div>
+  </div>
+
+  <!-- Yol Bulunamadı Tostu -->
+  <div id="toast" class="toast" role="alert">
+    <span class="toast-icon">⚠️</span>
+    <span class="toast-text">Yol Bulunamadı!</span>
+    <div class="toast-sub">Etrafı tamamen duvarla kapattın — bir boşluk bırak ve tekrar dene.</div>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>
