diff --git a/Architecture-and-structure-of-the-page-components-%28blocks%29.md b/Architecture-and-structure-of-the-page-components-%28blocks%29.md
index 6f836bf..800a4d5 100644
--- a/Architecture-and-structure-of-the-page-components-%28blocks%29.md
+++ b/Architecture-and-structure-of-the-page-components-%28blocks%29.md
@@ -102,4 +102,16 @@ In the case of this object *'articles'* function, it fetches the appropriate amo
 
 ### BlockWrapper
 
-This vue component is responsible for rendering all the component blocks on the pagebuilder canvas and it's options drawer if the user click the associated cogwheel for that component. It's important that you import and include the component in `const components` for it to be detected and rendered.
\ No newline at end of file
+This vue component is responsible for rendering all the component blocks on the pagebuilder canvas and it's options drawer if the user click the associated cogwheel for that component. It's important that you import and include the component in `const components` for it to be detected and rendered.
+
+### Root and Preview
+
+```
+├── pages
+│   ├── Backend
+│   │   └── PageBuilder
+│   │       └── Preview.vue
+│   ├── Root.vue
+```
+
+These two vue files renders a preview page accessible directly from within the pagebuilder ui, and the pages themselves. It's also important that you import all the components into these files, and define them in their `const components` object holding the component definitions, for the system to detect and render the components.
\ No newline at end of file