diff --git a/001-counter-app/khalid586/index.html b/001-counter-app/khalid586/index.html
new file mode 100644
index 0000000..b3f5ea5
--- /dev/null
+++ b/001-counter-app/khalid586/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Counter App</title>
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body class="bg-gray-100 flex items-center justify-center min-h-screen">
+
+  <!-- Counter App Container -->
+  <div class="bg-white shadow-lg rounded-lg p-8 text-center">
+    <h1 class="text-2xl font-bold text-gray-800 mb-4">Counter App</h1>
+
+    <!-- Counter Display -->
+    <div id="counter" class="text-4xl font-bold text-gray-700">0</div>
+
+    <!-- Counter Controls -->
+    <div class="mt-6">
+      <button id="increment"
+        class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mr-2">+</button>
+      <button id="decrement" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded ml-2">-</button>
+    </div>
+  </div>
+
+  <script src="./script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/001-counter-app/khalid586/script.js b/001-counter-app/khalid586/script.js
new file mode 100644
index 0000000..695dd39
--- /dev/null
+++ b/001-counter-app/khalid586/script.js
@@ -0,0 +1,7 @@
+const decrementButton = document.getElementById("decrement");
+
+function decrement() {
+  alert("decrement button has been clicked!");
+}
+
+decrementButton.addEventListener("click", decrement);
