Add payments integration docs (#175)

src/components/NavigationDocs.jsx

@@ -93,9 +93,8 @@ export const docsNavigation = [
              isOpen: false,
              links: [
                  {title: 'Authentication', href: '/how-to/enforce-periodic-user-authentication' },
-                 {title: 'Delete account/danger zone', href: '/how-to/delete-account' }
+                 {title: 'Delete account/danger zone', href: '/how-to/delete-account' },
-                 /*{title: 'Groups', href: '/about-netbird/netbird-vs-traditional-vpn' },
+                 {title: 'Plans and billing', href: '/how-to/plans-and-billing' }
-                 {title: 'Plans & Billing', href: '/about-netbird/netbird-vs-traditional-vpn' },*/
                  
              ]
          },

src/pages/how-to/plans-and-billing.mdx

@@ -0,0 +1,84 @@
+# Plans and billing
+
+## NetBird plans
+
+NetBird offers diverse plans to accommodate various networking needs, ensuring scalable and secure connectivity.
+
+- **Free Plan:** The Free plan provides secure connectivity for up to 5 users and 100 machines suitable for individuals or small teams.
+It features peer-to-peer encryption, access control, routing, and private DNS. The Free plan automatically integrates
+with popular personal identity providers (IdP) like Google, Microsoft, and GitHub. It supports multi-factor authentication
+(MFA) when enabled in your IdP.
+
+
+- **Team Plan:** Priced at **$5 per user per month**. The Team plan supports unlimited users and provides access to 100
+machines plus an additional 10 machines per user. It offers advanced features such as multi-factor authentication
+and allows for unlimited admin users, making it ideal for larger teams seeking scalable and secure connectivity.
+
+- **Business Plan:** At **$12 per user per month**, the Business Plan offers enhanced network security with a Zero Trust approach. It supports unlimited users and includes features like device approvals and integrations for comprehensive control, making it an excellent choice for organizations seeking advanced security solutions.
+
+<p>
+    <img src="/docs-static/img/how-to-guides/pricing-overview.png" alt="pricing-overview" className="imagewrapper-big"/>
+</p>
+
+Details can be found on our [pricing page](https://netbird.io/pricing).
+
+## Machine-based usage
+
+NetBird offers scalable plans for networks with a machine-based usage model. This approach is relevant, among other scenarios,
+for IoT use cases where there is a large number of machines on the network but comparatively fewer users.
+This option is available under both Team and Business plans. Simply subscribe to the Team or Business plan, and we'll
+automatically adjust the machine costs as detailed in the following sections.
+
+
+### Inclusive machine allowance
+- **Team and Business plans**: Start with 100 free machines and an extra 10 machines for each paid user.
+- **Example**: a Team plan with 10 users provides:
+- `(10 users × 10 machines/user) + 100 base machines = 200 machines`
+
+### Additional machine billing
+- Extra machines are billed at a set rate per machine.
+- **Example**: Adding 20 extra machines to a Team plan with 10 users:
+- Base plan cost: `(10 users × €5/user) = €50`
+- Extra machines cost: `(20 extra machines × €0.5/machine) = €10`
+- **Total monthly cost**: `€50 + €10 = €60`
+
+## Starting a subscription
+
+To start or change your current plan, navigate to `Settings` > `Plans & Billing` and choose the plan you wish to upgrade or downgrade to.
+
+<p>
+    <img src="/docs-static/img/how-to-guides/chose-plan.png" alt="chose-plan" width="780" className="imagewrapper-big"/>
+</p>
+
+**Payment Information**
+
+Next, you'll be directed to enter your payment information. Available payment options currently include credit cards, Google Pay, and Link.
+<p>
+    <img src="/docs-static/img/how-to-guides/payment-information.png" alt="payment-information" className="imagewrapper-big"/>
+</p>
+
+
+
+**Confirmation and billing cycle**
+
+After successfully submitting your payment information, the updated version of your plan will be reflected in your account.
+
+<p>
+    <img src="/docs-static/img/how-to-guides/plans-billing-overview.png" alt="plans-billing-overview" className="imagewrapper-big"/>
+</p>
+
+
+<Note>
+Please note that changes to the number of peers and user counts are updated in our system daily at 2 AM UTC. So, it might take up to 24 hours for these changes to show in your account.
+</Note>
+
+
+## Changing a subscription
+
+Based on your current plan, you have the flexibility to upgrade or downgrade at any time as your needs change. 
+
+<Note>
+Your subscription cycle starts on the first day of your original subscription. If you adjust your plan during the billing cycle, and since billing occurs at the end of the subscription month, you will be charged for the plan you are on at the end of the billing cycle.
+</Note>
+
+

src/pages/introduction.mdx

@@ -8,14 +8,13 @@ export const description =
 # Introduction to NetBird
 
 <p>
-    <img src="/docs-static/img/open-source-zero-trust-networking.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/open-source-zero-trust-networking.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 NetBird is an Open-Source Zero Trust Networking platform that allows you to create secure private networks for your
 organization or home. We designed NetBird to be simple and fast, requiring near-zero configuration effort and leaving
 behind the hassle of opening ports, complex firewall rules, VPN gateways, etc.
 
-
 <Note>
     NetBird is an **[open-source](https://github.com/netbirdio/netbird)** project and can be self-hosted
 </Note>

src/pages/selfhosted/identity-providers.mdx

@@ -30,7 +30,7 @@ Create new zitadel project
 - Name: `NETBIRD`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-project.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-project.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 Create new zitadel application
@@ -41,14 +41,14 @@ Create new zitadel application
 - TYPE OF APPLICATION: `User Agent`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Fill in the form with the following values and click `Continue`
 - Authentication Method: `PKCE`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-auth.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-auth.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Fill in the form with the following values and click `Continue`
@@ -58,14 +58,14 @@ Create new zitadel application
 - Post Logout URIs: `https://<domain>/` and click `+`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-uri.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-uri.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Verify applications details and Click `Create` and then click `Close`
 - Under `Grant Types` select `Authorization Code`, `Device Code` and `Refresh Token` and click `save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-overview.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-new-application-overview.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Copy `Client ID` will be used later in the `setup.env`
@@ -83,7 +83,7 @@ To configure `netbird` application token you need to:
 - Click `Save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-token-settings.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-token-settings.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 3: Application Redirect Configuration
@@ -102,7 +102,7 @@ To configure `netbird` application redirect you need to:
 - Click `Save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-redirect-settings.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-redirect-settings.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 4: Create a Service User
@@ -120,7 +120,7 @@ In this step we will create a `netbird` service user.
 - Click `Create`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-create-user.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-create-user.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 In this step we will generate `ClientSecret` for the `netbird` service user.
@@ -129,7 +129,7 @@ In this step we will generate `ClientSecret` for the `netbird` service user.
 - Copy `ClientSecret` from the dialog will be used later to set `NETBIRD_IDP_MGMT_CLIENT_SECRET` in the `setup.env`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-service-user-secret.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-service-user-secret.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 5: Grant manage-users role to netbird service user
@@ -143,7 +143,7 @@ In this step we will grant `Org User Manager` role to `netbird` service user.
 - Click `Add`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-service-account-role.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/zitadel-service-account-role.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 Your authority OIDC configuration will be available under:
@@ -205,7 +205,7 @@ to your network using the [Interactive SSO Login feature](/how-to/getting-starte
 over Keycloak.
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-auth-grant.gif" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-auth-grant.gif" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 1: Check your Keycloak Instance
@@ -229,7 +229,7 @@ To create a realm you need to:
 - Click `Create`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-realm.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-realm.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 
@@ -257,7 +257,7 @@ The user will need an initial password set to be able to log in. To do this:
 - Click `Save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-set-password.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-set-password.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 4: Create a NetBird client
@@ -274,14 +274,14 @@ In this step we will create NetBird application client and register with the Key
 - Your newly client `netbird-client` will be used later to set `NETBIRD_AUTH_CLIENT_ID` in the `setup.env`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-client.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-client.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 
 - Check the checkboxes as on the screenshot below and click Save
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-enable-auth.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-enable-auth.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 5: Adjust NetBird client access settings
@@ -301,7 +301,7 @@ In this step we will configure NetBird application client access with the NetBir
 - Click `Save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-access-settings.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-access-settings.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 6: Create a NetBird client scope
@@ -319,7 +319,7 @@ In this step, we will create and configure the NetBird client audience for Keycl
 - Click `Save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-client-scope.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-client-scope.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - While in the newly created Client Scope, switch to the `Mappers` tab
@@ -327,7 +327,7 @@ In this step, we will create and configure the NetBird client audience for Keycl
 - Choose the `Audience` mapping
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Fill in the form with the following values:
@@ -337,7 +337,7 @@ In this step, we will create and configure the NetBird client audience for Keycl
 - Click `Save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper-2.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper-2.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 7: Add client scope to NetBird client
@@ -353,7 +353,7 @@ In this step, we will create and configure the NetBird client audience for Keycl
 - The value `netbird-client` will be used as audience
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloack-add-client-scope.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloack-add-client-scope.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 8: Create a NetBird-Backend client
@@ -370,13 +370,13 @@ In this step we will create NetBird backend client and register with the Keycloa
 - Your newly client `netbird-backend` will be used later to set `NETBIRD_IDP_MGMT_CLIENT_ID` in the `setup.env`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-backend-client.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-create-backend-client.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Check the checkboxes as on the screenshot below and click Save
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-backend-client-auth.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-backend-client-auth.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 The client will need secret to authenticate. To do this:
@@ -384,7 +384,7 @@ The client will need secret to authenticate. To do this:
 - Copy `client secret` will be used later to set `NETBIRD_IDP_MGMT_CLIENT_SECRET` in the `setup.env`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-backend-client-credentials.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-backend-client-credentials.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 9: Add view-users role to netbird-backend
@@ -398,13 +398,13 @@ The client will need secret to authenticate. To do this:
 - Select `Filter by clients` and search for `view-users`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-service-account-role.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-service-account-role.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Check the role checkbox and click assign
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-add-role.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/keycloak-add-role.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 <Note>
@@ -466,7 +466,7 @@ In this step, we will create OAuth2/OpenID Provider in Authentik.
     - type: `OAuth2/OpenID Provider`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-new-provider-type.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-new-provider-type.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Fill in the form with the following values and click `Finish`
@@ -483,7 +483,7 @@ In this step, we will create OAuth2/OpenID Provider in Authentik.
 
 Take note of `Client ID`, we will use it later
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-new-provider-config.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-new-provider-config.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 2: Create external applications
@@ -498,7 +498,7 @@ In this step, we will create external applications in Authentik.
     - Provider: `Netbird`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-new-application.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-new-application.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 3: Create service account
@@ -512,13 +512,13 @@ In this step, we will create service account.
     - Create Group: `Disable`
  
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-new-service-account.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-new-service-account.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Take note of service account `username` and `password`, we will need it later
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-service-account-details.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-service-account-details.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 4: Add service account to admin group
@@ -532,7 +532,7 @@ In this step, we will add `Netbird` service account to `authentik Admins` group.
 - Disable `Hide service-accounts` and verify if user `Netbird` is added to the group
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-add-user-group.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/authentik-add-user-group.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 Your authority OIDC configuration will be available under:
@@ -594,7 +594,7 @@ In this step, we will create and configure NetBird application in azure AD.
     - Redirect URI: select `Single-page application (SPA)` and URI as `https://<yournetbirddomain.com>/silent-auth`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-new-application.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-new-application.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 2. Platform configurations
@@ -602,20 +602,20 @@ In this step, we will create and configure NetBird application in azure AD.
 - Under the `Single-page application` Section, add another URI `https://<yournetbirddomain.com>/auth`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Scroll down and setup other options as on the screenshot below and click Save
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-flows-setup.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-flows-setup.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Click `Add a Platform` and select `Mobile and desktop applications`
 - Fill in the form with the following values and click Configure
     - Custom redirect URIs:  `http://localhost:53000`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 3. Create a NetBird application scope
@@ -626,7 +626,7 @@ In this step, we will create and configure NetBird application in azure AD.
 - Scope name: `api`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-add-scope.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-add-scope.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Under `Authorized client Applications`, click on `+ add a client application` and enter the following:
@@ -634,7 +634,7 @@ In this step, we will create and configure NetBird application in azure AD.
 - Client ID: same as your Application ID URI minus the `api://`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-add-application-scope.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-add-application-scope.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 
@@ -646,7 +646,7 @@ Add `Netbird` permissions
 - Click `My APIs` tab, and select `Netbird`. Next check `api` permission checkbox and click `Add permissions`.
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-netbird-api-permisssions.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-netbird-api-permisssions.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 Add `Delegated permissions` to Microsoft Graph
@@ -656,14 +656,14 @@ Add `Delegated permissions` to Microsoft Graph
 - In `Select permissions` search for `User.Read` and under the `User` section select `User.Read.All` and click  `Add permissions`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-openid-permissions.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-openid-permissions.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 
 - Click `Grant admin consent for Default Directory` and click `Yes`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-grant-admin-conset.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-grant-admin-conset.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 5. Update token version
@@ -679,7 +679,7 @@ Add `Delegated permissions` to Microsoft Graph
 - Copy `Value` and save it as it can be viewed only once after creation.
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-client-secret.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/azure-client-secret.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Click `Overview` on left menu and take note of `Application (client) ID`, `Object ID` and `Directory (tenant) ID`
@@ -740,7 +740,7 @@ In this step, we will create and configure Netbird single-page application in ok
   - Application type: `Single-Page Application`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-new-single-page-application.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-new-single-page-application.png" alt="high-level-dia" className="imagewrapper"/>
 </p>
 
 - Fill in the form with the following values and click `Save`
@@ -751,7 +751,7 @@ In this step, we will create and configure Netbird single-page application in ok
 - Click `Save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-single-page-application.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-single-page-application.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Navigate to Okta Admin Dashboard
@@ -762,7 +762,7 @@ In this step, we will create and configure Netbird single-page application in ok
 - Click `Save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-single-sign-on-configuration.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-single-sign-on-configuration.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 2. Create and configure Okta native application
@@ -775,7 +775,7 @@ In this step, we will create and configure Netbird native application in okta.
   - Application type: `Native Application`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-new-native-application.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-new-native-application.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Fill in the form with the following values and click `Save`
@@ -784,7 +784,7 @@ In this step, we will create and configure Netbird native application in okta.
 - Click `Save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-native-application.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-native-application.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Navigate to Okta Admin Dashboard
@@ -795,7 +795,7 @@ In this step, we will create and configure Netbird native application in okta.
 - Click `Save`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-native-sign-on-configuration.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-native-sign-on-configuration.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 
@@ -811,7 +811,7 @@ In this step, we will generate netbird api token in okta for authorizing calls t
 - Take note of token value and click `OK, got it`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-generate-token.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/okta-generate-token.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 
@@ -868,7 +868,7 @@ Before you start creating and configuring an Google Workspace application, ensur
 - Navigate to [OAuth consent](https://console.cloud.google.com/apis/credentials/consent) page
 - Select `Internal` User Type and click create
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-consent-screen-type.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-consent-screen-type.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Fill in the form with the following values and click `SAVE AND CONTINUE`
@@ -879,12 +879,12 @@ Before you start creating and configuring an Google Workspace application, ensur
 - Click `ADD OR REMOVE SCOPES`
 - Select `/auth/userinfo.email`, `/auth/userinfo.profile` and `openid` scopes and then click `UPDATE`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-consent-screen-scopes.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-consent-screen-scopes.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - Click `SAVE AND CONTINUE`
 - Verify the summary of the OAuth consent screen to ensure that everything is properly configured, and then click `BACK TO DASHBOARD`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-consent-screen-summary.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-consent-screen-summary.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 2: Create OAuth 2.0 credentials
@@ -896,11 +896,11 @@ Before you start creating and configuring an Google Workspace application, ensur
     - Authorized JavaScript origins: `https://<your netbird domain>` and `http://localhost`
     - Authorized redirect URIs: `https://<your netbird domain>/auth`, `https://<your netbird domain>/silent-auth` and `http://localhost:53000`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-oauth-client.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-oauth-client.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - Take note of `Client ID` and `Client Secret` and click `OK`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-oauth-client-created.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-oauth-client-created.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 3: Create service account
@@ -912,14 +912,14 @@ Before you start creating and configuring an Google Workspace application, ensur
 - Take note of service account email address, we will use it later
 - Click `DONE`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-service-account-create.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-service-account-create.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 4: Create service account keys
 - Navigate to [API Credentials](https://console.cloud.google.com/apis/credentials) page
 - Under  `Service Accounts` click the `netbird` to edit the service account
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-edit-service-account.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-edit-service-account.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - Click the `Keys` tab
 - Click the `Add key` drop-down menu, then select `Create new key`
@@ -941,23 +941,23 @@ Read how to manage and secure your service keys [here](https://cloud.google.com/
     - description: `User Management ReadOnly`
 - Click `CONTINUE`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-new-role-info.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-new-role-info.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Scroll down to `Admin API privileges` and add the following privileges
     - Users: `Read`
 - Click `CONTINUE`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-privileges-review.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-privileges-review.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - Verify preview of assigned Admin API privileges to ensure that everything is properly configured, and then click `CREATE ROLE`
 - Click `Assign service accounts`, add service account email address and then click `ADD`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-assign-role.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-assign-role.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - Click `ASSIGN ROLE` to assign service account to `User Management ReadOnly` role
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-service-account-privileges.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/google-service-account-privileges.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Navigate to [Account Settings](https://admin.google.com/ac/accountsettings/profile?hl=en_US) page and take note of `Customer ID`
@@ -1063,14 +1063,14 @@ You can enable it by following these steps:
 - Click `Create`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-create-interactive-login-app.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-create-interactive-login-app.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Click `Settings` tab
 - Copy **`Client ID`** to `NETBIRD_AUTH_DEVICE_AUTH_CLIENT_ID` in the `setup.env` file
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-interactive-login-settings.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-interactive-login-settings.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Scroll down to the `Advanced Settings` section
@@ -1078,7 +1078,7 @@ You can enable it by following these steps:
 - Click `Save Changes`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-grant-types.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-grant-types.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 5: Create and configuire Machine to Machine application.
@@ -1093,7 +1093,7 @@ This application will be used to authorize access to Auth0 Management API.
 - Click `Create`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-create-machine-app.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-create-machine-app.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Fill the form with the following values:
@@ -1102,7 +1102,7 @@ This application will be used to authorize access to Auth0 Management API.
   - Click `Authorize`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-machine-authorization.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-machine-authorization.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 <Note>
@@ -1118,7 +1118,7 @@ To enable this functionality, include the `--user-delete-from-idp` flag in the m
 - Copy **`DOMAIN`** to `NETBIRD_IDP_MGMT_EXTRA_AUDIENCE` in the `setup.env` file
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-machine-settings.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/auth0-machine-settings.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Set properties in the `setup.env` file:
@@ -1156,23 +1156,23 @@ Before you start creating and configuring an JumpCloud application, ensure that
 - Click `SSO Applications` on the left menu under `USER AUTHENTICATION` section
 - Click `Add New Application` and select `Custom Application`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-new-sso-app.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-new-sso-app.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - On the `Which application would you like to integrate` screen, confirm that you've selected `Custom application` and click `Next`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-new-sso-app-confirm-selection.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-new-sso-app-confirm-selection.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - On the `Select the features you would like to enable` screen, select `Manage Single Sign-On (SSO)` and check `Configure SSO with OIDC` and click `Next`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-new-sso-app-features.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-new-sso-app-features.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - On the `Enter General info` screen, add `NetBird` as `Display Label` and click `Next`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-new-sso-app-general-info.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-new-sso-app-general-info.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - On the confirmation screen, review the information and click on `Configure Application` to proceed
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-new-sso-app-confirmation.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-new-sso-app-confirmation.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - On the `New Application` screen, click on the SSO tab and enter the following values:
     - Under `Endpoint Configuration` section:
@@ -1181,20 +1181,20 @@ Before you start creating and configuring an JumpCloud application, ensure that
       - Login URL: `https://<domain>`
 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-sso-configuration.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-sso-configuration.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
     - Under `Attribute Mapping (optional)` section:
         - Standard Scopes: `Email`, `Profile`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-sso-atributes-configuration.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-sso-atributes-configuration.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - Click on the `User Groups` tab and select the user groups that can access this application
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-user-groups.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-user-groups.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - Click `Activate`
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-oidc-app.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-oidc-app.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - Take note of `Client ID`, will be used later
 
@@ -1218,7 +1218,7 @@ The following steps will assume that you are creating a new account. If you alre
     please ensure that you assign the `Help Desk` role to the `NetBird Integration` user following the steps outlined above.
 </Note>
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-add-admin-user.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-add-admin-user.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 After following the steps above, you will receive the login instructions for the newly created user in the email configured. Please follow the instructions to set a password for the user.
@@ -1230,12 +1230,12 @@ In this step, we will generate netbird api token in jumpcloud for authorizing ca
 - Login with the user created in the previous step or with an existing user
 - Click on the account initials displayed at the top-right and select `My API Key` from the drop-down
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-profile.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-profile.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 - If there is no API key generated, click on `Generate New API Key` button
 - Take note of your api token displayed 
 <p>
-    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-api-key-generation.png" alt="high-level-dia" class="imagewrapper"/>
+    <img src="/docs-static/img/integrations/identity-providers/self-hosted/jumpcloud-api-key-generation.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Set properties in the `setup.env` file:

src/pages/selfhosted/sqlite-store.mdx

@@ -23,7 +23,7 @@ If you have new installation you already have SQLite. To confirm please check th
 For a high-level overview of the SQLite schema, refer to the Entity Relationship Diagram (ERD) below:
 
 <p>
-    <img src="/docs-static/img/selfhosted/sqlite-erd.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/selfhosted/sqlite-erd.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 ## Using SQLite for fresh installations

src/pages/selfhosted/troubleshooting.mdx

@@ -17,7 +17,7 @@ Please replace <b>netbird.DOMAIN.com</b> and <b>PASSWORD</b> with the informatio
 
 You should see an output similar to the following:
 <p>
-    <img src="/docs-static/img/troubleshooting/turn-test-out.png" alt="turn" width="700" className="imagewrapper"/>
+    <img src="/docs-static/img/troubleshooting/turn-test-out.png" alt="turn" width="700" className="imagewrapper-nig"/>
 </p>
 Where you have the following types: `host` (local address), `srflx` (STUN reflexive address), `relay`
 (TURN relay address). If `srflx` and `relay` are not present then the TURN server is not working or not accessible and you should review the required ports in the [requirements section](/selfhosted/selfhosted-guide#requirements).