Adjust screenshots sizes (#174)

src/components/NavigationDocs.jsx

@@ -84,7 +84,7 @@ export const docsNavigation = [
          {
              title: 'Activity',
              links: [
-                 { title: 'Activity Events', href: '/how-to/monitor-system-and-network-activity' }, 
+                 { title: 'Activity events', href: '/how-to/monitor-system-and-network-activity' },
               
              ],
          },
@@ -93,7 +93,7 @@ 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 & Billing', href: '/about-netbird/netbird-vs-traditional-vpn' },*/
                  
@@ -103,9 +103,9 @@ export const docsNavigation = [
              title: 'Integrations',
              isOpen: false,
              links: [
-                 {title: 'Activity Event Streaming', href: '/how-to/activity-event-streaming' },
-                 {title: 'Identity Provider', href: '/how-to/idp-sync' },
-                 {title: 'Enable Post Quantum Cryptography', href: '/how-to/enable-post-quantum-cryptography' },
+                 {title: 'Activity event streaming', href: '/how-to/activity-event-streaming' },
+                 {title: 'Identity provider sync', href: '/how-to/idp-sync' },
+                 {title: 'Enable post quantum cryptography', href: '/how-to/enable-post-quantum-cryptography' },
                  
              ]
          },
@@ -125,7 +125,7 @@ export const docsNavigation = [
     {
      title: 'USE CASES',
      links: [
-         { title: 'NetBird on FaaS', href: '/how-to/netbird-on-faas' },
+         { title: 'Serverless and NetBird', href: '/how-to/netbird-on-faas' },
          { title: 'Routing peers and Kubernetes', href: '/how-to/routing-peers-and-kubernetes'},
          { title: 'NetBird Client on AWS ECS', href: '/how-to/examples'},
      ],

src/pages/about-netbird/how-netbird-works.mdx

@@ -20,7 +20,7 @@ A **Peer** is a machine or any device that is connected to the network.
 It can be a Linux server running in the cloud or on-premises, a personal laptop, mobile phone, or even a Raspberry PI.
 
 <p>
-    <img src="/docs-static/img/architecture/high-level-dia.png" alt="high-level-dia" width="781" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}}/>
+    <img src="/docs-static/img/architecture/high-level-dia.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 With NetBird clients installed and authorized on the Management service, machines form a mesh network connecting
@@ -58,7 +58,7 @@ After that, they are able to establish a connection to the new peer.
 The Management service runs in the cloud NetBird-managed. It can also be self-hosted.
 
 <p>
-    <img src="/docs-static/img/architecture/management.png" alt="management-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/architecture/management.png" alt="management-dia" className="imagewrapper-big"/>
 </p>
 
 ### Client Application
@@ -99,7 +99,7 @@ peers need to find each other and exchange the most suitable connection candidat
 This is done through Signal. After a connection has been established, Signal steps out.
 
 <p>
-    <img src="/docs-static/img/architecture/signal.png" alt="signal-dia"  className="imagewrapper"/>
+    <img src="/docs-static/img/architecture/signal.png" alt="signal-dia" className="imagewrapper-big"/>
 </p>
 
 <Note>
@@ -116,7 +116,7 @@ In fact, we use an open-source implementation called [Coturn](https://github.com
 The purpose of this service is to be a "plan B" and relay traffic between peers in case a point-to-point connection isn't possible.
 
 <p>
-    <img src="/docs-static/img/architecture/relay.png" alt="relay-dia"  className="imagewrapper"/>
+    <img src="/docs-static/img/architecture/relay.png" alt="relay-dia" className="imagewrapper-big"/>
 </p>
 
 <Note>

src/pages/how-to/access-netbird-public-api.mdx

@@ -20,28 +20,28 @@ The most common usage scenarios:
 
 ### Creating a service user
 
-To create a service user, you'll need to log in to your organization's account at https://app.netbird.io and navigate to the "Users" -> "Service Users" section of your account.
+To create a service user, you'll need to log in to your organization's account at https://app.netbird.io and navigate to the "Team" -> "Service Users" section of your account.
 <p>
-    <img src="/docs-static/img/overview/service-user-overview.png" alt="service-user-overview" width="780" className="imagewrapper"/>
+    <img src="/docs-static/img/overview/service-user-overview.png" alt="service-user-overview" className="imagewrapper-big"/>
 </p>
 
 From there, you can create a new service user and specify a role that the user should have.
 User role allows read-only access, use the admin for write access.
 
 <p>
-    <img src="/docs-static/img/overview/service-user-creation.png" alt="service-user-creation-popup" width="400" className="imagewrapper"/>
+    <img src="/docs-static/img/overview/service-user-creation.png" alt="service-user-creation-popup" className="imagewrapper"/>
 </p>
-
+‚
 <Note>
     It's important to keep your service users secure, as they can provide access to sensitive data and actions within your organization. You should treat your service users like you would treat your own personal account and limit the scope of access granted to the service user.
 </Note>
 
 ### Creating an access token
 
-To create an access token, you'll need to log in to your account and navigate to the "Users" section and look for your user or create a [service user](#service-users) to use for your API requests.
+To create an access token, you'll need to log in to your account and navigate to the "Team" section and look for your user or create a [service user](#service-users) to use for your API requests.
 
 <p>
-    <img src="/docs-static/img/overview/personal-access-token-overview.png" alt="personal-access-token-overview" width="780" className="imagewrapper"/>
+    <img src="/docs-static/img/overview/personal-access-token-overview.png" alt="personal-access-token-overview" width="780" className="imagewrapper-big"/>
 </p>
 
 From there, you can create a new token and specify expiration for the token. You won't be able to modify your token.

src/pages/how-to/activity-event-streaming.mdx

@@ -20,7 +20,7 @@ Before you start creating and configuring a Datadog event-streaming integration,
 ### Step 2: Create an event-streaming integration in NetBird
 - Navigate to the [Integrations » Event Streaming](https://preview.netbird.io/integrations) tab in the NetBird dashboard
 <p>
-    <img src="/docs-static/img/how-to-guides/event-streaming-integration.png" alt="event-streaming-integration" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/event-streaming-integration.png" alt="event-streaming-integration" className="imagewrapper-big"/>
 </p>
 
 - Enable and configure the Datadog integration

src/pages/how-to/add-machines-to-your-network.mdx

@@ -15,7 +15,7 @@ To add a new peer to your network follow these steps:
 2. Hit `Add Peer` button
 
 <p>
-    <img src="/docs-static/img/how-to-guides/add-new-peer-empty.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/add-new-peer-empty.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 3. Follow the instructions
@@ -27,10 +27,9 @@ To add a new peer to your network follow these steps:
 4. Refresh the Peers tab, and it will display new machines
 
 <p>
-    <img src="/docs-static/img/how-to-guides/peer-list.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/peer-list.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
-
 ## What's next?
 
 Here are a few links that might be handy as you venture further into NetBird:

src/pages/how-to/add-users-to-your-network.mdx

@@ -56,11 +56,11 @@ NetBird has three user roles - `Owner`, `Admin`, and `User`. The roles allow you
 
 To manage user roles, proceed to the `Users` tab and click on the user you want to update:
 <p>
-  <img src="/docs-static/img/how-to-guides/user-tab-list.png" alt="high-level-dia" className="imagewrapper"/>
+  <img src="/docs-static/img/how-to-guides/user-tab-list.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 After that, select the desired role from the dropdown:
 <p>
-  <img src="/docs-static/img/how-to-guides/user-update-role.png" alt="high-level-dia" className="imagewrapper"/>
+  <img src="/docs-static/img/how-to-guides/user-update-role.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 Click the `Save` button to save the changes.
 <Note>

src/pages/how-to/approve-peers.mdx

@@ -15,7 +15,7 @@ Administrators then can assess whether the peer is eligible to join the network.
 To enable peer approval, navigate to [Settings » Authentication](https://app.netbird.io/settings) and enable 'Peer approval'.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/peer-approval-settings.png" alt="peer-approval-settings" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/peer-approval-settings.png" alt="peer-approval-settings" className="imagewrapper-big"/>
 </p>
 
 <Note>

src/pages/how-to/delete-account.mdx

@@ -9,7 +9,7 @@ To delete your NetBird organization account, you must be a user with the [owner
 
     Go to the `Settings` tab, then click on `Danger Zone`. Review the message and click on the `Delete Account` button.
 <p>
-    <img src="/docs-static/img/how-to-guides/account-settings-danger-zone.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/account-settings-danger-zone.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
     To confirm, click on the `Delete` button.
 <p>

src/pages/how-to/enforce-periodic-user-authentication.mdx

@@ -11,7 +11,7 @@ Every new network has this feature enabled, and the expiration period is set to
 Expired peers will appear in the peers' view with the status `Login required`.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/peer-needs-login.png" alt="peer-needs-login.png" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/peer-needs-login.png" alt="peer-needs-login.png" className="imagewrapper-big"/>
 </p>
 
 ## Configure and disable expiration
@@ -20,7 +20,7 @@ Go to the Web UI `Settings` tab and set the desired period in the Authentication
 You can also disable the expiration for the whole network in the same section.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/peer-login-expiration.png" alt="peer-login-expiration" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/peer-login-expiration.png" alt="peer-login-expiration" className="imagewrapper-big"/>
 </p>
 
 
@@ -36,7 +36,7 @@ In the Peers tab of the web UI click on the peer you want to disable expiration
 Peers with `Expiration disabled` will be marked with a corresponding label in the Peers table.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/individual-peer-login-expiration.png" alt="peer-login-expiration" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/individual-peer-login-expiration.png" alt="peer-login-expiration" className="imagewrapper-big"/>
 </p>
 
 ## Get started

src/pages/how-to/getting-started.mdx

@@ -20,7 +20,7 @@ Both machines are running Linux but NetBird also works on Windows, MacOS nad pop
 You can use your Google, GitHub or Microsoft account.
 
 <p>
-    <img src="/docs-static/img/getting-started/auth.png" alt="login-to-netbird" className="imagewrapper" />
+    <img src="/docs-static/img/getting-started/auth.png" alt="login-to-netbird" className="imagewrapper-big"/>
 </p>
 
 2. After a successful login you will be redirected to the ```Peers``` screen which is empty because you don't have any peers yet.
@@ -28,7 +28,7 @@ You can use your Google, GitHub or Microsoft account.
 The `Add peer` window should automatically pop up, but if it doesn't, click ```Add new peer``` to add a new machine.
 
 <p>
-    <img src="/docs-static/img/getting-started/empty-peers.png" alt="login-to-netbird" className="imagewrapper"/>
+    <img src="/docs-static/img/getting-started/empty-peers.png" alt="login-to-netbird" className="imagewrapper-big"/>
 </p>
 
 3. Choose your machine operating system (in our case it is ```Linux```) and proceed with the installation steps.
@@ -37,16 +37,17 @@ The `Add peer` window should automatically pop up, but if it doesn't, click ```A
     <img src="/docs-static/img/getting-started/add-peer.png" alt="login-to-netbird" className="imagewrapper"/>
 </p>
 
-4. If you installed NetBird Desktop UI you can use it to connect to the network instead of running `netbird up` command. Look for `NetBird` in your application list, run it, and click `Connect`.
+4. If you installed NetBird Desktop UI you can use it to connect to the network instead of running `netbird up` command.
+Look for `NetBird` in your application list, run it, and click `Connect`.
 >
 
 <p>
-    <img src="/docs-static/img/getting-started/systray.png" alt="login-to-netbird" className="imagewrapper"/>
+    <img src="/docs-static/img/getting-started/systray.png" alt="login-to-netbird" className="imagewrapper-big"/>
 </p>
 5. At this point a browser window pops up starting a device registration process. Click confirm and follow the steps if required.
 
 <p>
-    <img src="/docs-static/img/getting-started/device-confirmation.png" alt="login-to-netbird" className="imagewrapper"/>
+    <img src="/docs-static/img/getting-started/device-confirmation.png" alt="login-to-netbird" className="imagewrapper-big"/>
 </p>
 
 6. On the EC2 node repeat the installation steps and run `netbird up` command.
@@ -57,13 +58,13 @@ sudo netbird up
 7. Copy the verification URL from the terminal output and paste it in your browser. Repeat step #5
 
 <p>
-    <img src="/docs-static/img/getting-started/netbird-up.png" alt="login-to-netbird" className="imagewrapper"/>
+    <img src="/docs-static/img/getting-started/netbird-up.png" alt="login-to-netbird" className="imagewrapper-big"/>
 </p>
 
 8. Return to ```Peers``` and you should notice 2 new machines with status ```online```
 
 <p>
-    <img src="/docs-static/img/getting-started/peers.png" alt="login-to-netbird" className="imagewrapper"/>
+    <img src="/docs-static/img/getting-started/peers.png" alt="login-to-netbird" className="imagewrapper-big"/>
 </p>
 
 9. To test the connection you could try pinging devices:

src/pages/how-to/idp-sync.mdx

@@ -23,14 +23,14 @@ Before you start creating and configuring an Google Workspace application, ensur
   - Service account ID: `netbird`
 - Click `DONE`
 <p>
-    <img src="/docs-static/img/how-to-guides/google-service-account-create.png" alt="service-account-create"/>
+    <img src="/docs-static/img/how-to-guides/google-service-account-create.png" alt="service-account-create" className="imagewrapper-big"/>
 </p>
 
 #### Step 2: 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/how-to-guides/google-edit-service-account.png" alt="edit-service-account"/>
+    <img src="/docs-static/img/how-to-guides/google-edit-service-account.png" alt="edit-service-account" className="imagewrapper-big"/>
 </p>
 
 - Take note of service account email address, we will use it in next steps
@@ -50,26 +50,26 @@ Read how to manage and secure your service keys [here](https://cloud.google.com/
   - description: `User and Group Management ReadOnly`
 - Click `CONTINUE`
 <p>
-    <img src="/docs-static/img/how-to-guides/google-new-admin-role.png" alt="new-admin-role"/>
+    <img src="/docs-static/img/how-to-guides/google-new-admin-role.png" alt="new-admin-role" className="imagewrapper-big"/>
 </p>
 
 - Scroll down to `Admin API privileges` and add the following privileges
   - Users: `Read`
   - Groups: `Read`
 <p>
-    <img src="/docs-static/img/how-to-guides/google-privileges-review.png" alt="privileges-review"/>
+    <img src="/docs-static/img/how-to-guides/google-privileges-review.png" alt="privileges-review" 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/how-to-guides/google-assign-service-account.png" alt="assign-service-account" />
+    <img src="/docs-static/img/how-to-guides/google-assign-service-account.png" alt="assign-service-account" className="imagewrapper-big"/>
 </p>
 
 - Click `ASSIGN ROLE` to assign service account to `User and Group Management ReadOnly` admin role
 <p>
-    <img src="/docs-static/img/how-to-guides/google-service-account-privileges.png" alt="service-account-privileges" />
+    <img src="/docs-static/img/how-to-guides/google-service-account-privileges.png" alt="service-account-privileges" 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`
@@ -88,7 +88,7 @@ Before you start creating and configuring an Azure AD application, ensure that y
   - Name: `NetBird`
 
 <p>
-    <img src="/docs-static/img/how-to-guides/azure-new-application.png" alt="azure-new-application"/>
+    <img src="/docs-static/img/how-to-guides/azure-new-application.png" alt="azure-new-application" className="imagewrapper-big"/>
 </p>
 
 
@@ -100,13 +100,13 @@ Before you start creating and configuring an Azure AD application, ensure that y
 - In `Select permissions` select `User.Read.All` and `Group.Read.All` and click  `Add permissions`
 
 <p>
-    <img src="/docs-static/img/how-to-guides/azure-openid-permissions.png" alt="azure-openid-permissions" />
+    <img src="/docs-static/img/how-to-guides/azure-openid-permissions.png" alt="azure-openid-permissions" className="imagewrapper-big"/>
 </p> 
 
 - Click `Grant admin consent for Default Directory` and click `Yes`
 
 <p>
-    <img src="/docs-static/img/how-to-guides/azure-grant-admin-consent.png" alt="azure-grant-admin-consent"/>
+    <img src="/docs-static/img/how-to-guides/azure-grant-admin-consent.png" alt="azure-grant-admin-consent" className="imagewrapper-big"/>
 </p>
 
 #### Step 3. Generate client secret
@@ -117,7 +117,7 @@ Before you start creating and configuring an Azure AD application, ensure that y
 - Copy `Value` and save it as it can be viewed only once after creation.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/azure-client-secret.png" alt="azure-client-secret" />
+    <img src="/docs-static/img/how-to-guides/azure-client-secret.png" alt="azure-client-secret" className="imagewrapper-big"/>
 </p>
 
 - Navigate to [Owner applications](https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/RegisteredApps).
@@ -135,14 +135,14 @@ In this step, we will create and configure NetBird SAML 2.0 application in okta.
   - Sign-in method: `SAML 2.0`
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-new-application.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-new-application.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Fill in the form with the following values and click `Next`
   - App integration name: `NetBird SCIM`
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-saml-general-settings.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-saml-general-settings.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Fill in the form will the following values and click `Next`
@@ -150,12 +150,12 @@ In this step, we will create and configure NetBird SAML 2.0 application in okta.
     - Audience URI (SP Entity ID): `http://localhost`
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-saml-configuration.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-saml-configuration.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Select  App type as `This is an internal app that we have created` and click `Finish`
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-saml-configuration-feedback.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-saml-configuration-feedback.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 2. Create Okta SCIM integration
@@ -169,14 +169,14 @@ Before proceeding with this step, we need to create
 - Select the `NetBird SCIM` application we created earlier
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-netbird-app-overview.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-netbird-app-overview.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Click `General` tab and in `App Settings` click `Edit` to update the settings
 - Tick `Enable SCIM provisioning` and click `Save`
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-scim-provisioning-enabled.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-scim-provisioning-enabled.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Click `Provisioning` and under `SCIM connection` click `Edit`
@@ -188,28 +188,28 @@ Before proceeding with this step, we need to create
     - HTTP Header Token you obtained from NetBird : `nbs_zKY09...`
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-scim-provisioning-settings.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-scim-provisioning-settings.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Click on `Test Connector Configuration` to verify if the SCIM configuration is working. After the test is completed,
 make sure `Create Users`, `Update User Attributes`, and `Push Groups` were successful.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-connector-configuration-test.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-connector-configuration-test.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 
 - Click `Save` and then click `Provisioning` tab
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-scim-to-app-configuration.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-scim-to-app-configuration.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Go to the `Provisioning` tab, and select the `To App` settings and click `Edit`
 - Enable `Create Users`, `Update User Attributes`, and `Deactivate Users` and click `Save`
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-scim-to-app-sync-enabled.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-scim-to-app-sync-enabled.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### Step 4. Assign groups to application and push to NetBird
@@ -220,7 +220,7 @@ access without using the groups, you can learn how to do it [here](https://help.
 - Go to the `Assignments` tab.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-groups-assignments.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-groups-assignments.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Select the `Assign` and then click `Assign to Groups`
@@ -232,17 +232,17 @@ At this point, all members of the groups assigned to the application will be syn
 - Go to the `Push Groups` tab
 
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-sync-groups.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-sync-groups.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - Select the `Push Groups` and then click `Find groups by name`
 - Search groups to push and then click `Save`
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-push-group-assignment.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-push-group-assignment.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 - The selected groups will then be synced to NetBird.
 <p>
-    <img src="/docs-static/img/how-to-guides/okta-group-push-status.png" alt="high-level-dia" />
+    <img src="/docs-static/img/how-to-guides/okta-group-push-status.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 

src/pages/how-to/installation.mdx

@@ -173,7 +173,7 @@ NetBird has an official Android application that you can download at Google Play
 
 <p>
     <a href="https://play.google.com/store/apps/details?id=io.netbird.client" target="_blank">
-        <img src="/docs-static/img/how-to-guides/google-play-badge.png" width="200" alt="playstore" className="imagewrapper"/>
+        <img src="/docs-static/img/how-to-guides/google-play-badge.png" alt="playstore" className="imagewrapper"/>
     </a>
 
 </p>
@@ -220,7 +220,7 @@ If you installed the Desktop UI client, you can launch it and click on Connect.
 > It will open your browser, and you will be prompt for email and password. Follow the instructions.
 
 <p>
-    <img src="/docs-static/img/getting-started/netbird-sso-login-ui.gif" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/getting-started/netbird-sso-login-ui.gif" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 #### CLI
@@ -231,7 +231,7 @@ Alternatively, you could use command line. Simply run
 > It will open your browser, and you will be prompt for email and password. Follow the instructions.
 
 <p>
-    <img src="/docs-static/img/getting-started/netbird-sso-login-cmd.gif" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/getting-started/netbird-sso-login-cmd.gif" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 Check connection status:

src/pages/how-to/manage-dns-in-your-network.mdx

@@ -63,7 +63,7 @@ A nameserver group defines up to 2 nameservers to resolve DNS to a set of peers
 ### Creating a nameserver group
 Access the `DNS` tab, the `Namservers` section and click `Add Nameserver`.
 <p>
-    <img src="/docs-static/img/how-to-guides/netbird-nameserver-add-button.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/netbird-nameserver-add-button.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 That will open a nameserver selection configuration screen where you can choose between using three predefined public
 nameservers or using a custom setup.
@@ -116,12 +116,12 @@ To add a private DNS server that is running behind routing peers, you need to cr
 In the Berlin office example from previous steps, we have a peer from the `Office network` that can route traffic to the `192.168.0.32` IP,
 so we need to ensure that a similar network route exists:
 <p>
-    <img src="/docs-static/img/how-to-guides/netbird-nameserver-remote-route.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/netbird-nameserver-remote-route.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 Then we need to confirm that an access rule exists to connect `Remote developers` to `Office network` group allowing port `UDP 53`:
 <p>
-    <img src="/docs-static/img/how-to-guides/netbird-nameserver-remote-rule.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/netbird-nameserver-remote-rule.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 ## Testing configuration

src/pages/how-to/manage-network-access.mdx

@@ -69,7 +69,7 @@ If necessary, you can create new groups simply by entering new names in the inpu
 
 Once you have finished configuring the policy, click `Add Policy` to save it. You will then see your new policy in the table.
 <p>
-    <img src="/docs-static/img/overview/new-rule-list.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/overview/new-rule-list.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 <Note>
@@ -85,7 +85,7 @@ If you create a new group when defining a policy, you will need to add a peer to
 You can assign a peer to a group by accessing the `Peers` section. Then, choose the specific peer you want to assign to a group. Click on the `Assigned Groups` select box and select the group(s) you wish to assign to this peer.
 
 <p>
-    <img src="/docs-static/img/overview/associate-peer-groups.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/overview/associate-peer-groups.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 <Note>

src/pages/how-to/manage-posture-checks.mdx

@@ -84,7 +84,7 @@ higher to connect and access network resources.
 Access the `Access Control` tab, then the `Posture Checks` section, and click `Create Posture Check`.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/add-posture-check.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/add-posture-check.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 
@@ -119,7 +119,7 @@ Click `Continue`, fill out the form with the following information, and click `C
 Navigate to the `Access Control` tab and select the `Policies` section.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/policies-list.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/policies-list.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 Choose the policy to which you want to assign the posture check. This will open the policy update screen. Then,

src/pages/how-to/monitor-system-and-network-activity.mdx

@@ -10,7 +10,7 @@ Activity monitoring is enabled by default for every network, and you can access
 You can also use the search bar to filter events by activity type.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/activity-monitoring.webp" alt="activity-monitoring" width="800" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/activity-monitoring.webp" alt="activity-monitoring" className="imagewrapper-big"/>
 </p>
 
 <Note>
@@ -19,9 +19,11 @@ You can also use the search bar to filter events by activity type.
 </Note>
 
 <Note>
-    The <b>unknown</b> name or <b>unknown@unknown.com</b> e-mail address.
-    In the activity event store, the system keeps the deleted user information encrypted. If the encryption key has been corrupted or lost, then the events returned by the API could show "unknown@unknown.com" for the e-mail address field and "unknown" for the name field.
-    If the configuration files have been generated by the <b>configure.sh</b> script, you can find the previous encryption key in the backup files in the same folder as the script. Look for the <b>DataStoreEncryptionKey</b> field in the management.json backup file.
+    The `unknown`name or `unknown@unknown.com` e-mail address.
+    In the activity event store, the system keeps the deleted user information encrypted. If the encryption key has been corrupted or lost,
+    then the events returned by the API could show as `unknown@unknown.com` for the e-mail address field and as `unknown` for the name field.
+    If the configuration files have been generated by the `configure.sh` script, you can find the previous encryption key in
+    the backup files in the same folder as the script. Look for the <b>DataStoreEncryptionKey</b> field in the `management.json` backup file.
 </Note>
 
 ## Get started

src/pages/how-to/netbird-on-faas.mdx

@@ -1,5 +1,5 @@
 
-# Running NetBird on FaaS environments
+# Running NetBird on serverless environments (FaaS)
 
 Function as a Service (FaaS) is a cloud computing model where developers deploy small, specific-purpose code functions, managed by a cloud provider. 
 FaaS environments, however, impose restrictions like limited access to the system's root, kernel, and network stack, crucial for security in shared cloud infrastructure.

src/pages/how-to/register-machines-using-setup-keys.mdx

@@ -28,7 +28,7 @@ Setup keys are available in the NetBird Management Dashboard under the `Setup Ke
  You can easily add new or revoke keys.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/setup-keys.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/setup-keys.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 <Note>
@@ -59,7 +59,7 @@ To add `Auto-assign groups`, open the `Setup Keys` tab and create or update any
 Then use this key to enroll new machine.
 
 <p>
-    <img src="/docs-static/img/architecture/netbird-peer-auto-tagging-newkey.png" alt="high-level-dia" width="500" className="imagewrapper"/>
+    <img src="/docs-static/img/architecture/netbird-peer-auto-tagging-newkey.png" alt="high-level-dia" className="imagewrapper"/>
 </p>
 
 <Note>

src/pages/how-to/routing-peers-and-kubernetes.mdx

@@ -139,7 +139,7 @@ kubectl logs -l app=netbird
 
 You can also verify that the agent is connected to the NetBird management dashboard by checking the dashboard.
 <p>
-    <img src="/docs-static/img/how-to-guides/k8s-netbird-agent-connected.png" alt="k8s-netbird-agent-connected" width="800" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/k8s-netbird-agent-connected.png" alt="k8s-netbird-agent-connected" className="imagewrapper-big"/>
 </p>
 
 ## Conclusion

src/pages/how-to/routing-traffic-to-private-networks.mdx

@@ -15,7 +15,7 @@ NetBird provides fast and reliable end-to-end encryption between peers in your n
 In these cases, you can configure network routes assigning routing peers to connect existing infrastructure. Routing peers will forward packets between your NetBird peers and your other networks; they can masquerade traffic going to your data centers or embedded devices, reducing the need for external route configuration and agent installation.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/netbird-network-routes.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/netbird-network-routes.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 <Note>
@@ -65,7 +65,7 @@ A network route describes a network you want to connect with your NetBird peers.
 Access the `Network Routes` tab and click the `Add Route` button to create a new route.
 That will open a route configuration screen where you can add the information about the network you want to route:
 <p>
-    <img src="/docs-static/img/how-to-guides/netbird-network-routes-add-button.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/netbird-network-routes-add-button.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 Now you can enter the details of your route.
@@ -84,7 +84,7 @@ In the example below, we are creating a route with the following information:
 
 Once you fill in the route information, you can click on the `Add Route` button to save your new route.
 <p>
-    <img src="/docs-static/img/how-to-guides/netbird-network-routes-saved-new.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/netbird-network-routes-saved-new.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 Done! Now every peer connected to your routing peer will be able to send traffic to your external network.
 
@@ -100,7 +100,7 @@ Groups with multiple peers automatically provide [high availability routing](#hi
 Once you fill in the route information, you can click on the `Add Route` button to save your new route.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/netbird-network-routes-groups-saved-new.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/netbird-network-routes-groups-saved-new.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 Done! Now every peer connected to the peer member of the groups will be able to send traffic to your external network.
@@ -127,7 +127,7 @@ In the following example, we are adding the peer `aws-nb-europe-router-az-b` to
 This way, peers connected to `aws-nb-europe-router-az-a` and `aws-nb-europe-router-az-b` will have highly available access to the `172.31.0.0/16` network.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/netbird-network-routes-saved-new-ha.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/netbird-network-routes-saved-new-ha.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 <Note>
@@ -148,7 +148,7 @@ the `aws-nb-europe-router-az-a` routing peer to access the `aws-eu-central-1-vpc
 While peers that belong to the `london-office` group will use the `aws-nb-europe-router-az-b` routing peer.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/netbird-network-routes-groups-attribution.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/netbird-network-routes-groups-attribution.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 ### Routes without masquerading
@@ -159,7 +159,7 @@ That will require a routing configuration on your external network router pointi
 This way, devices that don't have the agent installed can communicate with your NetBird peers.
 
 <p>
-    <img src="/docs-static/img/how-to-guides/netbird-network-routes-masquerading.png" alt="high-level-dia" className="imagewrapper"/>
+    <img src="/docs-static/img/how-to-guides/netbird-network-routes-masquerading.png" alt="high-level-dia" className="imagewrapper-big"/>
 </p>
 
 ## Get started

src/styles/tailwind.css

@@ -43,6 +43,13 @@
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 4px;
   overflow:hidden;
+  width: 70%;
+}
+
+.imagewrapper-big {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  border-radius: 4px;
+  overflow:hidden;
 }
 
 .videowrapper {