diff --git a/docs/core-concepts/issues/timeline-dependency.mdx b/docs/core-concepts/issues/timeline-dependency.mdx
new file mode 100644
index 0000000..a7604ef
--- /dev/null
+++ b/docs/core-concepts/issues/timeline-dependency.mdx
@@ -0,0 +1,54 @@
+---
+title: Dependencies in Timeline
+hide_title: true
+---
+
+import Tags from '@site/src/components/Tags';
+
+<div className="tag-wrapper">
+ <h1>Set up task dependencies visually</h1>
+<Tags 
+  tags={[ 
+    { name: "Pro", additionalClass: "pro" }
+  ]} 
+ />
+</div>
+
+With dependencies, managing connected tasks has never been easier. This feature provides a clear, high-level view of task relationships, allowing you to quickly see which tasks depend on each other. It helps you plan tasks more efficiently, optimize resource allocation, and stay on top of critical tasks. By tracking dependencies, you can spot bottlenecks, prevent delays, and keep everything on track.
+
+## Timeline connectors
+:::info
+You need to set the Start date and Due date on issues for dependencies to appear in the Timeline layout.
+:::
+
+In the Timeline layout, you can easily set up dependencies by dragging connectors from one task to another. Once the dependency is established, a line appears between the tasks to visually represent the connection. Violated dependencies are shown as red lines, making it simple to spot any misaligned timelines.
+
+![Timeline dependencies](https://media.docs.plane.so/issues/timeline-dependencies.webp#center)
+
+:::tip
+When you drag tasks along the timeline, dependent tasks will adjust automatically to stay in sync.
+:::
+
+Plane supports three main types of dependencies:
+
+- **Finish-to-Start (FS)**   
+  Task B can’t start until Task A finishes. This is shown by the relations Blocking (Task A is blocking Task B) or Blocked by (Task B is  blocked by Task A). If Task B’s start date is earlier than Task A’s due date, the connecting line will turn red to indicate a conflict. 
+
+  ![Finish to start](https://media.docs.plane.so/issues/finish-to-start.webp#center)
+
+- **Start-to-Start (SS)**  
+  With this dependency, Task B can’t start until Task A begins, but both tasks can proceed simultaneously from that point onward. This is shown by the relations Starts before (Task A starts before Task B) or Starts after (Task B starts after Task A). If Task B’s start date is earlier than Task A’s start date, the connecting line will turn red to indicate a conflict. 
+
+  ![Start to start](https://media.docs.plane.so/issues/start-to-start.webp#center)
+
+- **Finish-to-Finish (FF)**  
+  Task B cannot be completed until Task A is finished, though both can be worked on simultaneously. This is shown by the relations Finishes Before (Task A finishes before Task B) or Finishes After (Task B finishes after Task A). If Task B’s due date is earlier than Task A’s, the connecting line will turn red to indicate a conflict.
+
+  ![Finish to finish](https://media.docs.plane.so/issues/finish-to-finish.webp#center)
+
+## Dependency relations
+
+You can also set up dependencies between issues using the **Relations** property. However, for the connectors to show up in the Timeline layout, you'll need to set the **Start date** and **Due date** for the issues.
+
+![Dependency relations](https://media.docs.plane.so/issues/dependency-relations.webp#center)
+
diff --git a/sidebars.ts b/sidebars.ts
index 8078edc..ccda763 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -72,7 +72,7 @@ const sidebars: SidebarsConfig = {
       items: [
         'core-concepts/issues/issue-types',
         'core-concepts/issues/time-tracking',
-        
+        'core-concepts/issues/timeline-dependency'
       ],
     },
     {
diff --git a/src/css/custom.css b/src/css/custom.css
index cc3bc63..5b8d267 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -537,3 +537,18 @@ img[src*='#center'] {
   background-color: rgb(32 43 61);
 }
 
+.business {
+  color: #111111;
+  border-radius: 4px;
+  border: 1px solid #D6D7D9;
+  background: linear-gradient(167.44deg, #C2C8E4 0%, #BFC4DF 67.25%, #FCFCFC 98.9%);
+  padding: 0 15px 0 15px;
+}
+
+html[data-theme='dark'] .business {
+  color: #F5F5F5;
+  border-radius: 4px;
+  border: 1px solid #646c90;
+  background: linear-gradient(164.95deg, #414669 0%, rgba(56, 60, 78, 0.12) 53.4%, rgba(172, 211, 255, 0.16) 100%);
+  padding: 0 15px 0 15px;
+}
\ No newline at end of file