diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 995df5947a..6816f68fb5 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -2927,29 +2927,37 @@ $star-selected: #EDB867;
 }
 
 #patron-virtual-card {
-    width: 400px;
+    width: 100%;
+    min-width: 300px;
+    max-width: 500px;
     border-radius: 15px;
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 
-    #barcode-container {
-        flex: 1;
+    #image-container {
         width: 100%;
-        #patron-barcode {
-            padding: .5rem;
-            width: 100%;
+        #patron-image {
+            height: 75%;
+            width: auto;
+            border-radius: 15px;
+            padding: 0.5rem;
         }
     }
 
-    #image-and-library-container {
-        #image-container {
-            flex: 0;
-            width: 100%;
-            #patron-image {
-                padding: 1rem 0 0.25rem 0.25rem;
-            }
+    #barcode-container {
+        width: 100%;
+        padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+        &.qrcode {
+            width: 50%; // Set a smaller width for QR codes
+        }
+    }
+
+    #lib-container {
+        width: 100%;
+        #patron-lib {
+            padding-left: 0.5rem;
         }
     }
 }
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt
index 85a727d947..bdb2416fc4 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt
@@ -35,18 +35,16 @@
             <div class="col-10 order-first order-lg-2">
                 <h1>My virtual card </h1>
                 <div id="patron-virtual-card">
-                    <div id="image-and-library-container">
-                        [% IF ( display_patron_image ) %]
-                            <div id="image-container">
-                                <img id="patron-image" src="/cgi-bin/koha/opac-patron-image.pl" alt="" />
-                            </div>
-                        [% END %]
-                        <div id="barcode-container">
-                            <svg id="patron-barcode" data-barcode="[% patron.cardnumber | html %]"></svg>
-                        </div>
-                        <div id="lib-container">
-                            <p id="patron-lib"><strong>Library:</strong> [% Branches.GetName( patron.branchcode ) | html %]</p>
+                    [% IF ( display_patron_image ) %]
+                        <div id="image-container">
+                            <img id="patron-image" src="/cgi-bin/koha/opac-patron-image.pl" alt="" />
                         </div>
+                    [% END %]
+                    <div id="barcode-container">
+                        <svg id="patron-barcode" data-barcode="[% patron.cardnumber | html %]" data-barcode-format="[% barcode_format | html %]"></svg>
+                    </div>
+                    <div id="lib-container">
+                        <p id="patron-lib"><strong>Library:</strong> [% Branches.GetName( patron.branchcode ) | html %]</p>
                     </div>
                 </div>
             </div> <!-- / .col-10 -->
@@ -56,6 +54,6 @@
 
 [% INCLUDE 'opac-bottom.inc' %]
 [% BLOCK jsinclude %]
-    [% Asset.js("lib/js-barcode/js-barcode.js") | $raw %]
+    [% Asset.js("lib/bwip-js/bwip-js-min.js") | $raw %]
     [% Asset.js("js/barcode-generator.js") | $raw %]
 [% END %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/barcode-generator.js b/koha-tmpl/opac-tmpl/bootstrap/js/barcode-generator.js
index afd32f8284..6f9136e6ce 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/barcode-generator.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/barcode-generator.js
@@ -1,11 +1,27 @@
 document.addEventListener("DOMContentLoaded", function() {
-    var barcodeNumber = document.getElementById("patron-barcode").dataset.barcode;
-    JsBarcode("#patron-barcode", barcodeNumber, {
-        format: "CODE39",
-        lineColor: "#000",
-        width: 2,
-        height: 100,
-        displayValue: false,
-        margin: 0
-    });
-});
\ No newline at end of file
+    const svgElement = document.getElementById('patron-barcode');
+    var barcodeNumber = svgElement.dataset.barcode;
+    var barcodeFormat = svgElement.dataset.barcodeFormat;
+
+    try {
+        // Generate the barcode SVG
+        let svg = bwipjs.toSVG({
+            bcid:        barcodeFormat,  // Barcode type
+            text:        barcodeNumber,  // Text to encode
+            padding:     0,
+            height:      15,
+        });
+        // Add the generated SVG to the barcode container
+        if (barcodeFormat == "qrcode") {
+            document.getElementById('barcode-container').classList.add('qrcode');
+        }
+        document.getElementById('barcode-container').innerHTML = svg
+    } catch (error) {
+        // Use regex to find error message
+        const match = error.message.match(/: (.+)$/);
+        const errorMessage = match ? match[1] : error.message;
+
+        console.error(error);
+        document.getElementById('barcode-container').innerHTML = `<p><strong>Error: </strong>${errorMessage}</p>`;
+    }
+});
diff --git a/opac/opac-virtual-card.pl b/opac/opac-virtual-card.pl
index 57bab5f493..e8767929e0 100755
--- a/opac/opac-virtual-card.pl
+++ b/opac/opac-virtual-card.pl
@@ -48,9 +48,13 @@ if ( C4::Context->preference('OPACpatronimages') ) {
     $template->param( display_patron_image => 1 ) if $patron->image;
 }
 
+# Get the desired barcode format
+my $barcode_format = C4::Context->preference('OPACVirtualCardBarcode');
+
 $template->param(
     virtualcardview => 1,
     patron          => $patron,
+    barcode_format  => $barcode_format,
 );
 
 output_html_with_http_headers $query, $cookie, $template->output, undef, { force_no_caching => 1 };