i want to go from this:

<aside class="account-options col-sm-12 col-md-4 col-lg-3 bg-light p-3">
<!-- <h4>Account Options</h4> -->
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#details">Account Details</a></li>
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#newsletter">Newsletter</a></li>
<li class="nav-item">
<a class="nav-link btn btn-light" data-bs-toggle="collapse" href="#addressOptions" role="button" aria-expanded="false" aria-controls="addressOptions">Billing and Shipping</a>
<div class="collapse" id="addressOptions">
<ul class="nav flex-column px-2">
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#billing">Billing Information</a></li>
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#shipping">Shipping Address</a></li>
</ul><!-- .nav -->
</div><!-- .collapse -->
</li>

<li class="nav-item">
<a class="nav-link btn btn-light" data-bs-toggle="collapse" href="#securityOptions" role="button" aria-expanded="false" aria-controls="securityOptions">Security</a>
<div class="collapse" id="securityOptions">
<ul class="nav flex-column px-2">
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#password">Update Password</a></li>
<!-- <li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#update-email">Change Email Address</a></li> -->
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#thirdparty">Third-Party Data</a></li>
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#delete">Delete Account</a></li>
</ul><!-- .nav -->
</div><!-- .collapse -->
</li>

</ul>
</aside><!-- .col-sm-12 .col-md-4 .col-lg-3 .bg-light .p-3 -->

To this:

<nav id="menu" class="account-menu col-lg-3 mb-4 sticky-lg-top" aria-label="Table of contents">
<!-- <h4>Account Options</h4> -->
<ol class="ps-3"><!-- start -->

<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#details">Account Details</a></li>
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#newsletter">Newsletter</a></li>

<li class="nav-item">
<a class="nav-link btn btn-light" data-bs-toggle="collapse" href="#addressOptions" role="button" aria-expanded="false" aria-controls="addressOptions">Billing and Shipping</a>
<div class="collapse" id="addressOptions">
<ol class="nav flex-column px-2">
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#billing">Billing Information</a></li>
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#shipping">Shipping Address</a></li>
</ol><!-- .nav -->
</div><!-- .collapse -->
</li>

<li class="nav-item">
<a class="nav-link btn btn-light" data-bs-toggle="collapse" href="#securityOptions" role="button" aria-expanded="false" aria-controls="securityOptions">Security</a>
<div class="collapse" id="securityOptions">
<ol class="nav flex-column px-2">
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#password">Update Password</a></li>
<!-- <li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#update-email">Change Email Address</a></li> -->
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#thirdparty">Third-Party Data</a></li>
<li class="nav-item"><a class="nav-link btn btn-light smooth-scroll" href="#delete">Delete Account</a></li>
</ol><!-- .nav -->
</div><!-- .collapse -->
</li>

</ol><!-- .ps-3 end -->
</nav><!-- .account-menu .col-lg-3 .mb-4 .sticky-lg-top -->

i need the numbers from the li to disapear and want it to look more like a menu I was using:

<style>
@media (min-width: 768px) {
	aside.account-options .nav-link {
		width: 100%;/* Full width for button behavior, keeping text left-aligned */
		text-align: left;/* Ensures text is aligned to the left */
		
	}
}
aside.account-options .nav-link {
	border-radius: 0;/* Remove rounding */
}
section.account-content p.subscription-status {
	/*font-style: italic;
	color: #555;*/
}
</style>