diff --git a/docs/THREED-SECURE-AND-PAY-PAYMENT-IN-MODALBOX-EXAMPLE.md b/docs/THREED-SECURE-AND-PAY-PAYMENT-IN-MODALBOX-EXAMPLE.md
index 16981e55..32ff2cb5 100644
--- a/docs/THREED-SECURE-AND-PAY-PAYMENT-IN-MODALBOX-EXAMPLE.md
+++ b/docs/THREED-SECURE-AND-PAY-PAYMENT-IN-MODALBOX-EXAMPLE.md
@@ -167,24 +167,28 @@ $renderedForm = ob_get_clean();
 </pre>
 
 <script>
-    $('#result-alert').hide();
+    document.getElementById('result-alert').style.display = 'none';
     let messageReceived = false;
 
     /**
      * Bankadan geri websitenize yönlendirme yapıldıktan sonra alınan sonuca göre başarılı/başarısız alert box'u gösterir.
      */
     let displayResponse = function (event) {
-        let alertBox = $('#result-alert');
+        let alertBox = document.getElementById('result-alert');
         let data = JSON.parse(atob(event.data));
-        $('#result-response').append(JSON.stringify(data, null, '\t'));
+
+        let resultResponse = document.getElementById('result-response');
+        resultResponse.appendChild(document.createTextNode(JSON.stringify(data, null, '\t')));
+
         if (data.status === 'approved') {
-            alertBox.append('payment successful');
-            alertBox.addClass('alert-info');
+            alertBox.appendChild(document.createTextNode('payment successful'));
+            alertBox.classList.add('alert-info');
         } else {
-            alertBox.addClass('alert-danger');
-            alertBox.append('payment failed: ' + data.error_message ?? data.md_error_message);
+            alertBox.classList.add('alert-danger');
+            alertBox.appendChild(document.createTextNode('payment failed: ' + (data.error_message ?? data.md_error_message)));
         }
-        alertBox.show();
+
+        alertBox.style.display = 'block';
     }
 </script>
 
@@ -204,7 +208,8 @@ $renderedForm = ob_get_clean();
         window.addEventListener('message', function (event) {
             messageReceived = true;
             displayResponse(event);
-            $('#iframe-modal').modal('hide');
+            let myModal = bootstrap.Modal.getInstance(document.getElementById('iframe-modal'));
+            myModal.hide();
         });
 
         /**
@@ -212,20 +217,24 @@ $renderedForm = ob_get_clean();
          * modal box içinde yeni iframe oluşturuyoruz ve iframe içine $renderedForm verisini basıyoruz.
          */
         let iframe = document.createElement('iframe');
-        document.getElementById("iframe-modal-dialog").appendChild(iframe);
-        $(iframe).height('500px');
-        $(iframe).width('410px');
+        document.getElementById("iframe-modal-body").appendChild(iframe);
+        iframe.style.height = '500px';
+        iframe.style.width = '410px';
         iframe.contentWindow.document.open();
         iframe.contentWindow.document.write(`<?= $renderedForm; ?>`);
         iframe.contentWindow.document.close();
-        $('#iframe-modal').modal('show');
+        let modalElement = document.getElementById('iframe-modal');
+        let myModal = new bootstrap.Modal(modalElement, {
+            keyboard: false
+        })
+        myModal.show();
 
-        $('#iframe-modal').on('hidden.bs.modal', function () {
+        modalElement.addEventListener('hidden.bs.modal', function () {
             if (!messageReceived) {
-                let alertBox = $('#result-alert');
-                alertBox.addClass('alert-danger');
-                alertBox.append('modal box kapatildi');
-                alertBox.show();
+                let alertBox = document.getElementById('result-alert');
+                alertBox.classList.add('alert-danger');
+                alertBox.appendChild(document.createTextNode('modal box kapatildi'));
+                alertBox.style.display = 'block';
             }
         });
     </script>
diff --git a/examples/_common-codes/3d/form.php b/examples/_common-codes/3d/form.php
index c6444374..fecadd2b 100644
--- a/examples/_common-codes/3d/form.php
+++ b/examples/_common-codes/3d/form.php
@@ -260,24 +260,28 @@ function (RequestDataPreparedEvent $requestDataPreparedEvent): void {
     </pre>
 
     <script>
-        $('#result-alert').hide();
+        document.getElementById('result-alert').style.display = 'none';
         let messageReceived = false;
 
         /**
          * Bankadan geri websitenize yönlendirme yapıldıktan sonra alınan sonuca göre başarılı/başarısız alert box'u gösterir.
          */
         let displayResponse = function (event) {
-            let alertBox = $('#result-alert');
+            let alertBox = document.getElementById('result-alert');
             let data = JSON.parse(atob(event.data));
-            $('#result-response').append(JSON.stringify(data, null, '\t'));
+
+            let resultResponse = document.getElementById('result-response');
+            resultResponse.appendChild(document.createTextNode(JSON.stringify(data, null, '\t')));
+
             if (data.status === 'approved') {
-                alertBox.append('payment successful');
-                alertBox.addClass('alert-info');
+                alertBox.appendChild(document.createTextNode('payment successful'));
+                alertBox.classList.add('alert-info');
             } else {
-                alertBox.addClass('alert-danger');
-                alertBox.append('payment failed: ' + data.error_message ?? data.md_error_message);
+                alertBox.classList.add('alert-danger');
+                alertBox.appendChild(document.createTextNode('payment failed: ' + (data.error_message ?? data.md_error_message)));
             }
-            alertBox.show();
+
+            alertBox.style.display = 'block';
         }
     </script>
 <?php endif; ?>
@@ -287,9 +291,14 @@ function (RequestDataPreparedEvent $requestDataPreparedEvent): void {
 
 <?php if ('by_iframe' === $flowType) : ?>
     <div class="modal fade" tabindex="-1" role="dialog" id="iframe-modal" data-keyboard="false" data-backdrop="static">
-        <div class="modal-dialog" role="document" id="iframe-modal-dialog" style="width: 426px;">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"
-                    style="color: white; opacity: 1;"><span aria-hidden="true">&times;</span></button>
+        <div class="modal-dialog" role="document" style="width: 426px;">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body"  id="iframe-modal-body">
+                </div>
+            </div>
         </div>
     </div>
     <script>
@@ -302,7 +311,8 @@ function (RequestDataPreparedEvent $requestDataPreparedEvent): void {
         window.addEventListener('message', function (event) {
             messageReceived = true;
             displayResponse(event);
-            $('#iframe-modal').modal('hide');
+            let myModal = bootstrap.Modal.getInstance(document.getElementById('iframe-modal'));
+            myModal.hide();
         });
 
         /**
@@ -310,20 +320,24 @@ function (RequestDataPreparedEvent $requestDataPreparedEvent): void {
          * modal box içinde yeni iframe oluşturuyoruz ve iframe içine $renderedForm verisini basıyoruz.
          */
         let iframe = document.createElement('iframe');
-        document.getElementById("iframe-modal-dialog").appendChild(iframe);
-        $(iframe).height('500px');
-        $(iframe).width('410px');
+        document.getElementById("iframe-modal-body").appendChild(iframe);
+        iframe.style.height = '500px';
+        iframe.style.width = '410px';
         iframe.contentWindow.document.open();
         iframe.contentWindow.document.write(`<?= $renderedForm; ?>`);
         iframe.contentWindow.document.close();
-        $('#iframe-modal').modal('show');
+        let modalElement = document.getElementById('iframe-modal');
+        let myModal = new bootstrap.Modal(modalElement, {
+            keyboard: false
+        })
+        myModal.show();
 
-        $('#iframe-modal').on('hidden.bs.modal', function () {
+        modalElement.addEventListener('hidden.bs.modal', function () {
             if (!messageReceived) {
-                let alertBox = $('#result-alert');
-                alertBox.addClass('alert-danger');
-                alertBox.append('modal box kapatildi');
-                alertBox.show();
+                let alertBox = document.getElementById('result-alert');
+                alertBox.classList.add('alert-danger');
+                alertBox.appendChild(document.createTextNode('modal box kapatildi'));
+                alertBox.style.display = 'block';
             }
         });
     </script>
@@ -368,12 +382,12 @@ function (RequestDataPreparedEvent $requestDataPreparedEvent): void {
          */
         let closeInterval = setInterval(function () {
             if (popupWindow.closed && !messageReceived) {
-                // windows is closed without completing payment
+                // window is closed without completing payment
                 clearInterval(closeInterval);
-                let alertBox = $('#result-alert');
-                alertBox.addClass('alert-danger');
-                alertBox.append('popup kapatildi');
-                alertBox.show();
+                let alertBox = document.getElementById('result-alert');
+                alertBox.classList.add('alert-danger');
+                alertBox.appendChild(document.createTextNode('popup kapatildi'));
+                alertBox.style.display = 'block';
             }
         }, 1000);
     </script>
diff --git a/examples/_common-codes/3d/index.php b/examples/_common-codes/3d/index.php
index f05e54ef..6041d99c 100644
--- a/examples/_common-codes/3d/index.php
+++ b/examples/_common-codes/3d/index.php
@@ -3,7 +3,9 @@
 // ilgili bankanin _config.php dosyasi load ediyoruz.
 // ornegin /examples/finansbank-payfor/3d/_config.php
 require '_config.php';
-
+if ($transaction === null) {
+    $transaction = \Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH;
+}
 require '../../_templates/_header.php';
 
 $url = $baseUrl.'form.php';
diff --git a/examples/_common-codes/regular/cancel.php b/examples/_common-codes/regular/cancel.php
index f6067cfb..215a9360 100644
--- a/examples/_common-codes/regular/cancel.php
+++ b/examples/_common-codes/regular/cancel.php
@@ -2,10 +2,12 @@
 
 use Mews\Pos\PosInterface;
 
-$templateTitle = 'Refund Order';
+$templateTitle = 'Cancel Order';
+
 // ilgili bankanin _config.php dosyasi load ediyoruz.
 // ornegin /examples/finansbank-payfor/regular/_config.php
 require '_config.php';
+$transaction = PosInterface::TX_TYPE_CANCEL;
 
 require '../../_templates/_header.php';
 
@@ -80,8 +82,6 @@ function createCancelOrder(string $gatewayClass, array $lastResponse, string $ip
 $order = createCancelOrder(get_class($pos), $session->get('last_response'), $ip);
 dump($order);
 
-$transaction = PosInterface::TX_TYPE_CANCEL;
-
 try {
     $pos->cancel($order);
 } catch (Exception $e) {
diff --git a/examples/_common-codes/regular/history.php b/examples/_common-codes/regular/history.php
index 4cb080e1..9781fcf8 100644
--- a/examples/_common-codes/regular/history.php
+++ b/examples/_common-codes/regular/history.php
@@ -5,6 +5,7 @@
 // ilgili bankanin _config.php dosyasi load ediyoruz.
 // ornegin /examples/finansbank-payfor/regular/_config.php
 require_once '_config.php';
+$transaction = \Mews\Pos\PosInterface::TX_TYPE_HISTORY;
 
 require '../../_templates/_header.php';
 
@@ -45,8 +46,6 @@ function createHistoryOrder(string $gatewayClass, array $extraData): array
 $order = createHistoryOrder(get_class($pos), []);
 dump($order);
 
-$transaction = \Mews\Pos\PosInterface::TX_TYPE_HISTORY;
-
 try {
     $pos->history($order);
 } catch (Exception $e) {
diff --git a/examples/_common-codes/regular/order_history.php b/examples/_common-codes/regular/order_history.php
index bea76df5..54debb30 100644
--- a/examples/_common-codes/regular/order_history.php
+++ b/examples/_common-codes/regular/order_history.php
@@ -5,6 +5,7 @@
 // ilgili bankanin _config.php dosyasi load ediyoruz.
 // ornegin /examples/finansbank-payfor/regular/_config.php
 require_once '_config.php';
+$transaction = \Mews\Pos\PosInterface::TX_TYPE_ORDER_HISTORY;
 
 require '../../_templates/_header.php';
 
@@ -64,8 +65,6 @@ function createOrderHistoryOrder(string $gatewayClass, array $lastResponse): arr
 $order = createOrderHistoryOrder(get_class($pos), $lastResponse);
 dump($order);
 
-$transaction = \Mews\Pos\PosInterface::TX_TYPE_ORDER_HISTORY;
-
 try {
     $pos->orderHistory($order);
 } catch (Exception $e) {
diff --git a/examples/_common-codes/regular/refund.php b/examples/_common-codes/regular/refund.php
index 8d2c49b6..66e2ca4f 100644
--- a/examples/_common-codes/regular/refund.php
+++ b/examples/_common-codes/regular/refund.php
@@ -7,6 +7,7 @@
 // ilgili bankanin _config.php dosyasi load ediyoruz.
 // ornegin /examples/finansbank-payfor/regular/_config.php
 require '_config.php';
+$transaction = PosInterface::TX_TYPE_REFUND;
 
 require '../../_templates/_header.php';
 
@@ -70,8 +71,6 @@ function createRefundOrder(string $gatewayClass, array $lastResponse, string $ip
 );
 dump($order);
 
-$transaction = PosInterface::TX_TYPE_REFUND;
-
 try {
     $pos->refund($order);
 } catch (Exception $e) {
diff --git a/examples/_common-codes/regular/status.php b/examples/_common-codes/regular/status.php
index 38997781..144355b6 100644
--- a/examples/_common-codes/regular/status.php
+++ b/examples/_common-codes/regular/status.php
@@ -3,10 +3,10 @@
 use Mews\Pos\PosInterface;
 
 $templateTitle = 'Order Status';
-
 // ilgili bankanin _config.php dosyasi load ediyoruz.
 // ornegin /examples/finansbank-payfor/regular/_config.php
 require '_config.php';
+$transaction = PosInterface::TX_TYPE_STATUS;
 
 require '../../_templates/_header.php';
 
@@ -43,8 +43,6 @@ function createStatusOrder(string $gatewayClass, array $lastResponse, string $ip
 $order = createStatusOrder(get_class($pos), $session->get('last_response'), $ip);
 dump($order);
 
-$transaction = PosInterface::TX_TYPE_STATUS;
-
 $pos->status($order);
 
 $response = $pos->getResponse();
diff --git a/examples/_main_config.php b/examples/_main_config.php
index ab3f8768..c7397408 100644
--- a/examples/_main_config.php
+++ b/examples/_main_config.php
@@ -38,6 +38,10 @@
     12 => '12 Taksit',
 ];
 
+$paymentModel  = null;
+$posClass      = null;
+$transaction   = null;
+
 function doPayment(PosInterface $pos, string $paymentModel, string $transaction, array $order, ?\Mews\Pos\Entity\Card\CreditCardInterface $card)
 {
     if (!$pos::isSupportedTransaction($transaction, $paymentModel)) {
diff --git a/examples/_templates/_credit_card_form.php b/examples/_templates/_credit_card_form.php
index dd665485..b2e73f6f 100644
--- a/examples/_templates/_credit_card_form.php
+++ b/examples/_templates/_credit_card_form.php
@@ -1,15 +1,15 @@
 <form method="post" action="<?= $url; ?>" role="form">
     <div class="row">
         <div class="row">
-            <div class="form-group col-sm-12">
+            <div class="mb-3 col-sm-12">
                 <label for="name">Card holder name</label>
                 <input type="text" name="name" id="name" class="form-control input-lg" placeholder="Card holder name"
                        value="<?= $card->getHolderName(); ?>">
             </div>
             <?php if ($pos->getCardTypeMapping()): ?>
-            <div class="form-group col-sm-3">
+            <div class="mb-3 col-sm-3">
                 <label for="type">Card Type</label>
-                <select name="type" id="type" class="form-control input-lg">
+                <select name="type" id="type" class="form-select input-lg">
                     <option value="">Type</option>
                     <?php foreach ($pos->getCardTypeMapping() as $key => $value): ?>
                         <option value="<?= $key ?>" <?= $key === $card->getType() ? 'selected' : '' ?>><?= $key ?></option>
@@ -17,66 +17,66 @@
                 </select>
             </div>
             <?php endif; ?>
-            <div class="form-group col-sm-9">
+            <div class="mb-3 col-sm-9">
                 <label for="number">Card Number</label>
                 <input type="text" name="number" id="number" class="form-control input-lg"
                        placeholder="Credit card number" value="<?= $card->getNumber()?>">
             </div>
-            <div class="form-group col-sm-4">
+            <div class="mb-3 col-sm-4">
                 <label for="month">Expire Month</label>
-                <select name="month" id="month" class="form-control input-lg">
+                <select name="month" id="month" class="form-select input-lg">
                     <option value="">Month</option>
                     <?php for ($i = 1; $i <= 12; $i++) : ?>
                         <option value="<?= $i; ?>" <?= $i == $card->getExpireMonth()  ? 'selected': null ?>><?= str_pad($i, 2, 0, STR_PAD_LEFT); ?></option>
                     <?php endfor; ?>
                 </select>
             </div>
-            <div class="form-group col-sm-4">
+            <div class="mb-3 col-sm-4">
                 <label for="year">Expire Year</label>
-                <select name="year" id="year" class="form-control input-lg">
+                <select name="year" id="year" class="form-select input-lg">
                     <option value="">Year</option>
                     <?php for ($i = date('Y'); $i <= date('Y') + 20; $i++) : ?>
                         <option value="<?= $i; ?>" <?= $i == $card->getExpireYear('Y') ? 'selected': null ?>><?= $i; ?></option>
                     <?php endfor; ?>
                 </select>
             </div>
-            <div class="form-group col-sm-4">
+            <div class="mb-3 col-sm-4">
                 <label for="cvv">Cvv</label>
                 <input type="text" name="cvv" id="cvv" class="form-control input-lg" placeholder="Cvv" value="<?= $card->getCvv() ?>">
             </div>
 
-            <div class="form-group col-md-4">
-                <select name="installment" id="installment" class="form-control input-lg">
+            <div class="mb-3 col-md-4">
+                <select name="installment" id="installment" class="form-select input-lg">
                 <?php foreach ($installments as $installment => $label) : ?>
                     <option value="<?= $installment; ?>"><?= $label; ?></option>
                 <?php endforeach; ?>
                 </select>
             </div>
             <?php if ([] !== $pos->getCurrencies()): ?>
-                <div class="form-group col-md-4">
-                    <select name="currency" id="currency" class="form-control input-lg">
+                <div class="mb-3 col-md-4">
+                    <select name="currency" id="currency" class="form-select input-lg">
                         <?php foreach ($pos->getCurrencies() as $currency) : ?>
                             <option value="<?= $currency; ?>" <?= $currency === \Mews\Pos\PosInterface::CURRENCY_TRY ? 'selected': null ?>><?= $currency; ?></option>
                         <?php endforeach; ?>
                     </select>
                 </div>
             <?php endif; ?>
-            <div class="form-group col-md-4">
-                <select name="tx" id="currency" class="form-control input-lg">
+            <div class="mb-3 col-md-4">
+                <select name="tx" id="currency" class="form-select input-lg">
                     <option value="<?= \Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH; ?>" selected>Ödeme</option>
                     <?php if ($pos::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_PRE_AUTH, $paymentModel)): ?>
                         <option value="<?= \Mews\Pos\PosInterface::TX_TYPE_PAY_PRE_AUTH; ?>">Ön Provizyon</option>
                     <?php endif; ?>
                 </select>
             </div>
-            <div class="form-group col-md-4">
-                <select name="lang" id="lang" class="form-control input-lg">
+            <div class="mb-3 col-md-4">
+                <select name="lang" id="lang" class="form-select input-lg">
                     <?php foreach ($pos->getLanguages() as $lang) : ?>
                         <option value="<?= $lang; ?>" <?= $lang === \Mews\Pos\PosInterface::LANG_TR ? 'selected': null ?>><?= strtoupper($lang); ?></option>
                     <?php endforeach; ?>
                 </select>
             </div>
-            <div class="form-group col-md-4">
+            <div class="mb-3 col-md-4">
                 <div class="form-group">
                     <label class="form-check-label" for="isRecurringPayment">
                     <input type="checkbox" class="form-check-input" id="isRecurringPayment" name="is_recurring" value="1">
@@ -85,16 +85,25 @@
                     </label>
                 </div>
             </div>
-            <div class="form-group col-xs-12">
+            <div class="mb-3 col-xs-12">
                 <?php if ($paymentModel !== \Mews\Pos\PosInterface::MODEL_NON_SECURE): ?>
-                <label class="radio-inline"><input type="radio" name="payment_flow_type" value="by_redirection" checked>Redirektli ödeme</label>
-                <label class="radio-inline"><input type="radio" name="payment_flow_type" value="by_iframe">Modal box'da ödeme</label>
-                <label class="radio-inline"><input type="radio" name="payment_flow_type" value="by_popup_window">Popup Windowda ödeme</label>
+                    <div class="form-check form-check-inline">
+                        <input type="radio" class="form-check-input" name="payment_flow_type" value="by_redirection" checked>
+                        <label class="form-check-label">Redirektli ödeme</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input type="radio" class="form-check-input" name="payment_flow_type" value="by_iframe">
+                        <label class="form-check-label">Modal box'da ödeme</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input type="radio" class="form-check-input" name="payment_flow_type" value="by_popup_window">
+                        <label class="form-check-label">Popup Windowda ödeme</label>
+                    </div>
                 <?php endif; ?>
             </div>
         </div>
         <hr>
-        <div class="form-group text-center">
+        <div class="mb-3 text-center">
             <button type="submit" class="btn btn-lg btn-block btn-success">Payment</button>
         </div>
 </form>
diff --git a/examples/_templates/_header.php b/examples/_templates/_header.php
index e6ea1387..1f986eb0 100644
--- a/examples/_templates/_header.php
+++ b/examples/_templates/_header.php
@@ -6,84 +6,137 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
-          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
-    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
+            integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
+            crossorigin="anonymous"></script>
 </head>
 <body>
-
 <header class="bs-docs-nav navbar navbar-static-top" id="top">
-    <div class="container">
-        <div class="navbar-header">
-            <button aria-controls="bs-navbar" aria-expanded="false" class="collapsed navbar-toggle" data-target="#bs-navbar" data-toggle="collapse" type="button">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a href="<?= $hostUrl ?>" class="navbar-brand">Main Page</a>
-        </div>
-        <nav class="collapse navbar-collapse" id="bs-navbar">
-            <ul class="nav navbar-nav">
-                <li> <a href="<?= $hostUrl ?>/tosla/index.php">Tosla (Ak Öde)</a></li>
-                <li> <a href="<?= $hostUrl ?>/akbankpos/index.php">Akbank POS</a></li>
-                <li> <a href="<?= $hostUrl ?>/payten/index.php">Payten V3</a></li>
-                <li> <a href="<?= $hostUrl ?>/finansbank-payfor/index.php">PayFor (Finansbank)</a></li>
-                <li> <a href="<?= $hostUrl ?>/garanti/index.php">Garanti POS</a></li>
-                <li> <a href="<?= $hostUrl ?>/interpos/index.php">InterPos (Deniz bank)</a></li>
-                <li> <a href="<?= $hostUrl ?>/payflex-mpi-v4/index.php">PayFlex MPI V4 (VakifBank VPOS 7/24)</a></li>
-                <li> <a href="<?= $hostUrl ?>/payflex-cp-v4/index.php">PayFlex Common Payment V4 (VakifBank)</a></li>
-                <li> <a href="<?= $hostUrl ?>/posnet-ykb/index.php">PosNet (YKB)</a></li>
-                <li> <a href="<?= $hostUrl ?>/posnet-v1/index.php">PosNetV1 (Albaraka)</a></li>
-                <li> <a href="<?= $hostUrl ?>/kuveytpos/index.php">KuveytPOS</a></li>
-                <li> <a href="<?= $hostUrl ?>/vakif-katilim/index.php">VakifKatilimPos</a></li>
-            </ul>
+        <nav class="navbar navbar-expand-lg navbar-light bg-light" id="bs-navbar">
+            <div class="container-fluid">
+                <div class="collapse navbar-collapse"  id="navbarContent">
+                    <div class="w-100 d-lg-flex justify-content-lg-between">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link" href="<?= $hostUrl ?>">Main Page</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\ToslaPos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/tosla/index.php">Tosla (Ak Öde)</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\AkbankPos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/akbankpos/index.php">Akbank POS</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\EstV3Pos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/payten/index.php">Payten V3</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\PayForPos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/finansbank-payfor/index.php">PayFor (Finansbank)</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\GarantiPos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/garanti/index.php">Garanti POS</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\InterPos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/interpos/index.php">InterPos (Deniz bank)</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\PayFlexV4Pos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/payflex-mpi-v4/index.php">PayFlex MPI V4 (VakifBank VPOS 7/24)</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\PayFlexCPV4Pos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/payflex-cp-v4/index.php">PayFlex Common Payment V4 (VakifBank)</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\PosNet::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/posnet-ykb/index.php">PosNet (YKB)</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\PosNetV1Pos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/posnet-v1/index.php">PosNetV1 (Albaraka)</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\KuveytPos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/kuveytpos/index.php">KuveytPOS</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link <?= $posClass === \Mews\Pos\Gateways\VakifKatilimPos::class ? 'active' : ''; ?>" href="<?= $hostUrl ?>/vakif-katilim/index.php">VakifKatilimPos</a>
+                        </li>
+                    </ul>
+                </div>
+                </div>
+            </div>
+        </nav>
+        <nav class="navbar navbar-expand-lg navbar-light bg-light" id="bs-navbar">
+            <div class="container-fluid">
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+
+                    </ul>
+                </div>
+            </div>
         </nav>
-    </div>
 </header>
 <div id="wrapper">
     <div class="container" style="max-width: 640px;">
         <h2 class="text-center"><?= $templateTitle; ?></h2>
         <hr>
-        <?php if(isset($posClass)): ?>
-        <nav class="collapse navbar-collapse" id="sub-navbar">
-            <ul class="nav navbar-nav">
-                <?php if($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH, \Mews\Pos\PosInterface::MODEL_3D_SECURE)): ?>
-                    <li> <a href="<?= $bankTestsUrl ?>/3d/index.php">3D Ödeme</a></li>
-                <?php endif; ?>
-                <?php if($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH, \Mews\Pos\PosInterface::MODEL_3D_PAY)): ?>
-                    <li> <a href="<?= $bankTestsUrl ?>/3d-pay/index.php">3D Pay Ödeme</a></li>
-                <?php endif; ?>
-                <?php if($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH, \Mews\Pos\PosInterface::MODEL_3D_PAY_HOSTING)): ?>
-                    <li> <a href="<?= $bankTestsUrl ?>/3d-pay-hosting/index.php">3D Pay Hosting Ödeme</a></li>
-                <?php endif; ?>
-                <?php if($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH, \Mews\Pos\PosInterface::MODEL_3D_HOST)): ?>
-                    <li> <a href="<?= $bankTestsUrl ?>/3d-host/index.php">3D Host Ödeme</a></li>
-                <?php endif; ?>
-                <?php if($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
-                    <li> <a href="<?= $bankTestsUrl ?>/regular/index.php">Non Secure Ödeme</a></li>
-                <?php endif; ?>
-                <?php if($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_STATUS, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
-                    <li> <a href="<?= $bankTestsUrl ?>/regular/status.php">Ödeme Durumu</a></li>
-                <?php endif; ?>
-                <?php if($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_CANCEL, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
-                    <li> <a href="<?= $bankTestsUrl ?>/regular/cancel.php">İptal</a></li>
-                <?php endif; ?>
-                <?php if($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_REFUND, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
-                    <li> <a href="<?= $bankTestsUrl ?>/regular/refund.php">İade</a></li>
-                <?php endif; ?>
-                <?php if($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_ORDER_HISTORY, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
-                    <li> <a href="<?= $bankTestsUrl ?>/regular/order_history.php">Order History</a></li>
-                <?php endif; ?>
-                <?php if($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_HISTORY, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
-                    <li> <a href="<?= $bankTestsUrl ?>/regular/history.php">History</a></li>
-                <?php endif; ?>
-
-            </ul>
-        </nav>
+        <?php if (isset($posClass)): ?>
+            <nav class="navbar navbar-expand-lg navbar-light bg-light" id="bs-navbar">
+                <div class="container-fluid">
+                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                            <?php if ($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH, \Mews\Pos\PosInterface::MODEL_3D_SECURE)): ?>
+                                <li class="nav-item">
+                                    <a class="nav-link <?= $paymentModel === \Mews\Pos\PosInterface::MODEL_3D_SECURE ? 'active' : ''; ?>" href="<?= $bankTestsUrl ?>/3d/index.php">3D Ödeme</a>
+                                </li>
+                            <?php endif; ?>
+                            <?php if ($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH, \Mews\Pos\PosInterface::MODEL_3D_PAY)): ?>
+                                <li class="nav-item">
+                                    <a class="nav-link <?= $paymentModel === \Mews\Pos\PosInterface::MODEL_3D_PAY ? 'active' : ''; ?>" href="<?= $bankTestsUrl ?>/3d-pay/index.php">3D Pay Ödeme</a>
+                                </li>
+                            <?php endif; ?>
+                            <?php if ($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH, \Mews\Pos\PosInterface::MODEL_3D_PAY_HOSTING)): ?>
+                                <li class="nav-item">
+                                    <a class="nav-link <?= $paymentModel === \Mews\Pos\PosInterface::MODEL_3D_PAY_HOSTING ? 'active' : ''; ?>" href="<?= $bankTestsUrl ?>/3d-pay-hosting/index.php">3D Pay Hosting Ödeme</a>
+                                </li>
+                            <?php endif; ?>
+                            <?php if ($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH, \Mews\Pos\PosInterface::MODEL_3D_HOST)): ?>
+                                <li class="nav-item">
+                                    <a class="nav-link <?= $paymentModel === \Mews\Pos\PosInterface::MODEL_3D_HOST ? 'active' : ''; ?>" href="<?= $bankTestsUrl ?>/3d-host/index.php">3D Host Ödeme</a>
+                                </li>
+                            <?php endif; ?>
+                            <?php if ($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
+                                <li class="nav-item">
+                                    <a class="nav-link <?= $paymentModel === \Mews\Pos\PosInterface::MODEL_NON_SECURE && ($transaction === \Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH)? 'active' : ''; ?>"
+                                       href="<?= $bankTestsUrl ?>/regular/index.php">Non Secure Ödeme</a>
+                                </li>
+                            <?php endif; ?>
+                            <?php if ($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_STATUS, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
+                                <li class="nav-item">
+                                    <a class="nav-link <?= $transaction === \Mews\Pos\PosInterface::TX_TYPE_STATUS ? 'active' : ''; ?>" href="<?= $bankTestsUrl ?>/regular/status.php">Ödeme Durumu</a>
+                                </li>
+                            <?php endif; ?>
+                            <?php if ($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_CANCEL, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
+                                <li class="nav-item">
+                                    <a class="nav-link <?= $transaction === \Mews\Pos\PosInterface::TX_TYPE_CANCEL ? 'active' : ''; ?>" href="<?= $bankTestsUrl ?>/regular/cancel.php">İptal</a>
+                                </li>
+                            <?php endif; ?>
+                            <?php if ($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_REFUND, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
+                                <li class="nav-item">
+                                    <a class="nav-link <?= $transaction === \Mews\Pos\PosInterface::TX_TYPE_REFUND ? 'active' : ''; ?>" href="<?= $bankTestsUrl ?>/regular/refund.php">İade</a>
+                                </li>
+                            <?php endif; ?>
+                            <?php if ($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_ORDER_HISTORY, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
+                                <li class="nav-item">
+                                    <a class="nav-link <?= $transaction === \Mews\Pos\PosInterface::TX_TYPE_ORDER_HISTORY ? 'active' : ''; ?>" href="<?= $bankTestsUrl ?>/regular/order_history.php">Order History</a>
+                                </li>
+                            <?php endif; ?>
+                            <?php if ($posClass::isSupportedTransaction(\Mews\Pos\PosInterface::TX_TYPE_HISTORY, \Mews\Pos\PosInterface::MODEL_NON_SECURE)): ?>
+                                <li class="nav-item">
+                                    <a class="nav-link <?= $transaction === \Mews\Pos\PosInterface::TX_TYPE_HISTORY ? 'active' : ''; ?>" href="<?= $bankTestsUrl ?>/regular/history.php">History</a>
+                                </li>
+                            <?php endif; ?>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
         <?php endif; ?>
         <hr>
 
diff --git a/examples/_templates/_render_payment_response.php b/examples/_templates/_render_payment_response.php
index c6f22679..5ca015c2 100644
--- a/examples/_templates/_render_payment_response.php
+++ b/examples/_templates/_render_payment_response.php
@@ -81,7 +81,7 @@
             <?php if (\Mews\Pos\PosInterface::TX_TYPE_PAY_AUTH === $transaction) : ?>
                 <a href="<?= $bankTestsUrl ?>/regular/cancel.php" class="btn btn-lg btn-danger">Cancel payment</a>
             <?php endif; ?>
-            <a href="<?= $bankTestsUrl ?>/regular/status.php" class="btn btn-lg btn-default">Payment Status</a>
+            <a href="<?= $bankTestsUrl ?>/regular/status.php" class="btn btn-lg btn-light">Payment Status</a>
         <?php endif; ?>
         <a href="index.php" class="btn btn-lg btn-info">&lt; Click to payment form</a>
     </div>