diff --git a/Z2/app/index.html b/Z2/app/index.html
new file mode 100644
index 0000000..ec067af
--- /dev/null
+++ b/Z2/app/index.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>DevOps Dashboard</title>
+  <style>
+    body {
+      font-family: Arial;
+      background: #0f172a;
+      color: white;
+      text-align: center;
+      padding: 40px;
+    }
+
+    h1 {
+      margin-bottom: 30px;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(2, 250px);
+      gap: 20px;
+      justify-content: center;
+    }
+
+    .card {
+      background: #1e293b;
+      padding: 20px;
+      border-radius: 12px;
+    }
+
+    input {
+      padding: 8px;
+      margin-top: 10px;
+      width: 70%;
+    }
+
+    button {
+      padding: 8px 15px;
+      margin-top: 10px;
+      cursor: pointer;
+    }
+
+    ul {
+      list-style: none;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+
+<h1>🚀 DevOps Dashboard</h1>
+
+<div class="grid">
+  <div class="card">
+    <h3>⏱ DB Time</h3>
+    <p id="time">Loading...</p>
+  </div>
+
+  <div class="card">
+    <h3>🖥 Pod</h3>
+    <p id="host">Loading...</p>
+  </div>
+
+  <div class="card">
+    <h3>📊 Requests</h3>
+    <p id="count">0</p>
+  </div>
+
+  <div class="card">
+    <h3>🔌 Status</h3>
+    <p id="status">Checking...</p>
+  </div>
+</div>
+
+<!-- ADD MESSAGE -->
+<div class="card">
+  <h3>➕ Add Message</h3>
+  <input id="msg" placeholder="Enter message">
+  <br>
+  <button onclick="addMessage()">Add</button>
+</div>
+
+<!-- MESSAGE LIST -->
+<div class="card">
+  <h3>📜 Stored Messages</h3>
+  <ul id="list"></ul>
+</div>
+
+<script>
+async function loadStatus() {
+  const res = await fetch("/api/status");
+  const data = await res.json();
+
+  document.getElementById("time").innerText = data.time;
+  document.getElementById("host").innerText = data.hostname;
+  document.getElementById("count").innerText = data.requests;
+  document.getElementById("status").innerText = data.status;
+}
+
+async function addMessage() {
+  const text = document.getElementById("msg").value;
+
+  await fetch("/api/add", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ text })
+  });
+
+  loadMessages();
+}
+
+async function loadMessages() {
+  const res = await fetch("/api/messages");
+  const data = await res.json();
+
+  const list = document.getElementById("list");
+  list.innerHTML = "";
+
+  data.forEach(item => {
+    const li = document.createElement("li");
+    li.innerText = item.text;
+    list.appendChild(li);
+  });
+}
+
+// auto refresh
+setInterval(loadStatus, 3000);
+setInterval(loadMessages, 3000);
+
+loadStatus();
+loadMessages();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Z2/app/server.js b/Z2/app/server.js
index acaae26..e5b4137 100644
--- a/Z2/app/server.js
+++ b/Z2/app/server.js
@@ -1,8 +1,17 @@
 const express = require("express");
 const { Pool } = require("pg");
+const os = require("os");
+const path = require("path");
 
 const app = express();
 
+// middleware
+app.use(express.json());
+app.use(express.static(path.join(__dirname)));
+
+let counter = 0;
+
+// DB connection
 const pool = new Pool({
   host: "postgres-service",
   user: "postgres",
@@ -11,15 +20,93 @@ const pool = new Pool({
   port: 5432,
 });
 
-app.get("/", async (req, res) => {
+// 🔥 Wait for DB
+async function waitForDB() {
+  let connected = false;
+  while (!connected) {
+    try {
+      await pool.query("SELECT 1");
+      connected = true;
+      console.log("✅ Database connected");
+    } catch (err) {
+      console.log("⏳ Waiting for database...");
+      await new Promise(res => setTimeout(res, 2000));
+    }
+  }
+}
+
+async function initDB() {
+  try {
+    await pool.query(`
+      CREATE TABLE IF NOT EXISTS messages (
+        id SERIAL PRIMARY KEY,
+        text VARCHAR(255)
+      )
+    `);
+    console.log("✅ Table ready");
+  } catch (err) {
+    console.log("TABLE ERROR:", err.message);
+  }
+}
+
+// 🔹 Status API
+app.get("/api/status", async (req, res) => {
+  counter++;
+
   try {
     const result = await pool.query("SELECT NOW()");
-    res.send("DB Time: " + result.rows[0].now);
+    res.json({
+      time: result.rows[0].now,
+      hostname: os.hostname(),
+      requests: counter,
+      status: "Connected"
+    });
   } catch (err) {
-    res.send("Database not ready");
+    res.json({
+      time: "N/A",
+      hostname: os.hostname(),
+      requests: counter,
+      status: "Database not ready"
+    });
   }
 });
 
-app.listen(3000, () => {
-  console.log("Server running on port 3000");
-});
\ No newline at end of file
+// 🔹 Insert data
+app.post("/api/add", async (req, res) => {
+  const { text } = req.body;
+
+  try {
+    await pool.query(
+      "INSERT INTO messages (text) VALUES ($1)",
+      [text]
+    );
+    res.send("Inserted");
+  } catch (err) {
+    console.log("INSERT ERROR:", err);
+    res.status(500).send("Error inserting data");
+  }
+});
+
+// 🔹 Get data
+app.get("/api/messages", async (req, res) => {
+  try {
+    const result = await pool.query(
+      "SELECT * FROM messages ORDER BY id DESC"
+    );
+    res.json(result.rows);
+  } catch (err) {
+    console.log("FETCH ERROR:", err);
+    res.status(500).send("Error fetching data");
+  }
+});
+
+async function startServer() {
+  await waitForDB();
+  await initDB();
+
+  app.listen(3000, () => {
+    console.log("🚀 Server running on port 3000");
+  });
+}
+
+startServer();
\ No newline at end of file
diff --git a/Z2/k8s/service.yaml b/Z2/k8s/service.yaml
index b38a40a..f22a835 100644
--- a/Z2/k8s/service.yaml
+++ b/Z2/k8s/service.yaml
@@ -8,6 +8,6 @@ spec:
   selector:
     app: web-app
   ports:
-    - port: 80
+    - port: 60
       targetPort: 3000
       nodePort: 30007
\ No newline at end of file
