diff --git a/public/img/integrations/identity-providers/self-hosted/azure-add-application-scope.png b/public/img/integrations/identity-providers/self-hosted/azure-add-application-scope.png
new file mode 100644
index 00000000..89f7ec5a
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-add-application-scope.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/azure-add-scope.png b/public/img/integrations/identity-providers/self-hosted/azure-add-scope.png
new file mode 100644
index 00000000..3597262d
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-add-scope.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/azure-applications-permissions.png b/public/img/integrations/identity-providers/self-hosted/azure-applications-permissions.png
new file mode 100644
index 00000000..d0585fb0
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-applications-permissions.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/azure-client-secret.png b/public/img/integrations/identity-providers/self-hosted/azure-client-secret.png
new file mode 100644
index 00000000..33733245
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-client-secret.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/azure-flows-setup.png b/public/img/integrations/identity-providers/self-hosted/azure-flows-setup.png
new file mode 100644
index 00000000..2a27aa6f
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-flows-setup.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/azure-grant-admin-conset.png b/public/img/integrations/identity-providers/self-hosted/azure-grant-admin-conset.png
new file mode 100644
index 00000000..eb5468b5
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-grant-admin-conset.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/azure-netbird-api-permisssions.png b/public/img/integrations/identity-providers/self-hosted/azure-netbird-api-permisssions.png
new file mode 100644
index 00000000..d7fa422c
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-netbird-api-permisssions.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/azure-new-application.png b/public/img/integrations/identity-providers/self-hosted/azure-new-application.png
new file mode 100644
index 00000000..37c98396
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-new-application.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/azure-openid-permissions.png b/public/img/integrations/identity-providers/self-hosted/azure-openid-permissions.png
new file mode 100644
index 00000000..164f8e2f
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-openid-permissions.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png b/public/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png
new file mode 100644
index 00000000..fe3aad0c
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/azure-user-permissions.png b/public/img/integrations/identity-providers/self-hosted/azure-user-permissions.png
new file mode 100644
index 00000000..131ee243
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/azure-user-permissions.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/zitadel-create-user.png b/public/img/integrations/identity-providers/self-hosted/zitadel-create-user.png
new file mode 100644
index 00000000..63173e6d
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/zitadel-create-user.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/zitadel-new-application-auth.png b/public/img/integrations/identity-providers/self-hosted/zitadel-new-application-auth.png
new file mode 100644
index 00000000..726a345a
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/zitadel-new-application-auth.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/zitadel-new-application-overview.png b/public/img/integrations/identity-providers/self-hosted/zitadel-new-application-overview.png
new file mode 100644
index 00000000..23a16f55
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/zitadel-new-application-overview.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/zitadel-new-application-uri.png b/public/img/integrations/identity-providers/self-hosted/zitadel-new-application-uri.png
new file mode 100644
index 00000000..b2c97936
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/zitadel-new-application-uri.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/zitadel-new-application.png b/public/img/integrations/identity-providers/self-hosted/zitadel-new-application.png
new file mode 100644
index 00000000..a8e5f201
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/zitadel-new-application.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/zitadel-new-project.png b/public/img/integrations/identity-providers/self-hosted/zitadel-new-project.png
new file mode 100644
index 00000000..4329df2a
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/zitadel-new-project.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/zitadel-redirect-settings.png b/public/img/integrations/identity-providers/self-hosted/zitadel-redirect-settings.png
new file mode 100644
index 00000000..9d3744ed
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/zitadel-redirect-settings.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/zitadel-service-account-role.png b/public/img/integrations/identity-providers/self-hosted/zitadel-service-account-role.png
new file mode 100644
index 00000000..871997c1
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/zitadel-service-account-role.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/zitadel-service-user-secret.png b/public/img/integrations/identity-providers/self-hosted/zitadel-service-user-secret.png
new file mode 100644
index 00000000..c25b343d
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/zitadel-service-user-secret.png differ
diff --git a/public/img/integrations/identity-providers/self-hosted/zitadel-token-settings.png b/public/img/integrations/identity-providers/self-hosted/zitadel-token-settings.png
new file mode 100644
index 00000000..bdbf1bf4
Binary files /dev/null and b/public/img/integrations/identity-providers/self-hosted/zitadel-token-settings.png differ
diff --git a/src/components/Code.jsx b/src/components/Code.jsx
index 617f9c0b..602dba23 100644
--- a/src/components/Code.jsx
+++ b/src/components/Code.jsx
@@ -266,7 +266,7 @@ export function CodeGroup({ children, title, ...props }) {
     <CodeGroupContext.Provider value={true}>
       <Container
         {...containerProps}
-        className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
+        className="not-prose my-6 overflow-hidden rounded-l bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
       >
         <CodeGroupHeader title={title} {...headerProps}>
           {children}
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 2da8d61f..687778bd 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -169,7 +169,7 @@ export function Layout({ children, title, tableOfContents }) {
           <Footer />
         </div>
         {!router.route.startsWith("/ipa/resources") && <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
-          <nav aria-labelledby="on-this-page-title" className="w-56">
+          <nav aria-labelledby="on-this-page-title" className="w-80">
             {tableOfContents.length > 0 && (
               <>
                 <h2
diff --git a/src/components/NavigationDocs.jsx b/src/components/NavigationDocs.jsx
index 7f1a7dda..0e345a8f 100644
--- a/src/components/NavigationDocs.jsx
+++ b/src/components/NavigationDocs.jsx
@@ -33,7 +33,7 @@ export const docsNavigation = [
         ],
     },
     {
-        title: 'Self-hosted NetBird',
+        title: 'Self-hosting NetBird',
         links: [
             { title: 'Installation guide', href: '/docs/selfhosted/selfhosted-guide' },
             { title: 'Supported IdPs', href: '/docs/selfhosted/identity-providers' },
@@ -79,7 +79,7 @@ function NavigationGroup({ group, className }) {
         <li className={clsx('relative mt-6', className)}>
             <motion.h2
                 layout="position"
-                className="text-s font-semibold text-zinc-900 dark:text-white"
+                className="text-xs font-semibold text-zinc-900 dark:text-white"
             >
                 {group.title}
             </motion.h2>
diff --git a/src/components/mdx.jsx b/src/components/mdx.jsx
index 7b832929..3d81159f 100644
--- a/src/components/mdx.jsx
+++ b/src/components/mdx.jsx
@@ -41,7 +41,7 @@ function InfoIcon(props) {
 
 export function Note({ children }) {
   return (
-    <div className="my-6 flex gap-2.5 rounded-2xl border border-orange-500/20 bg-orange-50/50 p-4 leading-6 text-orange-900 dark:border-orange-500/30 dark:bg-orange-500/5 dark:text-orange-200 dark:[--tw-prose-links-hover:theme(colors.orange.300)] dark:[--tw-prose-links:theme(colors.white)]">
+    <div className="my-6 flex gap-2.5 rounded-l border border-orange-500/20 bg-orange-50/50 p-4 leading-6 text-orange-900 dark:border-orange-500/30 dark:bg-orange-500/5 dark:text-orange-200 dark:[--tw-prose-links-hover:theme(colors.orange.300)] dark:[--tw-prose-links:theme(colors.white)]">
       <InfoIcon className="mt-1 h-4 w-4 flex-none fill-orange-500 stroke-white dark:fill-orange-200/20 dark:stroke-orange-200" />
       <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
         {children}
diff --git a/src/pages/docs/how-to/monitor-system-and-network-activity.mdx b/src/pages/docs/how-to/monitor-system-and-network-activity.mdx
index eae26619..d7d9382a 100644
--- a/src/pages/docs/how-to/monitor-system-and-network-activity.mdx
+++ b/src/pages/docs/how-to/monitor-system-and-network-activity.mdx
@@ -4,6 +4,8 @@
 The activity monitoring feature lets you quickly see what's happening with your network.
 Whether a new machine or user joined your network or the access control policy has been modified, the activity log allows you to track the changes to your network.
 
+## Access activity monitoring view
+
 Activity monitoring is enabled by default for every network, and you can access it in the web UI under the [Activity tab](https://app.netbird.io/activity).
 You can also use the search bar to filter events by activity type.
 
diff --git a/src/pages/docs/selfhosted/identity-providers.mdx b/src/pages/docs/selfhosted/identity-providers.mdx
index 5dc5d90f..7ee8fd3e 100644
--- a/src/pages/docs/selfhosted/identity-providers.mdx
+++ b/src/pages/docs/selfhosted/identity-providers.mdx
@@ -74,18 +74,24 @@ You can enable it by following these steps:
 - Application type: `Native`
 - Click `Create`
 
-![](/img/integrations/identity-providers/self-hosted/auth0-create-interactive-login-app.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/auth0-create-interactive-login-app.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - Click `Settings` tab
 - Copy **`Client ID`** to `NETBIRD_AUTH_DEVICE_AUTH_CLIENT_ID` in the `setup.env` file
 
-![](/img/integrations/identity-providers/self-hosted/auth0-interactive-login-settings.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/auth0-interactive-login-settings.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - Scroll down to the `Advanced Settings` section
 - Enable **`Device Code`**
 - Click `Save Changes`
 
-![](/img/integrations/identity-providers/self-hosted/auth0-grant-types.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/auth0-grant-types.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 
 ### Step 4: Continue with the self-hosting guide
@@ -112,7 +118,9 @@ After completing this guide, you can log in to your self-hosted NetBird Dashboar
 to your network using the [Interactive SSO Login feature](/docs/how-to/getting-started#running-net-bird-with-sso-login)
 over Keycloak.
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-auth-grant.gif)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-auth-grant.gif" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 ### Step 1: Check your Keycloak Instance
 
@@ -133,8 +141,11 @@ To create a realm you need to:
 - Fill in the form with the following values:
 - Realm name: `netbird`
 - Click `Create`
--
-![](/img/integrations/identity-providers/self-hosted/keycloak-create-realm.png)
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-create-realm.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
 
 ### Step 3: Create a user
 
@@ -148,7 +159,9 @@ In this step we will create a NetBird administrator user.
 - Username: `netbird`
 - Click `Create`
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-create-user.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-create-user.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 The user will need an initial password set to be able to log in. To do this:
 - Click `Credentials` tab
@@ -157,7 +170,9 @@ The user will need an initial password set to be able to log in. To do this:
 - Set the `Temporary` field to `Off` to prevent having to update password on first login
 - Click `Save`
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-set-password.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-set-password.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 ### Step 4: Create a NetBird client
 
@@ -172,11 +187,16 @@ In this step we will create NetBird application client and register with the Key
 - Client ID: `netbird-client`
 - Your newly client `netbird-client` will be used later to set `NETBIRD_AUTH_CLIENT_ID` in the `setup.env`
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-create-client.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-create-client.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
 
 - Check the checkboxes as on the screenshot below and click Save
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-enable-auth.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-enable-auth.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 ### Step 5: Adjust NetBird client access settings
 
@@ -194,7 +214,9 @@ In this step we will configure NetBird application client access with the NetBir
 - Web origins: `+`
 - Click `Save`
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-access-settings.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-access-settings.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 ### Step 6: Create a NetBird client scope
 
@@ -210,13 +232,17 @@ In this step, we will create and configure the NetBird client audience for Keycl
 - Protocol: `OpenID Connect`
 - Click `Save`
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-create-client-scope.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-create-client-scope.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - While in the newly created Client Scope, switch to the `Mappers` tab
 - Click `Configure a new mapper`
 - Choose the `Audience` mapping
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - Fill in the form with the following values:
 - Name: `Audience for NetBird Management API`
@@ -224,7 +250,9 @@ In this step, we will create and configure the NetBird client audience for Keycl
 - Add to access token: `On`
 - Click `Save`
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper-2.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-configure-audience-mapper-2.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 ### Step 7: Add client scope to NetBird client
 
@@ -238,7 +266,9 @@ In this step, we will create and configure the NetBird client audience for Keycl
 - Click `Add` choosing `Default`
 - The value `netbird-client` will be used as audience
 
-![](/img/integrations/identity-providers/self-hosted/keycloack-add-client-scope.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloack-add-client-scope.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 ### Step 8: Create a NetBird-Backend client
 
@@ -253,17 +283,23 @@ In this step we will create NetBird backend client and register with the Keycloa
 - Client ID: `netbird-backend`
 - Your newly client `netbird-backend` will be used later to set `KeycloakClientCredentials` in the `management.json`
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-create-backend-client.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-create-backend-client.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - Check the checkboxes as on the screenshot below and click Save
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-backend-client-auth.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-backend-client-auth.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 The client will need secret to authenticate. To do this:
 - Click `Credentials` tab
 - Copy `client secret` will be used later to set `ClientSecret` in the `management.json`
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-backend-client-credentials.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-backend-client-credentials.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 ### Step 9: Add manage-users role to netbird-backend
 
@@ -275,11 +311,15 @@ The client will need secret to authenticate. To do this:
 - Click `Assign roles` button
 - Select `Filter by clients` and search for `manage-users`
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-service-account-role.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-service-account-role.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - Check the role checkbox and click assign
 
-![](/img/integrations/identity-providers/self-hosted/keycloak-add-role.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/keycloak-add-role.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 Your authority OIDC configuration will be available under:
 ```
@@ -338,7 +378,7 @@ Before you start creating and configuring an Azure AD application, ensure that y
 - User account with appropriate permissions: You must have an Azure AD user account with the appropriate permissions to create and manage Azure AD applications. If you don't have the required permissions, ask your Azure AD administrator to grant them to you.
 
 
-### 1. Create and configure Azure AD application
+### Step 1. Create and configure Azure AD application
 In this step, we will create and configure Netbird application in azure AD.
 - Navigate to [Azure Active Directory](https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/Overview)
 - Click `App Registrations` in the left menu then click on the `+ New registration` button to create a new application.
@@ -347,46 +387,61 @@ In this step, we will create and configure Netbird application in azure AD.
 - Account Types: `Accounts in this organizational directory only (Default Directory only - Single tenant)`
 - Redirect URI: select `Single-page application (SPA)` and URI as `https://<yournetbirddomain.com>/silent-auth`
 
-![](/img/integrations/identity-providers/self-hosted/azure-new-application.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-new-application.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
-### 2. Platform configurations
+### Step 2. Platform configurations
 - Click `Authentication` on the left side menu
 - Under the `Single-page application` Section, add another URI `https://<yournetbirddomain.com>/auth`
-![](/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png)
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-spa-uri-setup.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - Scroll down and setup other options as on the screenshot below and click Save
 
-![](/img/integrations/identity-providers/self-hosted/azure-flows-setup.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-flows-setup.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
-### 3. Create a NetBird application scope
+### Step 3. Create a NetBird application scope
 - Click `Expose an API` on the left menu
 - Under `Application ID URI` click `Set` and then `Save`
 - Click `+ Add a Scope`
 - Fill in the form with the following values and click `Add scope`
 - Scope name: `api`
 
-![](/img/integrations/identity-providers/self-hosted/azure-add-scope.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-add-scope.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - Under `Authorized client Applications`, click on `+ add a client application` and enter the following:
 - Fill in the form with the following values and click `Add application`
 - Client ID: same as your Application ID URI minus the `api://`
 
-![](/img/integrations/identity-providers/self-hosted/azure-add-application-scope.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-add-application-scope.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 
-### 4. Add API permissions
+### Step 4. Add API permissions
 - Add `Netbird` permissions
 - Click `API permissions` on the left menu
 - Click `Add a permission`
 - Click `My APIs` tab, and select `Netbird`. Next check `api` permission checkbox and click `Add permissions`.
 
-![](/img/integrations/identity-providers/self-hosted/azure-netbird-api-permisssions.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-netbird-api-permisssions.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - Add `Delagated permissions` to Microsoft Graph
 - Click `Add a permission`
 - Click `Microsoft Graph` and then click `Delagated permissions` tab  and check all permissions under the `OpenId permissions` section and click  `Add permissions`
 
-![](/img/integrations/identity-providers/self-hosted/azure-openid-permissions.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-openid-permissions.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 
 - Add `Application permissions` to Microsoft Graph
@@ -394,29 +449,37 @@ In this step, we will create and configure Netbird application in azure AD.
 - Click `Microsoft Graph` and then click `Application permissions` tab
 - Search for `User.ReadWrite.All` and under `User` sections  and check `User.ReadWrite.All` checkbox  section
 
-![](/img/integrations/identity-providers/self-hosted/azure-user-permissions.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-user-permissions.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - Search for `Application.ReadWrite.All` and under `Application` sections  and check `Application.ReadWrite.All` checkbox  section and click `Add permissions`
 
-![](/img/integrations/identity-providers/self-hosted/azure-applications-permissions.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-applications-permissions.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 - Click `Grant admin conset for Default Directory` and click `Yes`
 
-![](/img/integrations/identity-providers/self-hosted/azure-grant-admin-conset.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-grant-admin-conset.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
-### 4. Update token version
+### Step 5. Update token version
 - Click `Manifest` on left menu
 - Search for `accessTokenAcceptedVersion` and change the value from `null` to `2`
 - Click `Save`
 
-### 5. Generate client secret
+### Step 6. Generate client secret
 - Click `Certificates & secrets` on left menu
 - Click `New client secret`
 - Fill in the form with the following values and click `Add`
 - Description: `Netbird`
 - Copy `Value` and save it as it can be viewed only once after creation.
 
-![](/img/integrations/identity-providers/self-hosted/azure-client-secret.png)
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/azure-client-secret.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
 
 Your authority OIDC configuration will be available under:
 ```
@@ -462,3 +525,176 @@ NETBIRD_AUTH_USER_ID_CLAIM="oid"
 - Modify the value of the `AUTH_SUPPORTED_SCOPES` environment variable for the dashboard service in the docker-compose.yml file to `openid profile email offline_access api://<application_id>/api`.
 
 - Modify `Scope` value in `DeviceAuthorizationFlow` within the `management.json` to `api://<application_id>/api`.
+
+## Zitadel
+
+This guide is a part of the [NetBird Self-hosting Guide](/docs/selfhosted/selfhosted-guide) and explains how to integrate
+**self-hosted** NetBird with [Zitadel](https://zitadel.com).
+
+<Note>
+    If you prefer not to self-host an Identity and Access Management solution, then you could use a managed alternative like
+    [Auth0](/integrations/identity-providers/self-hosted/using-netbird-with-auth0).
+</Note>
+
+### Step 1. Create and configure Zitadel application
+In this step, we will create and configure Netbird application in zitadel.
+
+Create new zitadel project
+- Navigate to zitadel console
+- Click `Projects` at the top menu, then click `Create New Project` to create a new project
+- Fill in the form with the following values and click `Continue`
+- Name: `NETBIRD`
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/zitadel-new-project.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+Create new zitadel application
+- Click `Projects` in the top menu and select `NETBIRD` project from the list
+- Click `New` in `APPLICATIONS` section to create a new application
+- Fill in the form with the following values and click `Continue`
+- Name: `netbird`
+- TYPE OF APPLICATION: `User Agent`
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/zitadel-new-application.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+- Fill in the form with the following values and click `Continue`
+- Authentication Method: `PKCE`
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/zitadel-new-application-auth.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+- Fill in the form with the following values and click `Continue`
+- Redirect URIs: `https://<domain>/auth` and click `+`
+- Post Logout URIs: `https://<domain>/silent-auth` and click `+`
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/zitadel-new-application-uri.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+- Verify applications details and Click `Create` and then click `Close`
+- Check `Refresh Token` checkbox and click `Save`
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/zitadel-new-application-overview.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+- Copy `Client ID` will be used later in the `setup.env`
+
+### Step 2: Application Token Configuration
+
+To configure `netbird` application token you need to:
+
+- Click `Projects` in the top menu and select `NETBIRD` project from the list
+- Select `netbird` application from `APPLICATIONS` section
+- Click `Token Settings` in the left menu
+- Fill in the form with the following values:
+- Auth Token Type: `JWT`
+- Check `Add user roles to the access token` checkbox
+- Click `Save`
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/zitadel-token-settings.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+### Step 3: Application Redirect Configuration
+
+:::caution
+This step is intended for setup running in development mode with no SSL
+:::
+
+To configure `netbird` application redirect you need to:
+
+- Click `Projects` in the top menu and select `NETBIRD` project from the list
+- Select `netbird` application from `APPLICATIONS` section
+- Click `Redirect Settings` in the left menu
+- Fill in the form with the following values:
+- Toggle `Development Mode`
+- Click `Save`
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/zitadel-redirect-settings.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+### Step 4: Create a Service User
+
+In this step we will create a `netbird` service user.
+
+- Click `Users` in the top menu
+- Select `Service Users` tab
+- Click `New`
+- Fill in the form with the following values:
+- User Name: `netbird`
+- Name: `netbird`
+- Description: `Netbird Service User`
+- Access Token Type: `JWT`
+- Click `Create`
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/zitadel-create-user.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+In this step we will generate `ClientSecret` for the `netbird` service user.
+
+- Click `Actions` in the top right corner and click `Generate Client Secret`
+- Copy `ClientSecret` from the dialog will be used later to set `ClientSecret` in the `management.json`
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/zitadel-service-user-secret.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+### Step 5: Grant manage-users role to netbird service user
+
+In this step we will grant `Org User Manager` role to `netbird` service user.
+
+- Click `Organization` in the top menu
+- Click `+` in the top right corner
+- Search for `netbird` service user
+- Check `Org User Manager` checkbox
+- Click `Add`
+
+<p>
+    <img src="/img/integrations/identity-providers/self-hosted/zitadel-service-account-role.png" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+Your authority OIDC configuration will be available under:
+```
+https://<YOUR-ZITADEL-HOST-AND-PORT>/.well-known/openid-configuration
+```
+:::caution
+Double-check if the endpoint returns a JSON response by calling it from your browser.
+:::
+
+- Set properties in the `setup.env` file:
+```json
+NETBIRD_AUTH_OIDC_CONFIGURATION_ENDPOINT="https://<YOUR-ZITADEL-HOST-AND-PORT>/.well-known/openid-configuration"
+NETBIRD_USE_AUTH0=false
+NETBIRD_AUTH_CLIENT_ID="<Client ID>"
+NETBIRD_AUTH_AUDIENCE="<Client ID>"
+NETBIRD_AUTH_DEVICE_AUTH_CLIENT_ID="<Client ID>"
+NETBIRD_AUTH_REDIRECT_URI="/auth"
+NETBIRD_AUTH_SILENT_REDIRECT_URI="/silent-auth"
+```
+
+- You can now continue with the [NetBird Self-hosting Guide](/docs/selfhosted/selfhosted-guide#step-3-configure-identity-provider).
+
+- Set property `IdpManagerConfig` in the `management.json` file with:
+:::caution
+The file management.json is created automatically. Please refer [here](/docs/selfhosted/selfhosted-guide#step-5-run-configuration-script) for more information.
+:::
+
+```json
+{
+  "ManagerType":  "zitadel",
+  "ZitadelClientCredentials": {
+      "ClientID": "netbird",
+      "ClientSecret": "<CLIENT SECRET>",
+      "GrantType": "client_credentials",
+      "TokenEndpoint": "https://<YOUR-ZITADEL-HOST-AND-PORT>/oauth/v2/token",
+      "ManagementEndpoint": "https://<YOUR-ZITADEL-HOST-AND-PORT>/management/v1"
+  }
+}
+  ```
diff --git a/tailwind.config.js b/tailwind.config.js
index e33fbc16..9681c2c3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
     fontSize: {
       '2xs': ['0.75rem', { lineHeight: '1.25rem' }],
       xs: ['0.8125rem', { lineHeight: '1.5rem' }],
-      sm: ['1rem', { lineHeight: '1.5rem' }],
+      sm: ['0.875rem', { lineHeight: '1.5rem' }],
       base: ['1rem', { lineHeight: '1.75rem' }],
       lg: ['1.125rem', { lineHeight: '1.75rem' }],
       xl: ['1.25rem', { lineHeight: '1.75rem' }],