diff --git a/docs/docs/getting-started/canvas.mdx b/docs/docs/getting-started/canvas.mdx
index 4c8e1c06e..bd210881f 100644
--- a/docs/docs/getting-started/canvas.mdx
+++ b/docs/docs/getting-started/canvas.mdx
@@ -4,7 +4,6 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 import ReactPlayer from "react-player";
 import Admonition from "@theme/Admonition";
 
-
 # 🎨 Langflow canvas
 
 The **Langflow canvas** is the central hub of Langflow, where you'll assemble new flows from components, run them, and see the results.
@@ -21,11 +20,38 @@ You can either build this flow yourself, or select **New Project** > **Basic pro
   style={{ width: "30%", margin: "20px auto" }}
 />
 
-For more on the difference between flows, components, collections, and projects, see [Flows, collections, components, and projects](./flows-components-collections.mdx).
+## Flows, components, collections, and projects
 
-## Components
+A [flow](#flow) is a pipeline of components connected together in the Langflow canvas.
 
-A component is a building block of a flow.
+A [component](#component) is a single building block within a flow. A component has inputs, outputs, and parameters that define its functionality.
+
+A [collection](#collection) is a snapshot of the flows available in your database. Collections can be downloaded to local storage and uploaded for future use.
+
+A [project](#project) can be a component or a flow. Projects are saved as part of your collection.
+
+For example, the **OpenAI LLM** is a **component** of the **Basic prompting** flow, and the **flow** is stored in a **collection**.
+
+## Flow
+
+A **flow** is a pipeline of components connected together in the Langflow canvas.
+
+For example, the [Basic prompting](../starter-projects/basic-prompting.mdx) flow is a pipeline of four components:
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/basic-prompting.png",
+    dark: "img/basic-prompting.png",
+  }}
+  style={{ width: "80%", margin: "20px auto" }}
+/>
+
+In this flow, the **OpenAI LLM component** receives input (left side) and produces output (right side) - in this case, receiving input from the **Chat Input** and **Prompt** components and producing output to the **Chat Output** component.
+
+## Component
+
+Components are the building blocks of flows. They consist of inputs, outputs, and parameters that define their functionality. These elements provide a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the LangChain [documentation](https://python.langchain.com/docs/integrations/components).
 
 <div style={{ marginBottom: "20px" }}>
   During the flow creation process, you will notice handles (colored circles)
@@ -55,7 +81,7 @@ A component is a building block of a flow.
 
 <div style={{ marginBottom: "20px" }}>
 In the top right corner of the component, you'll find the component status icon (![Status icon](/logos/playbutton.svg)).
-Run the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** button at the bottom right of the canvas.
+Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** at the bottom right of the canvas.
 
 Once the validation is complete, the status of each validated component should turn green (![Status icon](/logos/greencheck.svg)).
 To debug, hover over the component status to see the outputs.
@@ -63,6 +89,16 @@ To debug, hover over the component status to see the outputs.
 
 ---
 
+### Component Parameters
+
+Langflow components can be edited by clicking the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation.
+
+<div
+  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
+>
+  <ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
+</div>
+
 ### Component menu
 
 Each component is a little unique, but they will all have a menu bar on top that looks something like this.
@@ -77,7 +113,7 @@ The menu options are **Code**, **Save**, **Duplicate**, and **More**.
   style={{ width: "30%", margin: "20px auto" }}
 />
 
-#### Code
+### Code menu
 
 The **Code** button displays your component's Python code.
 You can modify the code and save it.
@@ -189,6 +225,33 @@ For example, changing the **Chat Input** component's `input_value` will change t
   <ReactPlayer playing controls url="/videos/langflow_api.mp4" />
 </div>
 
+## Collection
+
+A collection is a snapshot of flows available in a database.
+
+Collections can be downloaded to local storage and uploaded for future use.
+
+<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
+  />
+</div>
+
+## Project
+
+A **Project** can be a flow or a component. To view your saved projects, select **My Collection**.
+
+Your **Projects** are displayed.
+
+Click the **![Playground icon](/logos/botmessage.svg) Playground** button to run a flow from the **My Collection** screen.
+
+In the top left corner of the screen are options for **Download Collection**, **Upload Collection**, and **New Project**.
+
+Select **Download Collection** to save your project to your local machine. This downloads all flows and components as a `.json` file.
+
+Select **Upload Collection** to upload a flow or component `.json` file from your local machine.
+
+Select **New Project** to create a new project. In addition to a blank canvas, [starter projects](../starter-projects/basic-prompting.mdx) are also available.
+
 ## Project options menu
 
 To see options for your project, in the upper left corner of the canvas, select the dropdown menu.
diff --git a/docs/docs/getting-started/flows-components-collections.mdx b/docs/docs/getting-started/flows-components-collections.mdx
index 028e46b2a..586f08192 100644
--- a/docs/docs/getting-started/flows-components-collections.mdx
+++ b/docs/docs/getting-started/flows-components-collections.mdx
@@ -17,97 +17,10 @@ A [project](#project) can be a component or a flow. Projects are saved as part o
 
 For example, the **OpenAI LLM** is a **component** of the **Basic prompting** flow, and the **flow** is stored in a **collection**.
 
-## Flow
 
-A **flow** is a pipeline of components connected together in the Langflow canvas.
-
-For example, the [Basic prompting](../starter-projects/basic-prompting.mdx) flow is a pipeline of four components:
-
-<ZoomableImage
-  alt="Docusaurus themed image"
-  sources={{
-    light: "img/basic-prompting.png",
-    dark: "img/basic-prompting.png",
-  }}
-  style={{ width: "80%", margin: "20px auto" }}
-/>
-
-For example, the **OpenAI LLM component** receives input (left side) and produces output (right side) - in this case, receiving input from the **Chat Input** and **Prompt** components and producing output to the **Chat Output** component.
 
 ## Component
 
-Components are the building blocks of flows. They consist of inputs, outputs, and parameters that define their functionality. These elements provide a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the LangChain [documentation](https://python.langchain.com/docs/integrations/components).
-
-<div style={{ marginBottom: "20px" }}>
-  During the flow creation process, you will notice handles (colored circles)
-  attached to one or both sides of a component. These handles represent the
-  availability to connect to other components. Hover over a handle to see connection details.
-</div>
-
-<div style={{ marginBottom: "20px" }}>
-  For example, if you select a <code>ConversationChain</code> component, you
-  will see orange <span style={{ color: "orange" }}>o</span> and purple{" "}
-  <span style={{ color: "purple" }}>o</span> input handles. They indicate that
-  this component accepts an LLM and a Memory component as inputs. The red
-  asterisk <span style={{ color: "red" }}>*</span> means that at least one input
-  of that type is required.
-</div>
-
-{" "}
-
-<ZoomableImage
-  alt="Docusaurus themed image"
-  sources={{
-    light: useBaseUrl("img/single-component.png"),
-    dark: useBaseUrl("img/single-component.png"),
-  }}
-  style={{ width: "50%", maxWidth: "800px", margin: "20px auto" }}
-/>
-
-<div style={{ marginBottom: "20px" }}>
-In the top right corner of the component, you'll find the component status icon (![Status icon](/logos/playbutton.svg)).
-Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** at the bottom right of the canvas.
-
-Once the validation is complete, the status of each validated component should turn green (![Status icon](/logos/greencheck.svg)).
-To debug, hover over the component status to see the outputs.
-</div>
-
----
-
-### Component Parameters
-
-Langflow components can be edited by clicking the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation.
-
-<div
-  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
->
-  <ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
-</div>
 
 
-## Collection
 
-A collection is a snapshot of flows available in a database.
-
-Collections can be downloaded to local storage and uploaded for future use.
-
-<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
-<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
-  />
-</div>
-
-## Project
-
-A **Project** can be a flow or a component. To view your saved projects, select **My Collection**.
-
-Your **Projects** are displayed.
-
-Click the **![Playground icon](/logos/botmessage.svg) Playground** button to run a flow from the **My Collection** screen.
-
-In the top left corner of the screen are options for **Download Collection**, **Upload Collection**, and **New Project**.
-
-Select **Download Collection** to save your project to your local machine. This downloads all flows and components as a `.json` file.
-
-Select **Upload Collection** to upload a flow or component `.json` file from your local machine.
-
-Select **New Project** to create a new project. In addition to a blank canvas, [starter projects](../starter-projects/basic-prompting.mdx) are also available.
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 1bf42c4ea..2b891b589 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -14,14 +14,7 @@ module.exports = {
         "index",
         "getting-started/install-langflow",
         "getting-started/quickstart",
-        {
-          type: "category",
-          label: "Langflow Functionality",
-          items: [
-            "getting-started/canvas",
-            "getting-started/flows-components-collections",
-          ],
-        },
+        "getting-started/canvas",
         "migration/possible-installation-issues",
         "getting-started/new-to-llms",
       ],