woocommerce mini-cart, how to edit its mini-cart UI ? Do we need to it mini-cart.html (from woocommerce\packages\woocommerce-blocks\templates\parts)?

Question

This is the UI trying to achieve:
enter image description here

This the the current UI,

enter image description here

This is the code from mini-cart.html (beside this file can't find any name mini-cart related, please help)

<!-- wp:woocommerce/mini-cart-contents -->
<div class="wp-block-woocommerce-mini-cart-contents">
    <!-- wp:woocommerce/filled-mini-cart-contents-block -->
    <div class="wp-block-woocommerce-filled-mini-cart-contents-block">
        <!-- wp:woocommerce/mini-cart-title-block -->
        <div class="wp-block-woocommerce-mini-cart-title-block">
            <!-- wp:woocommerce/mini-cart-title-label-block -->
            <div class="wp-block-woocommerce-mini-cart-title-label-block">
            </div>
            <!-- /wp:woocommerce/mini-cart-title-label-block -->

            <!-- wp:woocommerce/mini-cart-title-items-counter-block -->
            <div class="wp-block-woocommerce-mini-cart-title-items-counter-block">
            </div>
            <!-- /wp:woocommerce/mini-cart-title-items-counter-block -->
        </div>
        <!-- /wp:woocommerce/mini-cart-title-block -->
        <!-- wp:woocommerce/mini-cart-items-block -->
        <div class="wp-block-woocommerce-mini-cart-items-block">
            <!-- wp:woocommerce/mini-cart-products-table-block -->
            <div class="wp-block-woocommerce-mini-cart-products-table-block">
            </div>
            <!-- /wp:woocommerce/mini-cart-products-table-block -->
        </div>
        <!-- /wp:woocommerce/mini-cart-items-block -->
        <!-- wp:woocommerce/mini-cart-footer-block -->
        <div class="wp-block-woocommerce-mini-cart-footer-block">
            <!-- wp:woocommerce/mini-cart-cart-button-block -->
            <div class="wp-block-woocommerce-mini-cart-cart-button-block"></div>
            <!-- /wp:woocommerce/mini-cart-cart-button-block -->
            <!-- wp:woocommerce/mini-cart-checkout-button-block -->
            <div class="wp-block-woocommerce-mini-cart-checkout-button-block"></div>
            <!-- /wp:woocommerce/mini-cart-checkout-button-block -->
        </div>
        <!-- /wp:woocommerce/mini-cart-footer-block -->
    </div>
    <!-- /wp:woocommerce/filled-mini-cart-contents-block -->

    <!-- wp:woocommerce/empty-mini-cart-contents-block -->
    <div class="wp-block-woocommerce-empty-mini-cart-contents-block">
        <!-- wp:pattern {"slug":"woocommerce/mini-cart-empty-cart-message"} /-->

        <!-- wp:woocommerce/mini-cart-shopping-button-block -->
        <div class="wp-block-woocommerce-mini-cart-shopping-button-block"></div>
        <!-- /wp:woocommerce/mini-cart-shopping-button-block -->
    </div>
    <!-- /wp:woocommerce/empty-mini-cart-contents-block -->
</div>
<!-- /wp:woocommerce/mini-cart-contents -->

woocommerce mini-cart, how to edit its mini-cart UI ?