diff --git a/documentation/docs/core/refine-component/index.md b/documentation/docs/core/refine-component/index.md
index 7a37f1664748..0ce6de0a8cea 100644
--- a/documentation/docs/core/refine-component/index.md
+++ b/documentation/docs/core/refine-component/index.md
@@ -720,6 +720,8 @@ Callback to handle all live events.
## ~~catchAll~~
+| 🚨 Use the `` component in your routes instead.
+
When the app is navigated to a non-existent route, Refine shows a default error page. A custom error component can be used for this error page by passing the customized component to the `catchAll` property:
```tsx title="App.tsx"
@@ -736,6 +738,8 @@ const App = () => (
## ~~LoginPage~~
+| 🚨 Use the `` component in your routes instead.
+
Refine has a default login page form which is served on the `/login` route when the `authProvider` configuration is provided.
Custom login component can be passed to the `LoginPage` property.
@@ -754,6 +758,8 @@ const App = () => (
## ~~DashboardPage~~
+| 🚨 Use the `` component in your routes instead.
+
A custom dashboard page can be passed to the `DashboardPage` prop which is accessible on the root route.
The dashboard item will appear at the top of the sider menu. If `DashboardPage` is not given, the first resource of `resources` will be shown.
@@ -790,12 +796,16 @@ const App = () => (
## ~~Sider~~
+| 🚨 Use `Sider` prop of `` component instead.
+
The default sidebar can be customized by using Refine hooks and passing custom components to the `Sider` property.
> For more information, refer to the [`useMenu` hook documentation →](/docs/core/hooks/utilities/use-menu)
## ~~Footer~~
+| 🚨 Use `Footer` prop of `` component instead.
+
The default app footer can be customized by passing the `Footer` property.
```tsx title="App.tsx"
@@ -812,7 +822,7 @@ const App = () => (
## ~~Header~~
-The default app header can be customized by passing the `Header` property.
+| 🚨 Use `Header` prop of `` component instead.
```tsx title="App.tsx"
// highlight-next-line
@@ -828,6 +838,8 @@ const App = () => (
## ~~Layout~~
+| 🚨 Use `` as children of `` instead.
+
The default layout can be customized by passing the `Layout` property.
Layout property will receive individual layout components as property.
@@ -873,6 +885,8 @@ const App = () => (
## ~~OffLayoutArea~~
+| 🚨 Use `OffLayoutArea` prop of `` component instead.
+
The component wanted to be placed out of the app layout structure can be set by passing to the `OffLayoutArea` prop.
```tsx title="App.tsx"
@@ -888,6 +902,8 @@ const App = () => (
## ~~Title~~
+| 🚨 Use `Title` prop of `` component instead.
+
The app title can be set by passing the `Title` property.
```tsx title="App.tsx"