diff --git a/docs/site/Configuring-datasource.md b/docs/site/Configuring-datasource.md
new file mode 100644
index 000000000000..9b81f7636e1d
--- /dev/null
+++ b/docs/site/Configuring-datasource.md
@@ -0,0 +1,25 @@
+---
+lang: en
+title: 'Configuring DataSource'
+keywords: LoopBack 4.0, LoopBack 4, Node.js, TypeScript, Connector, Datasource
+sidebar: lb4_sidebar
+permalink: /doc/en/lb4/Configuring-datasource.html
+---
+
+## Overview
+
+{% include note.html content=" This is a placeholder page, the task of adding content is tracked by the following GitHub issue: loopback-next#6091 " %}
+
+<!-- TODO
+
+- how to configure the connector ( what properties the connector configuration
+  might take
+- how type maps ⚠️ should finish task https://github.com/strongloop/loopback-next/issues/5063
+  - to database (Database Migration), e.g String -> Varchar, Boolean -> Tinyint
+  - from database (Discovery), e.g Bigint -> int, Text -> String
+- how to customize table/column names
+- how to discover/migration tables/models
+- list connector specific topics, e.g transaction, objectId, and read should check the corresponding connector pages.
+- add links to connector reference
+- Move https://loopback.io/doc/en/lb4/DataSources.html#creating-a-datasource-at-runtime from "Datasource"
+ -->
diff --git a/docs/site/DataSource.md b/docs/site/DataSource.md
index e585afbbe604..b2fc68a452a7 100644
--- a/docs/site/DataSource.md
+++ b/docs/site/DataSource.md
@@ -82,3 +82,19 @@ Attach the newly created datasource to the app by calling `app.dataSource()`.
 The `app.datasource()` method is available only on application classes
 with `RepositoryMixin` applied.
 " %}
+
+### Connector
+
+{% include note.html content=" This is a placeholder page, the task of adding content is tracked by the following GitHub issue: loopback-next#6092 " %}
+
+<!-- TODO
+
+- what is connectors
+- what role it plays in req/res cycle, and what relation it has between model and other artifacts (briefly)
+- connector types (add links ):
+  - SQL (transaction), NoSQL (freeform properties)
+  - Services connectors (service proxy) and others
+  - (optional) In-memory connector
+  - (optional) Community connector
+
+  -->
diff --git a/docs/site/sidebars/lb4_sidebar.yml b/docs/site/sidebars/lb4_sidebar.yml
index c52844a2d0d0..4fbfab5b371b 100644
--- a/docs/site/sidebars/lb4_sidebar.yml
+++ b/docs/site/sidebars/lb4_sidebar.yml
@@ -91,6 +91,10 @@ children:
       url: todo-list-tutorial-sqldb.html
       output: 'web, pdf'
 
+  - title: 'Connecting to Back-end Service Tutorials'
+    url: Connecting-to-back-end.html
+    output: 'web, pdf'
+
   - title: 'SOAP Web Service Tutorial'
     url: soap-calculator-tutorial.html
     output: 'web, pdf'
@@ -231,6 +235,10 @@ children:
     output: 'web, pdf'
     children:
 
+    - title: 'Configuring DataSource'
+      url: Configuring-datasource.html
+      output: 'web, pdf'
+
     - title: 'Working with data'
       url: Working-with-data.html
       output: 'web, pdf'
diff --git a/docs/site/tutorials/connectors/Connecting-to-back-end.md b/docs/site/tutorials/connectors/Connecting-to-back-end.md
new file mode 100644
index 000000000000..f344d6a31fe2
--- /dev/null
+++ b/docs/site/tutorials/connectors/Connecting-to-back-end.md
@@ -0,0 +1,18 @@
+---
+lang: en
+title: 'Connecting to Back-end Service Tutorials'
+keywords:
+  LoopBack 4.0, LoopBack 4, Node.js, TypeScript, Tutorial, Connector, Datasource
+sidebar: lb4_sidebar
+permalink: /doc/en/lb4/Connecting-to-back-end.html
+---
+
+{% include note.html content=" This is a placeholder page, the task of adding content is tracked by the following GitHub issue: loopback-next#6093 " %}
+
+<!-- TODO
+
+- Briefly introduce what is connectors and what connectors LB provides.
+- List the connector tutorials we have in connector ref (MySQL, PostgreSQL, Oracle, and MongoDB)
+- Add the link to connector ref
+
+-->