diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..5298e7617 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,8 +1,34 @@
-function setAlarm() {}
+var audio = new Audio("alarmsound.mp3");
 
-// DO NOT EDIT BELOW HERE
+let countdown;
 
-var audio = new Audio("alarmsound.mp3");
+function formatTime(seconds) {
+  let mins = Math.floor(seconds / 60);
+  let secs = seconds % 60;
+  return String(mins).padStart(2, "0") + ":" + String(secs).padStart(2, "0");
+}
+
+function setAlarm() {
+  let seconds = parseInt(document.getElementById("alarmSet").value);
+  if (!Number.isFinite(seconds) || seconds < 1) {
+    throw new Error("Please enter a valid number greater than 0");
+  }
+  clearInterval(countdown);
+  document.getElementById("timeRemaining").textContent =
+    "Time Remaining: " + formatTime(seconds);
+
+  countdown = setInterval(() => {
+    seconds--;
+    document.getElementById("timeRemaining").textContent =
+      "Time Remaining: " + formatTime(seconds);
+
+    if (seconds <= 0) {
+      clearInterval(countdown);
+      document.body.classList.add("alarm-finished");
+      playAlarm();
+    }
+  }, 1000);
+}
 
 function setup() {
   document.getElementById("set").addEventListener("click", () => {
@@ -19,7 +45,9 @@ function playAlarm() {
 }
 
 function pauseAlarm() {
+  clearInterval(countdown);
   audio.pause();
+  document.body.classList.remove("alarm-finished");
 }
 
 window.onload = setup;
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
index 48e2e80d9..92b352229 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Alarm clock app</title>
   </head>
   <body>
     <div class="centre">
@@ -12,8 +12,10 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <label for="alarmSet">Set time to:</label>
       <input id="alarmSet" type="number" />
 
-      <button id="set" type="button">Set Alarm</button>
-      <button id="stop" type="button">Stop Alarm</button>
+      <div class="button-group">
+        <button id="set" type="button">Set Alarm</button>
+        <button id="stop" type="button">Stop Alarm</button>
+      </div>
     </div>
     <script src="alarmclock.js"></script>
   </body>
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..ef263a6e9 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -1,15 +1,108 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
+  transition: background 0.4s ease;
+}
+
+.alarm-finished {
+  background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
+  animation: flashBg 0.6s infinite alternate;
+}
+@keyframes flashBg {
+  0% {
+    background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
+  }
+  100% {
+    background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
+  }
+}
+
 .centre {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
+  width: 360px;
+  padding: 26px;
+  background: #ffffff;
+   border-radius: 20px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  text-align: center;
+}
+
+label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: #555;
+}
+
+#timeRemaining {
+  margin: 0 0 22px;
+  font-size: 30px;
+  font-weight: bold;
+  color: #333;
+}
+
+label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: #555;
 }
 
 #alarmSet {
-  margin: 20px;
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  border: 2px solid #ddd;
+  border-radius: 12px;
+  outline: none;
+  margin-bottom: 18px;
+  transition: 0.2s;
 }
 
-h1 {
-  text-align: center;
+#alarmSet:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 6px rgba(102, 126, 234, 0.4);
+}
+
+.button-group {
+  display: flex;
+  gap: 12px;
+}
+
+button {
+  flex: 1;
+  padding: 12px;
+  font-size: 15px;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  color: white;
+  font-weight: bold;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+#set {
+  background: #4CAF50; 
+}
+
+#set:hover {
+  background: #43a047;
+  transform: translateY(-2px);
+}
+
+#stop {
+  background: #f44336; 
+}
+
+#stop:hover {
+  background: #e53935;
+  transform: translateY(-2px);
 }
