diff --git a/50Days/day2/index.html b/50Days/day2/index.html
new file mode 100644
index 0000000..e506489
--- /dev/null
+++ b/50Days/day2/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+ Day 2: Progress Steps
+
+
+
+
+
+
+
diff --git a/50Days/day2/script.js b/50Days/day2/script.js
new file mode 100644
index 0000000..dc7e19b
--- /dev/null
+++ b/50Days/day2/script.js
@@ -0,0 +1,39 @@
+const progress = document.getElementById('progress');
+const prev = document.getElementById('prev');
+const next = document.getElementById('next');
+const circles = document.querySelectorAll('.circle');
+
+let currentActive = 1;
+
+next.addEventListener('click', () => {
+ if (currentActive < circles.length) {
+ currentActive++;
+ }
+
+ update();
+});
+
+prev.addEventListener('click', () => {
+ if (currentActive > 1) {
+ currentActive--;
+ }
+ update();
+});
+
+function update() {
+ currentActive === 1 ? (prev.disabled = true) : (prev.disabled = false);
+ currentActive === circles.length
+ ? (next.disabled = true)
+ : (next.disabled = false);
+
+ circles.forEach((circle, index) => {
+ if (index < currentActive) {
+ circle.classList.add('active');
+ } else {
+ circle.classList.remove('active');
+ }
+ });
+
+ progress.style.width =
+ ((currentActive - 1) / (circles.length - 1)) * 100 + '%';
+}
diff --git a/50Days/day2/style.css b/50Days/day2/style.css
new file mode 100644
index 0000000..26fc0b7
--- /dev/null
+++ b/50Days/day2/style.css
@@ -0,0 +1,99 @@
+@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
+
+:root {
+ --line-border-fill: #3498db;
+ --line-border-empty: #e0e0e0;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Muli', sans-serif;
+ background-color: #f6f7fb;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+.container {
+ text-align: center;
+}
+
+.progress-container {
+ display: flex;
+ justify-content: space-between;
+ position: relative;
+ margin-bottom: 30px;
+ max-width: 100%;
+ width: 350px;
+}
+
+.progress-container::before {
+ content: '';
+ background-color: var(--line-border-empty);
+ position: absolute;
+ top: 50%;
+ left: 0;
+ height: 4px;
+ width: 100%;
+ transform: translateY(-50%);
+ z-index: -1;
+ transition: 0.4s ease;
+}
+
+.progress {
+ background-color: var(--line-border-fill);
+ position: absolute;
+ top: 50%;
+ left: 0;
+ height: 4px;
+ width: 0%;
+ transform: translateY(-50%);
+ z-index: -1;
+ transition: 0.4s ease;
+}
+
+.circle {
+ background-color: #fff;
+ color: #999;
+ border-radius: 50%;
+ height: 30px;
+ width: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 3px solid var(--line-border-empty);
+ transition: 0.4s ease;
+}
+
+.circle.active {
+ border-color: var(--line-border-fill);
+}
+
+.btn {
+ background-color: var(--line-border-fill);
+ position: relative;
+ color: #fff;
+ border: 0;
+ border-color: var(--line-border-fill);
+ border-radius: 6px;
+ cursor: pointer;
+ font-family: inherit;
+ padding: 8px 30px;
+ margin: 5px;
+ font-size: 14px;
+}
+
+.btn:active {
+ transform: scale(0.98);
+}
+
+.btn:disabled {
+ background-color: var(--line-border-empty);
+ cursor: not-allowed;
+}