The buttons look like this when I enter the page.

And then when I refresh the page it looks like this:

And the rest of the page stays normal as expected. It’s a Vue3 code and here is the related part of the code:

          <ul class="nav nav-tabs mb-3 mt-3" id="borderTop" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="border-top-home-tab" data-bs-toggle="tab" href="#border-top-interface" role="tab" aria-controls="border-top-home" aria-selected="true">
                {{ $t('device_settings.front_view') }}
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="border-top-port-table-tab" data-bs-toggle="tab" href="#border-top-port-table" role="tab" aria-controls="border-top-port-table" aria-selected="false">
                {{ $t('device_settings.table') }}
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="border-top-graph-tab" data-bs-toggle="tab" href="#border-top-graph" role="tab" aria-controls="border-top-graph" aria-selected="false">
                {{ $t('device_settings.graphs') }}
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="border-top-log-tab" data-bs-toggle="tab" href="#border-top-log" role="tab" aria-controls="border-top-log" aria-selected="false">
                {{ $t('device_settings.logs') }}
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="border-top-config-tab" data-bs-toggle="tab" href="#border-top-config" role="tab" aria-controls="border-top-config" aria-selected="false">
                {{ $t('device_settings.configs') }}
              </a>
            </li>
          </ul>

I was hoping that I can find any clues in the inspect section of my browser but no luck. let me know if any more of my codes are required for you to solve it and I’ll post it too.