diff --git a/docs/.docusaurus/docusaurus.config.mjs b/docs/.docusaurus/docusaurus.config.mjs
index 59f9fa94d..b0b597e6c 100644
--- a/docs/.docusaurus/docusaurus.config.mjs
+++ b/docs/.docusaurus/docusaurus.config.mjs
@@ -7,17 +7,14 @@ export default {
   "title": "LangFlow Documentation",
   "tagline": "LangFlow is a GUI for LangChain, designed with react-flow",
   "favicon": "img/favicon.ico",
-  "url": "https://langflow-docs.github.io",
+  "url": "https://langflow.docs.com",
   "baseUrl": "/",
   "onBrokenLinks": "throw",
   "onBrokenMarkdownLinks": "warn",
   "organizationName": "logspace-ai",
   "projectName": "langflow",
-  "deploymentBranch": "gh pages",
   "trailingSlash": false,
-  "customFields": {
-    "mendableAnonKey": "b7f52734-297c-41dc-8737-edbd13196394"
-  },
+  "customFields": {},
   "i18n": {
     "defaultLocale": "en",
     "locales": [
diff --git a/docs/docs/collection.mdx b/docs/docs/collection.mdx
index efc8d9fc9..ca9231075 100644
--- a/docs/docs/collection.mdx
+++ b/docs/docs/collection.mdx
@@ -7,4 +7,7 @@ import ReactPlayer from 'react-player';
 
 A collection is a snapshot of the flows available in the database. You can download your entire collection for local storage and upload it anytime for future use.
 
-<ReactPlayer playing controls url='videos/langflow_collection.mp4' />
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+<ReactPlayer playing controls url='videos/langflow_collection.mp4'
+  />
+</div>
diff --git a/docs/docs/components.mdx b/docs/docs/components.mdx
index c99c864f3..04441d682 100644
--- a/docs/docs/components.mdx
+++ b/docs/docs/components.mdx
@@ -38,4 +38,7 @@ On the top right corner, you will find the component status icon 🔴. Make the
 
 LangFlow components can be edited in the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation.
 
-<ReactPlayer playing controls url='videos/langflow_parameters.mp4' />
\ No newline at end of file
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+<ReactPlayer playing controls url='videos/langflow_parameters.mp4'
+  />
+</div>
\ No newline at end of file
diff --git a/docs/docs/creating-flows.mdx b/docs/docs/creating-flows.mdx
index ef909862e..e830eb9c5 100644
--- a/docs/docs/creating-flows.mdx
+++ b/docs/docs/creating-flows.mdx
@@ -21,11 +21,17 @@ Creating flows with LangFlow is easy. Drag sidebar components onto the canvas an
 
 The easiest way to start with LangFlow is by forking a **community example**. Forking an example stores a copy in your project collection, allowing you to edit and save the modified version as a new flow.
 
-<ReactPlayer playing controls url='videos/langflow_fork.mp4' />
-<p></p>
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+<ReactPlayer playing controls url='videos/langflow_fork.mp4'
+  />
+</div>
+
 
 ## Build
 
 Building a flow means validating if the components have prerequisites fulfilled and are properly instantiated. When a chat message is sent, the flow will run for the first time, executing the pipeline.
 
-<ReactPlayer playing controls url='videos/langflow_build.mp4' />
\ No newline at end of file
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+<ReactPlayer playing controls url='videos/langflow_build.mp4'
+  />
+</div>
diff --git a/docs/docs/features.mdx b/docs/docs/features.mdx
index 1ff7a5217..bf227ffe4 100644
--- a/docs/docs/features.mdx
+++ b/docs/docs/features.mdx
@@ -58,4 +58,7 @@ Once you save a flow, the API endpoint is created with your latest changes. Clic
 
 The example below shows a Python script making a POST request to a local API endpoint, which gets a prediction based on the message input.
 
-<ReactPlayer playing controls url='videos/langflow_api.mp4' />
\ No newline at end of file
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+<ReactPlayer playing controls url='videos/langflow_api.mp4'
+  />
+</div>
\ No newline at end of file
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 89fa8b455..e81bea162 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -7,16 +7,15 @@ const lightCodeTheme = require('prism-react-renderer/themes/github');
     title: 'LangFlow Documentation',
     tagline: 'LangFlow is a GUI for LangChain, designed with react-flow',
     favicon: 'img/favicon.ico',
-    url: 'https://langflow-docs.github.io',
+    url: 'https://langflow.docs.com',
     baseUrl: '/',
     onBrokenLinks: 'throw',
     onBrokenMarkdownLinks: 'warn',
     organizationName: 'logspace-ai',
     projectName: 'langflow',
-    deploymentBranch: 'gh pages',
     trailingSlash: false,
     customFields: {
-      mendableAnonKey: "b7f52734-297c-41dc-8737-edbd13196394",
+      mendableAnonKey: process.env.MENDABLE_ANON_KEY,
     },
     i18n: {
       defaultLocale: 'en',