diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..043bb8e
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Numex Depo Yönetim Sistemi</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+    <h1>🏭 Numex Depo Yönetim Sistemi</h1>
+    <p class="alt">Çok lokasyonlu stok takibi, transferler ve düşük stok uyarıları</p>
+  </header>
+
+  <nav class="sekmeler">
+    <button class="sekm secili" data-sekme="lokasyonlar">Lokasyonlar</button>
+    <button class="sekm" data-sekme="urunler">Ürünler</button>
+    <button class="sekm" data-sekme="stok">Stok</button>
+    <button class="sekm" data-sekme="transfer">Transfer</button>
+    <button class="sekm" data-sekme="gecmis">Transfer Geçmişi</button>
+    <button class="sekm" data-sekme="uyari">Düşük Stok Uyarıları</button>
+  </nav>
+
+  <main>
+    <!-- LOKASYONLAR -->
+    <section id="sekme-lokasyonlar" class="panel aktif">
+      <div class="kart">
+        <h2>Yeni Lokasyon</h2>
+        <form id="lokasyon-form">
+          <input type="text" id="lokasyon-ad" placeholder="Lokasyon adı" required>
+          <input type="text" id="lokasyon-sehir" placeholder="Şehir (opsiyonel)">
+          <button class="btn btn-ekle" type="submit">Ekle</button>
+        </form>
+      </div>
+      <div class="kart">
+        <h2>Lokasyonlar</h2>
+        <table>
+          <thead><tr><th>ID</th><th>Ad</th><th>Şehir</th><th>Oluşturuldu</th><th></th></tr></thead>
+          <tbody id="lokasyon-tablo"></tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- ÜRÜNLER -->
+    <section id="sekme-urunler" class="panel">
+      <div class="kart">
+        <h2>Yeni Ürün</h2>
+        <form id="urun-form">
+          <input type="text" id="urun-ad" placeholder="Ürün adı" required>
+          <input type="text" id="urun-birim" placeholder="Birim (adet/kg)" value="adet">
+          <input type="number" id="urun-esik" placeholder="Düşük stok eşiği" min="0" value="0">
+          <button class="btn btn-ekle" type="submit">Ekle</button>
+        </form>
+      </div>
+      <div class="kart">
+        <h2>Ürünler</h2>
+        <table>
+          <thead><tr><th>ID</th><th>Ad</th><th>Birim</th><th>Düşük Stok Eşiği</th><th></th></tr></thead>
+          <tbody id="urun-tablo"></tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- STOK -->
+    <section id="sekme-stok" class="panel">
+      <div class="kart">
+        <h2>Lokasyon Bazlı Stok Seviyeleri</h2>
+        <div id="stok-gorunum"></div>
+      </div>
+    </section>
+
+    <!-- TRANSFER -->
+    <section id="sekme-transfer" class="panel">
+      <div class="kart">
+        <h2>Depolar Arası Transfer</h2>
+        <form id="transfer-form">
+          <select id="transfer-kaynak" required></select>
+          <select id="transfer-hedef" required></select>
+          <select id="transfer-urun" required></select>
+          <input type="number" id="transfer-miktar" placeholder="Miktar" min="1" required>
+          <button class="btn btn-transfer" type="submit">Transfer Yap</button>
+        </form>
+        <p class="mesaj" id="transfer-mesaj"></p>
+      </div>
+    </section>
+
+    <!-- TRANSFER GEÇMİŞİ -->
+    <section id="sekme-gecmis" class="panel">
+      <div class="kart">
+        <h2>Transfer Geçmişi</h2>
+        <table>
+          <thead><tr><th>Tarih</th><th>Ürün</th><th>Kaynak</th><th>→</th><th>Hedef</th><th>Miktar</th></tr></thead>
+          <tbody id="gecmis-tablo"></tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- DÜŞÜK STOK UYARILARI -->
+    <section id="sekme-uyari" class="panel">
+      <div class="kart">
+        <h2>Düşük Stok Uyarıları (Lokasyon Bazlı)</h2>
+        <table>
+          <thead><tr><th>Lokasyon</th><th>Ürün</th><th>Mevcut</th><th>Eşik</th><th>Durum</th></tr></thead>
+          <tbody id="uyari-tablo"></tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+
+  <script src="app.js"></script>
+</body>
+</html>
