diff --git a/css/components/header.css b/css/components/header.css
index 38d8717..09694ff 100644
--- a/css/components/header.css
+++ b/css/components/header.css
@@ -29,6 +29,15 @@ header > a.basket-badge {
     background-color: unset;
 }
 
+header > a.basket-badge > svg {
+    vertical-align: top;
+}
+
+header > a.basket-badge > span,
+header > a.basket-badge > strong {
+    vertical-align: middle;
+}
+
 header > nav > ul {
     list-style: none;
     display: flex;
diff --git a/js/basket.js b/js/basket.js
index efdf214..78a6d59 100644
--- a/js/basket.js
+++ b/js/basket.js
@@ -77,7 +77,7 @@ async function updateBadge() {
         anchor.innerHTML = (numProducts > 0) ? "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n" +
             "    <path\n" +
             "        d=\"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V72H40V56Zm0,144H40V88H216V200Zm-40-88a48,48,0,0,1-96,0,8,8,0,0,1,16,0,32,32,0,0,0,64,0,8,8,0,0,1,16,0Z\"></path>\n" +
-            "</svg> | <strong>" + numProducts + "</strong>" : "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n" +
+            "</svg> <span>|</span> <strong>" + numProducts + "</strong>" : "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n" +
             "    <path\n" +
             "        d=\"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V72H40V56Zm0,144H40V88H216V200Zm-40-88a48,48,0,0,1-96,0,8,8,0,0,1,16,0,32,32,0,0,0,64,0,8,8,0,0,1,16,0Z\"></path>\n" +
             "</svg>";