diff --git a/bundle.js b/bundle.js
index 13b2d31..3a54073 100644
--- a/bundle.js
+++ b/bundle.js
@@ -4357,6 +4357,7 @@ async function steps_wizard (opts, protocol) {
   }
 
   let variables = []
+  let currentActiveStep = 0
 
   let _ = null
   if(protocol){
@@ -4370,8 +4371,6 @@ async function steps_wizard (opts, protocol) {
   <div class="steps-wizard main">
     <div class="steps-container">
       <div class="steps-slot"></div>
-      <button class="nav-arrow left" id="leftArrow">‹</button>
-      <button class="nav-arrow right" id="rightArrow">›</button>
     </div>
   </div>
   <style>
@@ -4379,19 +4378,13 @@ async function steps_wizard (opts, protocol) {
   `
 
   const style = shadow.querySelector('style')
-  const steps_container = shadow.querySelector('.steps-container')
   const steps_entries = shadow.querySelector('.steps-slot')
-  const leftArrow = shadow.querySelector('#leftArrow')
-  const rightArrow = shadow.querySelector('#rightArrow')
-  
   const subs = await sdb.watch(onbatch)
 
-  setupArrowNavigation()
-
   // for demo purpose
   render_steps([
     {name: "Optional Step", "type": "optional", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
-	  {name: "Step 2", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
+	  {name: "Step 2 testingasadasdadasdasdaasdasdsassss", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 3", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 4", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 5", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
@@ -4405,53 +4398,6 @@ async function steps_wizard (opts, protocol) {
   ])
 
   return el
-
-  function setupArrowNavigation() {
-    function updateArrows() {
-      const scrollLeft = steps_entries.scrollLeft
-      const maxScroll = steps_entries.scrollWidth - steps_entries.clientWidth
-      
-      if (scrollLeft > 0) {
-        leftArrow.classList.add('visible')
-        steps_container.classList.add('has-left-overflow')
-      } else {
-        leftArrow.classList.remove('visible')
-        steps_container.classList.remove('has-left-overflow')
-      }
-      
-      if (scrollLeft < maxScroll - 1) {
-        rightArrow.classList.add('visible')
-        steps_container.classList.add('has-right-overflow')
-      } else {
-        rightArrow.classList.remove('visible')
-        steps_container.classList.remove('has-right-overflow')
-      }
-    }
-
-    leftArrow.addEventListener('click', () => {
-      const stepWidth = steps_entries.children[0]?.offsetWidth || 200
-      steps_entries.scrollBy({
-        left: -(stepWidth + 8),
-        behavior: 'smooth'
-      })
-    })
-
-    rightArrow.addEventListener('click', () => {
-      const stepWidth = steps_entries.children[0]?.offsetWidth || 200
-      steps_entries.scrollBy({
-        left: stepWidth + 8,
-        behavior: 'smooth'
-      })
-    })
-
-    steps_entries.addEventListener('scroll', updateArrows)
-    
-    window.addEventListener('resize', () => {
-      setTimeout(updateArrows, 100)
-    })
-
-    setTimeout(updateArrows, 100)
-  }
   
   function onmessage ({ type, data }) {
     console.log('steps_ data', type, data)
@@ -4471,6 +4417,7 @@ async function steps_wizard (opts, protocol) {
       const btn = document.createElement('button')
       btn.className = 'step-button'
       btn.textContent = step.name + (step.type === 'optional' ? ' *' : '')
+      btn.title = btn.textContent
       btn.setAttribute('data-step', index + 1)
 
       const accessible = can_access(index, steps)
@@ -4483,28 +4430,40 @@ async function steps_wizard (opts, protocol) {
 
       btn.classList.add(`step-${status}`)
 
+      if (index === currentActiveStep - 1 && index > 0) {
+        btn.classList.add('back')
+      }
+      if (index === currentActiveStep + 1 && index < steps.length - 1) {
+        btn.classList.add('next')
+      }
+      if (index === currentActiveStep) {
+        btn.classList.add('active')
+      }
+
       btn.onclick = async () => {
         console.log('Clicked:', step)
+        currentActiveStep = index
+        center_step(btn)
+        render_steps(steps)
         _?.up({type: 'step_clicked', data: {...step, index, total_steps: steps.length, is_accessible: accessible}})
       };
 
       steps_entries.appendChild(btn)
     });
+  }
+
+  
+  function center_step(step_button) {
+    const container_width = steps_entries.clientWidth
+    const step_left = step_button.offsetLeft
+    const step_width = step_button.offsetWidth
     
-    setTimeout(() => {
-      const scrollLeft = steps_entries.scrollLeft
-      const maxScroll = steps_entries.scrollWidth - steps_entries.clientWidth
-      
-      if (scrollLeft > 0) {
-        leftArrow.classList.add('visible')
-        steps_container.classList.add('has-left-overflow')
-      }
-      
-      if (scrollLeft < maxScroll - 1) {
-        rightArrow.classList.add('visible')
-        steps_container.classList.add('has-right-overflow')
-      }
-    }, 100)
+    const center_position = step_left - (container_width / 2) + (step_width / 2)
+    
+    steps_entries.scrollTo({
+      left: center_position,
+      behavior: 'smooth'
+    })
   }
 
   function can_access(index, steps) {
diff --git a/src/node_modules/steps_wizard/steps_wizard.js b/src/node_modules/steps_wizard/steps_wizard.js
index 02a400d..81ff0ae 100644
--- a/src/node_modules/steps_wizard/steps_wizard.js
+++ b/src/node_modules/steps_wizard/steps_wizard.js
@@ -13,6 +13,7 @@ async function steps_wizard (opts, protocol) {
   }
 
   let variables = []
+  let currentActiveStep = 0
 
   let _ = null
   if(protocol){
@@ -26,8 +27,6 @@ async function steps_wizard (opts, protocol) {
   <div class="steps-wizard main">
     <div class="steps-container">
       <div class="steps-slot"></div>
-      <button class="nav-arrow left" id="leftArrow">‹</button>
-      <button class="nav-arrow right" id="rightArrow">›</button>
     </div>
   </div>
   <style>
@@ -35,19 +34,13 @@ async function steps_wizard (opts, protocol) {
   `
 
   const style = shadow.querySelector('style')
-  const steps_container = shadow.querySelector('.steps-container')
   const steps_entries = shadow.querySelector('.steps-slot')
-  const leftArrow = shadow.querySelector('#leftArrow')
-  const rightArrow = shadow.querySelector('#rightArrow')
-  
   const subs = await sdb.watch(onbatch)
 
-  setupArrowNavigation()
-
   // for demo purpose
   render_steps([
     {name: "Optional Step", "type": "optional", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
-	  {name: "Step 2", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
+	  {name: "Step 2 testingasadasdadasdasdaasdasdsassss", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 3", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 4", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 5", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
@@ -61,53 +54,6 @@ async function steps_wizard (opts, protocol) {
   ])
 
   return el
-
-  function setupArrowNavigation() {
-    function updateArrows() {
-      const scrollLeft = steps_entries.scrollLeft
-      const maxScroll = steps_entries.scrollWidth - steps_entries.clientWidth
-      
-      if (scrollLeft > 0) {
-        leftArrow.classList.add('visible')
-        steps_container.classList.add('has-left-overflow')
-      } else {
-        leftArrow.classList.remove('visible')
-        steps_container.classList.remove('has-left-overflow')
-      }
-      
-      if (scrollLeft < maxScroll - 1) {
-        rightArrow.classList.add('visible')
-        steps_container.classList.add('has-right-overflow')
-      } else {
-        rightArrow.classList.remove('visible')
-        steps_container.classList.remove('has-right-overflow')
-      }
-    }
-
-    leftArrow.addEventListener('click', () => {
-      const stepWidth = steps_entries.children[0]?.offsetWidth || 200
-      steps_entries.scrollBy({
-        left: -(stepWidth + 8),
-        behavior: 'smooth'
-      })
-    })
-
-    rightArrow.addEventListener('click', () => {
-      const stepWidth = steps_entries.children[0]?.offsetWidth || 200
-      steps_entries.scrollBy({
-        left: stepWidth + 8,
-        behavior: 'smooth'
-      })
-    })
-
-    steps_entries.addEventListener('scroll', updateArrows)
-    
-    window.addEventListener('resize', () => {
-      setTimeout(updateArrows, 100)
-    })
-
-    setTimeout(updateArrows, 100)
-  }
   
   function onmessage ({ type, data }) {
     console.log('steps_ data', type, data)
@@ -127,6 +73,7 @@ async function steps_wizard (opts, protocol) {
       const btn = document.createElement('button')
       btn.className = 'step-button'
       btn.textContent = step.name + (step.type === 'optional' ? ' *' : '')
+      btn.title = btn.textContent
       btn.setAttribute('data-step', index + 1)
 
       const accessible = can_access(index, steps)
@@ -139,28 +86,40 @@ async function steps_wizard (opts, protocol) {
 
       btn.classList.add(`step-${status}`)
 
+      if (index === currentActiveStep - 1 && index > 0) {
+        btn.classList.add('back')
+      }
+      if (index === currentActiveStep + 1 && index < steps.length - 1) {
+        btn.classList.add('next')
+      }
+      if (index === currentActiveStep) {
+        btn.classList.add('active')
+      }
+
       btn.onclick = async () => {
         console.log('Clicked:', step)
+        currentActiveStep = index
+        center_step(btn)
+        render_steps(steps)
         _?.up({type: 'step_clicked', data: {...step, index, total_steps: steps.length, is_accessible: accessible}})
       };
 
       steps_entries.appendChild(btn)
     });
+  }
+
+  
+  function center_step(step_button) {
+    const container_width = steps_entries.clientWidth
+    const step_left = step_button.offsetLeft
+    const step_width = step_button.offsetWidth
     
-    setTimeout(() => {
-      const scrollLeft = steps_entries.scrollLeft
-      const maxScroll = steps_entries.scrollWidth - steps_entries.clientWidth
-      
-      if (scrollLeft > 0) {
-        leftArrow.classList.add('visible')
-        steps_container.classList.add('has-left-overflow')
-      }
-      
-      if (scrollLeft < maxScroll - 1) {
-        rightArrow.classList.add('visible')
-        steps_container.classList.add('has-right-overflow')
-      }
-    }, 100)
+    const center_position = step_left - (container_width / 2) + (step_width / 2)
+    
+    steps_entries.scrollTo({
+      left: center_position,
+      behavior: 'smooth'
+    })
   }
 
   function can_access(index, steps) {
diff --git a/src/node_modules/steps_wizard/stepswizard.css b/src/node_modules/steps_wizard/stepswizard.css
index 666c4d1..a203b5e 100644
--- a/src/node_modules/steps_wizard/stepswizard.css
+++ b/src/node_modules/steps_wizard/stepswizard.css
@@ -2,7 +2,6 @@
 .steps-wizard {
 	display: flex;
 	flex-direction: column;
-	overflow-y: scroll;
 	width: 100%;
 	height: 100%;
 	background: #131315;
@@ -74,57 +73,6 @@
 	padding: 5px;
 	overflow-x: auto;
 	scroll-behavior: smooth;
-	
-	/* Hide default scrollbar for horizontal */
-	scrollbar-width: none;
-	-ms-overflow-style: none;
-}
-
-.steps-slot::-webkit-scrollbar {
-	display: none;
-}
-
-/* Navigation arrows */
-.nav-arrow {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	width: 40px;
-	height: 40px;
-	background: rgba(19, 19, 21, 0.9);
-	border: 1px solid #444;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	color: #ccc;
-	font-size: 18px;
-	font-weight: bold;
-	z-index: 10;
-	transition: all 0.3s ease;
-	opacity: 0;
-	pointer-events: none;
-}
-
-.nav-arrow.visible {
-	opacity: 1;
-	pointer-events: auto;
-}
-
-.nav-arrow:hover {
-	background: rgba(41, 153, 16, 0.8);
-	color: white;
-	border-color: #299910;
-	transform: translateY(-50%) scale(1.1);
-}
-
-.nav-arrow.left {
-	left: 10px;
-}
-
-.nav-arrow.right {
-	right: 10px;
 }
 
 /* Fade edges to indicate more content */
@@ -158,32 +106,68 @@
 
 .step-button {
 	position: relative;
-	display: flex;
-	align-items: center;
+	display: block;
 	cursor: pointer;
-	font-size: 16px;
-	padding: 10px 16px 10px 44px;
+	font-size: 14px;
+	padding: 10px 8px 10px 44px;
 	margin: 10px 0;
 	border-radius: 12px;
 	font-weight: 500;
-	transition: background-color 0.3s;
-	width: fit-content;
+	transition: background-color 0.3s, transform 0.2s;
 	border: 2px solid;
+	width: 120px;
+	min-width: 120px;
+	box-sizing: border-box;
+	flex-shrink: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: left;
+	line-height: 20px;
 }
 
 .step-button:before {
 	content: attr(data-step);
 	position: absolute;
 	left: 12px;
-	width: 20px;
-	height: 20px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 18px;
+	height: 18px;
 	border: 1px solid white;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-weight: bold;
+	font-size: 11px;
+	flex-shrink: 0;
+	z-index: 1;
+}
+
+/* Navigation arrows */
+.step-button.back::after {
+	content: "◄";
+	position: absolute;
+	left: 0px;
+	top: 50%;
+	transform: translateY(-50%);
+	font-size: 12px;
+	font-weight: bold;
+	color: inherit;
+	animation: pulse-left 2s infinite;
+}
+
+.step-button.next::after {
+	content: "►";
+	position: absolute;
+	right: 8px;
+	top: 50%;
+	transform: translateY(-50%);
 	font-size: 12px;
+	font-weight: bold;
+	color: inherit;
+	animation: pulse-right 2s infinite;
 }
 
 /* Default (active step) */