diff --git a/docs/docs/get-started/what-is-openrag.mdx b/docs/docs/get-started/what-is-openrag.mdx
index de233931..bae90d26 100644
--- a/docs/docs/get-started/what-is-openrag.mdx
+++ b/docs/docs/get-started/what-is-openrag.mdx
@@ -48,10 +48,10 @@ flowchart LR
         end
 
         subgraph ThirdParty["Third Party Services"]
-            OneDrive
-            style OneDrive fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
             GoogleDrive["Google Drive"]
             style GoogleDrive fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
+            OneDrive
+            style OneDrive fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
             SharePoint["SharePoint"]
             style SharePoint fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
             More[...]
@@ -60,8 +60,8 @@ flowchart LR
 
         %% Define connections
         DoclingSrv --> Backend
-        OneDrive --> Backend
         GoogleDrive --> Backend
+        OneDrive --> Backend
         SharePoint --> Backend
         More --> Backend
         Backend --> Langflow
@@ -73,10 +73,6 @@ flowchart LR
         style Containers fill:#444444,stroke:#666666,color:white,stroke-width:2px
         style ThirdParty fill:#333333,stroke:#666666,color:white,stroke-width:2px
     end
-
-    %% Ensure Backend and Frontend are on the same level and have enough width for text
-    classDef sameLevel width:180px
-    class Backend,Frontend sameLevel
 ```
 
 The **OpenRAG Backend** is the central orchestration service that coordinates all other components.
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 9a24f711..95eb8644 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -148,46 +148,49 @@
   text-align: center;
   margin: 2rem 0;
   width: 100% !important;
-  min-height: 400px !important;
+  min-height: 500px !important;
   display: block !important;
+  overflow: visible !important;
 }
 
 .mermaid svg {
   width: 100% !important;
+  max-width: none !important;
   min-width: 800px !important;
-  min-height: 400px !important;
+  min-height: 500px !important;
   height: auto !important;
   display: block !important;
   margin: 0 auto !important;
   transform: scale(1) !important;
 }
 
-/* Override any potential conflicts */
+/* Force Mermaid diagram sizing */
 .markdown .mermaid {
   width: 100% !important;
-  min-height: 400px !important;
+  min-height: 500px !important;
+  display: block !important;
 }
 
 .markdown .mermaid svg {
   width: 100% !important;
   min-width: 800px !important;
-  min-height: 400px !important;
-  transform: none !important;
+  min-height: 500px !important;
+  transform: scale(1) !important;
 }
 
 /* Target the specific Mermaid container */
 div[class*="mermaid"] {
   width: 100% !important;
-  min-height: 400px !important;
+  min-height: 500px !important;
 }
 
 div[class*="mermaid"] svg {
   width: 100% !important;
   min-width: 800px !important;
-  min-height: 400px !important;
+  min-height: 500px !important;
 }
 
-/* Additional aggressive targeting for Mermaid sizing */
+/* Force Mermaid to render at full size */
 .mermaid,
 .mermaid > *,
 .mermaid svg,
@@ -195,17 +198,16 @@ div[class*="mermaid"] svg {
 .mermaid div svg {
   width: 100% !important;
   min-width: 800px !important;
-  min-height: 400px !important;
+  min-height: 500px !important;
   max-width: none !important;
   display: block !important;
   transform: none !important;
   scale: 1 !important;
 }
 
-/* Force Mermaid to not be constrained */
+/* Override any potential scaling issues */
 .mermaid svg {
+  transform: none !important;
+  scale: 1 !important;
   viewBox: unset !important;
-  width: 100% !important;
-  min-width: 800px !important;
-  min-height: 400px !important;
 }