diff --git a/src/dashboard.html b/src/dashboard.html
new file mode 100644
index 0000000..0a1ca13
--- /dev/null
+++ b/src/dashboard.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Admin Dashboard - Water Levels</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+  <style>
+    body {
+      background-color: #fafafa;
+      font-family: "Montserrat", sans-serif;
+    }
+    .container {
+      margin: 60px auto;
+      max-width: 960px;
+    }
+    h1.title {
+      text-align: center;
+      color: grey;
+    }
+    h2 {
+      text-align: center;
+      font-weight: 800;
+      margin-top: 10px;
+    }
+    .tank {
+      width: 200px;
+      height: 200px;
+      margin: 0 auto;
+    }
+    .zone {
+      color: white;
+      text-align: center;
+      min-height: 100px;
+      padding-top: 20px;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1 class="title">Admin Dashboard - Water Monitoring</h1>
+    <div class="row">
+      <div class="col-lg-3">
+        <div class="tank tank1"></div>
+        <h2>Tank 1</h2>
+      </div>
+      <div class="col-lg-3">
+        <div class="tank tank2"></div>
+        <h2>Tank 2</h2>
+      </div>
+      <div class="col-lg-3">
+        <div class="tank tank3"></div>
+        <h2>Tank 3</h2>
+      </div>
+      <div class="col-lg-3">
+        <div class="tank tank4"></div>
+        <h2>Tank 4</h2>
+      </div>
+    </div>
+
+    <div class="row" style="margin-top:30px;">
+      <div class="col-lg-4 zone" style="background-color:#fe5e21;">Danger Zone</div>
+      <div class="col-lg-4 zone" style="background-color:#ffb30c;">Warning Zone</div>
+      <div class="col-lg-4 zone" style="background-color:#2ed351;">Safe Zone</div>
+    </div>
+    <hr>
+    <p style="text-align:center;"><strong>Made by Vinit Shahdeo</strong></p>
+  </div>
+
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+  <script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script>
+  <script>
+    // 🔐 Authentication check
+    if(localStorage.getItem("isAuthenticated") !== "true"){
+      alert("Access denied! Please login first.");
+      window.location.href = "login.html";
+    }
+
+    // Firebase config (from your file)
+    var config = {
+      apiKey: "AIzaSyCpr964V-n-y0PDZgfurtDPzuwZc040LJ8",
+      authDomain: "experiment-1-98c23.firebaseapp.com",
+      databaseURL: "https://experiment-1-98c23.firebaseio.com",
+      projectId: "experiment-1-98c23",
+      storageBucket: "experiment-1-98c23.appspot.com",
+      messagingSenderId: "358789021543",
+      appId: "1:358789021543:web:abc7e4a90e9628278d79c2"
+    };
+    firebase.initializeApp(config);
+
+    // Function to update a tank water level
+    function updateTank(selector, dbNode){
+      firebase.database().ref(dbNode).on('value', function(snapshot){
+        var level = snapshot.val();
+        $(selector).createWaterBall({ targetRange: level });
+      });
+    }
+
+    // Connect tanks to Firebase
+    updateTank(".tank1", "WaterLevel1");
+    updateTank(".tank2", "WaterLevel2");
+    updateTank(".tank3", "WaterLevel3");
+    updateTank(".tank4", "WaterLevel4");
+  </script>
+</body>
+</html>
diff --git a/src/home.html b/src/home.html
index edc1ce8..a39d685 100644
--- a/src/home.html
+++ b/src/home.html
@@ -120,7 +120,9 @@ <h1>Safe Zone</h1>
         <center><strong>Made by Vinit Shahdeo</strong></center>
       </p>
     </div>
-
+<div class="row">
+      <center><button class="btn btn-danger pl-4 pr-4 pt-2 pb-2" onclick="gotoadmin()">Go To admin dashboard</button></center>
+     </div>
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     <script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
@@ -141,7 +143,9 @@ <h1>Safe Zone</h1>
             : null;
      
     }*/
-
+        function gotoadmin() {
+    window.location.href = "login.html"; 
+  }
       function getQueryStringValue(key) {
         return decodeURIComponent(
           window.location.search.replace(
diff --git a/src/login.html b/src/login.html
new file mode 100644
index 0000000..254b636
--- /dev/null
+++ b/src/login.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Admin Login / Signup</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    >
+    <style>
+      body {
+        background: #f8f9fa;
+      }
+      .auth-container {
+        max-width: 400px;
+        margin: 60px auto;
+        padding: 30px;
+        background: white;
+        border-radius: 10px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      }
+      .toggle-link {
+        color: #0d6efd;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="auth-container">
+      <div id="loginForm">
+        <h3 class="text-center mb-4">Admin Page</h3>
+        <h4 class="text-center">Login to continue</h4>
+        <div class="mb-3">
+          <label>Email</label>
+          <input type="email" id="loginEmail" class="form-control" placeholder="Enter email">
+        </div>
+        <div class="mb-3">
+          <label>Password</label>
+          <input type="password" id="loginPassword" class="form-control" placeholder="Enter password">
+        </div>
+        <button class="btn btn-primary w-100" onclick="login()">Login</button>
+        <p class="mt-3 text-center">Don't have an account? 
+          <span class="toggle-link" onclick="toggleForms()">Sign Up</span>
+        </p>
+      </div>
+
+      <!-- Signup Form -->
+      <div id="signupForm" style="display:none;">
+        <h3 class="text-center mb-4">Admin Page</h3>
+        <h4 class="text-center">Sign-Up to continue</h4>
+        <div class="mb-3">
+          <label>Email</label>
+          <input type="email" id="signupEmail" class="form-control" placeholder="Enter email">
+        </div>
+        <div class="mb-3">
+          <label>Password</label>
+          <input type="password" id="signupPassword" class="form-control" placeholder="Enter password">
+        </div>
+        <button class="btn btn-success w-100" onclick="signup()">Sign Up</button>
+        <p class="mt-3 text-center">Already have an account? 
+          <span class="toggle-link" onclick="toggleForms()">Login</span>
+        </p>
+      </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+      function toggleForms() {
+        const login = document.getElementById("loginForm");
+        const signup = document.getElementById("signupForm");
+        login.style.display = login.style.display === "none" ? "block" : "none";
+        signup.style.display = signup.style.display === "none" ? "block" : "none";
+      }
+    //for now we preset a password that will be required to login or signup
+      function signup() {
+  const email = document.getElementById("signupEmail").value;
+  const password = document.getElementById("signupPassword").value;
+
+  if (!email || !password) return alert("Please fill all fields!");
+
+  // save email only (optional)
+  localStorage.setItem("adminEmail", email);
+
+  // check if entered password matches preset
+  const presetPassword = "123abc";
+
+  if (password === presetPassword) {
+    localStorage.setItem("adminPassword", presetPassword);
+    localStorage.setItem("isAuthenticated", "true");
+    alert("Signup successful! Login now.");
+    toggleForms(); // switch to login form
+  } else {
+    alert("Invalid credentials! Use the correct preset password.");
+  }
+}
+
+function login() {
+  const email = document.getElementById("loginEmail").value;
+  const password = document.getElementById("loginPassword").value;
+
+  const storedEmail = localStorage.getItem("adminEmail");
+  const storedPassword = localStorage.getItem("adminPassword");
+
+  if (email === storedEmail && password === storedPassword) {
+    localStorage.setItem("isAuthenticated", "true");
+    alert("Login successful!");
+    window.location.href = "dashboard.html"; // redirect
+  } else {
+    alert("Invalid credentials!");
+  }
+}
+    </script>
+  </body>
+</html>
