improve getting started guide

src/components/NavigationDocs.jsx

@@ -19,6 +19,7 @@ export const docsNavigation = [
         title: 'How-to',
         links: [
             { title: 'Getting started', href: '/docs/how-to/getting-started' },
+            { title: 'Installation', href: '/docs/how-to/installation' },
             { title: 'Use setup keys for automation', href: '/docs/how-to/register-machines-using-setup-keys' },
             { title: 'Manage network access', href: '/docs/how-to/manage-network-access' },
             { title: 'Add users to your network', href: '/docs/how-to/add-users-to-your-network' },

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

@@ -22,14 +22,14 @@ The most common usage scenarios:
 
 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.
 <p align="center">
-    <img src="/img/overview/service-user-overview.png" alt="service-user-overview" width="780" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/service-user-overview.png" alt="service-user-overview" width="780" class="imagewrapper"/>
 </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 align="center">
-    <img src="/img/overview/service-user-creation.png" alt="service-user-creation-popup" width="400" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/service-user-creation.png" alt="service-user-creation-popup" width="400" class="imagewrapper"/>
 </p>
 
 <Note>
@@ -41,20 +41,20 @@ User role allows read-only access, use the admin for write access.
 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.
 
 <p align="center">
-    <img src="/img/overview/personal-access-token-overview.png" alt="personal-access-token-overview" width="780" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/personal-access-token-overview.png" alt="personal-access-token-overview" width="780" class="imagewrapper"/>
 </p>
 
 From there, you can create a new token and specify expiration for the token. You won't be able to modify your token.
 
 <p align="center">
-    <img src="/img/overview/personal-access-token-creation.png" alt="personal-access-creation-popup" width="400" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/personal-access-token-creation.png" alt="personal-access-creation-popup" width="400" class="imagewrapper"/>
 </p>
 
 After the token was generated successfully you will see a plain version of your token to copy and store in a secure place.
 Be aware that once you close the popup it is impossible to see the plain version of the token again as NetBird only stores a hashed version of the token.
 
 <p align="center">
-    <img src="/img/overview/personal-access-token-example.png" alt="personal-access-token-example" width="400" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/personal-access-token-example.png" alt="personal-access-token-example" width="400" class="imagewrapper"/>
 </p>
 
 <Note>

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

@@ -34,7 +34,7 @@ The invited users will receive an email invitation that they have to confirm.
 After logging in to the system, they will join your network automatically.
 
 <p align="center">
-    <img src="/img/how-to-guides/user-invites.gif" alt="high-level-dia" width="800" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/user-invites.gif" alt="high-level-dia" width="800" class="imagewrapper"/>
 </p>
 
 <Note>

src/pages/docs/how-to/configure-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 `needs login`.
 
 <p align="center">
-    <img src="/img/how-to-guides/peer-needs-login.png" alt="peer-needs-login.png" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/peer-needs-login.png" alt="peer-needs-login.png" class="imagewrapper"/>
 </p>
 
 ## Configure and disable expiration
@@ -20,7 +20,7 @@ Go to the Web UI Settings tab and set the desired period in the Authentication s
 You can also disable the expiration for the whole network in the same section.
 
 <p align="center">
-    <img src="/img/how-to-guides/peer-login-expiration.png" alt="peer-login-expiration" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/peer-login-expiration.png" alt="peer-login-expiration" class="imagewrapper"/>
 </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 align="center">
-    <img src="/img/how-to-guides/individual-peer-login-expiration.png" alt="peer-login-expiration" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/individual-peer-login-expiration.png" alt="peer-login-expiration" class="imagewrapper"/>
 </p>
 
 ## Get started

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

@@ -10,35 +10,44 @@ Step-by-step video guide on YouTube:
     <iframe src="https://www.youtube.com/embed/HYlhvr_eu2U" allow="fullscreen;"></iframe>
 </div>
 <br/>
-This guide describes how to quickly get started with NetBird and create a secure private network with 2 connected machines.
+This guide describes how to quickly get started with NetBird and create a secure private network with two connected machines.
 
 One machine is a Linux laptop, and the other one a EC2 node running on AWS.
-Both machines are running Linux but NetBird also works on Windows and MacOS.
+Both machines are running Linux but NetBird also works on Windows, MacOS nad popular mobile platforms like Android and iOS.
 
 1. Sign-up at [https://app.netbird.io/](https://app.netbird.io/)
 
 You can use your Google, GitHub or Microsoft account.
 
-![](/img/getting-started/auth.png)
+<p>
+    <img src="/img/getting-started/auth.png" alt="login-to-netbird" class="imagewrapper" />
+</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.
 
-Click ```Add peer``` to add a new machine.
+The `Add peer` window should automatically pop up, but if it doesn't, click ```Add new peer``` to add a new machine.
 
-![](/img/getting-started/empty-peers.png)
+<p>
+    <img src="/img/getting-started/empty-peers.png" alt="login-to-netbird" class="imagewrapper"/>
+</p>
 
 3. Choose your machine operating system (in our case it is ```Linux```) and proceed with the installation steps.
 
-![](/img/getting-started/add-peer.png)
+<p>
+    <img src="/img/getting-started/add-peer.png" alt="login-to-netbird" class="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`.
 >
 
-![](/img/getting-started/systray.png)
+<p>
-
+    <img src="/img/getting-started/systray.png" alt="login-to-netbird" class="imagewrapper"/>
+</p>
 5. At this point a browser window pops up starting a device registration process. Click confirm and follow the steps if required.
 
-![](/img/getting-started/device-confirmation.png)
+<p>
+    <img src="/img/getting-started/device-confirmation.png" alt="login-to-netbird" class="imagewrapper"/>
+</p>
 
 6. On the EC2 node repeat the installation steps and run `netbird up` command.
 
@@ -47,11 +56,15 @@ sudo netbird up
    ```
 7. Copy the verification URL from the terminal output and paste it in your browser. Repeat step #5
 
-![](/img/getting-started/netbird-up.png)
+<p>
+    <img src="/img/getting-started/netbird-up.png" alt="login-to-netbird" class="imagewrapper"/>
+</p>
 
 8. Return to ```Peers``` and you should notice 2 new machines with status ```online```
 
-![](/img/getting-started/peers.png)
+<p>
+    <img src="/img/getting-started/peers.png" alt="login-to-netbird" class="imagewrapper"/>
+</p>
 
 9. To test the connection you could try pinging devices:
 
@@ -258,7 +271,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="/img/getting-started/netbird-sso-login-ui.gif" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/getting-started/netbird-sso-login-ui.gif" alt="high-level-dia" class="imagewrapper"/>
 </p>
 
 #### CLI
@@ -269,7 +282,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="/img/getting-started/netbird-sso-login-cmd.gif" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/getting-started/netbird-sso-login-cmd.gif" alt="high-level-dia" class="imagewrapper"/>
 </p>
 
 Check connection status:

src/pages/docs/how-to/installation.mdx

@@ -0,0 +1,277 @@
+import {Note} from "@/components/mdx";
+
+export const title = 'Installation'
+
+## Installation
+
+### Linux
+
+**APT/Debian**
+1. Add the repository:
+
+ ```bash
+ sudo apt-get update
+ sudo apt-get install ca-certificates curl gnupg -y
+ curl -sSL https://pkgs.wiretrustee.com/debian/public.key | sudo gpg --dearmor --output /usr/share/keyrings/wiretrustee-archive-keyring.gpg
+ echo 'deb [signed-by=/usr/share/keyrings/wiretrustee-archive-keyring.gpg] https://pkgs.wiretrustee.com/debian stable main' | sudo tee /etc/apt/sources.list.d/wiretrustee.list
+```
+2. Update APT's cache
+
+```bash
+ sudo apt-get update
+```
+3. Install the package
+
+```bash
+ # for CLI only
+ sudo apt-get install netbird
+ # for GUI package
+ sudo apt-get install netbird-ui
+```
+
+**RPM/Red hat**
+
+1. Add the repository:
+```bash
+ cat <<EOF | sudo tee /etc/yum.repos.d/wiretrustee.repo
+ [Wiretrustee]
+ name=Wiretrustee
+ baseurl=https://pkgs.wiretrustee.com/yum/
+ enabled=1
+ gpgcheck=0
+ gpgkey=https://pkgs.wiretrustee.com/yum/repodata/repomd.xml.key
+ repo_gpgcheck=1
+ EOF
+```
+2. Install the package
+```bash
+ # for CLI only
+ sudo yum install netbird
+ # for GUI package
+ sudo yum install netbird-ui
+```
+
+**Fedora**
+
+1. Create the repository file:
+```bash
+ cat <<EOF | sudo tee /etc/yum.repos.d/wiretrustee.repo
+ [Wiretrustee]
+ name=Wiretrustee
+ baseurl=https://pkgs.wiretrustee.com/yum/
+ enabled=1
+ gpgcheck=0
+ gpgkey=https://pkgs.wiretrustee.com/yum/repodata/repomd.xml.key
+ repo_gpgcheck=1
+ EOF
+```
+2. Import the file
+```bash
+ sudo dnf config-manager --add-repo /etc/yum.repos.d/wiretrustee.repo
+```
+3. Install the package
+```bash
+ # for CLI only
+ sudo dnf install netbird
+ # for GUI package
+ sudo dnf install netbird-ui
+```
+
+
+**NixOS 22.11+/unstable**
+
+1. Edit your [`configuration.nix`](https://nixos.org/manual/nixos/stable/index.html#sec-changing-config)
+
+```nix
+ { config, pkgs, ... }:
+ {
+   services.netbird.enable = true; # for netbird service & CLI
+   environment.systemPackages = [ pkgs.netbird-ui ]; # for GUI
+ }
+```
+2. Build and apply new configuration
+
+```bash
+ sudo nixos-rebuild switch
+```
+
+### macOS
+**Homebrew install**
+1. Download and install homebrew at https://brew.sh/
+2. If wiretrustee was previously installed with homebrew, you will need to run:
+```bash
+# Stop and uninstall daemon service:
+sudo wiretrustee service stop
+sudo wiretrustee service uninstall
+# unlik the app
+brew unlink wiretrustee
+```
+> netbird will copy any existing configuration from the Wiretrustee's default configuration paths to the new NetBird's default location
+
+3. Install the client
+```bash
+  # for CLI only
+  brew install netbirdio/tap/netbird
+  # for GUI package
+  brew install --cask netbirdio/tap/netbird-ui
+```
+4. If you installed CLI only, you need to install and start the client daemon service:
+ ```bash
+  sudo netbird service install
+  sudo netbird service start
+```
+
+### Windows
+1. Checkout NetBird [releases](https://github.com/netbirdio/netbird/releases/latest)
+2. Download the latest Windows release installer ```netbird_installer_<VERSION>_windows_amd64.exe``` (**Switch VERSION to the latest**):
+3. Proceed with the installation steps
+4. This will install the UI client in the C:\\Program Files\\NetBird and add the daemon service
+5. After installing, you can follow the steps from [Running NetBird with SSO Login](#Running-NetBird-with-SSO-Login) steps.
+> To uninstall the client and service, you can use Add/Remove programs
+
+⚠️ In case of any issues with the connection on Windows check the firewall settings. With default Windows 11 firewall setup there could be connectivity issue related to egress traffic.
+
+Recommended way is to add NetBird in firewall settings:
+
+1. Go to "Control panel".
+2. Select "Windows Defender Firewall".
+3. Select "Advanced settings".
+4. Select "Outbound Rules" -> "New rule".
+5. In the new rule select "Program" and click "Next".
+6. Point to the NetBird installation exe file (usually in `C:\Program Files\NetBird\netbird.exe`) and click "Next".
+7. Select "Allow the connection" and click "Next".
+8. Select the network in which rule should be applied (Domain, Private, Public) according to your needs and click "Next".
+9. Provide rule name (e.g. "Netbird Egress Traffic") and click "Finish".
+10. Disconnect and connect to NetBird.
+
+
+### Binary Install
+**Installation from binary (CLI only)**
+
+1. Checkout NetBird [releases](https://github.com/netbirdio/netbird/releases/latest)
+2. Download the latest release:
+```bash
+  curl -L -o ./netbird_<VERSION>.tar.gz https://github.com/netbirdio/netbird/releases/download/v<VERSION>/netbird_<VERSION>_<OS>_<Arch>.tar.gz
+```
+
+<Note>
+
+    You need to replace some variables from the URL above:
+
+    - Replace **VERSION** with the latest released verion.
+    - Replace **OS** with "linux", "darwin" for MacOS or "windows"
+    - Replace **Arch** with your target system CPU archtecture
+
+</Note>
+
+3. Decompress
+```bash
+  tar xcf ./netbird_<VERSION>.tar.gz
+  sudo mv netbird /usr/bin/netbird
+  sudo chown root:root /usr/bin/netbird
+  sudo chmod +x /usr/bin/netbird
+```
+After that you may need to add /usr/bin in your PATH environment variable:
+````bash
+  export PATH=$PATH:/usr/bin
+````
+4. Install and run the service
+```bash
+  sudo netbird service install
+  sudo netbird service start
+```
+
+### Running NetBird with SSO Login
+#### Desktop UI Application
+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="/img/getting-started/netbird-sso-login-ui.gif" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+#### CLI
+Alternatively, you could use command line. Simply run
+   ```bash
+  netbird up
+   ```
+> It will open your browser, and you will be prompt for email and password. Follow the instructions.
+
+<p>
+    <img src="/img/getting-started/netbird-sso-login-cmd.gif" alt="high-level-dia" class="imagewrapper"/>
+</p>
+
+Check connection status:
+```bash
+  netbird status
+```
+
+### Running NetBird with a Setup Key
+In case you are activating a server peer, you can use a [setup key](/docs/how-to/register-peers-using-setup-keys) as described in the steps below.
+> This is especially helpful when you are running multiple server instances with infrastructure-as-code tools like ansible and terraform.
+
+1. Login to the Management Service. You need to have a `setup key` in hand (see [setup keys](/docs/how-to/register-peers-using-setup-keys)).
+
+For all systems:
+```bash
+  netbird up --setup-key <SETUP KEY>
+```
+
+For **Docker**, you can run with the following command:
+```bash
+docker run --network host --privileged --rm -d -e NB_SETUP_KEY=<SETUP KEY> -v netbird-client:/etc/netbird netbirdio/netbird:<TAG>
+```
+> TAG > 0.6.0 version
+
+Alternatively, if you are hosting your own Management Service provide `--management-url` property pointing to your Management Service:
+```bash
+  netbird up --setup-key <SETUP KEY> --management-url http://localhost:33073
+```
+
+> You could also omit the `--setup-key` property. In this case, the tool will prompt for the key.
+
+2. Check connection status:
+```bash
+  netbird status
+```
+
+3. Check your IP:
+
+On **macOS** :
+````bash
+  sudo ifconfig utun100
+````
+On **Linux**:
+```bash
+  ip addr show wt0
+     ```
+On **Windows**:
+```bash
+  netsh interface ip show config name="wt0"
+```
+
+### Running NetBird in Docker
+
+Set the ```NB_SETUP_KEY``` environment variable and run the command.
+<Note>
+    You can pass other settings as environment variables. See [Environment variables](reference/netbird-commands.md#environment-variables) for details.
+</Note>
+```bash
+docker run --rm --name PEER_NAME --hostname PEER_NAME --cap-add=NET_ADMIN -d -e NB_SETUP_KEY=<SETUP KEY> -v netbird-client:/etc/netbird netbirdio/netbird:latest
+```
+
+See [Docker example](examples/netbird-docker.md) for details.
+
+### Troubleshooting
+1. If you are using self-hosted version and haven't specified `--management-url`, the client app will use the default URL
+which is ```https://api.wiretrustee.com:33073```.
+
+2. If you have specified a wrong `--management-url` (e.g., just by mistake when self-hosting)
+to override it you can do the following:
+
+```bash
+netbird down
+netbird up --management-url https://<CORRECT HOST:PORT>/
+```
+
+To override it see the solution #1 above.

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

@@ -57,7 +57,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 and click the `Add Nameserver` button to create a new nameserver.
 <p align="center">
-    <img src="/img/how-to-guides/netbird-nameserver-add-button.png" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-nameserver-add-button.png" alt="high-level-dia" class="imagewrapper"/>
 </p>
 That will open a nameserver selection configuration screen where you can choose between using three predefined public
 nameservers or using a custom setup.
@@ -68,13 +68,13 @@ If you choose a predefined public nameserver option, you can select the followin
 - [Cloudflare DNS servers](https://one.one.one.one/dns/)
 - [Quad9 DNS servers](https://www.quad9.net/)
 <p align="center">
-    <img src="/img/how-to-guides/netbird-nameserver-selection-view-open.png" alt="high-level-dia" width="300" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-nameserver-selection-view-open.png" alt="high-level-dia" width="300" class="imagewrapper"/>
 </p>
 
 After selecting one of the three options, you need to assign a peer group for which this nameserver will be effective.
 In the example below, we chose the "All" group:
 <p align="center">
-    <img src="/img/how-to-guides/netbird-nameserver-all-group.png" alt="high-level-dia" width="300" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-nameserver-all-group.png" alt="high-level-dia" width="300" class="imagewrapper"/>
 </p>
 
 #### Creating custom nameservers
@@ -88,7 +88,7 @@ In the example below, we are creating a nameserver with the following informatio
 - Match mode: `All domains`
 - Distribution group: `Remote developers`
 <p align="center">
-    <img src="/img/how-to-guides/netbird-nameserver-custom.png" alt="high-level-dia" width="300" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-nameserver-custom.png" alt="high-level-dia" width="300" class="imagewrapper"/>
 </p>
 
 ### Creating a nameserver for specific domains
@@ -96,7 +96,7 @@ Sometimes we want to forward DNS queries to specific nameservers but only for pa
 Taking the example of custom nameservers above, you could select a match mode for only domains listed there.
 Below you can see the same nameserver setup but only for the `berlinoffice.com` domain:
 <p align="center">
-    <img src="/img/how-to-guides/netbird-nameserver-remote-resolver.png" alt="high-level-dia" width="300" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-nameserver-remote-resolver.png" alt="high-level-dia" width="300" class="imagewrapper"/>
 </p>
 
 <Note>
@@ -108,12 +108,12 @@ You can select as many distribution groups as you want for your nameserver setup
 ### Adding remote private DNS servers
 To add a private DNS server that is running behind routing peers, you need to create resources to ensure communication between your nameserver clients can communicate. 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 align="center">
-    <img src="/img/how-to-guides/netbird-nameserver-remote-route.png" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-nameserver-remote-route.png" alt="high-level-dia" class="imagewrapper"/>
 </p>
 
 Then we need to confirm that an access rule exists to connect `Remote developers` to `Office network` group:
 <p align="center">
-    <img src="/img/how-to-guides/netbird-nameserver-remote-rule.png" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-nameserver-remote-rule.png" alt="high-level-dia" class="imagewrapper"/>
 </p>
 
 ## Testing configuration

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

@@ -69,18 +69,18 @@ After accessing the `Access Control` tab, you can click on the `Add Rule` button
 where you need to name the rule, set its status, and add groups to the source and destination lists.
 
 <p align="center">
-    <img src="/img/overview/create-rule.png" alt="high-level-dia" width="300" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/create-rule.png" alt="high-level-dia" width="300" class="imagewrapper"/>
 </p>
 
 If required, you can create new groups by simply entering new names in the input box for either source or destination lists.
 
 <p align="center">
-    <img src="/img/overview/create-group-in-rule.png" alt="high-level-dia" width="300" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/create-group-in-rule.png" alt="high-level-dia" width="300" class="imagewrapper"/>
 </p>
 
 Once you are done configuring the rule, click the `Create` button to save it. You will then see your new rule in the table.
 <p align="center">
-    <img src="/img/overview/new-rule-list.png" alt="high-level-dia" width="600" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/new-rule-list.png" alt="high-level-dia" width="600" class="imagewrapper"/>
 </p>
 
 <Note>
@@ -92,7 +92,7 @@ If you create a new group when defining a rule, you will need to associate peers
 You can do it by accessing the `Peers` tab and clicking the `Groups` column of any peer you want to associate with the new group.
 
 <p align="center">
-    <img src="/img/overview/associate-peer-groups.png" alt="high-level-dia" width="300" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/associate-peer-groups.png" alt="high-level-dia" width="300" class="imagewrapper"/>
 </p>
 
 <Note>
@@ -108,9 +108,9 @@ To disable a rule, you should follow the steps of [updating rules](#updating-rul
 To delete a rule, you should click on the rule's menu and choose `Delete`. A confirmation window will pop up.
 
 <p align="center">
-    <img src="/img/overview/delete-rule-menu.png" alt="high-level-dia" width="600" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/delete-rule-menu.png" alt="high-level-dia" width="600" class="imagewrapper"/>
 </p>
 
 <p align="center">
-    <img src="/img/overview/delete-rule-popup.png" alt="high-level-dia" width="300" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/overview/delete-rule-popup.png" alt="high-level-dia" width="300" class="imagewrapper"/>
 </p>

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

@@ -8,7 +8,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 align="center">
-    <img src="/img/how-to-guides/activity-monitoring.png" alt="activity-monitoring" width="800" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/activity-monitoring.png" alt="activity-monitoring" width="800" class="imagewrapper"/>
 </p>
 
 <Note>

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

@@ -24,7 +24,7 @@ Setup keys are available in the NetBird Management dashboard under the Setup Key
 By default, we generate 2 setup keys right after account creation. You can easily add new or revoke keys.
 
 <p align="center">
-    <img src="/img/architecture/setup-keys.png" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/architecture/setup-keys.png" alt="high-level-dia" class="imagewrapper"/>
 </p>
 
 <Note>
@@ -37,7 +37,7 @@ Setup keys are set to expire after 30 days. When expired, the setup key can't be
 ## Peer Auto-grouping
 
 <p align="center">
-    <img src="/img/architecture/peer-auto-tagging-setupkey.gif" alt="high-level-dia" width="800" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/architecture/peer-auto-tagging-setupkey.gif" alt="high-level-dia" width="800" class="imagewrapper"/>
 </p>
 
 NetBird offers a powerful [Access Control feature](/docs/how-to/restrict-access-to-peers) that allows easy access management of your resources.
@@ -52,7 +52,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 align="center">
-    <img src="/img/architecture/netbird-peer-auto-tagging-newkey.png" alt="high-level-dia" width="500" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/architecture/netbird-peer-auto-tagging-newkey.png" alt="high-level-dia" width="500" class="imagewrapper"/>
 </p>
 
 <Note>

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

@@ -60,7 +60,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 align="center">
-    <img src="/img/how-to-guides/netbird-network-routes-add-button.png" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-network-routes-add-button.png" alt="high-level-dia" class="imagewrapper"/>
 </p>
 
 Now you can enter the details of your route.
@@ -73,12 +73,12 @@ In the example below, we are creating a route with the following information:
 - Distribution Groups: `All`
 
 <p align="center">
-    <img src="/img/how-to-guides/netbird-network-routes-create.png" alt="high-level-dia" width="300" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-network-routes-create.png" alt="high-level-dia" width="300" class="imagewrapper"/>
 </p>
 
 Once you fill in the route information, you can click on the `Save` button to save your new route.
 <p align="center">
-    <img src="/img/how-to-guides/netbird-network-routes-saved-new.png" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-network-routes-saved-new.png" alt="high-level-dia" class="imagewrapper"/>
 </p>
 Done! Now every peer connected to your routing peer will be able to send traffic to your external network.
 
@@ -93,13 +93,13 @@ To enable high-available mode, you can click on `Configure` and select a new pee
 In the following screenshot, we are adding the peer `aws-nb-europe-router-az-b` to the `aws-eu-central-1-vpc` route:
 
 <p align="center">
-    <img src="/img/how-to-guides/netbird-network-routes-create-ha.png" alt="high-level-dia" width="300" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-network-routes-create-ha.png" alt="high-level-dia" width="300" class="imagewrapper"/>
 </p>
 
 This way, nodes connected to both peer `aws-nb-europe-router-az-a` and peer `aws-nb-europe-router-az-b` would have a highly available connection with the network `172.31.0.0/16`.
 
 <p align="center">
-    <img src="/img/how-to-guides/netbird-network-routes-saved-new-ha.png" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-network-routes-saved-new-ha.png" alt="high-level-dia" class="imagewrapper"/>
 </p>
 
 <Note>
@@ -116,7 +116,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 align="center">
-    <img src="/img/how-to-guides/netbird-network-routes-masquerading.png" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+    <img src="/img/how-to-guides/netbird-network-routes-masquerading.png" alt="high-level-dia" class="imagewrapper"/>
 </p>
 
 ## Get started

src/pages/docs/introduction.mdx

@@ -5,7 +5,7 @@ import {AboutNetbird} from "@/components/AboutNetbird"
 export const description =
   'Learn everything there is to know about NetBird.'
 
-# NetBird Docs
+# Introduction to NetBird
 
 NetBird is a simple and fast alternative to corporate VPNs built on top of [WireGuard®](https://www.wireguard.com/) making it easy to create secure private networks for your organization or home.
 It requires near zero configuration effort leaving behind the hassle of opening ports, complex firewall rules, vpn gateways, and so forth. {{ className: 'lead' }}

src/styles/tailwind.css

@@ -14,6 +14,12 @@
 @tailwind components;
 @tailwind utilities;
 
+.imagewrapper {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  border-radius: 6px;
+  overflow:hidden;
+}
+
 .videowrapper {
   float: none;
   clear: both;