diff --git a/src/plugins/index.js b/src/plugins/index.js
index 02b8afe..a2ac5f4 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -1,3 +1,9 @@
+import viewGanttProperties from "./web_view_gantt/FNAbviewgantt.js";
+import viewGanttEditor from "./web_view_gantt/FNAbviewganttEditor.js";
+import viewPivotProperties from "./web_view_pivot/FNAbviewpivot.js";
+import viewPivotEditor from "./web_view_pivot/FNAbviewpivotEditor.js";
+import viewKanbanProperties from "./web_view_kanban/FNAbviewkanban.js";
+import viewKanbanEditor from "./web_view_kanban/FNAbviewkanbanEditor.js";
 import viewCarouselProperties from "./web_view_carousel/FNAbviewcarousel.js";
 import viewCarouselEditor from "./web_view_carousel/FNAbviewcarouselEditor.js";
 import viewCommentProperties from "./web_view_comment/FNAbviewcomment.js";
@@ -38,7 +44,11 @@ const AllPlugins = [
    viewTabEditor,
    viewTextProperties,
    viewTextEditor,
-];
+   viewKanbanProperties,
+   viewKanbanEditor,
+   viewPivotProperties,
+   viewPivotEditor,
+, viewGanttProperties, viewGanttEditor];
 
 export default {
    load: (AB) => {
diff --git a/src/plugins/web_view_gantt/FNAbviewgantt.js b/src/plugins/web_view_gantt/FNAbviewgantt.js
new file mode 100644
index 0000000..951110a
--- /dev/null
+++ b/src/plugins/web_view_gantt/FNAbviewgantt.js
@@ -0,0 +1,224 @@
+// FNAbviewgantt Properties
+// A properties side import for an ABView.
+//
+export default function FNAbviewganttProperties({
+   AB,
+   ABViewPropertiesPlugin,
+   // ABUIPlugin,
+}) {
+      const BASE_ID = "properties_abview_gantt";
+
+   const uiConfig = AB.Config.uiSettings();
+
+   const ABViewGanttWorkspaceView = FABViewGanttWorkspaceView(
+      AB,
+      `${BASE_ID}_workspaceView_gantt`
+   );
+
+   
+
+return class ABAbviewganttProperties extends ABViewPropertiesPlugin {
+
+static getPluginKey() {
+         return this.key;
+      }
+
+static getPluginType() {
+         return "properties-view";
+         // properties-view : will display in the properties panel of the ABDesigner
+      }
+
+
+
+
+      constructor() {
+         super(BASE_ID, {
+            dataviewID: "",
+            fields: "",
+         });
+
+         this.AB = AB;
+      }
+
+      static get key() {
+         return "gantt";
+      }
+
+      ui() {
+         const ids = this.ids;
+
+         return super.ui([
+            {
+               view: "fieldset",
+               label: `${L("Gantt Data")}:`,
+               labelWidth: uiConfig.labelWidthLarge,
+               body: {
+                  type: "clean",
+                  padding: 10,
+                  rows: [
+                     {
+                        id: ids.dataviewID,
+                        view: "richselect",
+                        name: "dataviewID",
+                        label: `${L("Datacollection")}:`,
+                        labelWidth: uiConfig.labelWidthLarge,
+                        on: {
+                           onChange: (newValue, oldValue) => {
+                              if (newValue === oldValue) return;
+
+                              ABViewGanttWorkspaceView.emit(
+                                 "dc.changed",
+                                 newValue,
+                                 this.CurrentView
+                              );
+
+                              this.onChange();
+                           },
+                        },
+                     },
+                  ],
+               },
+            },
+            {
+               view: "fieldset",
+               label: `${L("Gantt Fields")}:`,
+               labelWidth: uiConfig.labelWidthLarge,
+               body: {
+                  id: ids.fields,
+                  view: "form",
+                  name: "fields",
+                  borderless: true,
+                  elements: [ABViewGanttWorkspaceView.ui()],
+                  on: {
+                     onChange: () => {
+                        this.onChange();
+                     },
+                  },
+               },
+            },
+         ]);
+      }
+
+      async init(AB) {
+         this.AB = AB;
+
+         this.PopupNewDataFieldComponent = FPopupNewDataField(
+            AB,
+            `${BASE_ID}_popupNewDataField`
+         );
+         await this.PopupNewDataFieldComponent.init(AB);
+         this.PopupNewDataFieldComponent.on("save", (...params) => {
+            ABViewGanttWorkspaceView.emit("field.added", params[0]);
+         });
+
+         ABViewGanttWorkspaceView.on("dc.changed", (dcID, view) => {
+            const DC = this.AB.datacollectionByID(dcID);
+
+            ABViewGanttWorkspaceView.init(DC.datasource, view);
+            this.PopupNewDataFieldComponent.objectLoad(DC.datasource);
+         });
+
+         ABViewGanttWorkspaceView.on("new.field", (fieldKey) => {
+            this.PopupNewDataFieldComponent.show(null, fieldKey, false);
+         });
+
+         await super.init(AB);
+      }
+
+      populateDataview() {
+         // Pull data collections to options
+         // / NOTE: only include System Objects if the user has permission
+         const datacollectionFilter = this.AB.Account.isSystemDesigner()
+            ? (obj) => !obj.isSystemObject
+            : () => true;
+         const datacollections =
+            this.CurrentApplication.datacollectionsIncluded(
+               datacollectionFilter
+            );
+
+         // Set the objects you can choose from in the list
+         const $dataviewID = $$(this.ids.dataviewID);
+
+         $dataviewID.define(
+            "options",
+            datacollections.map((e) => {
+               return {
+                  id: e.id,
+                  value: e.label,
+                  icon:
+                     e.sourceType == "query"
+                        ? "fa fa-filter"
+                        : "fa fa-database",
+               };
+            })
+         );
+         $dataviewID.refresh();
+      }
+
+      populate(view) {
+         super.populate(view);
+
+         const ids = this.ids;
+         const $component = $$(ids.component);
+         const defaultValues = this.defaultValues();
+         const values = Object.assign(
+            $component.getValues(),
+            defaultValues,
+            view.settings
+         );
+
+         this.populateDataview();
+
+         $component.setValues(values);
+
+         let DC = this.AB.datacollectionByID(values.dataviewID);
+         if (DC) {
+            ABViewGanttWorkspaceView.init(DC.datasource, this.CurrentView);
+            this.PopupNewDataFieldComponent.objectLoad(DC.datasource);
+         }
+      }
+
+      defaultValues() {
+         const ViewClass = this.ViewClass();
+
+         let values = null;
+
+         if (ViewClass) {
+            values = ViewClass.defaultValues();
+         }
+
+         return values;
+      }
+
+      /**
+       * @method values
+       * return the values for this form.
+       * @return {obj}
+       */
+      values() {
+         const values = super.values();
+         const ids = this.ids;
+
+         values.settings = Object.assign(
+            $$(ids.component).getValues(),
+            $$(ids.fields).getValues()
+         );
+
+         return values;
+      }
+
+      /**
+       * @method FieldClass()
+       * A method to return the proper ABViewXXX Definition.
+       * NOTE: Must be overwritten by the Child Class
+       */
+      ViewClass() {
+         return super._ViewClass("gantt");
+      }
+   }
+
+   
+
+
+}
+
diff --git a/src/plugins/web_view_gantt/FNAbviewganttEditor.js b/src/plugins/web_view_gantt/FNAbviewganttEditor.js
new file mode 100644
index 0000000..77dc5e1
--- /dev/null
+++ b/src/plugins/web_view_gantt/FNAbviewganttEditor.js
@@ -0,0 +1,62 @@
+// FNAbviewgantt Editor
+// An Editor wrapper for the ABView Component.
+// The Editor is displayed in the ABDesigner as a view is worked on.
+// The Editor allows a widget to be moved and placed on the canvas.
+//
+export default function FNAbviewganttEditor({ AB, ABViewEditorPlugin }) {
+   const BASE_ID = "interface_editor_viewgantt";
+
+return class ABAbviewganttEditor extends ABViewEditorPlugin {
+
+static getPluginKey() {
+         return this.key;
+      }
+
+/**
+       * @method getPluginType
+       * return the plugin type for this editor.
+       * plugin types are how our ClassManager knows how to store 
+       * the plugin.
+       * @return {string} plugin type
+       */
+      static getPluginType() {
+         return "editor-view";
+         // editor-view : will display in the editor panel of the ABDesigner
+      }
+
+
+
+
+         static get key() {
+            return "gantt";
+         }
+
+         constructor(view, base = BASE_ID) {
+            // base: {string} unique base id reference
+            super(view, base, {
+               label: "",
+            });
+         }
+
+         ui() {
+            return this.component.ui();
+         }
+
+         async init(AB) {
+            this.AB = AB;
+            this.component.ignoreLocal = true;
+            // in our editor, we provide accessLv = 2
+            await this.component.init(AB, 2);
+         }
+
+         detatch() {
+            this.component.detatch?.();
+         }
+
+         onShow() {
+            this.component.onShow?.();
+         }
+      };
+   
+
+}
diff --git a/src/rootPages/Designer/editors/EditorManager.js b/src/rootPages/Designer/editors/EditorManager.js
index c81903b..96210a7 100644
--- a/src/rootPages/Designer/editors/EditorManager.js
+++ b/src/rootPages/Designer/editors/EditorManager.js
@@ -29,7 +29,7 @@ export default function (AB) {
       require("./views/ABViewDocxBuilder"),
       require("./views/ABViewForm"),
       require("./views/ABViewFormUrl"),
-      require("./views/ABViewGantt"),
+      // require("./views/ABViewGantt"),
       require("./views/ABViewGrid"),
       require("./views/ABViewKanban"),
       // require("./views/ABViewLabel"),
diff --git a/src/rootPages/Designer/properties/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js
index 2a0bee7..2610dff 100644
--- a/src/rootPages/Designer/properties/PropertyManager.js
+++ b/src/rootPages/Designer/properties/PropertyManager.js
@@ -105,7 +105,7 @@ export default function (AB) {
          require("./views/ABViewFormTextbox"),
          require("./views/ABViewFormTree"),
          require("./views/ABViewFormUrl"),
-         require("./views/ABViewGantt"),
+         // require("./views/ABViewGantt"),
          require("./views/ABViewGrid"),
          // require("./views/ABViewImage"),
          require("./views/ABViewKanban"),