diff --git a/docs/img/webapp_pipeline_card.png b/docs/img/webapp_pipeline_card.png
index 9e5a2734..28953360 100644
Binary files a/docs/img/webapp_pipeline_card.png and b/docs/img/webapp_pipeline_card.png differ
diff --git a/docs/img/webapp_pipeline_context_menu.png b/docs/img/webapp_pipeline_context_menu.png
index bcf7b2af..be82fbcc 100644
Binary files a/docs/img/webapp_pipeline_context_menu.png and b/docs/img/webapp_pipeline_context_menu.png differ
diff --git a/docs/img/webapp_pipeline_table.png b/docs/img/webapp_pipeline_table.png
index 5f596b16..7e699623 100644
Binary files a/docs/img/webapp_pipeline_table.png and b/docs/img/webapp_pipeline_table.png differ
diff --git a/docs/webapp/pipelines/webapp_pipeline_page.md b/docs/webapp/pipelines/webapp_pipeline_page.md
index e242b48f..59941138 100644
--- a/docs/webapp/pipelines/webapp_pipeline_page.md
+++ b/docs/webapp/pipelines/webapp_pipeline_page.md
@@ -15,8 +15,12 @@ pipeline structure, configuration and outputs for all of the pipeline’s runs,
 
 The pipeline cards display summarized pipeline information:  
 
+<div class="max-w-50">
+
 ![Project card](../../img/webapp_pipeline_card.png)
 
+</div>
+
 * Pipeline name
 * Time since the pipeline’s most recent run
 * Run summary - Number of *Running*/*Pending*/*Completed*/*Failed* runs
@@ -28,7 +32,11 @@ The pipeline cards display summarized pipeline information:
 Click <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Menu" className="icon size-md space-sm" /> on the top right
 of a pipeline card to open its context menu and access pipeline actions.  
 
+<div class="max-w-50">
+
 ![Project context menu](../../img/webapp_pipeline_context_menu.png)
 
+</div>
+
 * Rename - Change the pipeline’s name
 * Add Tag - Add label to the pipeline to help easily classify groups of pipelines.
diff --git a/src/css/custom.css b/src/css/custom.css
index 30fa7f94..5852e721 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -60,6 +60,19 @@ html[data-theme="dark"] {
 }
 
 /* ===LAYOUT=== */
+
+.max-w-75 {
+  max-width: 75%;
+}
+
+.max-w-50 {
+  max-width: 50%;
+}
+
+.max-w-25 {
+  max-width: 25%;
+}
+
 /* sidebar & content in the center of the page */
 
 .navbar__inner,