diff --git a/docs/getting_started/main.md b/docs/getting_started/main.md
index b196d3ee..08239853 100644
--- a/docs/getting_started/main.md
+++ b/docs/getting_started/main.md
@@ -25,9 +25,14 @@ while ClearML ensures your work is reproducible and scalable.
-**Friendly tutorials to get you started:**
+
+
+
+
+ Friendly tutorials to get you started: |
+
Step 1 - Experiment Management |
@@ -50,11 +55,13 @@ while ClearML ensures your work is reproducible and scalable.
+
+
![Webapp gif](../img/gif/webapp_screenshots.gif)
### Read a Little More
-
+
![Architecture diagram](../img/clearml_architecture.png)
diff --git a/src/css/custom.css b/src/css/custom.css
index 2c8284d1..162ff8cc 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -73,6 +73,11 @@ html[data-theme="dark"] a:hover {
color: var(--ifm-color-primary-lightest);
}
+.align-center {
+ text-align: center;
+ margin: auto;
+}
+
.max-w-75 {
max-width: 75%;
}
@@ -612,6 +617,15 @@ html[data-theme="dark"] .footer__link-item:hover {
}
}
+.tbl-1 > table {
+ width: 100%;
+ display: inline-table;
+ margin: 48px 0;
+}
+
+.tbl-1 > thead {
+ font-size: x-large;
+}
html[data-theme="dark"] .markdown thead th {
color: var(--ifm-color-gray-600);