From 65138cd185aa7b1a057957a1bfaddc7160251dff Mon Sep 17 00:00:00 2001
From: Arjun Aditya <meow@nermalcat69.dev>
Date: Wed, 2 Oct 2024 16:25:17 +0530
Subject: [PATCH] chore: replace img component with Image

---
 .../content/dotnet/how-to/build-pipeline.mdx  | 11 +--
 .../content/dotnet/how-to/build-process.mdx   | 12 ++--
 .../dotnet/how-to/customize-runtime.mdx       | 12 ++--
 .../content/dotnet/how-to/deploy-process.mdx  | 22 +++---
 .../content/dotnet/how-to/env-variables.mdx   | 22 +++---
 apps/docs/content/dotnet/how-to/scaling.mdx   | 30 ++++----
 apps/docs/content/features/env-variables.mdx  | 11 +--
 apps/docs/content/features/pipeline.mdx       | 40 +++++------
 apps/docs/content/features/scaling-ha.mdx     | 70 +++++++++----------
 apps/docs/content/go/how-to/scaling.mdx       | 20 +++---
 apps/docs/content/java/how-to/scaling.mdx     | 20 +++---
 apps/docs/content/keydb/how-to/scale.mdx      | 20 +++---
 apps/docs/content/mariadb/how-to/create.mdx   | 10 +--
 apps/docs/content/mariadb/how-to/scale.mdx    | 30 ++++----
 apps/docs/content/nginx/how-to/scaling.mdx    | 20 +++---
 apps/docs/content/nodejs/how-to/scaling.mdx   | 20 +++---
 apps/docs/content/php/how-to/scaling.mdx      | 20 +++---
 .../docs/content/postgresql/how-to/create.mdx | 10 +--
 apps/docs/content/postgresql/how-to/scale.mdx | 30 ++++----
 apps/docs/content/python/how-to/scaling.mdx   | 20 +++---
 apps/docs/content/rust/how-to/scaling.mdx     | 20 +++---
 apps/docs/src/css/_docusaurus.css             |  5 +-
 22 files changed, 240 insertions(+), 235 deletions(-)

diff --git a/apps/docs/content/dotnet/how-to/build-pipeline.mdx b/apps/docs/content/dotnet/how-to/build-pipeline.mdx
index 5a4992b6..cc5bb89b 100644
--- a/apps/docs/content/dotnet/how-to/build-pipeline.mdx
+++ b/apps/docs/content/dotnet/how-to/build-pipeline.mdx
@@ -2,6 +2,7 @@
 title: Configure .NET build & deploy pipeline
 ---
 
+import Image from '/src/components/Image';
 import data from '@site/static/data.json';
 import UnorderedCodeList from '@site/src/components/UnorderedCodeList';
 
@@ -219,11 +220,11 @@ Some packages or tools can take a long time to install. Therefore, Zerops caches
 To invalidate the Zerops build cache go to your service detail in Zerops GUI, choose **Service dashboard & runtime containers** from the left menu and click on the **Open pipeline detail** button. Then click on the **Invalidate build cache** icon.
 
 <p align="center">
-  <img
-    src="/img/screenshots/runtime_clear_build_cache.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/runtime_clear_build_cache.png"
+    darkImage="/img/screenshots/runtime_clear_build_cache.png"
+    alt="Runtime Clear Build Cache"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/dotnet/how-to/build-process.mdx b/apps/docs/content/dotnet/how-to/build-process.mdx
index 3834d45c..842c586c 100644
--- a/apps/docs/content/dotnet/how-to/build-process.mdx
+++ b/apps/docs/content/dotnet/how-to/build-process.mdx
@@ -1,15 +1,15 @@
 ---
 title: .NET build process
 ---
-
+import Image from '/src/components/Image';
 import data from '@site/static/data.json';
 
 <p align="center">
-  <img
-    src="/img/screenshots/build_deploy_pipeline-step2.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/build_deploy_pipeline-step2.png"
+    darkImage="/img/screenshots/build_deploy_pipeline-step2.png"
+    alt="Build Deploy pipeline"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/dotnet/how-to/customize-runtime.mdx b/apps/docs/content/dotnet/how-to/customize-runtime.mdx
index 0e71a6bc..6e7198d7 100644
--- a/apps/docs/content/dotnet/how-to/customize-runtime.mdx
+++ b/apps/docs/content/dotnet/how-to/customize-runtime.mdx
@@ -2,12 +2,14 @@
 title: Customise .NET runtime environment
 ---
 
+import Image from '/src/components/Image';
+
 <p align="center">
-  <img
-    src="/img/screenshots/build_deploy_pipeline_custom_runtime.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/build_deploy_pipeline_custom_runtime.png"
+    darkImage="/img/screenshots/build_deploy_pipeline_custom_runtime.png"
+    alt="Build Deploy pipeline"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/dotnet/how-to/deploy-process.mdx b/apps/docs/content/dotnet/how-to/deploy-process.mdx
index ef2a1b0c..5972f39c 100644
--- a/apps/docs/content/dotnet/how-to/deploy-process.mdx
+++ b/apps/docs/content/dotnet/how-to/deploy-process.mdx
@@ -2,12 +2,14 @@
 title: .NET deploy process
 ---
 
+import Image from '/src/components/Image';
+
 <p align="center">
-  <img
-    src="/img/screenshots/build_deploy_pipeline-step3.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/build_deploy_pipeline-step3.png"
+    darkImage="/img/screenshots/build_deploy_pipeline-step3.png"
+    alt="Build Deploy pipeline"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -83,11 +85,11 @@ Zerops keeps 10 last versions of your application in the internal storage.
 The list of application versions is available in Zerops GUI. Go to the service detail and choose **Service dashboard & runtime containers** from the left menu. The active version is highlighted, show all archived version by clicking on the button below.
 
 <p align="center">
-  <img
-    src="/img/screenshots/pipeline_history.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/pipeline_history.png"
+    darkImage="/img/screenshots/pipeline_history.png"
+    alt="Pipeline History"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/dotnet/how-to/env-variables.mdx b/apps/docs/content/dotnet/how-to/env-variables.mdx
index 5bdfceee..f3ce28ad 100644
--- a/apps/docs/content/dotnet/how-to/env-variables.mdx
+++ b/apps/docs/content/dotnet/how-to/env-variables.mdx
@@ -2,6 +2,8 @@
 title: How to set and use environment variables in .NET service
 ---
 
+import Image from '/src/components/Image';
+
 Environment variables help you run your application in different environments. They allow you to isolate all specific environment aspects from your application code and keep your app encapsulated. You can create several projects in Zerops that represent different environments (development, stage, production) or even each developer can have a project with its own environment.
 
 In Zerops you do not have to create a `.env` file manually. Zerops handles the environment variables for you.
@@ -27,11 +29,11 @@ You can [reference](/dotnet/how-to/env-variables#reference-a-local-variable-in-a
 Use secret variables to store passwords, tokens and other sensitive information that shouldn't be part of your repository and listed in zerops.yml.
 
 <p align="center">
-  <img
-    src="/img/screenshots/secret_env.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/secret_env.png"
+    darkImage="/img/screenshots/secret_env.png"
+    alt="Secrete ENVs"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -135,11 +137,11 @@ Zerops creates several helper variables when a .NET service is created, e.g. `ho
 Generated env variables are listed on the **Environment variables** page. Scroll to the **Generated variables** section.
 
 <p align="center">
-  <img
-    src="/img/screenshots/nodejs_generated_variables.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/nodejs_generated_variables.png"
+    darkImage="/img/screenshots/nodejs_generated_variables.png"
+    alt="Node.js Generated Variables"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/dotnet/how-to/scaling.mdx b/apps/docs/content/dotnet/how-to/scaling.mdx
index 52dcec57..90e40d7a 100644
--- a/apps/docs/content/dotnet/how-to/scaling.mdx
+++ b/apps/docs/content/dotnet/how-to/scaling.mdx
@@ -26,11 +26,11 @@ Each application you deploy starts with the minimum hardware resources: **CPU**
 Zerops has a preference for vertical scaling because it's faster and more precise. If the vertical auto scaling hits the defined maximum a new container is started automatically. When your application doesn't need so much power and all containers are vertically scaled down, Zerops will gradually remove whole containers.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling2.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling2.png"
+    darkImage="/img/screenshots/scaling2.png"
+    alt="Scaling Resources"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -128,11 +128,11 @@ Check if your application is ready to be run in multiple containers.
 If you've experienced problems with not enough power when your application starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your application.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -151,11 +151,11 @@ But if your application need a more memory faster or if you have experienced pro
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/features/env-variables.mdx b/apps/docs/content/features/env-variables.mdx
index 43455e89..ac301da6 100644
--- a/apps/docs/content/features/env-variables.mdx
+++ b/apps/docs/content/features/env-variables.mdx
@@ -1,6 +1,7 @@
 ---
 title: Environment variables
 ---
+import Image from '/src/components/Image';
 
 Environment variables help you run your application in different environments. They allow you to isolate all specific environment aspects from your application code and keep your app encapsulated. You can create several [projects](/features/infrastructure#project) in Zerops that represent different environments (development, stage, production) or even each developer can have a project with its own environment.
 
@@ -27,11 +28,11 @@ You can reference another variable of the same service or even a variable of ano
 Use secret variables to store passwords, tokens and other sensitive information that shouldn't be part of your repository and listed in zerops.yml.
 
 <p align="center">
-  <img
-    src="/img/screenshots/runtime_secret_variables.png"
-    alt="image"
-    width="100%"
-    height="auto"
+    <Image
+    lightImage="/img/screenshots/runtime_secret_variables.png"
+    darkImage="/img/screenshots/runtime_secret_variables.png"
+    alt="Runtime Secret Variables"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/features/pipeline.mdx b/apps/docs/content/features/pipeline.mdx
index 7c84f243..76d5ff28 100644
--- a/apps/docs/content/features/pipeline.mdx
+++ b/apps/docs/content/features/pipeline.mdx
@@ -167,11 +167,11 @@ Learn more about what is included in the default build environment:
 ## Deploy phase
 
 <p align="center">
-  <img
-    src="/img/screenshots/build_deploy_pipeline-step3.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/build_deploy_pipeline-step3.png"
+    darkImage="/img/screenshots/build_deploy_pipeline-step3.png"
+    alt="Build Deploy Pipeline"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -256,11 +256,11 @@ Learn more about what is included in the default runtime environment:
 - [Java](/java/how-to/customize-runtime)
 
 <p align="center">
-  <img
-    src="/img/screenshots/build_deploy_pipeline_custom_runtime.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/build_deploy_pipeline_custom_runtime.png"
+    darkImage="/img/screenshots/build_deploy_pipeline_custom_runtime.png"
+    alt="Build Deploy Pipeline"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -327,11 +327,11 @@ You can change the deploy pipeline when you need to. Just simply modify the `zer
 When you know that the running build is not correct and you want to cancel it, you can do it in Zerops GUI. Go to the service detail, open the list of running processes and click on the **Open pipeline detail** button. Then click on the **Cancel build** button.
 
 <p align="center">
-  <img
-    src="/img/screenshots/nodejs_cancel_running_build.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/nodejs_cancel_running_build.png"
+    darkImage="/img/screenshots/nodejs_cancel_running_build.png"
+    alt="Running build"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -346,11 +346,11 @@ Zerops keeps 10 last versions of your application in the internal storage.
 The list of application versions is available in Zerops GUI. Go to the service detail and choose **Service dashboard & runtime containers** from the left menu. The active version is highlighted, show all archived version by clicking on the button below.
 
 <p align="center">
-  <img
-    src="/img/screenshots/pipeline_history.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/pipeline_history.png"
+    darkImage="/img/screenshots/pipeline_history.png"
+    alt="Pipeline history"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/features/scaling-ha.mdx b/apps/docs/content/features/scaling-ha.mdx
index 25c1789d..c84b4794 100644
--- a/apps/docs/content/features/scaling-ha.mdx
+++ b/apps/docs/content/features/scaling-ha.mdx
@@ -28,11 +28,11 @@ Each application you deploy starts with the minimum hardware resources: **CPU**
 Zerops has a preference for vertical scaling because it's faster and more precise. If the vertical auto scaling hits the defined maximum a new container is started automatically. When your application doesn't need so much power and all containers are vertically scaled down, Zerops will gradually remove whole containers.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling2.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling2.png"
+    darkImage="/img/screenshots/scaling2.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -41,11 +41,11 @@ Zerops has a preference for vertical scaling because it's faster and more precis
 Both minimum and maximum limits for auto scaling are under your control. Technical minimums for CPU cores, RAM and Disk are preset for each runtime service. Configure the minimums and maximums CPU cores, RAM and Disk depending on the needs of your application and Zerops will scale them within defined limits.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling3.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling3.png"
+    darkImage="/img/screenshots/scaling3.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -56,11 +56,11 @@ You can change the settings any time, Zerops will update the number of container
 When creating a new runtime service, you can choose the minimum and maximum number of containers. If you set the maximum limit to one, the service will be run in a **single container** and no horizontal scaling will occur.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling4.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling4.png"
+    darkImage="/img/screenshots/scaling4.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -93,11 +93,11 @@ Choose the CPU mode when starting a new service or change it later. The CPU mode
 If you've experienced problems with not enough power when your application starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your application.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -116,11 +116,11 @@ But if your application need a more memory faster or if you have experienced pro
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -135,11 +135,11 @@ Vertical auto scaling configuration for databases is identical to runtime servic
 You can choose 2 modes for each database: **Single Container** or **Highly Available** mode. The mode cannot be changed after the database is created.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling7.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling7.png"
+    darkImage="/img/screenshots/scaling7.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -176,11 +176,11 @@ In the **Single Container** mode the shared storage is deployed in a single cont
 Your data is stored only in a single container. If the container or the underlying physical machine fails, your data since the last backup will be lost. Zerops is not able to provide any automatic repair of single container mode shared storages.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling8.png"
-    alt="image"
-    width="90%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling8.png"
+    darkImage="/img/screenshots/scaling8.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/go/how-to/scaling.mdx b/apps/docs/content/go/how-to/scaling.mdx
index 85b28237..42c40a9a 100644
--- a/apps/docs/content/go/how-to/scaling.mdx
+++ b/apps/docs/content/go/how-to/scaling.mdx
@@ -126,11 +126,11 @@ Check if your application is ready to be run in multiple containers.
 If you've experienced problems with not enough power when your application starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your application.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -149,11 +149,11 @@ But if your application need a more memory faster or if you have experienced pro
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/java/how-to/scaling.mdx b/apps/docs/content/java/how-to/scaling.mdx
index b386bef2..4beb58b3 100644
--- a/apps/docs/content/java/how-to/scaling.mdx
+++ b/apps/docs/content/java/how-to/scaling.mdx
@@ -126,11 +126,11 @@ Check if your application is ready to be run in multiple containers.
 If you've experienced problems with not enough power when your application starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your application.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -149,11 +149,11 @@ But if your application need a more memory faster or if you have experienced pro
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/keydb/how-to/scale.mdx b/apps/docs/content/keydb/how-to/scale.mdx
index e5aef0b3..7494c6b7 100644
--- a/apps/docs/content/keydb/how-to/scale.mdx
+++ b/apps/docs/content/keydb/how-to/scale.mdx
@@ -60,11 +60,11 @@ Learn more about how to [fine tune](/keydb/how-to/scaling#fine-tune-the-auto-sca
 If you've experienced problems with not enough power when your database starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your database.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -83,11 +83,11 @@ But if your database need a more memory faster or if you have experienced proble
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/mariadb/how-to/create.mdx b/apps/docs/content/mariadb/how-to/create.mdx
index 08de3fcf..8fca08d5 100644
--- a/apps/docs/content/mariadb/how-to/create.mdx
+++ b/apps/docs/content/mariadb/how-to/create.mdx
@@ -25,11 +25,11 @@ The hostname is fixed after the service is created. It can't be changed later.
 Zerops provides MariaDB service in two modes: **Highly available** and **Single container**.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling7.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling7.png"
+    darkImage="/img/screenshots/scaling7.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/mariadb/how-to/scale.mdx b/apps/docs/content/mariadb/how-to/scale.mdx
index ef588eda..365e0ebd 100644
--- a/apps/docs/content/mariadb/how-to/scale.mdx
+++ b/apps/docs/content/mariadb/how-to/scale.mdx
@@ -9,11 +9,11 @@ Zerops performs an automated scaling of hardware resources required to run your
 To change the auto scaling settings go to the MariaDB service detail and choose **Automatic scaling configuration** in the left menu.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling7.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling7.png"
+    darkImage="/img/screenshots/scaling7.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -60,11 +60,11 @@ Learn more about how to [fine tune](/mariadb/how-to/scaling#fine-tune-the-auto-s
 If you've experienced problems with not enough power when your database starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your database.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -83,11 +83,11 @@ But if your database need a more memory faster or if you have experienced proble
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/nginx/how-to/scaling.mdx b/apps/docs/content/nginx/how-to/scaling.mdx
index 55f73e29..33413978 100644
--- a/apps/docs/content/nginx/how-to/scaling.mdx
+++ b/apps/docs/content/nginx/how-to/scaling.mdx
@@ -126,11 +126,11 @@ Check if your application is ready to be run in multiple containers.
 If you've experienced problems with not enough power when your application starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your application.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -149,11 +149,11 @@ But if your application need a more memory faster or if you have experienced pro
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/nodejs/how-to/scaling.mdx b/apps/docs/content/nodejs/how-to/scaling.mdx
index 4f4c8fe2..e8b22f3d 100644
--- a/apps/docs/content/nodejs/how-to/scaling.mdx
+++ b/apps/docs/content/nodejs/how-to/scaling.mdx
@@ -126,11 +126,11 @@ Check if your application is ready to be run in multiple containers.
 If you've experienced problems with not enough power when your application starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your application.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -149,11 +149,11 @@ But if your application need a more memory faster or if you have experienced pro
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/php/how-to/scaling.mdx b/apps/docs/content/php/how-to/scaling.mdx
index a280fa7a..3ef6fd2c 100644
--- a/apps/docs/content/php/how-to/scaling.mdx
+++ b/apps/docs/content/php/how-to/scaling.mdx
@@ -126,11 +126,11 @@ Check if your application is ready to be run in multiple containers.
 If you've experienced problems with not enough power when your application starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your application.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -149,11 +149,11 @@ But if your application need a more memory faster or if you have experienced pro
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/postgresql/how-to/create.mdx b/apps/docs/content/postgresql/how-to/create.mdx
index fecb54aa..5657daad 100644
--- a/apps/docs/content/postgresql/how-to/create.mdx
+++ b/apps/docs/content/postgresql/how-to/create.mdx
@@ -21,11 +21,11 @@ The hostname is fixed after the service is created. It can't be changed later.
 Zerops provides PostgreSQL service in two modes: **Highly available** and **Single container**.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling7.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling7.png"
+    darkImage="/img/screenshots/scaling7.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/postgresql/how-to/scale.mdx b/apps/docs/content/postgresql/how-to/scale.mdx
index e25e8f53..8b05c6eb 100644
--- a/apps/docs/content/postgresql/how-to/scale.mdx
+++ b/apps/docs/content/postgresql/how-to/scale.mdx
@@ -9,11 +9,11 @@ Zerops performs an automated scaling of hardware resources required to run your
 To change the auto scaling settings go to the PostgreSQL service detail and choose **Automatic scaling configuration** in the left menu.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling7.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling7.png"
+    darkImage="/img/screenshots/scaling7.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -60,11 +60,11 @@ Learn more about how to [fine tune](/postgresql/how-to/scaling#fine-tune-the-aut
 If you've experienced problems with not enough power when your database starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your database.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -83,11 +83,11 @@ But if your database need a more memory faster or if you have experienced proble
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/python/how-to/scaling.mdx b/apps/docs/content/python/how-to/scaling.mdx
index 2bac3c33..bdac1ce0 100644
--- a/apps/docs/content/python/how-to/scaling.mdx
+++ b/apps/docs/content/python/how-to/scaling.mdx
@@ -126,11 +126,11 @@ Check if your application is ready to be run in multiple containers.
 If you've experienced problems with not enough power when your application starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your application.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -149,11 +149,11 @@ But if your application need a more memory faster or if you have experienced pro
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/content/rust/how-to/scaling.mdx b/apps/docs/content/rust/how-to/scaling.mdx
index 6eb65bb3..e2b0d963 100644
--- a/apps/docs/content/rust/how-to/scaling.mdx
+++ b/apps/docs/content/rust/how-to/scaling.mdx
@@ -126,11 +126,11 @@ Check if your application is ready to be run in multiple containers.
 If you've experienced problems with not enough power when your application starts, increase the default Start CPU core count. Alternatively switch the [CPU mode](#shared-vs-dedicated-cpu) to dedicated to allocate the stable CPU power to your application.
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling5.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling5.png"
+    darkImage="/img/screenshots/scaling5.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -149,11 +149,11 @@ But if your application need a more memory faster or if you have experienced pro
 3. or setting the minimum free RAM in % of the RAM assigned to the container
 
 <p align="center">
-  <img
-    src="/img/screenshots/scaling6.png"
-    alt="image"
-    width="80%"
-    height="auto"
+  <Image
+    lightImage="/img/screenshots/scaling6.png"
+    darkImage="/img/screenshots/scaling6.png"
+    alt="Scaling"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
diff --git a/apps/docs/src/css/_docusaurus.css b/apps/docs/src/css/_docusaurus.css
index b595209c..cb14e02a 100644
--- a/apps/docs/src/css/_docusaurus.css
+++ b/apps/docs/src/css/_docusaurus.css
@@ -300,19 +300,16 @@ p {
 table {
   width: 100%;
   border-collapse: collapse;
-  color: #333;
 }
 
 th {
-  color: white;
   padding: 8px;
   border: 1px solid #c4c8cd;
 }
 
 td {
   width: 100%;
-  background-color: #F2F5F7;
-  color: #333;
   padding: 8px;
   border: 1px solid #b6b9bd;
+  @apply bg-[#F2F5F7] dark:bg-[#1B1B1F];
 }