diff --git a/docs/docs/guidelines/components.mdx b/docs/docs/guidelines/components.mdx
index 32ec00615..16aa83eff 100644
--- a/docs/docs/guidelines/components.mdx
+++ b/docs/docs/guidelines/components.mdx
@@ -26,13 +26,14 @@ Components are the building blocks of the flows. They are made of inputs, output
 </div>
 
 {" "}
+
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/single-compenent.png"),
     dark: useBaseUrl("img/single-compenent.png"),
   }}
-  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+  style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
 />
 
 <div style={{ marginBottom: "20px" }}>
diff --git a/docs/docs/guidelines/features.mdx b/docs/docs/guidelines/features.mdx
index 6f50abb35..d4998edb6 100644
--- a/docs/docs/guidelines/features.mdx
+++ b/docs/docs/guidelines/features.mdx
@@ -1,4 +1,3 @@
-
 # Features
 
 <div style={{ marginBottom: "20px" }}>
@@ -9,13 +8,14 @@
 </div>
 
 {" "}
+
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
     light: useBaseUrl("img/features.png"),
     dark: useBaseUrl("img/features.png"),
   }}
-  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
+  style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
 />
 
 <div style={{ marginBottom: "20px" }}>
@@ -63,7 +63,6 @@ The example below shows a Python script making a POST request to a local API end
   <ReactPlayer playing controls url="/videos/langflow_api.mp4" />
 </div>
 
-
 import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
diff --git a/docs/docs/guidelines/login.mdx b/docs/docs/guidelines/login.mdx
index fde7cd09a..1d5a1d031 100644
--- a/docs/docs/guidelines/login.mdx
+++ b/docs/docs/guidelines/login.mdx
@@ -105,7 +105,7 @@ Users can change their profile settings by clicking on the profile icon in the t
     light: useBaseUrl("img/my-account.png"),
     dark: useBaseUrl("img/my-account.png"),
   }}
-  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
+  style={{ width: "50%", maxWidth: "600px", margin: "20px auto" }}
 />
 
 By clicking on **Profile Settings**, the user is taken to the profile settings page, where they can change their password and their profile picture.
@@ -116,10 +116,11 @@ By clicking on **Profile Settings**, the user is taken to the profile settings p
     light: useBaseUrl("img/profile-settings.png"),
     dark: useBaseUrl("img/profile-settings.png"),
   }}
-  style={{ maxWidth: "600px", margin: "0 auto" }}
+  style={{ maxWidth: "600px", margin: "20px auto" }}
 />
 
-By clicking on **Admin Page**, the superuser is taken to the admin page, where they can manage users and groups.
+By clicking on **Admin Page**, the superuser is taken to the admin page, where they
+can manage users and groups.
 
 <ZoomableImage
   alt="Docusaurus themed image"