diff --git a/docs/docs/getting-started/app-anatomy.md b/docs/docs/getting-started/app-anatomy.md
index 40cc73886..afcdea55c 100644
--- a/docs/docs/getting-started/app-anatomy.md
+++ b/docs/docs/getting-started/app-anatomy.md
@@ -27,14 +27,14 @@ title: Anatomy of an app
 ##
 
 Platform has 3 events that are broadcast to installed Apps
-![Platform events](img/app-anatomy-4.drawio.png)
+![Platform events](img/app-anatomy-4.drawio.jpg)
 
 - onLaunch()
-  ![Platform onLaunch()](img/app-anatomy-1.drawio.png)
+  ![Platform onLaunch()](img/app-anatomy-1.drawio.jpg)
 - onStart()
-  ![Platform onStart()](img/app-anatomy-2.drawio.png)
+  ![Platform onStart()](img/app-anatomy-2.drawio.jpg)
 - onDispose()
-  ![Platform onDispose()](img/app-anatomy-3.drawio.png)
+  ![Platform onDispose()](img/app-anatomy-3.drawio.jpg)
 - At any given time, when there is new App installtion/ unintallation, the Platform restarts and trigger
 - When App is being used, here is how the information passes between Platform and Apps
   ![Communication](img/app-anatomy-5.drawio.png)
diff --git a/docs/docs/getting-started/img/app-anatomy-1.drawio.jpg b/docs/docs/getting-started/img/app-anatomy-1.drawio.jpg
new file mode 100644
index 000000000..644acb43c
Binary files /dev/null and b/docs/docs/getting-started/img/app-anatomy-1.drawio.jpg differ
diff --git a/docs/docs/getting-started/img/app-anatomy-1.drawio.png b/docs/docs/getting-started/img/app-anatomy-1.drawio.png
deleted file mode 100644
index a03bc9427..000000000
Binary files a/docs/docs/getting-started/img/app-anatomy-1.drawio.png and /dev/null differ
diff --git a/docs/docs/getting-started/img/app-anatomy-2.drawio.jpg b/docs/docs/getting-started/img/app-anatomy-2.drawio.jpg
new file mode 100644
index 000000000..d8564cbc4
Binary files /dev/null and b/docs/docs/getting-started/img/app-anatomy-2.drawio.jpg differ
diff --git a/docs/docs/getting-started/img/app-anatomy-2.drawio.png b/docs/docs/getting-started/img/app-anatomy-2.drawio.png
deleted file mode 100644
index 9b723530a..000000000
Binary files a/docs/docs/getting-started/img/app-anatomy-2.drawio.png and /dev/null differ
diff --git a/docs/docs/getting-started/img/app-anatomy-3.drawio.jpg b/docs/docs/getting-started/img/app-anatomy-3.drawio.jpg
new file mode 100644
index 000000000..4f2abcc7c
Binary files /dev/null and b/docs/docs/getting-started/img/app-anatomy-3.drawio.jpg differ
diff --git a/docs/docs/getting-started/img/app-anatomy-3.drawio.png b/docs/docs/getting-started/img/app-anatomy-3.drawio.png
deleted file mode 100644
index ee9e2c6c3..000000000
Binary files a/docs/docs/getting-started/img/app-anatomy-3.drawio.png and /dev/null differ
diff --git a/docs/docs/getting-started/img/app-anatomy-4.drawio.jpg b/docs/docs/getting-started/img/app-anatomy-4.drawio.jpg
new file mode 100644
index 000000000..c0ca79cf1
Binary files /dev/null and b/docs/docs/getting-started/img/app-anatomy-4.drawio.jpg differ
diff --git a/docs/docs/getting-started/img/app-anatomy-4.drawio.png b/docs/docs/getting-started/img/app-anatomy-4.drawio.png
deleted file mode 100644
index e99d2d5b9..000000000
Binary files a/docs/docs/getting-started/img/app-anatomy-4.drawio.png and /dev/null differ
diff --git a/docs/src/styles/base.scss b/docs/src/styles/base.scss
index 6de9a10fd..fb6388922 100644
--- a/docs/src/styles/base.scss
+++ b/docs/src/styles/base.scss
@@ -30,7 +30,7 @@
     @apply text-sm;
     @apply antialiased;
     @apply bg-white dark:bg-black;
-    @apply text-gray-700 dark:text-gray-500;
+    @apply text-gray-700 dark:text-gray-400;
   }
   img {
     pointer-events: none;
diff --git a/docs/src/styles/tweaks.scss b/docs/src/styles/tweaks.scss
index 3b5e425e3..14ec842a9 100644
--- a/docs/src/styles/tweaks.scss
+++ b/docs/src/styles/tweaks.scss
@@ -84,4 +84,17 @@
   a {
     @apply text-blue-600 dark:text-blue-400;
   }
+  ul {
+    list-style: revert;
+  }
+  ol {
+    list-style: decimal;
+  }
+  ul,
+  ol {
+    padding-left: 16px;
+    li {
+      @apply leading-loose;
+    }
+  }
 }