diff --git a/base-components/jszip/headHtml/js-zip.html b/base-components/jszip/headHtml/js-zip.html
new file mode 100644
index 0000000..fa78a4f
--- /dev/null
+++ b/base-components/jszip/headHtml/js-zip.html
@@ -0,0 +1 @@
+<script src="js/jszip/jszip.js"></script>
diff --git a/base-components/jszip/meta.json b/base-components/jszip/meta.json
new file mode 100644
index 0000000..1618e6b
--- /dev/null
+++ b/base-components/jszip/meta.json
@@ -0,0 +1 @@
+{"id":"jszip","description":"Create, read and edit .zip files with Javascript"}
\ No newline at end of file
diff --git a/components/1-styling/componentCss/style.css b/components/1-styling/componentCss/style.css
index 1d6d1b8..5d7330e 100644
--- a/components/1-styling/componentCss/style.css
+++ b/components/1-styling/componentCss/style.css
@@ -236,4 +236,9 @@ header .simplycode-controls {
 }
 .simplycode-editor-code textarea {
   margin-top: -1px;
-}
\ No newline at end of file
+}
+strong.simplycode-module {
+  color: var(--simplycode-highlight-dark);
+  float: right;
+  padding-right: 5px;
+}
diff --git a/components/simply-toolbar/componentTemplates/simply-toolbar-imports.html b/components/simply-toolbar/componentTemplates/simply-toolbar-imports.html
new file mode 100644
index 0000000..528eab6
--- /dev/null
+++ b/components/simply-toolbar/componentTemplates/simply-toolbar-imports.html
@@ -0,0 +1,34 @@
+<div class="simply-toolbar-title">
+  <simply-render rel="logo"></simply-render>
+</div>
+<button disabled class="ds-button simply-toolbar-button">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#save">
+    </use></svg>
+  Save
+</button>
+<button disabled class="ds-button simply-toolbar-button">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#trash">
+    </use></svg>
+  Delete
+</button>
+<button class="ds-button simply-toolbar-button" data-simply-command="fetchImports">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#download">
+    </use></svg>
+  Fetch imports
+</button>
+<span class="simply-toolbar-push-right"></span>
+<button class="ds-button simply-toolbar-button" data-simply-command="preview">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#eye">
+    </use></svg>
+  Preview
+</button>
+<button disabled class="ds-button simply-toolbar-button">
+  <svg class="ds-icon ds-icon-feather">
+    <use xlink:href="/assets/img/feather-sprite.svg#check">
+    </use></svg>
+  Publish
+</button>
\ No newline at end of file
diff --git a/components/simply-toolbar/componentTemplates/simply-toolbar.html b/components/simply-toolbar/componentTemplates/simply-toolbar.html
index a504805..adde7a8 100644
--- a/components/simply-toolbar/componentTemplates/simply-toolbar.html
+++ b/components/simply-toolbar/componentTemplates/simply-toolbar.html
@@ -2,6 +2,7 @@
   <template data-simply-template="default" rel="simply-toolbar-default"></template>
   <template data-simply-template="Edit builder" rel="simply-toolbar-builder"></template>
   <template data-simply-template="Edit import" rel="simply-toolbar-import"></template>
+  <template data-simply-template="Imports" rel="simply-toolbar-imports"></template>
   <template data-simply-template="Edit page" rel="simply-toolbar-page"></template>
   <template data-simply-template="Edit component" rel="simply-toolbar-component"></template>
   <template data-simply-template="Edit base component" rel="simply-toolbar-base-component"></template>
diff --git a/generated.html b/generated.html
index 47d18a5..4ab8939 100644
--- a/generated.html
+++ b/generated.html
@@ -949,6 +949,12 @@
       .simplycode-editor-code textarea {
         margin-top: -1px;
       }
+      strong.simplycode-module {
+        color: var(--simplycode-highlight-dark);
+        float: right;
+        padding-right: 5px;
+      }
+      
       /* simplycode-import-url (component/component-import-url) */
       .simplycode-editor-url input {
         width: 100%;
@@ -1250,6 +1256,9 @@
         src: local('Cocon'), url('/assets/fonts/CoconRegularFont.woff') format('woff');
       }
     </style>
+    <!-- js-zip (baseComponent/jszip) -->
+    <script src="js/jszip/jszip.js"></script>
+    
     <!-- /Head HTML -->
     <script>
       var simplyDataApi = {};
@@ -2263,8 +2272,8 @@
             });
           },
           // page/base-component
-          "getBaseComponent" : function(component) {
-            return simplyRawApi.get("base-components/" + component)
+          "getBaseComponent" : function(component, modulePath="") {
+            return simplyRawApi.get(modulePath + "base-components/" + component)
               .then(function(response) {
               if (response.status === 200) {
                 return response.json();
@@ -2310,6 +2319,80 @@
               return components;
             });
           },
+          // page/base-components
+          "listMergedBaseComponents" : async function() {
+            let moduleComponents;
+            let localComponents;
+          
+            try {
+              moduleComponents = await simplyDataApi.listSimplyModuleBaseComponents();
+            } catch(e) {
+              moduleComponents = [];
+            }
+          
+            try {
+              localComponents = await simplyDataApi.listBaseComponents();
+            } catch(e) {
+              localComponents = [];
+            } 
+            
+            let componentIndex = {};
+            let result = [];
+          
+            moduleComponents.forEach(function(component) {
+              componentIndex[component.id] = component;
+              component.imported = true;
+              result.push(component);
+            });
+          
+            localComponents.forEach(function(localComponent) {
+              if (typeof componentIndex[localComponent.id] !== "undefined") {
+                // FIXME: Merge the module + local component;
+                let mergedComponent = {};
+                
+                componentIndex[localComponent.id].contents.forEach(function(componentPart) {
+                  if (typeof mergedComponent[componentPart.id] === "undefined") {
+                    mergedComponent[componentPart.id] = {};
+                  }
+                  let parts = JSON.parse(componentPart.contents);
+                  let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+                  if (Array.isArray(parts)) {
+                    parts.forEach(function(part) {
+                      mergedComponent[componentPart.id][part[nameField]] = part;
+                    });
+                  }
+                });
+                localComponent.contents.forEach(function(componentPart) {
+                  if (typeof mergedComponent[componentPart.id] === "undefined") {
+                    mergedComponent[componentPart.id] = {};
+                  }
+                  let parts = JSON.parse(componentPart.contents);
+                  let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+                  if (Array.isArray(parts)) {
+                    parts.forEach(function(part) {
+                      mergedComponent[componentPart.id][part[nameField]] = part;
+                    });
+                  }
+                });
+                
+                componentIndex[localComponent.id].contents = [];
+                Object.keys(mergedComponent).forEach(function(componentPart) {
+                  let content = [];
+                  Object.values(mergedComponent[componentPart]).forEach(function(part) {
+                    content.push(part);
+                  });
+                  let mergedPart = {
+                    "id" : componentPart,
+                    "contents" : JSON.stringify(content)
+                  };
+                  componentIndex[localComponent.id].contents.push(mergedPart);
+                });
+              } else {
+                result.push(localComponent);
+              }
+            });
+            return result;
+          },
           // page/builder
           "deleteBuilder" : function(component) {
             return simplyRawApi.delete("builders/" + component)
@@ -2399,8 +2482,8 @@
             });
           },
           // page/component
-          "getComponent" : function(component) {
-            return simplyRawApi.get("components/" + component)
+          "getComponent" : function(component, modulePath="") {
+            return simplyRawApi.get(modulePath + "components/" + component)
             .then(function(response) {
               if (response.status === 200) {
                 return response.json();
@@ -2446,6 +2529,80 @@
               return components;
             });
           },
+          // page/component-list
+          "listMergedComponents" : async function() {
+            let moduleComponents;
+            let localComponents;
+          
+            try {
+              moduleComponents = await simplyDataApi.listSimplyModuleComponents();
+            } catch(e) {
+              moduleComponents = [];
+            }
+          
+            try {
+              localComponents = await simplyDataApi.listComponents();
+            } catch(e) {
+              localComponents = [];
+            } 
+            
+            let componentIndex = {};
+            let result = [];
+          
+            moduleComponents.forEach(function(component) {
+              componentIndex[component.id] = component;
+              component.imported = true;
+              result.push(component);
+            });
+          
+            localComponents.forEach(function(localComponent) {
+              if (typeof componentIndex[localComponent.id] !== "undefined") {
+                // FIXME: Merge the module + local component;
+                let mergedComponent = {};
+                
+                componentIndex[localComponent.id].contents.forEach(function(componentPart) {
+                  if (typeof mergedComponent[componentPart.id] === "undefined") {
+                    mergedComponent[componentPart.id] = {};
+                  }
+                  let parts = JSON.parse(componentPart.contents);
+                  let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+                  if (Array.isArray(parts)) {
+                    parts.forEach(function(part) {
+                      mergedComponent[componentPart.id][part[nameField]] = part;
+                    });
+                  }
+                });
+                localComponent.contents.forEach(function(componentPart) {
+                  if (typeof mergedComponent[componentPart.id] === "undefined") {
+                    mergedComponent[componentPart.id] = {};
+                  }
+                  let parts = JSON.parse(componentPart.contents);
+                  let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+                  if (Array.isArray(parts)) {
+                    parts.forEach(function(part) {
+                      mergedComponent[componentPart.id][part[nameField]] = part;
+                    });
+                  }
+                });
+                
+                componentIndex[localComponent.id].contents = [];
+                Object.keys(mergedComponent).forEach(function(componentPart) {
+                  let content = [];
+                  Object.values(mergedComponent[componentPart]).forEach(function(part) {
+                    content.push(part);
+                  });
+                  let mergedPart = {
+                    "id" : componentPart,
+                    "contents" : JSON.stringify(content)
+                  };
+                  componentIndex[localComponent.id].contents.push(mergedPart);
+                });
+              } else {
+                result.push(localComponent);
+              }
+            });
+            return result;
+          },
           // page/import
           "deleteImport" : function(component) {
             return simplyRawApi.delete("imports/" + component)
@@ -2514,6 +2671,153 @@
               return components;
             });
           },
+          // page/imports
+          "listSimplyModuleBaseComponents" : function() {
+            return simplyRawApi.get("simply-modules")
+              .then(function(response) {
+              if (response.status === 200) {
+                return response.json();
+              }
+              throw new Error("listSimplyModules failed", response.status);
+            })
+              .then(function(simplyModules) {
+              let components = [];
+              simplyModules.forEach(function(moduleGroup) {
+                moduleGroup.contents.forEach(function(module) {
+                  module.contents.forEach(function(moduleComponentCategory) {
+                    switch(moduleComponentCategory.id) {
+                      case "base-components":
+                        moduleComponentCategory.contents.forEach(function(component) {
+                          simplyDataApi.mergeComponent(component.contents);
+                          component.description = component.contents.description;
+                          component.baseType = 'baseComponent';
+                          components.push(component);
+                        });
+                      break;
+                    }
+                  });
+                });
+              });
+              return components;
+            });
+          },
+          // page/imports
+          "listSimplyModuleComponents" : function() {
+            return simplyRawApi.get("simply-modules")
+              .then(function(response) {
+              if (response.status === 200) {
+                return response.json();
+              }
+              throw new Error("listSimplyModules failed", response.status);
+            })
+              .then(function(simplyModules) {
+              let components = [];
+              simplyModules.forEach(function(moduleGroup) {
+                moduleGroup.contents.forEach(function(module) {
+                  module.contents.forEach(function(moduleComponentCategory) {
+                    switch(moduleComponentCategory.id) {
+                      case "components":
+                        moduleComponentCategory.contents.forEach(function(component) {
+                          simplyDataApi.mergeComponent(component.contents);
+                          component.description = component.contents.description;
+                          component.baseType = 'component';
+                          component.moduleGroup = moduleGroup.id;
+                          component.module = module.id;
+                          components.push(component);
+                        });
+                      break;
+                    }
+                  });
+                });
+              });
+              return components;
+            });
+          },
+          // page/imports
+          "listSimplyModulePages" : function() {
+            return simplyRawApi.get("simply-modules")
+              .then(function(response) {
+              if (response.status === 200) {
+                return response.json();
+              }
+              throw new Error("listSimplyModules failed", response.status);
+            })
+              .then(function(simplyModules) {
+              let components = [];
+              simplyModules.forEach(function(moduleGroup) {
+                moduleGroup.contents.forEach(function(module) {
+                  module.contents.forEach(function(moduleComponentCategory) {
+                    switch(moduleComponentCategory.id) {
+                      case "pages":
+                        moduleComponentCategory.contents.forEach(function(component) {
+                          simplyDataApi.mergeComponent(component.contents);
+                          component.description = component.contents.description;
+                          component.baseType = 'page';
+                          components.push(component);
+                        });
+                      break;
+                    }
+                  });
+                });
+              });
+              return components;
+            });
+          },
+          // page/imports
+          "listSimplyModules" : function() {
+            return simplyRawApi.get("simply-modules")
+              .then(function(response) {
+              if (response.status === 200) {
+                return response.json();
+              }
+              throw new Error("listSimplyModules failed", response.status);
+            })
+            .then(function(simplyModules) {
+              simplyModules.forEach(function(moduleGroup) {
+                moduleGroup.contents.forEach(function(module) {
+                  module.contents.forEach(function(moduleComponentCategory) {
+                    switch(moduleComponentCategory.id) {
+                      case "components":
+                        moduleComponentCategory.contents.forEach(function(component) {
+                          simplyDataApi.mergeComponent(component.contents);
+                          component.description = component.contents.description;
+                          component.baseType = 'component';
+                        });
+                      break;
+                      case "base-components":
+                        moduleComponentCategory.contents.forEach(function(component) {
+                          simplyDataApi.mergeComponent(component.contents);
+                          component.description = component.contents.description;
+                          component.baseType = 'baseComponent';
+                        });
+                      break;
+                      case "pages":
+                        moduleComponentCategory.contents.forEach(function(component) {
+                          simplyDataApi.mergeComponent(component.contents);
+                          component.description = component.contents.description;
+                          component.baseType = 'page';
+                        });
+                      break;
+                      case "builders":
+                        moduleComponentCategory.contents.forEach(function(component) {
+                          simplyDataApi.mergeComponent(component.contents);
+                          component.description = component.contents.description;
+                          component.baseType = 'builder';
+                        });
+                      case "imports":
+                        moduleComponentCategory.contents.forEach(function(component) {
+                          simplyDataApi.mergeComponent(component.contents);
+                          component.description = component.contents.description;
+                          component.baseType = 'import';
+                        });
+                      break;
+                    }
+                  });
+                });
+              });
+              return simplyModules;
+            });
+          },
           // page/page
           "deletePage" : function(component) {
             return simplyRawApi.delete("pages/" + component)
@@ -2535,8 +2839,8 @@
             });
           },
           // page/page
-          "getPage" : function(component) {
-            return simplyRawApi.get("pages/" + component)
+          "getPage" : function(component, modulePath="") {
+            return simplyRawApi.get(modulePath + "pages/" + component)
               .then(function(response) {
               if (response.status === 200) {
                 return response.json();
@@ -2629,6 +2933,80 @@
             });
           },
           // page/pages
+          "listMergedPages" : async function() {
+            let moduleComponents;
+            let localComponents;
+          
+            try {
+              moduleComponents = await simplyDataApi.listSimplyModulePages();
+            } catch(e) {
+              moduleComponents = [];
+            }
+          
+            try {
+              localComponents = await simplyDataApi.listPages();
+            } catch(e) {
+              localComponents = [];
+            } 
+            
+            let componentIndex = {};
+            let result = [];
+          
+            moduleComponents.forEach(function(component) {
+              componentIndex[component.id] = component;
+              component.imported = true;
+              result.push(component);
+            });
+          
+            localComponents.forEach(function(localComponent) {
+              if (typeof componentIndex[localComponent.id] !== "undefined") {
+                // FIXME: Merge the module + local component;
+                let mergedComponent = {};
+                
+                componentIndex[localComponent.id].contents.forEach(function(componentPart) {
+                  if (typeof mergedComponent[componentPart.id] === "undefined") {
+                    mergedComponent[componentPart.id] = {};
+                  }
+                  let parts = JSON.parse(componentPart.contents);
+                  let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+                  if (Array.isArray(parts)) {
+                    parts.forEach(function(part) {
+                      mergedComponent[componentPart.id][part[nameField]] = part;
+                    });
+                  }
+                });
+                localComponent.contents.forEach(function(componentPart) {
+                  if (typeof mergedComponent[componentPart.id] === "undefined") {
+                    mergedComponent[componentPart.id] = {};
+                  }
+                  let parts = JSON.parse(componentPart.contents);
+                  let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+                  if (Array.isArray(parts)) {
+                    parts.forEach(function(part) {
+                      mergedComponent[componentPart.id][part[nameField]] = part;
+                    });
+                  }
+                });
+                
+                componentIndex[localComponent.id].contents = [];
+                Object.keys(mergedComponent).forEach(function(componentPart) {
+                  let content = [];
+                  Object.values(mergedComponent[componentPart]).forEach(function(part) {
+                    content.push(part);
+                  });
+                  let mergedPart = {
+                    "id" : componentPart,
+                    "contents" : JSON.stringify(content)
+                  };
+                  componentIndex[localComponent.id].contents.push(mergedPart);
+                });
+              } else {
+                result.push(localComponent);
+              }
+            });
+            return result;
+          },
+          // page/pages
           "listPages" : function() {
             return simplyRawApi.get("pages")
               .then(function(response) {
@@ -2844,8 +3222,8 @@
               return simplyDataApi.deleteBaseComponent(component);
             },
             // page/base-component
-            "getBaseComponent" : function(component) {
-              return simplyDataApi.getBaseComponent(component);
+            "getBaseComponent" : function(component, modulePath="") {
+              return simplyDataApi.getBaseComponent(component, modulePath);
             },
             // page/base-component
             "saveBaseComponent" : function(component) {
@@ -2873,7 +3251,7 @@
             },
             // page/base-components
             "listBaseComponents" : function() {
-              return simplyDataApi.listBaseComponents()
+              return simplyDataApi.listMergedBaseComponents()
                 .catch(function(error) {
                 return [];
               });
@@ -2922,8 +3300,8 @@
                 return simplyDataApi.deleteComponent(component);
             },
             // page/component
-            "getComponent" : function(component) {
-              return simplyDataApi.getComponent(component);
+            "getComponent" : function(component, modulePath="") {
+              return simplyDataApi.getComponent(component, modulePath);
             },
             // page/component
             "saveComponent" : function(component) {
@@ -2951,7 +3329,7 @@
             },
             // page/component-list
             "listComponents" : function() {
-              return simplyDataApi.listComponents()
+              return simplyDataApi.listMergedComponents()
                 .catch(function(error) {
                 return [];
               });
@@ -2961,6 +3339,54 @@
               return simplyDataApi.deleteImport(component);
             },
             // page/import
+            "fetchImport" : async function (importUrl, targetPath) {
+              const zipProxyUrl = 'zithub.pother.ca'
+            
+              // GitHub does not send CORS headers, so a custom build proxy is used
+              const url = new URL(importUrl);
+              if (url.hostname.endsWith('github.com')) {
+                url.pathname = `${url.href}`;
+                url.hostname = zipProxyUrl;
+              }
+            
+              const response = await fetch(url);
+              let blob = await response.blob();
+              let arrayBuffer = blob.arrayBuffer();
+            
+              const files = {}
+            
+              const zip = await JSZip.loadAsync(arrayBuffer);
+              const zipFiles = Object.values(zip.files);
+            
+              for (const file of zipFiles) {
+                if (file.dir === false) {
+                  files[file.name] = await file.async('blob');
+                }
+              }
+            
+              for (const [ fileName, blob ] of Object.entries(files)) {
+                const bytes = await blob.arrayBuffer();
+                let contents, type;
+            
+                try {
+                  type = 'text/plain;charset=utf-8';
+                  contents = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+                } catch (e) {
+                  type = 'application/octet-stream';
+                  contents = blob;
+                }
+            
+                let subpathFilename = fileName.split("/");
+                let zipProvider = new URL(importUrl);
+                if (zipProvider.hostname.endsWith('github.com')) {
+                  subpathFilename.shift(); // github adds the repo name as the directory in the zip, remove that;
+                }
+                subpathFilename = subpathFilename.join("/");
+             
+                await simplyRawApi.putRaw(targetPath + subpathFilename, {}, contents);
+              }
+            },
+            // page/import
             "getImport" : function(component) {
               return simplyDataApi.getImport(component);
             },
@@ -2978,6 +3404,17 @@
                   });
                 }
               };
+              
+              if (
+                (typeof component.parts !== "undefined") &&
+                (typeof component.parts.importUrls !== "undefined") &&
+                Array.isArray(component.parts.importUrls)
+              ) {
+                component.parts.importUrls.forEach(function(importUrl) {
+                  let modulePath = "simply-modules/" + component.id + "/" + importUrl.import + "/";
+                  promises.push(simplyApp.actions.fetchImport(importUrl.url, modulePath));
+                });
+              }
             
               var meta = clone(component);
               delete meta.parts;
@@ -2995,13 +3432,20 @@
                 return [];
               });
             },
+            // page/imports
+            "listSimplyModules" : function() {
+              return simplyDataApi.listSimplyModules()
+                .catch(function(error) {
+                return [];
+              });
+            },
             // page/page
             "deletePage" : function(component) {
               return simplyDataApi.deletePage(component);
             },
             // page/page
-            "getPage" : function(component) {
-              return simplyDataApi.getPage(component);
+            "getPage" : function(component, modulePath="") {
+              return simplyDataApi.getPage(component, modulePath);
             },
             // page/page
             "savePage" : function(component) {
@@ -3054,7 +3498,7 @@
             },
             // page/pages
             "listPages" : function() {
-              return simplyDataApi.listPages()
+              return simplyDataApi.listMergedPages()
                 .catch(function(error) {
                 return [];
               });
@@ -3678,6 +4122,39 @@
                 document.location.hash="imports/" + newComponent.id;
               });
             },
+            // page/imports
+            "fetchImports" : function() {  
+              editor.pageData.alerts.unshift({
+                "data-simply-template" : "info",
+                "message" : "Installing imports...",
+                "state" : "new"
+              });
+              var promises = [];
+              simplyApp.actions.listImports()
+              .then(function(modules) {
+                modules.forEach(function(module) {
+                  module.contents.forEach(function(componentPart) {
+                    if (componentPart.id === "importUrls") {
+                      let importUrls = JSON.parse(componentPart.contents);
+                      importUrls.forEach(function(importUrl) {
+                        let targetPath = "simply-modules/" + module.id + "/" + importUrl.import + "/";
+                        promises.push(simplyApp.actions.fetchImport(importUrl.url, targetPath));
+                      });
+                    }
+                  });
+                });
+              })
+              .then(function() {
+                return Promise.all(promises);
+              })
+              .then(function() {
+                editor.pageData.alerts.unshift({
+                  "data-simply-template" : "info",
+                  "message" : "Installation done!",
+                  "state" : "new"
+                });
+              });
+            },
             // page/page
             "deletePage" : function() {
               if (!confirm("Delete page?")) {
@@ -3847,6 +4324,141 @@
               });
             },
             // page/base-component
+            "#module/:moduleGroup/:module/base/:component" : function(params) {
+              simplyApp.actions.getBaseComponent(params.component,  "simply-modules/" + params.moduleGroup + "/" + params.module + "/")
+              .then(function(parts) {
+                var component = {
+                  id : params.component
+                };
+            
+                parts = parts.filter(function(part) {
+                  if (part.id == "meta") {
+                    component = JSON.parse(part.contents);
+                    component.id = params.component;
+                    return false;
+                  }
+                  return true;
+                });
+                if (typeof component.parts === "undefined") {
+                  component.parts = {
+                    headHtml : [],
+                    bodyHtml : [],
+                    footHtml : [],
+                    commands : [],
+                    actions : [],
+                    shortcuts : [],
+                    routes : [],
+                    rawApi : []
+                  };
+                }
+                var count = {};
+                parts.forEach(function(part) {
+                  component.parts[part.id] = JSON.parse(part.contents);
+                  count[part.id] = component.parts[part.id].length;
+                });
+                editor.pageData.component = component;
+                editor.pageData.parts = parts;
+                editor.pageData.count = count;
+                editor.pageData.page = "View base component module";
+              });
+            },
+            // page/component
+            "#module/:moduleGroup/:module/components/:component" : function(params) {
+              editor.pageData.app = {};
+              simplyApp.actions.getAppData()
+                .then(function(appData) {
+                editor.pageData.app = appData;
+              })
+                .then(function() {
+                return simplyApp.actions.getComponent(params.component, "simply-modules/" + params.moduleGroup + "/" + params.module + "/");
+              })
+                .then(function(parts) {
+                var component = {
+                  id : params.component
+                };
+            
+                parts = parts.filter(function(part) {
+                  if (part.id == "meta") {
+                    component = JSON.parse(part.contents);
+                    component.id = params.component;
+                    return false;
+                  }
+                  return true;
+                });
+                if (typeof component.parts === "undefined") {
+                  component.parts = {
+                    componentTemplates : [],
+                    componentCss : [],
+                    commands : [],
+                    actions : [],
+                    shortcuts : [],
+                    dataApi : [],
+                    routes : [],
+                    transformers : [],
+                    dataSources : [],
+                    sorters : []
+                  };
+                }
+                var count = {};
+                parts.forEach(function(part) {
+                  component.parts[part.id] = JSON.parse(part.contents);
+                  count[part.id] = component.parts[part.id].length;
+                });
+                editor.pageData.component = component;
+                editor.pageData.parts = parts;
+                editor.pageData.count = count;
+                editor.pageData.page = "View component module";
+              });
+            },
+            // page/page
+            "#module/:moduleGroup/:module/pages/:component" : function(params) {
+              editor.pageData.app = {};
+              simplyApp.actions.getAppData()
+                .then(function(appData) {
+                editor.pageData.app = appData;
+              })
+                .then(function() {
+                return simplyApp.actions.getPage(params.component, "simply-modules/" + params.moduleGroup + "/" + params.module + "/");
+              })
+                .then(function(parts) {
+                var component = {
+                  id : params.component
+                };
+            
+                parts = parts.filter(function(part) {
+                  if (part.id == "meta") {
+                    component = JSON.parse(part.contents);
+                    component.id = params.component;
+                    return false;
+                  }
+                  return true;
+                });
+                if (typeof component.parts === "undefined") {
+                  component.parts = {
+                    pageTemplates : [],
+                    pageCss : [],
+                    commands : [],
+                    actions : [],
+                    shortcuts : [],
+                    dataApi : [],
+                    routes : [],
+                    transformers : [],
+                    dataSources : [],
+                    sorters : []
+                  };
+                }
+                var count = {};
+                parts.forEach(function(part) {
+                  component.parts[part.id] = JSON.parse(part.contents);
+                  count[part.id] = component.parts[part.id].length;
+                });
+                editor.pageData.component = component;
+                editor.pageData.parts = parts;
+                editor.pageData.count = count;
+                editor.pageData.page = "View page module";
+              });
+            },
+            // page/base-component
             "#base/:component" : function(params) {
               simplyApp.actions.getBaseComponent(params.component)
                 .then(function(parts) {
@@ -5462,6 +6074,43 @@
     </button>
     </template>
     <!-- component/simply-toolbar-->
+    <template id="simply-toolbar-imports">
+      <div class="simply-toolbar-title">
+      <simply-render rel="logo"></simply-render>
+    </div>
+    <button disabled class="ds-button simply-toolbar-button">
+      <svg class="ds-icon ds-icon-feather">
+        <use xlink:href="/assets/img/feather-sprite.svg#save">
+        </use></svg>
+      Save
+    </button>
+    <button disabled class="ds-button simply-toolbar-button">
+      <svg class="ds-icon ds-icon-feather">
+        <use xlink:href="/assets/img/feather-sprite.svg#trash">
+        </use></svg>
+      Delete
+    </button>
+    <button class="ds-button simply-toolbar-button" data-simply-command="fetchImports">
+      <svg class="ds-icon ds-icon-feather">
+        <use xlink:href="/assets/img/feather-sprite.svg#download">
+        </use></svg>
+      Fetch imports
+    </button>
+    <span class="simply-toolbar-push-right"></span>
+    <button class="ds-button simply-toolbar-button" data-simply-command="preview">
+      <svg class="ds-icon ds-icon-feather">
+        <use xlink:href="/assets/img/feather-sprite.svg#eye">
+        </use></svg>
+      Preview
+    </button>
+    <button disabled class="ds-button simply-toolbar-button">
+      <svg class="ds-icon ds-icon-feather">
+        <use xlink:href="/assets/img/feather-sprite.svg#check">
+        </use></svg>
+      Publish
+    </button>
+    </template>
+    <!-- component/simply-toolbar-->
     <template id="simply-toolbar-page-frame">
       <div class="simply-toolbar-title">
       <simply-render rel="logo"></simply-render>
@@ -5560,6 +6209,7 @@
       <template data-simply-template="default" rel="simply-toolbar-default"></template>
       <template data-simply-template="Edit builder" rel="simply-toolbar-builder"></template>
       <template data-simply-template="Edit import" rel="simply-toolbar-import"></template>
+      <template data-simply-template="Imports" rel="simply-toolbar-imports"></template>
       <template data-simply-template="Edit page" rel="simply-toolbar-page"></template>
       <template data-simply-template="Edit component" rel="simply-toolbar-component"></template>
       <template data-simply-template="Edit base component" rel="simply-toolbar-base-component"></template>
@@ -5595,6 +6245,25 @@ <h1>Edit base component: <span data-simply-field="component.id"></span></h1>
       </form>
     </main>
     </template>
+    <!-- page/base-component-->
+    <template data-simply-template="View base component module">
+      <main>
+      <div class="simplycode-header">
+        <h1>View base component module: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <form action="#">
+        <simply-render rel="componentDescription"></simply-render>
+        <simply-render rel="componentHeadHtml"></simply-render>
+        <simply-render rel="componentBodyHtml"></simply-render>
+        <simply-render rel="componentFootHtml"></simply-render>
+        <simply-render rel="componentCommands"></simply-render>
+        <simply-render rel="componentShortcuts"></simply-render>
+        <simply-render rel="componentActions"></simply-render>
+        <simply-render rel="componentRoutes"></simply-render>
+        <simply-render rel="componentRawApi"></simply-render>
+      </form>
+    </main>
+    </template>
     <!-- page/base-components-->
     <template data-simply-template="Base components">
       <main>
@@ -5602,7 +6271,12 @@ <h1>Base components</h1>
       <div class="simplycode-component-list" data-simply-list="components">
         <template>
           <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="baseComponentLink">
-            <h3 data-simply-field="id"></h3>
+            <h3>
+              <span data-simply-field="id"></span>
+              <span data-simply-field="imported" data-simply-content="template" data-simply-default-value="false">
+                <template data-simply-template="true"><strong class="simplycode-module">Import</strong></template>
+              </span>
+            </h3>
             <p class="ds-margin-up" data-simply-field="description"></p>
           </a>
         </template>
@@ -5693,6 +6367,27 @@ <h1>Edit component: <span data-simply-field="component.id"></span></h1>
       </form>
     </main>
     </template>
+    <!-- page/component-->
+    <template data-simply-template="View component module">
+      <main>
+      <div class="simplycode-header">
+        <h1>View component module: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <form action="#">
+        <simply-render rel="componentDescription"></simply-render>
+        <simply-render rel="componentComponentTemplate"></simply-render>
+        <simply-render rel="componentComponentCss"></simply-render>
+        <simply-render rel="componentCommands"></simply-render>
+        <simply-render rel="componentShortcuts"></simply-render>
+        <simply-render rel="componentActions"></simply-render>
+        <simply-render rel="componentDataApi"></simply-render>
+        <simply-render rel="componentRoutes"></simply-render>
+        <simply-render rel="componentTransformers"></simply-render>
+        <simply-render rel="componentDataSources"></simply-render>
+        <simply-render rel="componentSorters"></simply-render>
+      </form>
+    </main>
+    </template>
     <!-- page/component-list-->
     <template data-simply-template="List components">
       <main>
@@ -5700,7 +6395,12 @@ <h1>Components</h1>
       <div class="simplycode-component-list" data-simply-list="components">
         <template>
           <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink">
-            <h3 data-simply-field="id"></h3>
+            <h3>
+              <span data-simply-field="id"></span>
+              <span data-simply-field="imported" data-simply-content="template" data-simply-default-value="false">
+                <template data-simply-template="true"><strong class="simplycode-module">Import</strong></template>
+              </span>
+            </h3>
             <p class="ds-margin-up" data-simply-field="description"></p>
           </a>
         </template>
@@ -5791,6 +6491,27 @@ <h1>Edit page: <span data-simply-field="component.id"></span></h1>
       </form>
     </main>
     </template>
+    <!-- page/page-->
+    <template data-simply-template="View page module">
+      <main>
+      <div class="simplycode-header">
+        <h1>View page module: <span data-simply-field="component.id"></span></h1>
+      </div>
+      <form action="#">
+        <simply-render rel="componentDescription"></simply-render>
+        <simply-render rel="componentPageTemplate"></simply-render>
+        <simply-render rel="componentPageCss"></simply-render>
+        <simply-render rel="componentCommands"></simply-render>
+        <simply-render rel="componentShortcuts"></simply-render>
+        <simply-render rel="componentActions"></simply-render>
+        <simply-render rel="componentDataApi"></simply-render>
+        <simply-render rel="componentRoutes"></simply-render>
+        <simply-render rel="componentTransformers"></simply-render>
+        <simply-render rel="componentDataSources"></simply-render>
+        <simply-render rel="componentSorters"></simply-render>
+      </form>
+    </main>
+    </template>
     <!-- page/page-frame-->
     <template data-simply-template="Edit page frame">
       <main>
@@ -5810,7 +6531,12 @@ <h1>Pages</h1>
       <div class="simplycode-component-list" data-simply-list="components">
         <template>
           <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="pageLink">
-            <h3 data-simply-field="id"></h3>
+            <h3>
+              <span data-simply-field="id"></span>
+              <span data-simply-field="imported" data-simply-content="template" data-simply-default-value="false">
+                <template data-simply-template="true"><strong class="simplycode-module">Import</strong></template>
+              </span>
+            </h3>
             <p class="ds-margin-up" data-simply-field="description"></p>
           </a>
         </template>
@@ -6292,12 +7018,21 @@ <h1>App preview</h1>
         // page/base-components
         "baseComponentLink" : {
           render : function(data) {
-            this.simplyData = data;
-            return {
-              href : "#base/" + data,
-              innerHTML: data
-            };
-          },
+              this.simplyData = data;
+              let componentData = this.dataBinding.config.data;
+              if (typeof componentData.imported !== "undefined" && componentData.imported) {
+                return {
+                  href: "#module/" + componentData.moduleGroup + "/" + componentData.module + "/base/" + data,
+                  innerHTML: data
+                };
+              } else {
+                return {
+                  href : "#base/" + data,
+                  innerHTML: data
+                };
+              } 
+          }
+          ,
           extract : function(data) {
             return this.simplyData;
           }
@@ -6319,10 +7054,18 @@ <h1>App preview</h1>
         "componentLink" : {
           render : function(data) {
               this.simplyData = data;
-              return {
-                href : "#components/" + data,
-                innerHTML: data
-              };
+              let componentData = this.dataBinding.config.data;
+              if (typeof componentData.imported !== "undefined" && componentData.imported) {
+                return {
+                  href: "#module/" + componentData.moduleGroup + "/" + componentData.module + "/components/" + data,
+                  innerHTML: data
+                };
+              } else {
+                return {
+                  href : "#components/" + data,
+                  innerHTML: data
+                };
+              } 
           },
           extract : function(data) {
               return this.simplyData;
@@ -6344,12 +7087,21 @@ <h1>App preview</h1>
         // page/pages
         "pageLink" : {
           render : function(data) {
-            this.simplyData = data;
-            return {
-              href : "#pages/" + data,
-              innerHTML: data
-            };
-          },
+              this.simplyData = data;
+              let componentData = this.dataBinding.config.data;
+              if (typeof componentData.imported !== "undefined" && componentData.imported) {
+                return {
+                  href: "#module/" + componentData.moduleGroup + "/" + componentData.module + "/pages/" + data,
+                  innerHTML: data
+                };
+              } else {
+                return {
+                  href : "#pages/" + data,
+                  innerHTML: data
+                };
+              }
+          }
+          ,
           extract : function(data) {
             return this.simplyData;
           }
diff --git a/pages/base-component/actions/getBaseComponent.js b/pages/base-component/actions/getBaseComponent.js
index 004c8be..0c78058 100644
--- a/pages/base-component/actions/getBaseComponent.js
+++ b/pages/base-component/actions/getBaseComponent.js
@@ -1,3 +1,3 @@
-function(component) {
-  return simplyDataApi.getBaseComponent(component);
+function(component, modulePath="") {
+  return simplyDataApi.getBaseComponent(component, modulePath);
 }
\ No newline at end of file
diff --git a/pages/base-component/dataApi/getBaseComponent.js b/pages/base-component/dataApi/getBaseComponent.js
index f7a04cc..2b8a60b 100644
--- a/pages/base-component/dataApi/getBaseComponent.js
+++ b/pages/base-component/dataApi/getBaseComponent.js
@@ -1,5 +1,5 @@
-function(component) {
-  return simplyRawApi.get("base-components/" + component)
+function(component, modulePath="") {
+  return simplyRawApi.get(modulePath + "base-components/" + component)
     .then(function(response) {
     if (response.status === 200) {
       return response.json();
diff --git a/pages/base-component/pageTemplates/View base component module.html b/pages/base-component/pageTemplates/View base component module.html
new file mode 100644
index 0000000..3d8b910
--- /dev/null
+++ b/pages/base-component/pageTemplates/View base component module.html	
@@ -0,0 +1,16 @@
+<main>
+  <div class="simplycode-header">
+    <h1>View base component module: <span data-simply-field="component.id"></span></h1>
+  </div>
+  <form action="#">
+    <simply-render rel="componentDescription"></simply-render>
+    <simply-render rel="componentHeadHtml"></simply-render>
+    <simply-render rel="componentBodyHtml"></simply-render>
+    <simply-render rel="componentFootHtml"></simply-render>
+    <simply-render rel="componentCommands"></simply-render>
+    <simply-render rel="componentShortcuts"></simply-render>
+    <simply-render rel="componentActions"></simply-render>
+    <simply-render rel="componentRoutes"></simply-render>
+    <simply-render rel="componentRawApi"></simply-render>
+  </form>
+</main>
\ No newline at end of file
diff --git a/pages/base-component/routes/module-base-component.js b/pages/base-component/routes/module-base-component.js
new file mode 100644
index 0000000..31e999b
--- /dev/null
+++ b/pages/base-component/routes/module-base-component.js
@@ -0,0 +1,38 @@
+function(params) {
+  simplyApp.actions.getBaseComponent(params.component,  "simply-modules/" + params.moduleGroup + "/" + params.module + "/")
+  .then(function(parts) {
+    var component = {
+      id : params.component
+    };
+
+    parts = parts.filter(function(part) {
+      if (part.id == "meta") {
+        component = JSON.parse(part.contents);
+        component.id = params.component;
+        return false;
+      }
+      return true;
+    });
+    if (typeof component.parts === "undefined") {
+      component.parts = {
+        headHtml : [],
+        bodyHtml : [],
+        footHtml : [],
+        commands : [],
+        actions : [],
+        shortcuts : [],
+        routes : [],
+        rawApi : []
+      };
+    }
+    var count = {};
+    parts.forEach(function(part) {
+      component.parts[part.id] = JSON.parse(part.contents);
+      count[part.id] = component.parts[part.id].length;
+    });
+    editor.pageData.component = component;
+    editor.pageData.parts = parts;
+    editor.pageData.count = count;
+    editor.pageData.page = "View base component module";
+  });
+}
\ No newline at end of file
diff --git a/pages/base-component/routes/module-base-component.json b/pages/base-component/routes/module-base-component.json
new file mode 100644
index 0000000..549053a
--- /dev/null
+++ b/pages/base-component/routes/module-base-component.json
@@ -0,0 +1 @@
+"#module/:moduleGroup/:module/base/:component"
\ No newline at end of file
diff --git a/pages/base-components/actions/listBaseComponents.js b/pages/base-components/actions/listBaseComponents.js
index 3299b0c..085e70a 100644
--- a/pages/base-components/actions/listBaseComponents.js
+++ b/pages/base-components/actions/listBaseComponents.js
@@ -1,5 +1,5 @@
 function() {
-  return simplyDataApi.listBaseComponents()
+  return simplyDataApi.listMergedBaseComponents()
     .catch(function(error) {
     return [];
   });
diff --git a/pages/base-components/dataApi/listMergedBaseComponents.js b/pages/base-components/dataApi/listMergedBaseComponents.js
new file mode 100644
index 0000000..72d2bd4
--- /dev/null
+++ b/pages/base-components/dataApi/listMergedBaseComponents.js
@@ -0,0 +1,73 @@
+async function() {
+  let moduleComponents;
+  let localComponents;
+
+  try {
+    moduleComponents = await simplyDataApi.listSimplyModuleBaseComponents();
+  } catch(e) {
+    moduleComponents = [];
+  }
+
+  try {
+    localComponents = await simplyDataApi.listBaseComponents();
+  } catch(e) {
+    localComponents = [];
+  } 
+  
+  let componentIndex = {};
+  let result = [];
+
+  moduleComponents.forEach(function(component) {
+    componentIndex[component.id] = component;
+    component.imported = true;
+    result.push(component);
+  });
+
+  localComponents.forEach(function(localComponent) {
+    if (typeof componentIndex[localComponent.id] !== "undefined") {
+      // FIXME: Merge the module + local component;
+      let mergedComponent = {};
+      
+      componentIndex[localComponent.id].contents.forEach(function(componentPart) {
+        if (typeof mergedComponent[componentPart.id] === "undefined") {
+          mergedComponent[componentPart.id] = {};
+        }
+        let parts = JSON.parse(componentPart.contents);
+        let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+        if (Array.isArray(parts)) {
+          parts.forEach(function(part) {
+            mergedComponent[componentPart.id][part[nameField]] = part;
+          });
+        }
+      });
+      localComponent.contents.forEach(function(componentPart) {
+        if (typeof mergedComponent[componentPart.id] === "undefined") {
+          mergedComponent[componentPart.id] = {};
+        }
+        let parts = JSON.parse(componentPart.contents);
+        let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+        if (Array.isArray(parts)) {
+          parts.forEach(function(part) {
+            mergedComponent[componentPart.id][part[nameField]] = part;
+          });
+        }
+      });
+      
+      componentIndex[localComponent.id].contents = [];
+      Object.keys(mergedComponent).forEach(function(componentPart) {
+        let content = [];
+        Object.values(mergedComponent[componentPart]).forEach(function(part) {
+          content.push(part);
+        });
+        let mergedPart = {
+          "id" : componentPart,
+          "contents" : JSON.stringify(content)
+        };
+        componentIndex[localComponent.id].contents.push(mergedPart);
+      });
+    } else {
+      result.push(localComponent);
+    }
+  });
+  return result;
+}
\ No newline at end of file
diff --git a/pages/base-components/pageTemplates/Base components.html b/pages/base-components/pageTemplates/Base components.html
index 49c89ef..10fe7c3 100644
--- a/pages/base-components/pageTemplates/Base components.html	
+++ b/pages/base-components/pageTemplates/Base components.html	
@@ -3,7 +3,12 @@ <h1>Base components</h1>
   <div class="simplycode-component-list" data-simply-list="components">
     <template>
       <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="baseComponentLink">
-        <h3 data-simply-field="id"></h3>
+        <h3>
+          <span data-simply-field="id"></span>
+          <span data-simply-field="imported" data-simply-content="template" data-simply-default-value="false">
+            <template data-simply-template="true"><strong class="simplycode-module">Import</strong></template>
+          </span>
+        </h3>
         <p class="ds-margin-up" data-simply-field="description"></p>
       </a>
     </template>
diff --git a/pages/base-components/transformers/baseComponentLink-render.js b/pages/base-components/transformers/baseComponentLink-render.js
index e583ab8..b219e04 100644
--- a/pages/base-components/transformers/baseComponentLink-render.js
+++ b/pages/base-components/transformers/baseComponentLink-render.js
@@ -1,7 +1,15 @@
 function(data) {
-  this.simplyData = data;
-  return {
-    href : "#base/" + data,
-    innerHTML: data
-  };
-}
\ No newline at end of file
+    this.simplyData = data;
+    let componentData = this.dataBinding.config.data;
+    if (typeof componentData.imported !== "undefined" && componentData.imported) {
+      return {
+        href: "#module/" + componentData.moduleGroup + "/" + componentData.module + "/base/" + data,
+        innerHTML: data
+      };
+    } else {
+      return {
+        href : "#base/" + data,
+        innerHTML: data
+      };
+    } 
+}
diff --git a/pages/component-list/actions/listComponents.js b/pages/component-list/actions/listComponents.js
index d6725ce..2037e7b 100644
--- a/pages/component-list/actions/listComponents.js
+++ b/pages/component-list/actions/listComponents.js
@@ -1,5 +1,5 @@
 function() {
-  return simplyDataApi.listComponents()
+  return simplyDataApi.listMergedComponents()
     .catch(function(error) {
     return [];
   });
diff --git a/pages/component-list/dataApi/listMergedComponents.js b/pages/component-list/dataApi/listMergedComponents.js
new file mode 100644
index 0000000..ceb7eef
--- /dev/null
+++ b/pages/component-list/dataApi/listMergedComponents.js
@@ -0,0 +1,73 @@
+async function() {
+  let moduleComponents;
+  let localComponents;
+
+  try {
+    moduleComponents = await simplyDataApi.listSimplyModuleComponents();
+  } catch(e) {
+    moduleComponents = [];
+  }
+
+  try {
+    localComponents = await simplyDataApi.listComponents();
+  } catch(e) {
+    localComponents = [];
+  } 
+  
+  let componentIndex = {};
+  let result = [];
+
+  moduleComponents.forEach(function(component) {
+    componentIndex[component.id] = component;
+    component.imported = true;
+    result.push(component);
+  });
+
+  localComponents.forEach(function(localComponent) {
+    if (typeof componentIndex[localComponent.id] !== "undefined") {
+      // FIXME: Merge the module + local component;
+      let mergedComponent = {};
+      
+      componentIndex[localComponent.id].contents.forEach(function(componentPart) {
+        if (typeof mergedComponent[componentPart.id] === "undefined") {
+          mergedComponent[componentPart.id] = {};
+        }
+        let parts = JSON.parse(componentPart.contents);
+        let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+        if (Array.isArray(parts)) {
+          parts.forEach(function(part) {
+            mergedComponent[componentPart.id][part[nameField]] = part;
+          });
+        }
+      });
+      localComponent.contents.forEach(function(componentPart) {
+        if (typeof mergedComponent[componentPart.id] === "undefined") {
+          mergedComponent[componentPart.id] = {};
+        }
+        let parts = JSON.parse(componentPart.contents);
+        let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+        if (Array.isArray(parts)) {
+          parts.forEach(function(part) {
+            mergedComponent[componentPart.id][part[nameField]] = part;
+          });
+        }
+      });
+      
+      componentIndex[localComponent.id].contents = [];
+      Object.keys(mergedComponent).forEach(function(componentPart) {
+        let content = [];
+        Object.values(mergedComponent[componentPart]).forEach(function(part) {
+          content.push(part);
+        });
+        let mergedPart = {
+          "id" : componentPart,
+          "contents" : JSON.stringify(content)
+        };
+        componentIndex[localComponent.id].contents.push(mergedPart);
+      });
+    } else {
+      result.push(localComponent);
+    }
+  });
+  return result;
+}
\ No newline at end of file
diff --git a/pages/component-list/pageTemplates/List components.html b/pages/component-list/pageTemplates/List components.html
index 5b90b64..8610993 100644
--- a/pages/component-list/pageTemplates/List components.html	
+++ b/pages/component-list/pageTemplates/List components.html	
@@ -3,7 +3,12 @@ <h1>Components</h1>
   <div class="simplycode-component-list" data-simply-list="components">
     <template>
       <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="componentLink">
-        <h3 data-simply-field="id"></h3>
+        <h3>
+          <span data-simply-field="id"></span>
+          <span data-simply-field="imported" data-simply-content="template" data-simply-default-value="false">
+            <template data-simply-template="true"><strong class="simplycode-module">Import</strong></template>
+          </span>
+        </h3>
         <p class="ds-margin-up" data-simply-field="description"></p>
       </a>
     </template>
diff --git a/pages/component-list/transformers/componentLink-render.js b/pages/component-list/transformers/componentLink-render.js
index a5fc277..10e17f9 100644
--- a/pages/component-list/transformers/componentLink-render.js
+++ b/pages/component-list/transformers/componentLink-render.js
@@ -1,7 +1,15 @@
 function(data) {
     this.simplyData = data;
-    return {
-      href : "#components/" + data,
-      innerHTML: data
-    };
+    let componentData = this.dataBinding.config.data;
+    if (typeof componentData.imported !== "undefined" && componentData.imported) {
+      return {
+        href: "#module/" + componentData.moduleGroup + "/" + componentData.module + "/components/" + data,
+        innerHTML: data
+      };
+    } else {
+      return {
+        href : "#components/" + data,
+        innerHTML: data
+      };
+    } 
 }
\ No newline at end of file
diff --git a/pages/component/actions/getComponent.js b/pages/component/actions/getComponent.js
index 888c40a..71316f6 100644
--- a/pages/component/actions/getComponent.js
+++ b/pages/component/actions/getComponent.js
@@ -1,3 +1,3 @@
-function(component) {
-  return simplyDataApi.getComponent(component);
+function(component, modulePath="") {
+  return simplyDataApi.getComponent(component, modulePath);
 }
\ No newline at end of file
diff --git a/pages/component/dataApi/getComponent.js b/pages/component/dataApi/getComponent.js
index 1b79293..9700b0c 100644
--- a/pages/component/dataApi/getComponent.js
+++ b/pages/component/dataApi/getComponent.js
@@ -1,5 +1,5 @@
-function(component) {
-  return simplyRawApi.get("components/" + component)
+function(component, modulePath="") {
+  return simplyRawApi.get(modulePath + "components/" + component)
   .then(function(response) {
     if (response.status === 200) {
       return response.json();
diff --git a/pages/component/pageTemplates/View component module.html b/pages/component/pageTemplates/View component module.html
new file mode 100644
index 0000000..278fee6
--- /dev/null
+++ b/pages/component/pageTemplates/View component module.html	
@@ -0,0 +1,18 @@
+<main>
+  <div class="simplycode-header">
+    <h1>View component module: <span data-simply-field="component.id"></span></h1>
+  </div>
+  <form action="#">
+    <simply-render rel="componentDescription"></simply-render>
+    <simply-render rel="componentComponentTemplate"></simply-render>
+    <simply-render rel="componentComponentCss"></simply-render>
+    <simply-render rel="componentCommands"></simply-render>
+    <simply-render rel="componentShortcuts"></simply-render>
+    <simply-render rel="componentActions"></simply-render>
+    <simply-render rel="componentDataApi"></simply-render>
+    <simply-render rel="componentRoutes"></simply-render>
+    <simply-render rel="componentTransformers"></simply-render>
+    <simply-render rel="componentDataSources"></simply-render>
+    <simply-render rel="componentSorters"></simply-render>
+  </form>
+</main>
\ No newline at end of file
diff --git a/pages/component/routes/module-component.js b/pages/component/routes/module-component.js
new file mode 100644
index 0000000..d43a931
--- /dev/null
+++ b/pages/component/routes/module-component.js
@@ -0,0 +1,47 @@
+function(params) {
+  editor.pageData.app = {};
+  simplyApp.actions.getAppData()
+    .then(function(appData) {
+    editor.pageData.app = appData;
+  })
+    .then(function() {
+    return simplyApp.actions.getComponent(params.component, "simply-modules/" + params.moduleGroup + "/" + params.module + "/");
+  })
+    .then(function(parts) {
+    var component = {
+      id : params.component
+    };
+
+    parts = parts.filter(function(part) {
+      if (part.id == "meta") {
+        component = JSON.parse(part.contents);
+        component.id = params.component;
+        return false;
+      }
+      return true;
+    });
+    if (typeof component.parts === "undefined") {
+      component.parts = {
+        componentTemplates : [],
+        componentCss : [],
+        commands : [],
+        actions : [],
+        shortcuts : [],
+        dataApi : [],
+        routes : [],
+        transformers : [],
+        dataSources : [],
+        sorters : []
+      };
+    }
+    var count = {};
+    parts.forEach(function(part) {
+      component.parts[part.id] = JSON.parse(part.contents);
+      count[part.id] = component.parts[part.id].length;
+    });
+    editor.pageData.component = component;
+    editor.pageData.parts = parts;
+    editor.pageData.count = count;
+    editor.pageData.page = "View component module";
+  });
+}
\ No newline at end of file
diff --git a/pages/component/routes/module-component.json b/pages/component/routes/module-component.json
new file mode 100644
index 0000000..1da9e7b
--- /dev/null
+++ b/pages/component/routes/module-component.json
@@ -0,0 +1 @@
+"#module/:moduleGroup/:module/components/:component"
\ No newline at end of file
diff --git a/pages/import/actions/fetchImport.js b/pages/import/actions/fetchImport.js
new file mode 100644
index 0000000..445dde0
--- /dev/null
+++ b/pages/import/actions/fetchImport.js
@@ -0,0 +1,47 @@
+async function (importUrl, targetPath) {
+  const zipProxyUrl = 'zithub.pother.ca'
+
+  // GitHub does not send CORS headers, so a custom build proxy is used
+  const url = new URL(importUrl);
+  if (url.hostname.endsWith('github.com')) {
+    url.pathname = `${url.href}`;
+    url.hostname = zipProxyUrl;
+  }
+
+  const response = await fetch(url);
+  let blob = await response.blob();
+  let arrayBuffer = blob.arrayBuffer();
+
+  const files = {}
+
+  const zip = await JSZip.loadAsync(arrayBuffer);
+  const zipFiles = Object.values(zip.files);
+
+  for (const file of zipFiles) {
+    if (file.dir === false) {
+      files[file.name] = await file.async('blob');
+    }
+  }
+
+  for (const [ fileName, blob ] of Object.entries(files)) {
+    const bytes = await blob.arrayBuffer();
+    let contents, type;
+
+    try {
+      type = 'text/plain;charset=utf-8';
+      contents = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+    } catch (e) {
+      type = 'application/octet-stream';
+      contents = blob;
+    }
+
+    let subpathFilename = fileName.split("/");
+    let zipProvider = new URL(importUrl);
+    if (zipProvider.hostname.endsWith('github.com')) {
+      subpathFilename.shift(); // github adds the repo name as the directory in the zip, remove that;
+    }
+    subpathFilename = subpathFilename.join("/");
+ 
+    await simplyRawApi.putRaw(targetPath + subpathFilename, {}, contents);
+  }
+}
\ No newline at end of file
diff --git a/pages/import/actions/saveImport.js b/pages/import/actions/saveImport.js
index 087636d..cf1d257 100644
--- a/pages/import/actions/saveImport.js
+++ b/pages/import/actions/saveImport.js
@@ -11,6 +11,17 @@ function(component) {
       });
     }
   };
+  
+  if (
+    (typeof component.parts !== "undefined") &&
+    (typeof component.parts.importUrls !== "undefined") &&
+    Array.isArray(component.parts.importUrls)
+  ) {
+    component.parts.importUrls.forEach(function(importUrl) {
+      let modulePath = "simply-modules/" + component.id + "/" + importUrl.import + "/";
+      promises.push(simplyApp.actions.fetchImport(importUrl.url, modulePath));
+    });
+  }
 
   var meta = clone(component);
   delete meta.parts;
diff --git a/pages/imports/actions/listSimplyModules.js b/pages/imports/actions/listSimplyModules.js
new file mode 100644
index 0000000..e0ce0a6
--- /dev/null
+++ b/pages/imports/actions/listSimplyModules.js
@@ -0,0 +1,6 @@
+function() {
+  return simplyDataApi.listSimplyModules()
+    .catch(function(error) {
+    return [];
+  });
+}
\ No newline at end of file
diff --git a/pages/imports/commands/fetchImports.js b/pages/imports/commands/fetchImports.js
new file mode 100644
index 0000000..b6d1a1a
--- /dev/null
+++ b/pages/imports/commands/fetchImports.js
@@ -0,0 +1,32 @@
+function() {  
+  editor.pageData.alerts.unshift({
+    "data-simply-template" : "info",
+    "message" : "Installing imports...",
+    "state" : "new"
+  });
+  var promises = [];
+  simplyApp.actions.listImports()
+  .then(function(modules) {
+    modules.forEach(function(module) {
+      module.contents.forEach(function(componentPart) {
+        if (componentPart.id === "importUrls") {
+          let importUrls = JSON.parse(componentPart.contents);
+          importUrls.forEach(function(importUrl) {
+            let targetPath = "simply-modules/" + module.id + "/" + importUrl.import + "/";
+            promises.push(simplyApp.actions.fetchImport(importUrl.url, targetPath));
+          });
+        }
+      });
+    });
+  })
+  .then(function() {
+    return Promise.all(promises);
+  })
+  .then(function() {
+    editor.pageData.alerts.unshift({
+      "data-simply-template" : "info",
+      "message" : "Installation done!",
+      "state" : "new"
+    });
+  });
+}
\ No newline at end of file
diff --git a/pages/imports/dataApi/listSimplyModuleBaseComponents.js b/pages/imports/dataApi/listSimplyModuleBaseComponents.js
new file mode 100644
index 0000000..a984773
--- /dev/null
+++ b/pages/imports/dataApi/listSimplyModuleBaseComponents.js
@@ -0,0 +1,29 @@
+function() {
+  return simplyRawApi.get("simply-modules")
+    .then(function(response) {
+    if (response.status === 200) {
+      return response.json();
+    }
+    throw new Error("listSimplyModules failed", response.status);
+  })
+    .then(function(simplyModules) {
+    let components = [];
+    simplyModules.forEach(function(moduleGroup) {
+      moduleGroup.contents.forEach(function(module) {
+        module.contents.forEach(function(moduleComponentCategory) {
+          switch(moduleComponentCategory.id) {
+            case "base-components":
+              moduleComponentCategory.contents.forEach(function(component) {
+                simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
+                component.baseType = 'baseComponent';
+                components.push(component);
+              });
+            break;
+          }
+        });
+      });
+    });
+    return components;
+  });
+}
\ No newline at end of file
diff --git a/pages/imports/dataApi/listSimplyModuleComponents.js b/pages/imports/dataApi/listSimplyModuleComponents.js
new file mode 100644
index 0000000..81cf14b
--- /dev/null
+++ b/pages/imports/dataApi/listSimplyModuleComponents.js
@@ -0,0 +1,31 @@
+function() {
+  return simplyRawApi.get("simply-modules")
+    .then(function(response) {
+    if (response.status === 200) {
+      return response.json();
+    }
+    throw new Error("listSimplyModules failed", response.status);
+  })
+    .then(function(simplyModules) {
+    let components = [];
+    simplyModules.forEach(function(moduleGroup) {
+      moduleGroup.contents.forEach(function(module) {
+        module.contents.forEach(function(moduleComponentCategory) {
+          switch(moduleComponentCategory.id) {
+            case "components":
+              moduleComponentCategory.contents.forEach(function(component) {
+                simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
+                component.baseType = 'component';
+                component.moduleGroup = moduleGroup.id;
+                component.module = module.id;
+                components.push(component);
+              });
+            break;
+          }
+        });
+      });
+    });
+    return components;
+  });
+}
\ No newline at end of file
diff --git a/pages/imports/dataApi/listSimplyModulePages.js b/pages/imports/dataApi/listSimplyModulePages.js
new file mode 100644
index 0000000..f175bbd
--- /dev/null
+++ b/pages/imports/dataApi/listSimplyModulePages.js
@@ -0,0 +1,29 @@
+function() {
+  return simplyRawApi.get("simply-modules")
+    .then(function(response) {
+    if (response.status === 200) {
+      return response.json();
+    }
+    throw new Error("listSimplyModules failed", response.status);
+  })
+    .then(function(simplyModules) {
+    let components = [];
+    simplyModules.forEach(function(moduleGroup) {
+      moduleGroup.contents.forEach(function(module) {
+        module.contents.forEach(function(moduleComponentCategory) {
+          switch(moduleComponentCategory.id) {
+            case "pages":
+              moduleComponentCategory.contents.forEach(function(component) {
+                simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
+                component.baseType = 'page';
+                components.push(component);
+              });
+            break;
+          }
+        });
+      });
+    });
+    return components;
+  });
+}
\ No newline at end of file
diff --git a/pages/imports/dataApi/listSimplyModules.js b/pages/imports/dataApi/listSimplyModules.js
new file mode 100644
index 0000000..babda99
--- /dev/null
+++ b/pages/imports/dataApi/listSimplyModules.js
@@ -0,0 +1,54 @@
+function() {
+  return simplyRawApi.get("simply-modules")
+    .then(function(response) {
+    if (response.status === 200) {
+      return response.json();
+    }
+    throw new Error("listSimplyModules failed", response.status);
+  })
+  .then(function(simplyModules) {
+    simplyModules.forEach(function(moduleGroup) {
+      moduleGroup.contents.forEach(function(module) {
+        module.contents.forEach(function(moduleComponentCategory) {
+          switch(moduleComponentCategory.id) {
+            case "components":
+              moduleComponentCategory.contents.forEach(function(component) {
+                simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
+                component.baseType = 'component';
+              });
+            break;
+            case "base-components":
+              moduleComponentCategory.contents.forEach(function(component) {
+                simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
+                component.baseType = 'baseComponent';
+              });
+            break;
+            case "pages":
+              moduleComponentCategory.contents.forEach(function(component) {
+                simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
+                component.baseType = 'page';
+              });
+            break;
+            case "builders":
+              moduleComponentCategory.contents.forEach(function(component) {
+                simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
+                component.baseType = 'builder';
+              });
+            case "imports":
+              moduleComponentCategory.contents.forEach(function(component) {
+                simplyDataApi.mergeComponent(component.contents);
+                component.description = component.contents.description;
+                component.baseType = 'import';
+              });
+            break;
+          }
+        });
+      });
+    });
+    return simplyModules;
+  });
+}
\ No newline at end of file
diff --git a/pages/page/actions/getPage.js b/pages/page/actions/getPage.js
index 0b69395..0387a4c 100644
--- a/pages/page/actions/getPage.js
+++ b/pages/page/actions/getPage.js
@@ -1,3 +1,3 @@
-function(component) {
-  return simplyDataApi.getPage(component);
+function(component, modulePath="") {
+  return simplyDataApi.getPage(component, modulePath);
 }
\ No newline at end of file
diff --git a/pages/page/dataApi/getPage.js b/pages/page/dataApi/getPage.js
index cca08e1..ca10aa9 100644
--- a/pages/page/dataApi/getPage.js
+++ b/pages/page/dataApi/getPage.js
@@ -1,5 +1,5 @@
-function(component) {
-  return simplyRawApi.get("pages/" + component)
+function(component, modulePath="") {
+  return simplyRawApi.get(modulePath + "pages/" + component)
     .then(function(response) {
     if (response.status === 200) {
       return response.json();
diff --git a/pages/page/pageTemplates/View page module.html b/pages/page/pageTemplates/View page module.html
new file mode 100644
index 0000000..848f066
--- /dev/null
+++ b/pages/page/pageTemplates/View page module.html	
@@ -0,0 +1,18 @@
+<main>
+  <div class="simplycode-header">
+    <h1>View page module: <span data-simply-field="component.id"></span></h1>
+  </div>
+  <form action="#">
+    <simply-render rel="componentDescription"></simply-render>
+    <simply-render rel="componentPageTemplate"></simply-render>
+    <simply-render rel="componentPageCss"></simply-render>
+    <simply-render rel="componentCommands"></simply-render>
+    <simply-render rel="componentShortcuts"></simply-render>
+    <simply-render rel="componentActions"></simply-render>
+    <simply-render rel="componentDataApi"></simply-render>
+    <simply-render rel="componentRoutes"></simply-render>
+    <simply-render rel="componentTransformers"></simply-render>
+    <simply-render rel="componentDataSources"></simply-render>
+    <simply-render rel="componentSorters"></simply-render>
+  </form>
+</main>
\ No newline at end of file
diff --git a/pages/page/routes/module-page.js b/pages/page/routes/module-page.js
new file mode 100644
index 0000000..22d219a
--- /dev/null
+++ b/pages/page/routes/module-page.js
@@ -0,0 +1,47 @@
+function(params) {
+  editor.pageData.app = {};
+  simplyApp.actions.getAppData()
+    .then(function(appData) {
+    editor.pageData.app = appData;
+  })
+    .then(function() {
+    return simplyApp.actions.getPage(params.component, "simply-modules/" + params.moduleGroup + "/" + params.module + "/");
+  })
+    .then(function(parts) {
+    var component = {
+      id : params.component
+    };
+
+    parts = parts.filter(function(part) {
+      if (part.id == "meta") {
+        component = JSON.parse(part.contents);
+        component.id = params.component;
+        return false;
+      }
+      return true;
+    });
+    if (typeof component.parts === "undefined") {
+      component.parts = {
+        pageTemplates : [],
+        pageCss : [],
+        commands : [],
+        actions : [],
+        shortcuts : [],
+        dataApi : [],
+        routes : [],
+        transformers : [],
+        dataSources : [],
+        sorters : []
+      };
+    }
+    var count = {};
+    parts.forEach(function(part) {
+      component.parts[part.id] = JSON.parse(part.contents);
+      count[part.id] = component.parts[part.id].length;
+    });
+    editor.pageData.component = component;
+    editor.pageData.parts = parts;
+    editor.pageData.count = count;
+    editor.pageData.page = "View page module";
+  });
+}
\ No newline at end of file
diff --git a/pages/page/routes/module-page.json b/pages/page/routes/module-page.json
new file mode 100644
index 0000000..28d41d2
--- /dev/null
+++ b/pages/page/routes/module-page.json
@@ -0,0 +1 @@
+"#module/:moduleGroup/:module/pages/:component"
\ No newline at end of file
diff --git a/pages/pages/actions/listPages.js b/pages/pages/actions/listPages.js
index 753c913..95b5d09 100644
--- a/pages/pages/actions/listPages.js
+++ b/pages/pages/actions/listPages.js
@@ -1,5 +1,5 @@
 function() {
-  return simplyDataApi.listPages()
+  return simplyDataApi.listMergedPages()
     .catch(function(error) {
     return [];
   });
diff --git a/pages/pages/dataApi/listMergedPages.js b/pages/pages/dataApi/listMergedPages.js
new file mode 100644
index 0000000..4d11e84
--- /dev/null
+++ b/pages/pages/dataApi/listMergedPages.js
@@ -0,0 +1,73 @@
+async function() {
+  let moduleComponents;
+  let localComponents;
+
+  try {
+    moduleComponents = await simplyDataApi.listSimplyModulePages();
+  } catch(e) {
+    moduleComponents = [];
+  }
+
+  try {
+    localComponents = await simplyDataApi.listPages();
+  } catch(e) {
+    localComponents = [];
+  } 
+  
+  let componentIndex = {};
+  let result = [];
+
+  moduleComponents.forEach(function(component) {
+    componentIndex[component.id] = component;
+    component.imported = true;
+    result.push(component);
+  });
+
+  localComponents.forEach(function(localComponent) {
+    if (typeof componentIndex[localComponent.id] !== "undefined") {
+      // FIXME: Merge the module + local component;
+      let mergedComponent = {};
+      
+      componentIndex[localComponent.id].contents.forEach(function(componentPart) {
+        if (typeof mergedComponent[componentPart.id] === "undefined") {
+          mergedComponent[componentPart.id] = {};
+        }
+        let parts = JSON.parse(componentPart.contents);
+        let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+        if (Array.isArray(parts)) {
+          parts.forEach(function(part) {
+            mergedComponent[componentPart.id][part[nameField]] = part;
+          });
+        }
+      });
+      localComponent.contents.forEach(function(componentPart) {
+        if (typeof mergedComponent[componentPart.id] === "undefined") {
+          mergedComponent[componentPart.id] = {};
+        }
+        let parts = JSON.parse(componentPart.contents);
+        let nameField = simplyApp.actions.getComponentNameField(componentPart.id);
+        if (Array.isArray(parts)) {
+          parts.forEach(function(part) {
+            mergedComponent[componentPart.id][part[nameField]] = part;
+          });
+        }
+      });
+      
+      componentIndex[localComponent.id].contents = [];
+      Object.keys(mergedComponent).forEach(function(componentPart) {
+        let content = [];
+        Object.values(mergedComponent[componentPart]).forEach(function(part) {
+          content.push(part);
+        });
+        let mergedPart = {
+          "id" : componentPart,
+          "contents" : JSON.stringify(content)
+        };
+        componentIndex[localComponent.id].contents.push(mergedPart);
+      });
+    } else {
+      result.push(localComponent);
+    }
+  });
+  return result;
+}
\ No newline at end of file
diff --git a/pages/pages/pageTemplates/Pages.html b/pages/pages/pageTemplates/Pages.html
index cd5b2dc..110623c 100644
--- a/pages/pages/pageTemplates/Pages.html
+++ b/pages/pages/pageTemplates/Pages.html
@@ -3,7 +3,12 @@ <h1>Pages</h1>
   <div class="simplycode-component-list" data-simply-list="components">
     <template>
       <a class="simplycode-component-list-item" data-simply-command="navigate" href="#" data-simply-field="id" data-simply-content="fixed" data-simply-transformer="pageLink">
-        <h3 data-simply-field="id"></h3>
+        <h3>
+          <span data-simply-field="id"></span>
+          <span data-simply-field="imported" data-simply-content="template" data-simply-default-value="false">
+            <template data-simply-template="true"><strong class="simplycode-module">Import</strong></template>
+          </span>
+        </h3>
         <p class="ds-margin-up" data-simply-field="description"></p>
       </a>
     </template>
diff --git a/pages/pages/transformers/pageLink-render.js b/pages/pages/transformers/pageLink-render.js
index c629588..b994bef 100644
--- a/pages/pages/transformers/pageLink-render.js
+++ b/pages/pages/transformers/pageLink-render.js
@@ -1,7 +1,15 @@
 function(data) {
-  this.simplyData = data;
-  return {
-    href : "#pages/" + data,
-    innerHTML: data
-  };
-}
\ No newline at end of file
+    this.simplyData = data;
+    let componentData = this.dataBinding.config.data;
+    if (typeof componentData.imported !== "undefined" && componentData.imported) {
+      return {
+        href: "#module/" + componentData.moduleGroup + "/" + componentData.module + "/pages/" + data,
+        innerHTML: data
+      };
+    } else {
+      return {
+        href : "#pages/" + data,
+        innerHTML: data
+      };
+    }
+}