diff --git a/src/.vitepress/components/MigrationType.vue b/src/.vitepress/components/MigrationType.vue
index 4ddf3646..c58a65da 100644
--- a/src/.vitepress/components/MigrationType.vue
+++ b/src/.vitepress/components/MigrationType.vue
@@ -1,12 +1,13 @@
 <template>
-  <div>
-    <div class="type-badge ce" v-if="type === 'CE'" >Community Edition</div>
-    <div class="type-badge ee" v-else-if="type === 'EE'">Enterprise Edition</div>
-  </div>
+  <span>
+    <VPBadge v-if="type === 'CE'" text="Community Edition" type="warning"/>
+    <VPBadge v-else-if="type === 'EE'" text="Enterprise Edition" type="warning"/>
+  </span>
 </template>
 
-
 <script>
+import { VPBadge } from "vitepress/theme";
+
 export default {
   name: "migration-type",
   props: {
@@ -17,23 +18,4 @@ export default {
 
 <style scoped>
 
-.type-badge {
-  display: inline-block;
-  height: 18px;
-  line-height: 18px;
-  white-space: nowrap;
-  border-radius: 3px;
-  padding: 0 6px;
-  color: white;
-}
-
-.ce {
-  background-color: var(--mm-badge-ce-bg);;
-}
-
-.ee {
-  background-color: var(--mm-badge-ee-bg);;
-}
-
 </style>
-
diff --git a/src/.vitepress/components/ServerType.vue b/src/.vitepress/components/ServerType.vue
index 37a872c8..774d86f0 100644
--- a/src/.vitepress/components/ServerType.vue
+++ b/src/.vitepress/components/ServerType.vue
@@ -1,12 +1,14 @@
 <template>
   <span>
-  <span class="servertype servertype-ce" v-if="type === 'CE'" >Community Edition only</span>
-  <span class="servertype servertype-ee" v-else-if="type === 'EE'">Enterprise Edition only</span>
+    <VPBadge v-if="type === 'CE'" text="Community Edition only" type="warning"/>
+    <VPBadge v-else-if="type === 'EE'" text="Enterprise Edition only" type="warning"/>
   </span>
 </template>
 
 
 <script>
+import { VPBadge } from "vitepress/theme";
+
 export default {
   name: "servertype",
   props: {
@@ -16,22 +18,5 @@ export default {
 </script>
 
 <style scoped>
-.servertype {
-  display: inline-block;
-  line-height: 18px;
-  white-space: nowrap;
-  border-radius: 6px;
-  padding: 0.25em 1em;
-  color: white;
-  margin-left: 5px;
-}
-
-.servertype-ce {
-  background-color: var(--mm-badge-ce-bg);
-}
 
-.servertype-ee {
-  background-color: var(--mm-badge-ee-bg);
-}
 </style>
-
diff --git a/src/.vitepress/components/SinceBadge.vue b/src/.vitepress/components/SinceBadge.vue
index 33e84586..49f3af84 100644
--- a/src/.vitepress/components/SinceBadge.vue
+++ b/src/.vitepress/components/SinceBadge.vue
@@ -1,13 +1,15 @@
 <template>
   <span>
-  <span class="sincebadge" v-if="type === 'App'" >since Mobile app {{ version }}</span>
-  <span class="sincebadge" v-else-if="type === 'Plugin'">since QGIS plugin {{ version }}</span>
-  <span class="sincebadge" v-else-if="type === 'Server'">since Server {{ version }}</span>
+    <VPBadge v-if="type === 'App'" :text="`Since Mobile app ${version}`" type="tip"/>
+    <VPBadge v-else-if="type === 'Plugin'" :text="`Since QGIS plugin ${version}`" type="tip"/>
+    <VPBadge v-else-if="type === 'Server'" :text="`Since Server ${version}`" type="tip"/>
   </span>
 </template>
 
 
 <script>
+import { VPBadge } from "vitepress/theme";
+
 export default {
   name: "sincebadge",
   props: {
@@ -18,15 +20,5 @@ export default {
 </script>
 
 <style scoped>
-.sincebadge {
-  display: inline-block;
-  line-height: 1;
-  white-space: nowrap; 
-  border-radius: 6px;
-  padding: 0.25em 1em;
-  color: var(--mm-badge-since-text-color);
-  background-color: var(--mm-badge-since-bg);
-  margin-left: 5px;
-}
-</style>
 
+</style>
diff --git a/src/.vitepress/theme/index.ts b/src/.vitepress/theme/index.ts
index 122574c9..5452a3c5 100644
--- a/src/.vitepress/theme/index.ts
+++ b/src/.vitepress/theme/index.ts
@@ -1,7 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from "vue";
 import type { Theme } from "vitepress";
-import DefaultTheme from "vitepress/theme";
+import DefaultTheme, { VPBadge } from "vitepress/theme";
 import "./style.css";
 import imageViewer from "vitepress-plugin-image-viewer";
 import vImageViewer from "vitepress-plugin-image-viewer/lib/vImageViewer.vue";
@@ -31,6 +31,7 @@ export default {
   enhanceApp({ app, router, siteData }) {
     DefaultTheme.enhanceApp({ app, router, siteData });
     app.component("vImageViewer", vImageViewer);
+    app.component('VPBadge', VPBadge);
     app.use(
       createGtm({
         id: "GTM-NW7ZGNB", // Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy'] or array of objects [{id: 'GTM-xxxxxx', queryPararms: { gtm_auth: 'abc123', gtm_preview: 'env-4', gtm_cookies_win: 'x'}}, {id: 'GTM-yyyyyy', queryParams: {gtm_auth: 'abc234', gtm_preview: 'env-5', gtm_cookies_win: 'x'}}]
diff --git a/src/.vitepress/theme/style.css b/src/.vitepress/theme/style.css
index 654f704e..3ebe57de 100644
--- a/src/.vitepress/theme/style.css
+++ b/src/.vitepress/theme/style.css
@@ -157,15 +157,3 @@ img {
   align-items: center;
   gap: 0.25em;
 }
-
-/** Component: ServerType */
-:root {
-  --mm-badge-ee-bg: #FFA6A6;
-  --mm-badge-ce-bg: #FFB673;
-}
-
-/** Component: Since badge */
-:root {
-  --mm-badge-since-bg: var(--vp-c-indigo-soft);
-  --mm-badge-since-text-color: var(--vp-c-text-1);
-}
\ No newline at end of file
diff --git a/src/misc/write-docs/index.md b/src/misc/write-docs/index.md
index addfb4c4..628f8251 100644
--- a/src/misc/write-docs/index.md
+++ b/src/misc/write-docs/index.md
@@ -319,9 +319,9 @@ You can use any of supported <GitHubRepo id="markdown-it/markdown-it-emoji/blob/
 
 :tada: :grinning: :rofl: :scream: :heart: :pray: :white_check_mark: :no_entry_sign:
 
-   ```
-   :tada: :grinning: :rofl: :scream: :heart: :pray: :white_check_mark: :no_entry_sign:
-   ```
+```
+:tada: :grinning: :rofl: :scream: :heart: :pray: :white_check_mark: :no_entry_sign:
+```
 
 
 ### Labels/badges
@@ -330,39 +330,55 @@ Markdown supports using badges, such as:
 <Badge text="tip badge" type="tip"/>
 
 
-   ```<Badge text="tip badge" type="tip"/>```
+```markdown
+<Badge text="tip badge" type="tip"/>
+```
 
 ---
 
 <Badge text="warning badge" type="warning"/>
 
 
-   ```<Badge text="warning badge" type="warning"/>```
+```markdown
+<Badge text="warning badge" type="warning"/>
+```
 
 ---
 
 <Badge text="error badge" type="danger"/>
 
 
-   ```<Badge text="error badge" type="danger"/>```
+```markdown
+<Badge text="error badge" type="danger"/>
+```
 
 For mentioning that some feature is available from specific version, use `<SinceBadge />`
 
-   ```<SinceBadge type="App" version="2022.1.1" />```
+```markdown
+<SinceBadge type="App" version="2022.1.1" />
+```
 <SinceBadge version="2022.1.1" type="App" />
 
-   ```<SinceBadge type="Plugin" version="2023.2" />```
+```markdown
+<SinceBadge type="Plugin" version="2023.2" />
+```
 <SinceBadge version="2023.2" type="Plugin" />
 
-   ```<SinceBadge type="Server" version="2024.3" />```
+```markdown
+<SinceBadge type="Server" version="2024.3" />
+```
 <SinceBadge version="2024.3" type="Server" />
 
 To refer to <EnterprisePlatformName /> or <CommunityPlatformName /> edition, use `<ServerType />`
 
-   ```<ServerType type="CE" />```
+```markdown
+<ServerType type="CE" />
+```
 <ServerType type="CE" />
 
-   ```<ServerType type="EE" />```
+```markdown
+<ServerType type="EE" />
+```
 <ServerType type="EE" />
 
 
diff --git a/src/server/security/index.md b/src/server/security/index.md
index 5b67c7c9..5173b550 100644
--- a/src/server/security/index.md
+++ b/src/server/security/index.md
@@ -13,11 +13,11 @@ We provide a template configuration file <GitHubRepo id="MerginMaps/server/blob/
 Let's have a quick look at the main sections:
 
 ``` shell
-    server {
-        listen                  443 ssl;
-        server_name             merginmaps.company.com; # FIXME
-        client_max_body_size    4G;
-        ...
+server {
+    listen                  443 ssl;
+    server_name             merginmaps.company.com; # FIXME
+    client_max_body_size    4G;
+    ...
 ```
 
 Here we enable SSL via the default `443` port and configure name-based HTTPS server via `server_name`. Here you should change this according to your target server name.
@@ -27,10 +27,10 @@ We don't recommend setting a `client_max_body_size` higher than specified, becau
 Next, you need to point your certificate files to NGINX configuration. This is done on the next lines on the secured configuration:
 
 ``` shell
-    ...
-    ssl_certificate_key /etc/letsencrypt/live/merginmaps.company.com/privkey.pem; # FIXME
-    ssl_certificate     /etc/letsencrypt/live/merginmaps.company.com/fullchain.pem; # FIXME
-    ...
+...
+ssl_certificate_key /etc/letsencrypt/live/merginmaps.company.com/privkey.pem; # FIXME
+ssl_certificate     /etc/letsencrypt/live/merginmaps.company.com/fullchain.pem; # FIXME
+...
 ```
 
 The above example uses automated keys generated by CertBot. For more information, visit [CertBot](https://certbot.eff.org/instructions) website and check how you can generate your own keys.
@@ -38,28 +38,28 @@ The above example uses automated keys generated by CertBot. For more information
 Some extra security settings for HTTP headers are provided. Please review them and update in accordance to your requirements.
 
 ```shell
-        # Prevent crawlers from indexing and following links for all content served from the mergin app
-        add_header X-Robots-Tag "none";
-
-        # Protect against clickjacking iframe
-        add_header Content-Security-Policy "frame-ancestors 'self';" always;
-
-        # Add a HSTS policy to prevent plain http from browser
-        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
-
-        # Set cookies security flags
-        proxy_cookie_flags ~ secure httponly samesite=strict;
-
-        location / {
-            root /var/www/html;
-
-            # The lines below were copied from application proxy
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header Host $http_host;
-            # we don't want nginx trying to do something clever with
-            # redirects, we set the Host: header above already.
-            proxy_redirect off;
-            proxy_pass http://app_server;
-        }
+# Prevent crawlers from indexing and following links for all content served from the mergin app
+add_header X-Robots-Tag "none";
+
+# Protect against clickjacking iframe
+add_header Content-Security-Policy "frame-ancestors 'self';" always;
+
+# Add a HSTS policy to prevent plain http from browser
+add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+
+# Set cookies security flags
+proxy_cookie_flags ~ secure httponly samesite=strict;
+
+location / {
+    root /var/www/html;
+
+    # The lines below were copied from application proxy
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    proxy_set_header Host $http_host;
+    # we don't want nginx trying to do something clever with
+    # redirects, we set the Host: header above already.
+    proxy_redirect off;
+    proxy_pass http://app_server;
+}
 ```